update

app/games/[id]/content.tsx

@@ -1,55 +1,183 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
 import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
-import { Button } from "@/components/ui/button";
 import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
+import LazyLoadedImage from "@/components/util/LazyLoadedImage";
+import { Badge } from "@/components/ui/badge";
+import { PlayGameButton } from "@/components/roblox/PlayGameButton";
 
 interface GamePageContentProps {
 	placeId: string;
+	shouldSetDocumentTitle?: boolean;
 }
 
-export default function GamePageContent({ placeId }: GamePageContentProps) {
+export default function GamePageContent({
+	placeId,
+	shouldSetDocumentTitle = true
+}: GamePageContentProps) {
 	const game = usePlaceDetails(placeId);
-	const { launchGame } = useGameLaunch();
+	const [hasHydrated, setHasHydrated] = useState(false);
 
 	// Set dynamic document title
 	useEffect(() => {
+		if (!shouldSetDocumentTitle) return;
 		if (!!game) {
 			document.title = `${game.name} | Roblox`;
 		}
-	}, [game]);
+	}, [game, shouldSetDocumentTitle]);
 
-	if (!game) return <div className="p-4">Loading game...</div>;
+	useEffect(() => {
+		setHasHydrated(true);
+	}, []);
+
+	if (!hasHydrated || !game) {
+		return (
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
+				<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
+					<div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
+					<div className="space-y-4">
+						<div className="h-7 w-3/4 rounded bg-surface0/60 animate-pulse" />
+						<div className="h-4 w-1/3 rounded bg-surface0/60 animate-pulse" />
+						<div className="flex gap-3">
+							<div className="h-10 w-24 rounded-md bg-surface0/60 animate-pulse" />
+							<div className="h-10 w-28 rounded-md bg-surface0/60 animate-pulse" />
+						</div>
+						<div className="grid grid-cols-2 gap-3">
+							{Array.from({ length: 4 }).map((_, index) => (
+								<div
+									key={`game-stat-skeleton-${index}`}
+									className="h-20 rounded-xl bg-surface0/60 animate-pulse"
+								/>
+							))}
+						</div>
+					</div>
+				</div>
+				<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
+					<div className="h-5 w-24 rounded bg-surface0/60 animate-pulse" />
+					<div className="mt-3 h-4 w-full rounded bg-surface0/60 animate-pulse" />
+					<div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
+				</div>
+			</div>
+		);
+	}
+
+	const avatarTypeLabel =
+		game.universeAvatarType === "MorphToR15"
+			? "R15 Only"
+			: game.universeAvatarType === "MorphToR6"
+				? "R6 Only"
+				: null;
 
 	return (
-		<div className="p-4 space-y-6">
+		<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
-			<Button onClick={() => launchGame(game.rootPlaceId.toString())}>
+			<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
-				PLAY
+				<div className="rounded-2xl overflow-hidden bg-surface0/40 ring-1 ring-surface1/60">
-			</Button>
+					<LazyLoadedImage
-			<div className="break-all pl-4 whitespace-pre-line font-black text-2xl">
+						imgId={`GameThumbnail_${game.rootPlaceId}`}
-				{game.name}
+						alt={game.name}
-			</div>
+						className="w-full h-full object-cover"
-			<div className="break-all pl-4 whitespace-pre-line font-bold flex">
+						lazyFetch={false}
-				<Link
+						size="768x432"
-					href={`https://roblox.com/${
+					/>
-						game.creator.type === "Group" ? "groups" : "user"
+				</div>
-					}/${game.creator.id}`}
+				<div className="flex flex-col gap-4">
-					className="flex"
+					<div className="space-y-2">
-				>
+						<h1 className="text-2xl sm:text-3xl font-semibold text-text">
-					<span className="underline">
+							{game.name}
-						{game.creator.name}
+						</h1>
-					</span>
+						<div className="flex flex-wrap items-center gap-2 text-sm text-subtext1">
-						{game.creator.hasVerifiedBadge && (
+							{!game.isAllGenre && (
-							<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
+								<>
-						)}
+									{game.genre && game.genre !== "All" ? (
-				</Link>
+										<Badge variant="secondary">
+											{game.genre}
+										</Badge>
+									) : null}
+									{game.genre_l1 &&
+									game.genre_l1 !== "All" ? (
+										<Badge variant="secondary">
+											{game.genre_l1}
+										</Badge>
+									) : null}
+									{game.genre_l2 &&
+									game.genre_l2 !== "All" ? (
+										<Badge variant="secondary">
+											{game.genre_l2}
+										</Badge>
+									) : null}
+								</>
+							)}
+							{game.maxPlayers === 1 ? (
+								<Badge variant="outline">Singleplayer</Badge>
+							) : null}
+							{game.copyingAllowed ? (
+								<Badge variant="outline">Uncopylocked</Badge>
+							) : null}
+							{avatarTypeLabel ? (
+								<Badge variant="outline">
+									{avatarTypeLabel}
+								</Badge>
+							) : null}
+						</div>
+					</div>
+
+					<div className="flex flex-wrap items-center gap-3">
+						<PlayGameButton placeId={game.rootPlaceId.toString()} />
+					</div>
+
+					<div className="grid grid-cols-2 gap-3 text-sm">
+						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+							<p className="text-subtext1">Playing now</p>
+							<p className="text-lg font-semibold text-text">
+								{game.playing.toLocaleString()}
+							</p>
+						</div>
+						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+							<p className="text-subtext1">Total visits</p>
+							<p className="text-lg font-semibold text-text">
+								{game.visits.toLocaleString()}
+							</p>
+						</div>
+						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+							<p className="text-subtext1">Favorites</p>
+							<p className="text-lg font-semibold text-text">
+								{game.favoritedCount.toLocaleString()}
+							</p>
+						</div>
+						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+							<p className="text-subtext1">Max players</p>
+							<p className="text-lg font-semibold text-text">
+								{game.maxPlayers}
+							</p>
+						</div>
+					</div>
+
+					<div className="text-sm text-subtext1">
+						<Link
+							href={`https://roblox.com/${
+								game.creator.type === "Group"
+									? "groups"
+									: "user"
+							}/${game.creator.id}`}
+							className="inline-flex items-center gap-1 underline"
+						>
+							{game.creator.name}
+							{game.creator.hasVerifiedBadge ? (
+								<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
+							) : null}
+						</Link>
+					</div>
+				</div>
 			</div>
 
-			<div className="break-all pl-4 whitespace-pre-line">
+			<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
-				{game.description}
+				<h2 className="text-lg font-semibold text-text">About</h2>
+				<p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
+					{game.description || "No description provided yet."}
+				</p>
 			</div>
 		</div>
 	);

app/games/[id]/page.tsx

@@ -1,11 +1,89 @@
 import { Suspense } from "react";
+import type { Metadata } from "next";
 import GamePageContentF from "./content";
 
 // page.tsx (Server Component)
-export default async function GamePageContent({ params }: { params: { id: string } }) {
+export default async function GamePageContent({
+	params
+}: {
+	params: { id: string };
+}) {
 	return (
 		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
 			<GamePageContentF placeId={(await params).id} />
 		</Suspense>
 	);
 }
+
+export async function generateMetadata({
+	params
+}: {
+	params: { id: string };
+}): Promise<Metadata> {
+	const placeId = params.id;
+
+	try {
+		const universeRes = await fetch(
+			`https://apis.roblox.com/universes/v1/places/${placeId}/universe`,
+			{ next: { revalidate: 300 } }
+		);
+		if (!universeRes.ok) {
+			return { title: "Game | Roblox" };
+		}
+
+		const { universeId } = await universeRes.json();
+		if (!universeId) {
+			return { title: "Game | Roblox" };
+		}
+
+		const gameRes = await fetch(
+			`https://games.roblox.com/v1/games?universeIds=${universeId}`,
+			{ next: { revalidate: 300 } }
+		);
+		if (!gameRes.ok) {
+			return { title: "Game | Roblox" };
+		}
+
+		const data = await gameRes.json();
+		const game = data?.data?.[0];
+		if (!game) {
+			return { title: "Game | Roblox" };
+		}
+
+		const title = `${game.name} | Roblox`;
+		const description =
+			game.description ||
+			"Roblox is a global platform that brings people together through play.";
+		let imageUrl: string | undefined;
+
+		try {
+			const thumbRes = await fetch(
+				`https://thumbnails.roblox.com/v1/games/multiget?universeIds=${universeId}&size=768x432&format=png&isCircular=false`,
+				{ next: { revalidate: 300 } }
+			);
+			if (thumbRes.ok) {
+				const thumbs = await thumbRes.json();
+				imageUrl = thumbs?.data?.[0]?.imageUrl;
+			}
+		} catch {
+			imageUrl = undefined;
+		}
+
+		return {
+			title,
+			description,
+			openGraph: {
+				title,
+				description,
+				images: imageUrl ? [imageUrl] : undefined
+			},
+			twitter: {
+				title,
+				description,
+				images: imageUrl ? [imageUrl] : undefined
+			}
+		};
+	} catch {
+		return { title: "Game | Roblox" };
+	}
+}

app/globals.css

@@ -2,11 +2,15 @@
 @import "tailwindcss";
 
 body {
-	font-family: SF Pro Display, Geist;
+	font-family:
+		SF Pro Display,
+		Geist;
 }
 
 .font-super-mono {
-	font-family: SF Mono, Geist Mono;
+	font-family:
+		SF Mono,
+		Geist Mono;
 }
 
 @layer base {
@@ -83,41 +87,41 @@ body {
 }
 
 @theme {
-  --color-background: hsl(var(--background));
+	--color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
+	--color-foreground: hsl(var(--foreground));
-  --color-muted: hsl(var(--muted));
+	--color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
+	--color-muted-foreground: hsl(var(--muted-foreground));
-  --color-popover: hsl(var(--popover));
+	--color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
+	--color-popover-foreground: hsl(var(--popover-foreground));
-  --color-card: hsl(var(--card));
+	--color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
+	--color-card-foreground: hsl(var(--card-foreground));
-  --color-primary: hsl(var(--primary));
+	--color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
+	--color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
+	--color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-accent: hsl(var(--accent));
+	--color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
+	--color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
+	--color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
+	--color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
+	--color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+	--color-ring: hsl(var(--ring));
-  --color-chart-1: hsl(var(--chart-1));
+	--color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
+	--color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
+	--color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
+	--color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
+	--color-chart-5: hsl(var(--chart-5));
-  --color-sidebar: hsl(var(--sidebar-background));
+	--color-sidebar: hsl(var(--sidebar-background));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
+	--color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
+	--color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
+	--color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
+	--color-sidebar-ring: hsl(var(--sidebar-ring));
-  --radius-lg: var(--radius);
+	--radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
+	--radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+	--radius-sm: calc(var(--radius) - 4px);
 }
 
 @layer base {
@@ -140,5 +144,5 @@ body {
 	}
 }
 @utility border-border {
-  border-color: hsl(var(--border));
+	border-color: hsl(var(--border));
 }

app/layout.tsx

@@ -8,6 +8,7 @@ import { QuickTopUI, QuickTopUILogoPart } from "@/components/site/QuickTopUI";
 import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
 import { GameLaunchProvider } from "@/components/providers/GameLaunchProvider";
 import { GameLaunchDialog } from "@/components/providers/GameLaunchDialog";
+import { DownloadDialog } from "@/components/providers/DownloadDialog";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -21,9 +22,18 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
 	title: "Home | Roblox",
-	description: "Roblox is a global platform that brings people together through play.",
+	description:
-	authors: [{name: "Roblox Corporation"}],
+		"Roblox is a global platform that brings people together through play.",
-	keywords: ["free games", "online games", "building games", "virtual worlds", "free mmo", "gaming cloud", "physics engine"]
+	authors: [{ name: "Roblox Corporation" }],
+	keywords: [
+		"free games",
+		"online games",
+		"building games",
+		"virtual worlds",
+		"free mmo",
+		"gaming cloud",
+		"physics engine"
+	]
 };
 
 export default function RootLayout({
@@ -53,6 +63,7 @@ export default function RootLayout({
 									{children}
 								</div>
 							</main>
+							<DownloadDialog />
 							<GameLaunchDialog />
 							<Toaster />
 						</GameLaunchProvider>

app/page.tsx

@@ -6,15 +6,10 @@ import {
 } from "@/components/roblox/FriendsOnline";
 import { GameCard } from "@/components/roblox/GameCard";
 import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Card, CardContent } from "@/components/ui/card";
-import {
+import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
-	getOmniRecommendationsHome,
-	OmniRecommendation
-} from "@/lib/omniRecommendation";
 import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangleIcon } from "lucide-react";
 
 export default function Home() {
 	const SORTS_ALLOWED_IDS = [100000003, 100000001];
@@ -53,8 +48,10 @@ export default function Home() {
 		<>
 			<HomeLoggedInHeader />
 			<div className="h-4" />
-			<BestFriendsHomeSect className="pt-2" />
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
-			<FriendsHomeSect className="pt-2" />
+				<BestFriendsHomeSect className="pt-2" />
+				<FriendsHomeSect className="pt-2" />
+			</div>
 			{/* <div className="justify-center w-screen px-8 pt-6">
 				<Alert variant="default" className="bg-base/50 space-x-2">
 					<AlertTriangleIcon />
@@ -66,23 +63,39 @@ export default function Home() {
 				</Alert>
 			</div> */}
 
-			<div className="p-4 space-y-8 no-scrollbar">
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
-				{isLoading || !rec ? (
+				{isLoading ? (
+					<div className="space-y-6">
+						<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
+						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+							{Array.from({ length: 4 }).map((_, index) => (
+								<Card key={`home-skeleton-${index}`}>
+									<CardContent className="p-4 space-y-3">
+										<div className="aspect-video rounded-xl bg-surface0/60 animate-pulse" />
+										<div className="h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
+										<div className="h-3 w-1/3 rounded bg-surface0/60 animate-pulse" />
+									</CardContent>
+								</Card>
+							))}
+						</div>
+					</div>
+				) : !rec ? (
 					<Card>
-						<CardContent className="p-4">
+						<CardContent className="p-6 text-sm text-subtext1">
-							<div className="h-[200px] flex items-center justify-center">
+							We could not load recommendations right now. Try
-								<div className="animate-pulse text-muted-foreground">
+							again in a moment.
-									Loading...
-								</div>
-							</div>
 						</CardContent>
 					</Card>
 				) : (
 					rec.sorts
 						.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
 						.map((sort, idx) => (
-							<div key={idx}>
+							<section key={idx} className="space-y-4">
-								<h1 className="text-2xl pb-2">{sort.topic}</h1>
+								<div className="flex items-center justify-between">
+									<h2 className="text-xl sm:text-2xl font-semibold text-text">
+										{sort.topic}
+									</h2>
+								</div>
 								<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 									{(sort.recommendationList || []).map(
 										(recommendation, idxb) => {
@@ -99,7 +112,7 @@ export default function Home() {
 										}
 									)}
 								</div>
-							</div>
+							</section>
 						))
 				)}
 			</div>

app/users/[id]/content.tsx

@@ -25,7 +25,11 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
 			{!theirFriends && <Skeleton className="w-full h-64" />}
 			{/*
 			//@ts-expect-error */}
-			<FriendCarousel title={<span className="pl-4">Friends</span>} className="overflow-visible -ml-4" friends={theirFriends || []} />
+			<FriendCarousel
+				title={<span className="pl-4">Friends</span>}
+				className="overflow-visible -ml-4"
+				friends={theirFriends || []}
+			/>
 		</>
 	);
 }

app/users/[id]/page.tsx

@@ -2,7 +2,11 @@ import { Suspense } from "react";
 import UserProfileContent from "./content";
 
 // page.tsx (Server Component)
-export default async function UserProfilePage({ params }: { params: { id: string } }) {
+export default async function UserProfilePage({
+	params
+}: {
+	params: { id: string };
+}) {
 	return (
 		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
 			<UserProfileContent userId={(await params).id} />

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>
+	);
+}

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">
+					<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
-						<RobloxLogoIcon />
+						<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 ? (
-						{launchTimeouted ? (
+						<Button
-							<Link href="https://flathub.org/en/apps/org.vinegarhq.Sober" target="_blank" rel="noopener noreferrer">
+							onClick={handleDownloadClick}
-								Download Roblox
+							className="w-full rounded-full"
-							</Link>
+						>
-						) : null}
+							Download Roblox
-						{!launchTimeouted && <div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />}
+						</Button>
-					</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>

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) {

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();
+}

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);

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"
+									? "border-green/25 bg-green/25"
-								: userPresence === 3
+									: userPresence === 3
-								? "border-yellow/25 bg-yellow/25"
+										? "border-yellow/25 bg-yellow/25"
-								: userPresence === 0
+										: userPresence === 0
-								? "border-surface2/25 bg-surface2/25"
+											? "border-surface2/25 bg-surface2/25"
-								: "border-red/25 bg-red/25";
+											: "border-red/25 bg-red/25";
 						const textColor =
 							userPresence === 1
 								? "text-blue"
 								: userPresence === 2
-								? "text-green"
+									? "text-green"
-								: userPresence === 3
+									: userPresence === 3
-								? "text-yellow"
+										? "text-yellow"
-								: userPresence === 0
+										: userPresence === 0
-								? "text-surface2"
+											? "text-surface2"
-								: "text-red";
+											: "text-red";
 						const fillColor =
 							userPresence === 1
 								? "fill-blue"
 								: userPresence === 2
-								? "fill-green"
+									? "fill-green"
-								: userPresence === 3
+									: userPresence === 3
-								? "fill-yellow"
+										? "fill-yellow"
-								: userPresence === 0
+										: userPresence === 0
-								? "fill-surface2"
+											? "fill-surface2"
-								: "fill-red";
+											: "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
+										<LazyLoadedImage
-										imgId={`AvatarHeadShot_${a.id}`}
+											imgId={`AvatarHeadShot_${a.id}`}
-										alt={a.name}
+											alt={a.name}
-										className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
+											className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
-									/>
+										/>
-									<span
+										<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`}
+											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">
+											<span className="line-clamp-1 overflow-hidden text-ellipsis">
-											{a.displayName || a.name}
+												{a.displayName || a.name}
+											</span>
+											{a.hasVerifiedBadge ? (
+												<VerifiedIcon
+													className={`text-base ${fillColor} w-3 h-3 shrink-0`}
+												/>
+											) : null}
 										</span>
-										{!a.hasVerifiedBadge ? (
+									</div>
-											<VerifiedIcon
-												className={`text-base ${fillColor} w-3 h-3 shrink-0`}
-											/>
-										) : null}
-									</span>
-								</div>
 								</Link>
 							</StupidHoverThing>
 						);

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(

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>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<ContextMenuTrigger>
+			<ContextMenu>
-				<div className="overflow-hidden aspect-video relative bg-muted rounded-2xl">
+				<ContextMenuTrigger>
-					<div className="overflow-hidden">
+					<button
-						{game.primaryMediaAsset ? (
+						type="button"
-							<LazyLoadedImage
+						className="text-left"
-								imgId={
+						onClick={() => setIsOpen(true)}
-									"GameThumbnail_" +
+					>
-									game.rootPlaceId.toString()
+						<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">
-								alt={game.name}
+								<div className="overflow-hidden">
-								className="object-fill w-full h-full"
+									{game.primaryMediaAsset ? (
-								lazyFetch={false} // ALWAYS fetch immediately
+										<LazyLoadedImage
-								size="384x216" // match game thumbnail size
+											imgId={
-							/>
+												"GameThumbnail_" +
-						) : (
+												game.rootPlaceId.toString()
-							<div className="w-full h-full flex items-center justify-center bg-muted">
+											}
-								<span className="text-muted-foreground">
+											alt={game.name}
-									{":("}
+											className="object-fill w-full h-full"
-								</span>
+											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>
+								<p className="text-sm font-semibold text-text line-clamp-2">
-					<div className="text-blue bg-base font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1">
+									{game.name}
-						{game.playerCount.toLocaleString()}
+								</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>
+			</DialogContent>
-			<ContextMenuContent className="max-w-[512px] p-2 space-y-1">
+		</Dialog>
-				<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>
 	);
 });

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>
+	);
+}

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">
+			<mask
-				<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"/>
+				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"/>
+			<g mask="url(#b)">
-				<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"/>
+				<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>
-)
+);

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"
+				? "border-green/25 bg-green/25"
-			: userPresence === 3
+				: userPresence === 3
-			? "border-yellow/25 bg-yellow/25"
+					? "border-yellow/25 bg-yellow/25"
-			: userPresence === 0
+					: userPresence === 0
-			? "border-surface2/25 bg-surface2/25"
+						? "border-surface2/25 bg-surface2/25"
-			: "border-red/25 bg-red/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}

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"
+				? "border-green/25 bg-green/25"
-			: userPresence === 3
+				: userPresence === 3
-			? "border-yellow/25 bg-yellow/25"
+					? "border-yellow/25 bg-yellow/25"
-			: userPresence === 0
+					: userPresence === 0
-			? "border-surface2/25 bg-surface2/25"
+						? "border-surface2/25 bg-surface2/25"
-			: "border-red/25 bg-red/25";
+						: "border-red/25 bg-red/25";
 
 	const isLoaded = !!profile && !!accountSettings;
 
 	return (
 		<>
 			{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
-			<div
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
-				className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0"
+				<div
-				onContextMenu={(e) => {
+					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"
-					if (e.button === 2) {
+					onContextMenu={(e) => {
-						toast("[debug] reloading user pfp");
+						if (e.button === 2) {
-						console.log("[debug] reloading user pfp");
+							toast("[debug] reloading user pfp");
-						loadThumbnails([
+							console.log("[debug] reloading user pfp");
-							{
+							loadThumbnails([
-								type: "AvatarHeadShot",
+								{
-								targetId: profile ? profile.id : 1,
+									type: "AvatarHeadShot",
-								format: "webp",
+									targetId: profile ? profile.id : 1,
-								size: "720x720"
+									format: "webp",
-							}
+									size: "720x720"
-						]).catch(() => {});
+								}
-					}
+							]).catch(() => {});
-				}}
+						}
-			>
+					}}
-				{!isLoaded ? (
+				>
-					<Skeleton className="w-28 h-28 rounded-full" />
+					{!isLoaded ? (
-				) : (
+						<Skeleton className="w-24 h-24 sm:w-28 sm:h-28 rounded-full" />
-					<LazyLoadedImage
+					) : (
-						imgId={`AvatarHeadShot_${profile.id}`}
+						<LazyLoadedImage
-						alt=""
+							imgId={`AvatarHeadShot_${profile.id}`}
-						className={`w-28 h-28 rounded-full shadow-crust border-2 ${borderColor}`}
+							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-3xl font-bold text-text flex items-center gap-2">
+					<div className="flex flex-col justify-center">
-						{isLoaded ? (
+						<span className="text-2xl sm:text-3xl font-bold text-text flex flex-wrap items-center gap-2">
-							<Link href={`/users/${profile.id}`}>
+							{isLoaded ? (
-								{randomGreeting(
+								<Link href={`/users/${profile.id}`}>
-									preferredName ||
+									{randomGreeting(
-										profile.displayName ||
+										preferredName ||
-										"Robloxian!"
+											profile.displayName ||
-								)}
+											"Robloxian!"
-							</Link>
+									)}
-						) : (
+								</Link>
-							<>
+							) : (
-								<Skeleton className="w-96 h-8 rounded-lg" />
+								<Skeleton className="w-56 sm:w-96 h-7 sm:h-8 rounded-lg" />
-							</>
+							)}
-						)}
+							{!!accountSettings &&
-						{!!accountSettings &&
+							accountSettings.IsPremium === true ? (
-						accountSettings.IsPremium === true ? (
+								<RobloxPremiumSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-transparent" />
-							<RobloxPremiumSmall className="w-6 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}
-						{isLoaded ? (
+						</span>
-							<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
+						<span className="text-sm font-super-mono text-subtext0 mt-1">
-						) : (
+							{isLoaded ? (
-							<></>
+								<>
-						)}
+									@{profile.name}
-					</span>
+									{!!userActivity && userPresence === 2 ? (
-					<span className="text-base font-super-mono text-subtext0 mt-1">
+										<> - {userActivity.lastLocation}</>
-						{isLoaded ? (
+									) : null}
-							<>
+								</>
-								@{profile.name}
+							) : (
-								{!!userActivity && userPresence === 2 ? (
+								<Skeleton className="w-40 sm:w-64 h-5 sm:h-6 rounded-lg" />
-									<> - {userActivity.lastLocation}</>
+							)}
-								) : (
+						</span>
-									<></>
+					</div>
-								)}
-							</>
-						) : (
-							<Skeleton className="w-64 h-6 rounded-lg" />
-						)}
-					</span>
 				</div>
 			</div>
 		</>

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 { useEffect, useMemo, useState } from "react";
-import { X } from "lucide-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
+					<div className="flex items-center gap-2">
-						variant="ghost"
+						<div className="relative w-full sm:w-64">
-						size="icon"
+							<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtext1" />
-						onClick={() => setVisible(false)}
+							<Input
-						aria-label="Close outfit chooser"
+								value={query}
-					>
+								onChange={(event) =>
-						<X className="h-4 w-4" />
+									setQuery(event.target.value)
-					</Button>
+								}
+								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">
+						<div className="space-y-4">
-							{outfits.map((outfit: { id: number; name: string }) => (
+							<p className="text-xs text-subtext1">
-								<StupidHoverThing
+								{filteredOutfits.length} outfit
-									key={outfit.id}
+								{filteredOutfits.length === 1 ? "" : "s"}
-									delayDuration={0}
+							</p>
-									text={outfit.name}
+							<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(
-									<button
+									(outfit: { id: number; name: string }) => (
-										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"
+										<StupidHoverThing
-										onClick={async () => {
+											key={outfit.id}
-											await updateOutfit(outfit, acc);
+											delayDuration={0}
-											setVisible(false);
+											text={outfit.name}
-										}}
+										>
-										aria-label={`Wear ${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"
-										<LazyLoadedImage
+												onClick={async () => {
-											imgId={`Outfit_${outfit.id}`}
+													await updateOutfit(
-											alt={outfit.name}
+														outfit,
-											className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
+														acc
-											size="420x420"
+													);
-											lazyFetch={false}
+													setVisible(false);
-										/>
+												}}
-										<p className="mt-3 text-xs font-medium text-text line-clamp-2">
+												aria-label={`Wear ${outfit.name}`}
-											{outfit.name}
+											>
-										</p>
+												<LazyLoadedImage
-									</button>
+													imgId={`Outfit_${outfit.id}`}
-								</StupidHoverThing>
+													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,
+							No outfits found yet. Make one in the Roblox avatar
-							then come back here.
+							editor, then come back here.
 						</div>
 					)}
 				</div>

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`, {
+		await proxyFetch(
-			method: "POST"
+			`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}{" "}

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) {

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;
 }

components/ui/chart.tsx

@@ -102,15 +102,17 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-type ChartTooltipContentProps =
+type ChartTooltipContentProps = RechartsPrimitive.TooltipContentProps<
-	RechartsPrimitive.TooltipContentProps<number | string, string> &
+	number | string,
-		React.ComponentProps<"div"> & {
+	string
-			hideLabel?: boolean;
+> &
-			hideIndicator?: boolean;
+	React.ComponentProps<"div"> & {
-			indicator?: "line" | "dot" | "dashed";
+		hideLabel?: boolean;
-			nameKey?: string;
+		hideIndicator?: boolean;
-			labelKey?: string;
+		indicator?: "line" | "dot" | "dashed";
-		};
+		nameKey?: string;
+		labelKey?: string;
+	};
 
 const ChartTooltipContent = React.forwardRef<
 	HTMLDivElement,

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}

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<

hooks/roblox/useFriends.ts

@@ -6,9 +6,9 @@ import { proxyFetch } from "@/lib/utils";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import assert from "assert";
 
-export function useFriendsHome( targetId?: string ) {
+export function useFriendsHome(targetId?: string) {
 	const acct = useCurrentAccount();
-	const target = targetId || (acct ? acct.id : "acctId")
+	const target = targetId || (acct ? acct.id : "acctId");
 	const { data: friends } = useQuery({
 		queryKey: ["friends", target],
 		queryFn: async () => {
@@ -47,15 +47,20 @@ export function useFriendsHome( targetId?: string ) {
 					format: "webp"
 				}))
 			).catch(() => {});
-			const friendsList = j.data.map((a) => {
+			const friendsList = j.data
-				const x = j2.data.find((b) => b.id === a.id);
+				.map((a) => {
-				return !!x ? {
+					const x = j2.data.find((b) => b.id === a.id);
-					id: a.id,
+					return !!x
-					hasVerifiedBadge: x?.hasVerifiedBadge || false,
+						? {
-					name: x?.name || "?",
+								id: a.id,
-					displayName: x?.displayName || "?"
+								hasVerifiedBadge: x?.hasVerifiedBadge || false,
-				} : null;
+								name: x?.name || "?",
-			}).filter(a=>!!a).filter(a=>a.id.toString()!=="-1");
+								displayName: x?.displayName || "?"
+							}
+						: null;
+				})
+				.filter((a) => !!a)
+				.filter((a) => a.id.toString() !== "-1");
 			return friendsList;
 		},
 		enabled: !!acct,

hooks/roblox/usePlaceDetails.ts

@@ -18,14 +18,25 @@ type PlaceDetails = {
 	name: string;
 	description: string;
 	creator: Creator;
+	sourceName: string | null;
+	sourceDescription: string | null;
+	price: number | null;
+	allowedGearGenres: string[];
+	allowedGearCategories: string[];
+	isGenreEnforced: boolean;
+	copyingAllowed: boolean;
 	playing: number;
 	visits: number;
 	maxPlayers: number;
 	created: string;
 	updated: string;
+	studioAccessToApisAllowed: boolean;
+	createVipServersAllowed: boolean;
 	genre: string;
 	genre_l1?: string;
 	genre_l2?: string;
+	untranslated_genre_l1?: string;
+	isAllGenre?: boolean;
 	favoritedCount: number;
 	isFavoritedByUser: boolean;
 	universeAvatarType: string;

hooks/roblox/usePresence.ts

@@ -51,7 +51,7 @@ export function useFriendsPresence(userIds: number[]) {
 			// assert is shit
 			if (!res.ok) {
 				throw "wtf?";
-			};
+			}
 
 			const json = await res.json();
 

tailwind.config.ts

@@ -105,7 +105,5 @@ export default {
 			}
 		}
 	},
-	plugins: [
+	plugins: [require("tailwindcss-animate")]
-		require("tailwindcss-animate")
-	]
 } satisfies Config;

tsconfig.json

@@ -1,41 +1,33 @@
 {
-  "compilerOptions": {
+	"compilerOptions": {
-    "target": "ES2017",
+		"target": "ES2017",
-    "lib": [
+		"lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
+		"allowJs": true,
-      "dom.iterable",
+		"skipLibCheck": true,
-      "esnext"
+		"strict": true,
-    ],
+		"noEmit": true,
-    "allowJs": true,
+		"esModuleInterop": true,
-    "skipLibCheck": true,
+		"module": "esnext",
-    "strict": true,
+		"moduleResolution": "bundler",
-    "noEmit": true,
+		"resolveJsonModule": true,
-    "esModuleInterop": true,
+		"isolatedModules": true,
-    "module": "esnext",
+		"jsx": "react-jsx",
-    "moduleResolution": "bundler",
+		"incremental": true,
-    "resolveJsonModule": true,
+		"plugins": [
-    "isolatedModules": true,
+			{
-    "jsx": "react-jsx",
+				"name": "next"
-    "incremental": true,
+			}
-    "plugins": [
+		],
-      {
+		"paths": {
-        "name": "next"
+			"@/*": ["./*"]
-      }
+		}
-    ],
+	},
-    "paths": {
+	"include": [
-      "@/*": [
+		"next-env.d.ts",
-        "./*"
+		"**/*.ts",
-      ]
+		"**/*.tsx",
-    }
+		".next/types/**/*.ts",
-  },
+		".next/dev/types/**/*.ts"
-  "include": [
+	],
-    "next-env.d.ts",
+	"exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }