update

2025-12-27 16:57:19 +02:00
parent 5bfdd7dd2b
commit 331ff6daf3
31 changed files with 1049 additions and 429 deletions
--- a/components/providers/DownloadDialog.tsx
+++ b/components/providers/DownloadDialog.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import {
+	closeDownloadDialog,
+	getDownloadDialogState,
+	subscribeDownloadDialog
+} from "@/components/providers/download-dialog-store";
+import Link from "next/link";
+
+export function DownloadDialog() {
+	const state = useSyncExternalStore(
+		subscribeDownloadDialog,
+		getDownloadDialogState,
+		getDownloadDialogState
+	);
+
+	const isLinux =
+		typeof window !== "undefined" && navigator.userAgent.includes("Linux");
+	const downloadUrl = state.url ?? "https://www.roblox.com/download/client";
+
+	if (!state.isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-[90] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			onClick={closeDownloadDialog}
+		>
+			<div
+				className="relative w-[94vw] max-w-4xl rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				onClick={(event) => event.stopPropagation()}
+			>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={closeDownloadDialog}
+					aria-label="Close download"
+					className="absolute right-3 top-3"
+				>
+					<X className="h-4 w-4" />
+				</Button>
+				<div className="px-6 py-7 sm:px-8 sm:py-8">
+					<div className="max-w-3xl space-y-2">
+						<h2 className="text-2xl font-semibold text-text sm:text-3xl">
+							Thanks for downloading Roblox
+						</h2>
+						{isLinux ? (
+							<p className="text-sm text-subtext0">
+								Unfortunately, Roblox does not support Linux
+								natively. The only way to play Roblox on Linux
+								as of now is through{" "}
+								<Link
+									href="https://sober.vinegarhq.org"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-text underline underline-offset-4"
+								>
+									Sober
+								</Link>
+								.
+							</p>
+						) : (
+							<p className="text-sm text-subtext0">
+								Just follow the steps below to install Roblox.
+								The download should start in a few seconds. If
+								it doesn't,{" "}
+								<a
+									href={downloadUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-text underline underline-offset-4"
+								>
+									restart the download
+								</a>
+								.
+							</p>
+						)}
+					</div>
+					<div className="mt-6 grid gap-6 md:grid-cols-[1.15fr,0.85fr] md:gap-8 md:divide-x md:divide-surface0/60">
+						<div className="space-y-4 md:pr-8">
+							<p className="text-sm font-semibold text-text">
+								Install Instructions
+							</p>
+							<ol className="list-decimal space-y-3 pl-5 text-sm text-subtext0">
+								{isLinux ? (
+									<>
+										<li>
+											<Link
+												href="https://flathub.org/en/setup"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="text-text underline underline-offset-4"
+											>
+												Install Flatpak
+											</Link>{" "}
+											using the guide provided for your
+											distro.
+										</li>
+										<li>
+											Add the Flathub repository to your
+											system with following command:
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak remote-add
+													--if-not-exists flathub
+													https://flathub.org/repo/flathub.flatpakrepo
+												</code>
+											</pre>
+										</li>
+										<li>
+											Install and run Sober with these
+											commands:
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak install flathub
+													org.vinegarhq.Sober
+												</code>
+											</pre>
+											<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
+												<code>
+													flatpak run
+													org.vinegarhq.Sober
+												</code>
+											</pre>
+										</li>
+									</>
+								) : (
+									<>
+										<li>
+											Once downloaded, double-click the{" "}
+											<span className="font-semibold text-text">
+												Roblox.exe
+											</span>{" "}
+											file in your Downloads folder.
+										</li>
+										<li>
+											Double-click{" "}
+											<span className="font-semibold text-text">
+												RobloxPlayerInstaller
+											</span>{" "}
+											to install the app.
+										</li>
+										<li>
+											Follow the instructions to install
+											Roblox on your computer.
+										</li>
+										<li>
+											Now that Roblox is installed,{" "}
+											<a
+												href="https://www.roblox.com/discover"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="text-text underline underline-offset-4"
+											>
+												join the experience
+											</a>
+											.
+										</li>
+									</>
+								)}
+							</ol>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/components/providers/GameLaunchDialog.tsx
+++ b/components/providers/GameLaunchDialog.tsx
@@ -1,11 +1,15 @@
 "use client";

 import { useEffect, useState, useSyncExternalStore } from "react";
-import { closeGameLaunch, getGameLaunchState, subscribeGameLaunch } from "@/components/providers/game-launch-store";
+import {
+	closeGameLaunch,
+	getGameLaunchState,
+	subscribeGameLaunch
+} from "@/components/providers/game-launch-store";
+import { openDownloadDialog } from "@/components/providers/download-dialog-store";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons";
-import Link from "next/link";

 export function GameLaunchDialog() {
 	const state = useSyncExternalStore(
@@ -16,6 +20,34 @@ export function GameLaunchDialog() {

 	const [launchTimeouted, setLaunchTimeouted] = useState<boolean>(false);

+	function detectOS() {
+		if (typeof navigator === "undefined") return "Unknown";
+		const nav = navigator as Navigator & {
+			userAgentData?: { platform?: string };
+		};
+		const platform = nav.userAgentData?.platform || nav.platform || "";
+		const ua = nav.userAgent || "";
+		const haystack = `${platform} ${ua}`;
+		if (/windows/i.test(haystack)) return "Windows";
+		if (/mac os x|macintosh|macos/i.test(haystack)) return "Mac";
+		if (/linux/i.test(haystack)) return "Linux";
+		return "Unknown";
+	}
+
+	function handleDownloadClick() {
+		const os = detectOS();
+		const canDownload = os === "Windows" || os === "Mac";
+		const url = canDownload
+			? "https://www.roblox.com/download/client"
+			: null;
+		openDownloadDialog(url);
+		closeGameLaunch();
+		if (!canDownload || !url) return;
+		try {
+			window.open(url, "_blank", "noopener,noreferrer");
+		} catch {}
+	}
+
 	useEffect(() => {
 		if (!state.isOpen) {
 			setLaunchTimeouted(false);
@@ -33,7 +65,7 @@ export function GameLaunchDialog() {

 	return (
 		<div
-			className="fixed inset-0 z-50 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			className="fixed inset-0 z-[70] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
 			onClick={closeGameLaunch}
 		>
 			<div
@@ -50,28 +82,41 @@ export function GameLaunchDialog() {
 					<X className="h-4 w-4" />
 				</Button>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
-					<div className="h-24 w-24 flex items-center justify-center">
-						<RobloxLogoIcon />
+					<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
+						<RobloxLogoIcon className="h-10 w-10 text-blue" />
 					</div>
 					<div className="space-y-1">
 						<p className="text-2xl font-semibold text-text">
 							{!launchTimeouted ? (
 								<>
-									Roblox is now loading.<br />Get Ready!
+									Roblox is now loading.
+									<br />
+									Get ready!
 								</>
 							) : (
-								<>Download Roblox to play millions of experiences!</>
+								<>
+									Download Roblox to play millions of
+									experiences.
+								</>
 							)}
 						</p>
 					</div>
-					<Button disabled={!launchTimeouted} variant="default" className="w-full rounded-full">
-						{launchTimeouted ? (
-							<Link href="https://flathub.org/en/apps/org.vinegarhq.Sober" target="_blank" rel="noopener noreferrer">
-								Download Roblox
-							</Link>
-						) : null}
-						{!launchTimeouted && <div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />}
-					</Button>
+					{launchTimeouted ? (
+						<Button
+							onClick={handleDownloadClick}
+							className="w-full rounded-full"
+						>
+							Download Roblox
+						</Button>
+					) : (
+						<Button
+							disabled
+							variant="secondary"
+							className="w-full rounded-full"
+						>
+							<div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />
+						</Button>
+					)}
 				</div>
 			</div>
 		</div>
--- a/components/providers/GameLaunchProvider.tsx
+++ b/components/providers/GameLaunchProvider.tsx
@@ -25,7 +25,7 @@ export function GameLaunchProvider({
 	const launchGame = useCallback((placeId: string, jobId?: string) => {
 		openGameLaunchWithParams(placeId, jobId);

-		console.log("[GameLaunchProvider] Launching",{placeId, jobId});
+		console.log("[GameLaunchProvider] Launching", { placeId, jobId });

 		const gameLaunchParams = {
 			launchmode: "play",
@@ -34,9 +34,12 @@ export function GameLaunchProvider({
 			gameInstanceId: jobId ?? undefined
 		};

-		console.log("[GameLaunchProvider] Constructed GameLaunchParams",gameLaunchParams);
+		console.log(
+			"[GameLaunchProvider] Constructed GameLaunchParams",
+			gameLaunchParams
+		);

-		const url = new URL("roblox://experiences/start")
+		const url = new URL("roblox://experiences/start");

 		for (const [key, value] of Object.entries(gameLaunchParams)) {
 			if (value !== undefined && value !== null) {
--- a/components/providers/download-dialog-store.ts
+++ b/components/providers/download-dialog-store.ts
@@ -0,0 +1,30 @@
+type DownloadDialogState = {
+	isOpen: boolean;
+	url: string | null;
+};
+
+let state: DownloadDialogState = { isOpen: false, url: null };
+const listeners = new Set<() => void>();
+
+function emit() {
+	listeners.forEach((l) => l());
+}
+
+export function subscribeDownloadDialog(listener: () => void) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+export function getDownloadDialogState() {
+	return state;
+}
+
+export function openDownloadDialog(url: string | null) {
+	state = { isOpen: true, url };
+	emit();
+}
+
+export function closeDownloadDialog() {
+	state = { isOpen: false, url: null };
+	emit();
+}
--- a/components/providers/game-launch-store.ts
+++ b/components/providers/game-launch-store.ts
@@ -15,6 +15,10 @@ export function getGameLaunchState() {
 	return state;
 }

+export function isGameLaunchOpen() {
+	return state.isOpen;
+}
+
 export function subscribeGameLaunch(listener: () => void) {
 	listeners.add(listener);
 	return () => listeners.delete(listener);
--- a/components/roblox/FriendCarousel.tsx
+++ b/components/roblox/FriendCarousel.tsx
@@ -57,7 +57,7 @@ export function FriendCarousel({
 			<h1 className="text-2xl pt-4 pl-4 -mb-4">{title}</h1>
 			<div className="rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
 				<div
-					className="flex p-8 items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
+					className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar py-6 scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
 					style={{
 						scrollSnapType: "x mandatory",
 						WebkitOverflowScrolling: "touch",
@@ -73,32 +73,32 @@ export function FriendCarousel({
 							userPresence === 1
 								? "border-blue/25 bg-blue/25"
 								: userPresence === 2
-								? "border-green/25 bg-green/25"
-								: userPresence === 3
-								? "border-yellow/25 bg-yellow/25"
-								: userPresence === 0
-								? "border-surface2/25 bg-surface2/25"
-								: "border-red/25 bg-red/25";
+									? "border-green/25 bg-green/25"
+									: userPresence === 3
+										? "border-yellow/25 bg-yellow/25"
+										: userPresence === 0
+											? "border-surface2/25 bg-surface2/25"
+											: "border-red/25 bg-red/25";
 						const textColor =
 							userPresence === 1
 								? "text-blue"
 								: userPresence === 2
-								? "text-green"
-								: userPresence === 3
-								? "text-yellow"
-								: userPresence === 0
-								? "text-surface2"
-								: "text-red";
+									? "text-green"
+									: userPresence === 3
+										? "text-yellow"
+										: userPresence === 0
+											? "text-surface2"
+											: "text-red";
 						const fillColor =
 							userPresence === 1
 								? "fill-blue"
 								: userPresence === 2
-								? "fill-green"
-								: userPresence === 3
-								? "fill-yellow"
-								: userPresence === 0
-								? "fill-surface2"
-								: "fill-red";
+									? "fill-green"
+									: userPresence === 3
+										? "fill-yellow"
+										: userPresence === 0
+											? "fill-surface2"
+											: "fill-red";

 						return (
 							<StupidHoverThing
@@ -108,7 +108,7 @@ export function FriendCarousel({
 									<div className="text-center items-center justify-center content-center">
 										<span className="space-x-1 flex items-center">
 											<p>{a.displayName || a.name}</p>
-											{!a.hasVerifiedBadge ? (
+											{a.hasVerifiedBadge ? (
 												<VerifiedIcon
 													useDefault
 													className={`w-4 h-4 shrink-0`}
@@ -125,24 +125,24 @@ export function FriendCarousel({
 							>
 								<Link href={`/users/${a.id}`}>
 									<div className="flex flex-col min-w-[6.5rem]">
-									<LazyLoadedImage
-										imgId={`AvatarHeadShot_${a.id}`}
-										alt={a.name}
-										className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
-									/>
-									<span
-										className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
-									>
-										<span className="line-clamp-1 overflow-hidden text-ellipsis">
-											{a.displayName || a.name}
+										<LazyLoadedImage
+											imgId={`AvatarHeadShot_${a.id}`}
+											alt={a.name}
+											className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
+										/>
+										<span
+											className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
+										>
+											<span className="line-clamp-1 overflow-hidden text-ellipsis">
+												{a.displayName || a.name}
+											</span>
+											{a.hasVerifiedBadge ? (
+												<VerifiedIcon
+													className={`text-base ${fillColor} w-3 h-3 shrink-0`}
+												/>
+											) : null}
 										</span>
-										{!a.hasVerifiedBadge ? (
-											<VerifiedIcon
-												className={`text-base ${fillColor} w-3 h-3 shrink-0`}
-											/>
-										) : null}
-									</span>
-								</div>
+									</div>
 								</Link>
 							</StupidHoverThing>
 						);
--- a/components/roblox/FriendsOnline.tsx
+++ b/components/roblox/FriendsOnline.tsx
@@ -11,7 +11,11 @@ export function FriendsHomeSect(
 ) {
 	const friends = useFriendsHome();

-	return friends && <FriendCarousel {...props} title="Friends" friends={friends} />;
+	return (
+		friends && (
+			<FriendCarousel {...props} title="Friends" friends={friends} />
+		)
+	);
 }

 export function BestFriendsHomeSect(
--- a/components/roblox/GameCard.tsx
+++ b/components/roblox/GameCard.tsx
@@ -12,6 +12,10 @@ import { ContextMenuItem } from "@radix-ui/react-context-menu";
 import React from "react";
 import Link from "next/link";
 import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import GamePageContent from "@/app/games/[id]/content";
+import { Maximize2 } from "lucide-react";
+import { useRouter } from "next/navigation";

 interface GameCardProps {
 	game: ContentMetadata;
@@ -19,89 +23,113 @@ interface GameCardProps {

 export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 	const { launchGame } = useGameLaunch();
+	const totalVotes = game.totalUpVotes + game.totalDownVotes;
+	const rating =
+		totalVotes > 0 ? Math.round((game.totalUpVotes / totalVotes) * 100) : 0;
+	const [isOpen, setIsOpen] = React.useState(false);
+
+	const router = useRouter();

 	return (
-		<ContextMenu>
-			<ContextMenuTrigger>
-				<div className="overflow-hidden aspect-video relative bg-muted rounded-2xl">
-					<div className="overflow-hidden">
-						{game.primaryMediaAsset ? (
-							<LazyLoadedImage
-								imgId={
-									"GameThumbnail_" +
-									game.rootPlaceId.toString()
-								}
-								alt={game.name}
-								className="object-fill w-full h-full"
-								lazyFetch={false} // ALWAYS fetch immediately
-								size="384x216" // match game thumbnail size
-							/>
-						) : (
-							<div className="w-full h-full flex items-center justify-center bg-muted">
-								<span className="text-muted-foreground">
-									{":("}
-								</span>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<ContextMenu>
+				<ContextMenuTrigger>
+					<button
+						type="button"
+						className="text-left"
+						onClick={() => setIsOpen(true)}
+					>
+						<div className="space-y-2">
+							<div className="group overflow-hidden aspect-video relative bg-muted rounded-2xl ring-1 ring-surface0/60 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
+								<div className="overflow-hidden">
+									{game.primaryMediaAsset ? (
+										<LazyLoadedImage
+											imgId={
+												"GameThumbnail_" +
+												game.rootPlaceId.toString()
+											}
+											alt={game.name}
+											className="object-fill w-full h-full"
+											lazyFetch={false} // ALWAYS fetch immediately
+											size="384x216" // match game thumbnail size
+										/>
+									) : (
+										<div className="w-full h-full flex items-center justify-center bg-muted">
+											<span className="text-muted-foreground">
+												{":("}
+											</span>
+										</div>
+									)}
+								</div>
+								<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-crust/50 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+								<div className="text-blue bg-base/90 font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1 text-xs shadow-sm ring-1 ring-surface0/60 backdrop-blur">
+									{game.playerCount.toLocaleString()}
+								</div>
 							</div>
-						)}
-					</div>
-					<div className="text-blue bg-base font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1">
-						{game.playerCount.toLocaleString()}
+							<div>
+								<p className="text-sm font-semibold text-text line-clamp-2">
+									{game.name}
+								</p>
+								<p className="text-xs text-subtext1">
+									{rating}% rating
+								</p>
+							</div>
+						</div>
+					</button>
+				</ContextMenuTrigger>
+				<ContextMenuContent className="min-w-[180px] p-1">
+					<ContextMenuItem>
+						<Link href={`/games/${game.rootPlaceId}`}>Open</Link>
+					</ContextMenuItem>
+					<ContextMenuItem
+						onClick={() => {
+							launchGame(game.rootPlaceId.toString());
+						}}
+					>
+						Play
+					</ContextMenuItem>
+					<ContextMenuSeparator />
+					<ContextMenuItem
+						onClick={() => {
+							navigator.clipboard.writeText(
+								`${game.rootPlaceId}`
+							);
+						}}
+					>
+						Copy placeId
+					</ContextMenuItem>
+					<ContextMenuItem
+						onClick={() => {
+							navigator.clipboard.writeText(`${game.universeId}`);
+						}}
+					>
+						Copy universeId
+					</ContextMenuItem>
+				</ContextMenuContent>
+			</ContextMenu>
+			<DialogContent className="max-w-6xl h-[75vh] w-[96vw] max-h-[90vh] overflow-hidden bg-crust ring-1 ring-surface0/60 p-0">
+				<DialogTitle className="sr-only" hidden>
+					{game.name}
+				</DialogTitle>
+				<div
+					className="absolute right-12 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+					onClick={(e) => {
+						e.preventDefault();
+						router.push(`/games/${game.rootPlaceId}`);
+					}}
+				>
+					<Maximize2 className="h-4 w-4" />
+					<span className="sr-only">Maximize</span>
+				</div>
+				<div className="overflow-y-auto">
+					<div className="max-h-[70vh] px-2 py-4">
+						<GamePageContent
+							placeId={game.rootPlaceId.toString()}
+							shouldSetDocumentTitle={false}
+						/>
 					</div>
 				</div>
-			</ContextMenuTrigger>
-			<ContextMenuContent className="max-w-[512px] p-2 space-y-1">
-				<ContextMenuItem
-					disabled
-					className="text-s font-bold text-muted-foreground"
-				>
-					{game.name}
-				</ContextMenuItem>
-				<ContextMenuItem
-					disabled
-					className="text-xs text-subtext0 text-muted-foreground"
-				>
-					{Math.round(
-						(game.totalUpVotes /
-							(game.totalUpVotes + game.totalDownVotes)) *
-							100
-					)}
-					% rating - {game.playerCount.toLocaleString()} playing
-				</ContextMenuItem>
-				<ContextMenuItem
-					disabled
-					className="pb-1 text-xs text-subtext0 text-muted-foreground"
-				>
-					{game.ageRecommendationDisplayName || ""}
-				</ContextMenuItem>
-				<ContextMenuSeparator />
-				<ContextMenuItem>
-					<Link href={`/games/${game.rootPlaceId}`}>
-						Open
-					</Link>
-				</ContextMenuItem>
-				<ContextMenuItem
-					onClick={() => {
-						launchGame(game.rootPlaceId.toString());
-					}}
-				>
-					Play
-				</ContextMenuItem>
-				<ContextMenuSeparator />
-				<ContextMenuItem
-					onClick={() => {
-						navigator.clipboard.writeText(`${game.rootPlaceId}`);
-					}}
-				>
-					Copy rootPlaceId
-				</ContextMenuItem>
-				<ContextMenuItem
-					onClick={() => {
-						navigator.clipboard.writeText(`${game.universeId}`);
-					}}
-				>
-					Copy universeId
-				</ContextMenuItem>
-			</ContextMenuContent>
-		</ContextMenu>
+			</DialogContent>
+		</Dialog>
 	);
 });
--- a/components/roblox/PlayGameButton.tsx
+++ b/components/roblox/PlayGameButton.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
+import { Play } from "lucide-react";
+
+type PlayGameButtonProps = {
+	placeId: string;
+};
+
+export function PlayGameButton({ placeId }: PlayGameButtonProps) {
+	const { launchGame } = useGameLaunch();
+
+	return (
+		<Button
+			onClick={() => launchGame(placeId)}
+			className="h-12 w-full px-10 rounded-2xl text-base font-semibold flex items-center gap-2 bg-primary hover:bg-primary/90"
+		>
+			<Play className="h-16 w-16 fill-base transition-transform duration-200 hover:scale-110" />
+		</Button>
+	);
+}
--- a/components/roblox/RobloxIcons.tsx
+++ b/components/roblox/RobloxIcons.tsx
@@ -97,19 +97,40 @@ export const RobuxIcon = (props: React.SVGProps<SVGSVGElement>) => (
 );

 export const RobloxLogoIcon = (props: React.SVGProps<SVGSVGElement>) => (
-	<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" fill="none" viewBox="0 0 1024 1024">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1024"
+		height="1024"
+		fill="none"
+		viewBox="0 0 1024 1024"
+	>
 		<g clipPath="url(#a)">
-			<mask id="b" width="1024" height="1024" x="0" y="0" maskUnits="userSpaceOnUse" className="mask-type-alpha">
-				<path fill="#d9d9d9" d="M0 365.856c0-128.061 0-192.092 24.923-241.005a228.66 228.66 0 0 1 99.928-99.928C173.764 0 237.795 0 365.856 0h292.288c128.061 0 192.092 0 241.005 24.923a228.66 228.66 0 0 1 99.929 99.928C1024 173.764 1024 237.795 1024 365.856v292.288c0 128.061 0 192.092-24.922 241.005a228.66 228.66 0 0 1-99.929 99.929C850.236 1024 786.205 1024 658.144 1024H365.856c-128.061 0-192.092 0-241.005-24.922a228.66 228.66 0 0 1-99.928-99.929C0 850.236 0 786.205 0 658.144z"/>
+			<mask
+				id="b"
+				width="1024"
+				height="1024"
+				x="0"
+				y="0"
+				maskUnits="userSpaceOnUse"
+				className="mask-type-alpha"
+			>
+				<path
+					fill="#d9d9d9"
+					d="M0 365.856c0-128.061 0-192.092 24.923-241.005a228.66 228.66 0 0 1 99.928-99.928C173.764 0 237.795 0 365.856 0h292.288c128.061 0 192.092 0 241.005 24.923a228.66 228.66 0 0 1 99.929 99.928C1024 173.764 1024 237.795 1024 365.856v292.288c0 128.061 0 192.092-24.922 241.005a228.66 228.66 0 0 1-99.929 99.929C850.236 1024 786.205 1024 658.144 1024H365.856c-128.061 0-192.092 0-241.005-24.922a228.66 228.66 0 0 1-99.928-99.929C0 850.236 0 786.205 0 658.144z"
+				/>
 			</mask>
-			<g mask="url(#b)"><path fill="#335fff" d="M0 0h1024v1024H0z"/>
-				<path fill="#fff" d="m307.201 157.281-149.92 559.518 559.518 149.92 149.92-559.518zm262.041 453.876-156.349-41.915 41.914-156.349 156.412 41.914z"/>
+			<g mask="url(#b)">
+				<path fill="#335fff" d="M0 0h1024v1024H0z" />
+				<path
+					fill="#fff"
+					d="m307.201 157.281-149.92 559.518 559.518 149.92 149.92-559.518zm262.041 453.876-156.349-41.915 41.914-156.349 156.412 41.914z"
+				/>
 			</g>
 		</g>
 		<defs>
 			<clipPath id="a">
-				<path fill="#fff" d="M0 0h1024v1024H0z"/>
+				<path fill="#fff" d="M0 0h1024v1024H0z" />
 			</clipPath>
 		</defs>
 	</svg>
-)
+);
--- a/components/roblox/UserProfileHeader.tsx
+++ b/components/roblox/UserProfileHeader.tsx
@@ -19,7 +19,6 @@ import Link from "next/link";
 import { UserProfileDetails } from "@/lib/profile";

 export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
-
 	if (!user) {
 		return (
 			<div className="justify-center w-screen px-8 py-6">
@@ -42,12 +41,12 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
 		userPresence === 1
 			? "border-blue/25 bg-blue/25"
 			: userPresence === 2
-			? "border-green/25 bg-green/25"
-			: userPresence === 3
-			? "border-yellow/25 bg-yellow/25"
-			: userPresence === 0
-			? "border-surface2/25 bg-surface2/25"
-			: "border-red/25 bg-red/25";
+				? "border-green/25 bg-green/25"
+				: userPresence === 3
+					? "border-yellow/25 bg-yellow/25"
+					: userPresence === 0
+						? "border-surface2/25 bg-surface2/25"
+						: "border-red/25 bg-red/25";

 	const isLoaded = !!user;

@@ -98,7 +97,7 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
 							<RobloxBannedSmall className="w-6 h-6 text-blue" />
 						)}
 					</span>
-					<span className="text-base font-super-mono text-subtext0 mt-1">
+					<span className="font-super-mono text-subtext0 mt-1">
 						{isLoaded ? (
 							<>
 								@{user.name}
--- a/components/site/HomeUserHeader.tsx
+++ b/components/site/HomeUserHeader.tsx
@@ -15,7 +15,6 @@ import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { toast } from "sonner";
 import Link from "next/link";
-import { Button } from "../ui/button";

 // chatgpt + human
 function randomGreeting(name: string): string {
@@ -59,85 +58,79 @@ export function HomeLoggedInHeader() {
 		userPresence === 1
 			? "border-blue/25 bg-blue/25"
 			: userPresence === 2
-			? "border-green/25 bg-green/25"
-			: userPresence === 3
-			? "border-yellow/25 bg-yellow/25"
-			: userPresence === 0
-			? "border-surface2/25 bg-surface2/25"
-			: "border-red/25 bg-red/25";
+				? "border-green/25 bg-green/25"
+				: userPresence === 3
+					? "border-yellow/25 bg-yellow/25"
+					: userPresence === 0
+						? "border-surface2/25 bg-surface2/25"
+						: "border-red/25 bg-red/25";

 	const isLoaded = !!profile && !!accountSettings;

 	return (
 		<>
 			{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
-			<div
-				className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0"
-				onContextMenu={(e) => {
-					if (e.button === 2) {
-						toast("[debug] reloading user pfp");
-						console.log("[debug] reloading user pfp");
-						loadThumbnails([
-							{
-								type: "AvatarHeadShot",
-								targetId: profile ? profile.id : 1,
-								format: "webp",
-								size: "720x720"
-							}
-						]).catch(() => {});
-					}
-				}}
-			>
-				{!isLoaded ? (
-					<Skeleton className="w-28 h-28 rounded-full" />
-				) : (
-					<LazyLoadedImage
-						imgId={`AvatarHeadShot_${profile.id}`}
-						alt=""
-						className={`w-28 h-28 rounded-full shadow-crust border-2 ${borderColor}`}
-					/>
-				)}
-				<div className="flex flex-col justify-center">
-					<span className="text-3xl font-bold text-text flex items-center gap-2">
-						{isLoaded ? (
-							<Link href={`/users/${profile.id}`}>
-								{randomGreeting(
-									preferredName ||
-										profile.displayName ||
-										"Robloxian!"
-								)}
-							</Link>
-						) : (
-							<>
-								<Skeleton className="w-96 h-8 rounded-lg" />
-							</>
-						)}
-						{!!accountSettings &&
-						accountSettings.IsPremium === true ? (
-							<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
-						) : (
-							<></>
-						)}
-						{isLoaded ? (
-							<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
-						) : (
-							<></>
-						)}
-					</span>
-					<span className="text-base font-super-mono text-subtext0 mt-1">
-						{isLoaded ? (
-							<>
-								@{profile.name}
-								{!!userActivity && userPresence === 2 ? (
-									<> - {userActivity.lastLocation}</>
-								) : (
-									<></>
-								)}
-							</>
-						) : (
-							<Skeleton className="w-64 h-6 rounded-lg" />
-						)}
-					</span>
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
+				<div
+					className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 rounded-2xl bg-base/40 ring-1 ring-surface0/60 px-4 sm:px-6 py-4 sm:py-6 mt-6"
+					onContextMenu={(e) => {
+						if (e.button === 2) {
+							toast("[debug] reloading user pfp");
+							console.log("[debug] reloading user pfp");
+							loadThumbnails([
+								{
+									type: "AvatarHeadShot",
+									targetId: profile ? profile.id : 1,
+									format: "webp",
+									size: "720x720"
+								}
+							]).catch(() => {});
+						}
+					}}
+				>
+					{!isLoaded ? (
+						<Skeleton className="w-24 h-24 sm:w-28 sm:h-28 rounded-full" />
+					) : (
+						<LazyLoadedImage
+							imgId={`AvatarHeadShot_${profile.id}`}
+							alt=""
+							className={`w-24 h-24 sm:w-28 sm:h-28 rounded-full shadow-crust border-2 ${borderColor}`}
+						/>
+					)}
+					<div className="flex flex-col justify-center">
+						<span className="text-2xl sm:text-3xl font-bold text-text flex flex-wrap items-center gap-2">
+							{isLoaded ? (
+								<Link href={`/users/${profile.id}`}>
+									{randomGreeting(
+										preferredName ||
+											profile.displayName ||
+											"Robloxian!"
+									)}
+								</Link>
+							) : (
+								<Skeleton className="w-56 sm:w-96 h-7 sm:h-8 rounded-lg" />
+							)}
+							{!!accountSettings &&
+							accountSettings.IsPremium === true ? (
+								<RobloxPremiumSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-transparent" />
+							) : null}
+							{isLoaded && profile.hasVerifiedBadge ? (
+								<RobloxVerifiedSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-blue text-base" />
+							) : null}
+						</span>
+						<span className="text-sm font-super-mono text-subtext0 mt-1">
+							{isLoaded ? (
+								<>
+									@{profile.name}
+									{!!userActivity && userPresence === 2 ? (
+										<> - {userActivity.lastLocation}</>
+									) : null}
+								</>
+							) : (
+								<Skeleton className="w-40 sm:w-64 h-5 sm:h-6 rounded-lg" />
+							)}
+						</span>
+					</div>
 				</div>
 			</div>
 		</>
--- a/components/site/OutfitQuickChooser.tsx
+++ b/components/site/OutfitQuickChooser.tsx
@@ -6,8 +6,9 @@ import LazyLoadedImage from "../util/LazyLoadedImage";
 import { StupidHoverThing } from "../util/MiscStuff";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
-import { useEffect } from "react";
-import { X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";

 type OutfitSelectorProps = {
 	setVisible: (visible: boolean) => void;
@@ -23,6 +24,7 @@ export function OutfitSelector({
 }: OutfitSelectorProps) {
 	const outfits = useAvatarOutfits();
 	const acc = useCurrentAccount();
+	const [query, setQuery] = useState("");

 	useEffect(() => {
 		if (!outfits || outfits.length === 0) return;
@@ -47,6 +49,15 @@ export function OutfitSelector({
 	const isLoading = outfits === null;
 	const hasOutfits = Array.isArray(outfits) && outfits.length > 0;

+	const filteredOutfits = useMemo(() => {
+		if (!hasOutfits) return [];
+		if (!query.trim()) return outfits;
+		const lowered = query.trim().toLowerCase();
+		return outfits.filter((outfit) =>
+			outfit.name.toLowerCase().includes(lowered)
+		);
+	}, [hasOutfits, outfits, query]);
+
 	return (
 		<div
 			className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
@@ -56,21 +67,36 @@ export function OutfitSelector({
 				className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
 				onClick={(event) => event.stopPropagation()}
 			>
-				<div className="flex items-center justify-between border-b border-surface0/60 px-6 py-4">
+				<div className="flex flex-col gap-3 border-b border-surface0/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
 					<div>
-						<p className="text-lg font-semibold text-text">Outfits</p>
+						<p className="text-lg font-semibold text-text">
+							Outfits
+						</p>
 						<p className="text-xs text-subtext1">
 							Pick a look to update your avatar instantly.
 						</p>
 					</div>
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={() => setVisible(false)}
-						aria-label="Close outfit chooser"
-					>
-						<X className="h-4 w-4" />
-					</Button>
+					<div className="flex items-center gap-2">
+						<div className="relative w-full sm:w-64">
+							<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtext1" />
+							<Input
+								value={query}
+								onChange={(event) =>
+									setQuery(event.target.value)
+								}
+								placeholder="Search outfits"
+								className="pl-9"
+							/>
+						</div>
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={() => setVisible(false)}
+							aria-label="Close outfit chooser"
+						>
+							<X className="h-4 w-4" />
+						</Button>
+					</div>
 				</div>

 				<div className="p-6">
@@ -91,39 +117,55 @@ export function OutfitSelector({
 							))}
 						</div>
 					) : hasOutfits ? (
-						<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
-							{outfits.map((outfit: { id: number; name: string }) => (
-								<StupidHoverThing
-									key={outfit.id}
-									delayDuration={0}
-									text={outfit.name}
-								>
-									<button
-										className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
-										onClick={async () => {
-											await updateOutfit(outfit, acc);
-											setVisible(false);
-										}}
-										aria-label={`Wear ${outfit.name}`}
-									>
-										<LazyLoadedImage
-											imgId={`Outfit_${outfit.id}`}
-											alt={outfit.name}
-											className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
-											size="420x420"
-											lazyFetch={false}
-										/>
-										<p className="mt-3 text-xs font-medium text-text line-clamp-2">
-											{outfit.name}
-										</p>
-									</button>
-								</StupidHoverThing>
-							))}
+						<div className="space-y-4">
+							<p className="text-xs text-subtext1">
+								{filteredOutfits.length} outfit
+								{filteredOutfits.length === 1 ? "" : "s"}
+							</p>
+							<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
+								{filteredOutfits.map(
+									(outfit: { id: number; name: string }) => (
+										<StupidHoverThing
+											key={outfit.id}
+											delayDuration={0}
+											text={outfit.name}
+										>
+											<button
+												className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
+												onClick={async () => {
+													await updateOutfit(
+														outfit,
+														acc
+													);
+													setVisible(false);
+												}}
+												aria-label={`Wear ${outfit.name}`}
+											>
+												<LazyLoadedImage
+													imgId={`Outfit_${outfit.id}`}
+													alt={outfit.name}
+													className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
+													size="420x420"
+													lazyFetch={false}
+												/>
+												<p className="mt-3 text-xs font-medium text-text line-clamp-2">
+													{outfit.name}
+												</p>
+											</button>
+										</StupidHoverThing>
+									)
+								)}
+							</div>
+							{filteredOutfits.length === 0 ? (
+								<div className="rounded-xl border border-surface0/60 bg-base/50 p-4 text-sm text-subtext1">
+									No outfits match that search yet.
+								</div>
+							) : null}
 						</div>
 					) : (
 						<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
-							No outfits found yet. Make one in the Roblox avatar editor,
-							then come back here.
+							No outfits found yet. Make one in the Roblox avatar
+							editor, then come back here.
 						</div>
 					)}
 				</div>
--- a/components/site/QuickTopUI.tsx
+++ b/components/site/QuickTopUI.tsx
@@ -81,9 +81,12 @@ async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
 			);
 		}

-		await proxyFetch(`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`, {
-			method: "POST"
-		});
+		await proxyFetch(
+			`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`,
+			{
+				method: "POST"
+			}
+		);

 		loadThumbnails([
 			{
@@ -158,7 +161,10 @@ export const QuickTopUILogoPart = React.memo(function () {
 			>
 				<img src="/roblox.png" className="w-6 h-6" alt="" />
 			</Link>
-			<Link href="/" className="gap-2 flex items-center text-sm font-medium">
+			<Link
+				href="/"
+				className="gap-2 flex items-center text-sm font-medium"
+			>
 				<p>{"Roblox"}</p>
 				{/* <p className="text-surface2 line-clamp-1">
 					{process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD}{" "}
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -24,7 +24,8 @@ const badgeVariants = cva(
 );

 export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
+	extends
+		React.HTMLAttributes<HTMLDivElement>,
 		VariantProps<typeof badgeVariants> {}

 function Badge({ className, variant, ...props }: BadgeProps) {
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -35,7 +35,8 @@ const buttonVariants = cva(
 );

 export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+	extends
+		React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
 	asChild?: boolean;
 }
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -102,15 +102,17 @@ ${colorConfig

 const ChartTooltip = RechartsPrimitive.Tooltip;

-type ChartTooltipContentProps =
-	RechartsPrimitive.TooltipContentProps<number | string, string> &
-		React.ComponentProps<"div"> & {
-			hideLabel?: boolean;
-			hideIndicator?: boolean;
-			indicator?: "line" | "dot" | "dashed";
-			nameKey?: string;
-			labelKey?: string;
-		};
+type ChartTooltipContentProps = RechartsPrimitive.TooltipContentProps<
+	number | string,
+	string
+> &
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	};

 const ChartTooltipContent = React.forwardRef<
 	HTMLDivElement,
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 			className
 		)}
 		{...props}
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -48,7 +48,8 @@ const sheetVariants = cva(
 );

 interface SheetContentProps
-	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+	extends
+		React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 		VariantProps<typeof sheetVariants> {}

 const SheetContent = React.forwardRef<