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}
+						className="w-full h-full object-cover"
+						lazyFetch={false}
+						size="768x432"
+					/>
 				</div>
-			<div className="break-all pl-4 whitespace-pre-line font-bold flex">
+				<div className="flex flex-col gap-4">
-				<Link
+					<div className="space-y-2">
-					href={`https://roblox.com/${
+						<h1 className="text-2xl sm:text-3xl font-semibold text-text">
-						game.creator.type === "Group" ? "groups" : "user"
+							{game.name}
-					}/${game.creator.id}`}
+						</h1>
-					className="flex"
+						<div className="flex flex-wrap items-center gap-2 text-sm text-subtext1">
-				>
+							{!game.isAllGenre && (
-					<span className="underline">
+								<>
-						{game.creator.name}
+									{game.genre && game.genre !== "All" ? (
-					</span>
+										<Badge variant="secondary">
-						{game.creator.hasVerifiedBadge && (
+											{game.genre}
-							<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
+										</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}
+								</>
 							)}
-				</Link>
+							{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="break-all pl-4 whitespace-pre-line">
+					<div className="flex flex-wrap items-center gap-3">
-				{game.description}
+						<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="rounded-2xl border border-surface0/60 bg-base/40 p-6">
+				<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 {

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" />
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
 				<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 ? (
-							<Link href="https://flathub.org/en/apps/org.vinegarhq.Sober" target="_blank" rel="noopener noreferrer">
+						<Button
+							onClick={handleDownloadClick}
+							className="w-full rounded-full"
+						>
 							Download Roblox
-							</Link>
-						) : null}
-						{!launchTimeouted && <div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />}
 						</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",
@@ -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`}
@@ -136,7 +136,7 @@ export function FriendCarousel({
 											<span className="line-clamp-1 overflow-hidden text-ellipsis">
 												{a.displayName || a.name}
 											</span>
-										{!a.hasVerifiedBadge ? (
+											{a.hasVerifiedBadge ? (
 												<VerifiedIcon
 													className={`text-base ${fillColor} w-3 h-3 shrink-0`}
 												/>

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,11 +23,24 @@ 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 (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<ContextMenu>
 				<ContextMenuTrigger>
-				<div className="overflow-hidden aspect-video relative bg-muted rounded-2xl">
+					<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
@@ -44,40 +61,25 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 										</div>
 									)}
 								</div>
-					<div className="text-blue bg-base font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1">
+								<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>
-			</ContextMenuTrigger>
+							<div>
-			<ContextMenuContent className="max-w-[512px] p-2 space-y-1">
+								<p className="text-sm font-semibold text-text line-clamp-2">
-				<ContextMenuItem
-					disabled
-					className="text-s font-bold text-muted-foreground"
-				>
 									{game.name}
-				</ContextMenuItem>
+								</p>
-				<ContextMenuItem
+								<p className="text-xs text-subtext1">
-					disabled
+									{rating}% rating
-					className="text-xs text-subtext0 text-muted-foreground"
+								</p>
-				>
+							</div>
-					{Math.round(
+						</div>
-						(game.totalUpVotes /
+					</button>
-							(game.totalUpVotes + game.totalDownVotes)) *
+				</ContextMenuTrigger>
-							100
+				<ContextMenuContent className="min-w-[180px] p-1">
-					)}
-					% 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}`}>
+						<Link href={`/games/${game.rootPlaceId}`}>Open</Link>
-						Open
-					</Link>
 					</ContextMenuItem>
 					<ContextMenuItem
 						onClick={() => {
@@ -89,10 +91,12 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 					<ContextMenuSeparator />
 					<ContextMenuItem
 						onClick={() => {
-						navigator.clipboard.writeText(`${game.rootPlaceId}`);
+							navigator.clipboard.writeText(
+								`${game.rootPlaceId}`
+							);
 						}}
 					>
-					Copy rootPlaceId
+						Copy placeId
 					</ContextMenuItem>
 					<ContextMenuItem
 						onClick={() => {
@@ -103,5 +107,29 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 					</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>
+			</DialogContent>
+		</Dialog>
 	);
 });

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">
@@ -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 {
@@ -71,8 +70,9 @@ export function HomeLoggedInHeader() {
 	return (
 		<>
 			{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
+			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
 				<div
-				className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0"
+					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");
@@ -89,16 +89,16 @@ export function HomeLoggedInHeader() {
 					}}
 				>
 					{!isLoaded ? (
-					<Skeleton className="w-28 h-28 rounded-full" />
+						<Skeleton className="w-24 h-24 sm:w-28 sm:h-28 rounded-full" />
 					) : (
 						<LazyLoadedImage
 							imgId={`AvatarHeadShot_${profile.id}`}
 							alt=""
-						className={`w-28 h-28 rounded-full shadow-crust border-2 ${borderColor}`}
+							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">
+						<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(
@@ -108,38 +108,31 @@ export function HomeLoggedInHeader() {
 									)}
 								</Link>
 							) : (
-							<>
+								<Skeleton className="w-56 sm:w-96 h-7 sm:h-8 rounded-lg" />
-								<Skeleton className="w-96 h-8 rounded-lg" />
-							</>
 							)}
 							{!!accountSettings &&
 							accountSettings.IsPremium === true ? (
-							<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
+								<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" />
-						{isLoaded ? (
+							) : null}
-							<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
-						) : (
-							<></>
-						)}
 						</span>
-					<span className="text-base font-super-mono text-subtext0 mt-1">
+						<span className="text-sm font-super-mono text-subtext0 mt-1">
 							{isLoaded ? (
 								<>
 									@{profile.name}
 									{!!userActivity && userPresence === 2 ? (
 										<> - {userActivity.lastLocation}</>
-								) : (
+									) : null}
-									<></>
-								)}
 								</>
 							) : (
-							<Skeleton className="w-64 h-6 rounded-lg" />
+								<Skeleton className="w-40 sm:w-64 h-5 sm:h-6 rounded-lg" />
 							)}
 						</span>
 					</div>
 				</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,13 +67,27 @@ 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>
+					<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"
@@ -72,6 +97,7 @@ export function OutfitSelector({
 							<X className="h-4 w-4" />
 						</Button>
 					</div>
+				</div>
 
 				<div className="p-6">
 					{!acc ? (
@@ -91,8 +117,14 @@ export function OutfitSelector({
 							))}
 						</div>
 					) : hasOutfits ? (
+						<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">
-							{outfits.map((outfit: { id: number; name: string }) => (
+								{filteredOutfits.map(
+									(outfit: { id: number; name: string }) => (
 										<StupidHoverThing
 											key={outfit.id}
 											delayDuration={0}
@@ -101,7 +133,10 @@ export function OutfitSelector({
 											<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);
+													await updateOutfit(
+														outfit,
+														acc
+													);
 													setVisible(false);
 												}}
 												aria-label={`Wear ${outfit.name}`}
@@ -118,12 +153,19 @@ export function OutfitSelector({
 												</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(
+			`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,8 +102,10 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-type ChartTooltipContentProps =
+type ChartTooltipContentProps = RechartsPrimitive.TooltipContentProps<
-	RechartsPrimitive.TooltipContentProps<number | string, string> &
+	number | string,
+	string
+> &
 	React.ComponentProps<"div"> & {
 		hideLabel?: boolean;
 		hideIndicator?: boolean;

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
+				.map((a) => {
 					const x = j2.data.find((b) => b.id === a.id);
-				return !!x ? {
+					return !!x
+						? {
 								id: a.id,
 								hasVerifiedBadge: x?.hasVerifiedBadge || false,
 								name: x?.name || "?",
 								displayName: x?.displayName || "?"
-				} : null;
+							}
-			}).filter(a=>!!a).filter(a=>a.id.toString()!=="-1");
+						: 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,11 +1,7 @@
 {
 	"compilerOptions": {
 		"target": "ES2017",
-    "lib": [
+		"lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
 		"allowJs": true,
 		"skipLibCheck": true,
 		"strict": true,
@@ -23,9 +19,7 @@
 			}
 		],
 		"paths": {
-      "@/*": [
+			"@/*": ["./*"]
-        "./*"
-      ]
 		}
 	},
 	"include": [
@@ -35,7 +29,5 @@
 		".next/types/**/*.ts",
 		".next/dev/types/**/*.ts"
 	],
-  "exclude": [
+	"exclude": ["node_modules"]
-    "node_modules"
-  ]
 }