profile header n shit

app/layout.tsx

@@ -35,15 +35,14 @@ export default function RootLayout({
 				<ReactQueryProvider>
 					<TooltipProvider>
 						<main>
-							<Image
-								/* window.localStorage.BgImageUrl */
+							{/* <Image
 								src={"/bg.png"}
 								width={1920}
 								height={1080}
-								className="w-screen h-screen bg-blend-hard-light fixed top-0 left-0 blur-lg opacity-25"
+								className="w-screen h-screen bg-blend-hard-light fixed top-0 left-0 opacity-25"
 								alt=""
-							/>
-							<div className="z-10 isolate overflow-scroll no-scrollbar w-screen max-h-screen h-screen antialiased overflow-x-hidden">
+							/> */}
+							<div className="backdrop-blur-lg z-10 isolate overflow-scroll no-scrollbar w-screen max-h-screen h-screen antialiased overflow-x-hidden">
 								<QuickTopUI />
 								<QuickTopUILogoPart />
 								{children}

app/page.tsx

@@ -12,30 +12,40 @@ import {
 	getOmniRecommendationsHome,
 	OmniRecommendation
 } from "@/lib/omniRecommendation";
-import { loadThumbnails } from "@/lib/thumbnailLoader";
-import { useQuery } from "@tanstack/react-query";
+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];
+	const queryClient = useQueryClient();
 
-	const { data: rec } = useQuery({
+	const { data: rec, isLoading } = useQuery({
 		queryKey: ["omni-recommendations"],
 		queryFn: async () => {
 			const r = await getOmniRecommendationsHome();
 			if (r) {
-				loadThumbnails(
-					Object.entries(r.contentMetadata.Game).map((a) => ({
-						type: "GameThumbnail",
-						targetId: Number(a[1].rootPlaceId),
-						format: "webp",
-						size: "384x216"
-					}))
-				).catch((a) => {});
+				// Prefetch game thumbnails into React Query cache
+				const gameRequests: ThumbnailRequest[] = Object.entries(
+					r.contentMetadata.Game
+				).map(([_, g]) => ({
+					type: "GameThumbnail" as const,
+					targetId: Number(g.rootPlaceId),
+					format: "webp",
+					size: "384x216"
+				}));
+
+				await queryClient.prefetchQuery({
+					queryKey: [
+						"thumbnails",
+						gameRequests.map((r) => r.targetId)
+					],
+					queryFn: () => getThumbnails(gameRequests)
+				});
 			}
 			return r;
 		},
-		staleTime: 300000, // 5 minutes
+		staleTime: 1000 * 60 * 5, // 5 minutes
 		refetchOnWindowFocus: false
 	});
 
@@ -50,18 +60,19 @@ export default function Home() {
 					<AlertTriangleIcon />
 					<AlertTitle>Warning</AlertTitle>
 					<AlertDescription>
-						This is work in progess, you can follow the development
+						This is work in progress, you can follow the development
 						process on GitHub.
 					</AlertDescription>
 				</Alert>
 			</div>
+
 			<div className="p-4 space-y-8 no-scrollbar">
-				{!rec ? (
+				{isLoading || !rec ? (
 					<Card>
 						<CardContent className="p-4">
 							<div className="h-[200px] flex items-center justify-center">
 								<div className="animate-pulse text-muted-foreground">
-									{"Loading..."}
+									Loading...
 								</div>
 							</div>
 						</CardContent>

app/test/page.tsx

@@ -1,5 +0,0 @@
-"use client";
-
-export default function Page() {
-	return <>hi</>;
-}

app/users/[id]/content.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
+import { getUserByUserId } from "@/lib/profile";
+import { UserProfileHeader } from "@/components/roblox/UserProfileHeader";
+
+interface UserProfileContentProps {
+	userId: string;
+}
+
+export default function UserProfileContent({
+	userId
+}: UserProfileContentProps) {
+	const { data: profile, isLoading } = useQuery({
+		queryKey: ["user-profile", userId],
+		queryFn: () => getUserByUserId(userId),
+		enabled: !!userId
+	});
+
+	// Set dynamic document title
+	useEffect(() => {
+		if (profile?.displayName) {
+			document.title = `${profile.displayName}'s profile | ocbwoy3-chan's roblox`;
+		}
+	}, [profile]);
+
+	if (isLoading) return <div className="p-4">Loading user profile...</div>;
+	if (!profile) notFound();
+
+	return (
+		<div className="p-4 space-y-6">
+			<UserProfileHeader user={profile} />
+			<Separator />
+			<div className="break-all whitespace-normal">
+				{profile.description}
+			</div>
+		</div>
+	);
+}

app/users/[id]/page.tsx

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