some roblox stuff again

2025-07-24 04:25:18 +03:00
parent e0217cbbcb
commit d1f925f298
35 changed files with 866 additions and 282 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -53,6 +53,16 @@ body {
 		--sidebar-border: 220 13% 91%;
 		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
+	.dark {
+		--sidebar-background: 240 5.9% 10%;
+		--sidebar-foreground: 240 4.8% 95.9%;
+		--sidebar-primary: 224.3 76.3% 48%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 240 3.7% 15.9%;
+		--sidebar-accent-foreground: 240 4.8% 95.9%;
+		--sidebar-border: 240 3.7% 15.9%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+	}
 }

@layer base {
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QuickTopUI } from "@/components/QuickTopUI";

 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app"
+	title: "OCbwoy3-Chan-blox",
+	description: "roblox meets next.js i think"
 };

 export default function RootLayout({
@@ -27,7 +29,10 @@ export default function RootLayout({
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>
-				{children}
+				<TooltipProvider>
+					<QuickTopUI />
+					{children}
+				</TooltipProvider>
 			</body>
 		</html>
 	);
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,13 +1,17 @@
 "use client";

+import { FriendsHomeSect } from "@/components/FriendsOnlineSection";
 import { GameCard } from "@/components/gameCard";
 import { HomeLoggedInHeader } from "@/components/loggedInHeader";
+import { VerifiedIcon } from "@/components/RobloxIcons";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Card, CardContent } from "@/components/ui/card";
 import {
 	getOmniRecommendationsHome,
 	OmniRecommendation
 } from "@/lib/omniRecommendation";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
+import { AlertTriangleIcon } from "lucide-react";
 import { useEffect, useState } from "react";

 export default function Home() {
@@ -16,21 +20,34 @@ export default function Home() {
 	useEffect(() => {
 		setTimeout(async () => {
 			const r = await getOmniRecommendationsHome();
-			setRec(r);
-			loadThumbnails(
-				Object.entries(r.contentMetadata.Game).map((a) => ({
-					type: "GameThumbnail",
-					targetId: Number(a[1].rootPlaceId),
-					format: "webp",
-					size: "384x216"
-				}))
-			).catch((a) => {});
+			if (r) {
+				setRec(r);
+				loadThumbnails(
+					Object.entries(r.contentMetadata.Game).map((a) => ({
+						type: "GameThumbnail",
+						targetId: Number(a[1].rootPlaceId),
+						format: "webp",
+						size: "384x216"
+					}))
+				).catch((a) => {});
+			}
 		}, 1000);
 	}, []);

 	return (
 		<div className="overflow-scroll no-scrollbar w-screen max-h-screen h-screen">
 			<HomeLoggedInHeader />
+			<FriendsHomeSect className="pt-8" />
+			<div className="justify-center w-screen px-8 pt-6">
+				<Alert variant="default" className="space-x-2">
+					<AlertTriangleIcon />
+					<AlertTitle>Warning</AlertTitle>
+					<AlertDescription>
+						This is work in progess, you can follow the development
+						process on GitHub.
+					</AlertDescription>
+				</Alert>
+			</div>
 			<div className="p-4 space-y-8 no-scrollbar">
 				{!rec ? (
 					<Card>
--- a/bun.lock
+++ b/bun.lock
@@ -5,54 +5,54 @@
      "name": "roblox",
      "dependencies": {
        "@catppuccin/tailwindcss": "^0.1.6",
-        "@hookform/resolvers": "^4.0.0",
-        "@radix-ui/react-accordion": "^1.2.3",
-        "@radix-ui/react-alert-dialog": "^1.1.6",
-        "@radix-ui/react-aspect-ratio": "^1.1.2",
-        "@radix-ui/react-avatar": "^1.1.3",
-        "@radix-ui/react-checkbox": "^1.1.4",
-        "@radix-ui/react-collapsible": "^1.1.3",
-        "@radix-ui/react-context-menu": "^2.2.6",
-        "@radix-ui/react-dialog": "^1.1.6",
-        "@radix-ui/react-dropdown-menu": "^2.1.6",
-        "@radix-ui/react-hover-card": "^1.1.6",
-        "@radix-ui/react-label": "^2.1.2",
-        "@radix-ui/react-menubar": "^1.1.6",
-        "@radix-ui/react-navigation-menu": "^1.2.5",
-        "@radix-ui/react-popover": "^1.1.6",
-        "@radix-ui/react-progress": "^1.1.2",
-        "@radix-ui/react-radio-group": "^1.2.3",
-        "@radix-ui/react-scroll-area": "^1.2.3",
-        "@radix-ui/react-select": "^2.1.6",
-        "@radix-ui/react-separator": "^1.1.2",
-        "@radix-ui/react-slider": "^1.2.3",
-        "@radix-ui/react-slot": "^1.1.2",
-        "@radix-ui/react-switch": "^1.1.3",
-        "@radix-ui/react-tabs": "^1.1.3",
+        "@hookform/resolvers": "^5.1.1",
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-aspect-ratio": "^1.1.7",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-context-menu": "^2.2.15",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.14",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-menubar": "^1.1.15",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.5",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.12",
        "@radix-ui/react-toast": "^1.2.6",
-        "@radix-ui/react-toggle": "^1.1.2",
-        "@radix-ui/react-toggle-group": "^1.1.2",
-        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-toggle": "^1.1.9",
+        "@radix-ui/react-toggle-group": "^1.1.10",
+        "@radix-ui/react-tooltip": "^1.2.7",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
-        "cmdk": "1.0.0",
+        "cmdk": "^1.1.1",
        "date-fns": "^4.1.0",
-        "embla-carousel-react": "^8.5.2",
+        "embla-carousel-react": "^8.6.0",
        "input-otp": "^1.4.2",
-        "lucide-react": "^0.475.0",
+        "lucide-react": "^0.525.0",
        "next": "15.1.6",
-        "next-themes": "^0.4.4",
+        "next-themes": "^0.4.6",
        "react": "^19.0.0",
-        "react-day-picker": "8.10.1",
+        "react-day-picker": "^9.8.0",
        "react-dom": "^19.0.0",
-        "react-hook-form": "^7.54.2",
-        "react-resizable-panels": "^2.1.7",
-        "recharts": "^2.15.1",
-        "sonner": "^1.7.4",
+        "react-hook-form": "^7.60.0",
+        "react-resizable-panels": "^3.0.3",
+        "recharts": "2.15.4",
+        "sonner": "^2.0.6",
        "tailwind-merge": "^3.0.1",
        "tailwindcss-animate": "^1.0.7",
        "vaul": "^1.1.2",
-        "zod": "^3.24.2",
+        "zod": "^4.0.5",
      },
      "devDependencies": {
        "@types/node": "^20",
@@ -71,6 +71,8 @@

    "@catppuccin/tailwindcss": ["@catppuccin/tailwindcss@0.1.6", "", { "peerDependencies": { "tailwindcss": ">=3.0.0" } }, "sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA=="],

+    "@date-fns/tz": ["@date-fns/tz@1.2.0", "", {}, "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="],
+
    "@emnapi/runtime": ["@emnapi/runtime@1.4.5", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg=="],

    "@floating-ui/core": ["@floating-ui/core@1.7.2", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw=="],
@@ -81,7 +83,7 @@

    "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],

-    "@hookform/resolvers": ["@hookform/resolvers@4.1.3", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.0.0" } }, "sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ=="],
+    "@hookform/resolvers": ["@hookform/resolvers@5.1.1", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-J/NVING3LMAEvexJkyTLjruSm7aOFx7QX21pzkiJfMoNG0wl5aFEjLTl7ay7IQb9EWY6AkrBy7tHL2Alijpdcg=="],

    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="],

@@ -331,7 +333,7 @@

    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],

-    "cmdk": ["cmdk@1.0.0", "", { "dependencies": { "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-primitive": "1.0.3" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q=="],
+    "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],

    "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],

@@ -373,6 +375,8 @@

    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],

+    "date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="],
+
    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],

    "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
@@ -455,7 +459,7 @@

    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],

-    "lucide-react": ["lucide-react@0.475.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg=="],
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],

    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],

@@ -515,7 +519,7 @@

    "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],

-    "react-day-picker": ["react-day-picker@8.10.1", "", { "peerDependencies": { "date-fns": "^2.28.0 || ^3.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA=="],
+    "react-day-picker": ["react-day-picker@9.8.0", "", { "dependencies": { "@date-fns/tz": "1.2.0", "date-fns": "4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ=="],

    "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],

@@ -527,7 +531,7 @@

    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],

-    "react-resizable-panels": ["react-resizable-panels@2.1.9", "", { "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ=="],
+    "react-resizable-panels": ["react-resizable-panels@3.0.3", "", { "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-7HA8THVBHTzhDK4ON0tvlGXyMAJN1zBeRpuyyremSikgYh2ku6ltD7tsGQOcXx4NKPrZtYCm/5CBr+dkruTGQw=="],

    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],

@@ -563,7 +567,7 @@

    "simple-swizzle": ["simple-swizzle@0.2.2", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg=="],

-    "sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],
+    "sonner": ["sonner@2.0.6", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q=="],

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

@@ -625,14 +629,10 @@

    "yaml": ["yaml@2.8.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ=="],

-    "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+    "zod": ["zod@4.0.5", "", {}, "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA=="],

    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

-    "cmdk/@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.0.5", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-context": "1.0.1", "@radix-ui/react-dismissable-layer": "1.0.5", "@radix-ui/react-focus-guards": "1.0.1", "@radix-ui/react-focus-scope": "1.0.4", "@radix-ui/react-id": "1.0.1", "@radix-ui/react-portal": "1.0.4", "@radix-ui/react-presence": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-slot": "1.0.2", "@radix-ui/react-use-controllable-state": "1.0.1", "aria-hidden": "^1.1.1", "react-remove-scroll": "2.5.5" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q=="],
-
-    "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.3", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g=="],
-
    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

    "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
@@ -651,50 +651,10 @@

    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "cmdk/@radix-ui/react-dialog/@radix-ui/primitive": ["@radix-ui/primitive@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" } }, "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-context": ["@radix-ui/react-context@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.0.5", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-use-callback-ref": "1.0.1", "@radix-ui/react-use-escape-keydown": "1.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.0.4", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-id": ["@radix-ui/react-id@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-portal": ["@radix-ui/react-portal@1.0.4", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-primitive": "1.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-presence": ["@radix-ui/react-presence@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA=="],
-
-    "cmdk/@radix-ui/react-dialog/react-remove-scroll": ["react-remove-scroll@2.5.5", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.3", "react-style-singleton": "^2.2.1", "tslib": "^2.1.0", "use-callback-ref": "^1.3.0", "use-sidecar": "^1.1.2" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw=="],
-
-    "cmdk/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg=="],
-
    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],

    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer/@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.0.3", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-scope/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-presence/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-use-controllable-state/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw=="],
  }
 }
--- a/components/FriendsOnlineSection.tsx
+++ b/components/FriendsOnlineSection.tsx
@@ -0,0 +1,56 @@
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { useFriendsHome } from "@/hooks/roblox/useFriendsHome";
+import LazyLoadedImage from "./lazyLoadedImage";
+import React from "react";
+import { VerifiedIcon } from "./RobloxIcons";
+
+export function FriendsHomeSect(
+	props: React.DetailedHTMLProps<
+		React.HTMLAttributes<HTMLDivElement>,
+		HTMLDivElement
+	>
+) {
+	const friends = useFriendsHome();
+	const acct = useCurrentAccount();
+
+	if (!friends) {
+		return <></>;
+	}
+
+	return (
+		<div {...props}>
+			<h1 className="text-2xl pb-2 pl-4">Friends</h1>
+			<div className="bg-base p-4 rounded-xl flex flex-col gap-2 px-4">
+				<div
+					className="flex items-center gap-4 overflow-x-auto pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
+					style={{
+						scrollSnapType: "x mandatory",
+						WebkitOverflowScrolling: "touch"
+					}}
+				>
+					<div className="w-8" />
+					{friends.map((a) => (
+						<div
+							key={a.id}
+							className="flex flex-col items-center min-w-[6.5rem]"
+							// style={{ scrollSnapAlign: "start" }}
+						>
+							<LazyLoadedImage
+								imgId={`AvatarHeadShot_${a.id}`}
+								alt={a.name}
+								className="w-24 h-24 rounded-full border-2 border-surface2 object-cover shadow"
+							/>
+							<span className="truncate text-xs text-text mt-1 text-center flex items-center justify-center gap-1">
+								{a.displayName || a.name}
+								{a.hasVerifiedBadge ? null : (
+									<VerifiedIcon className="text-base fill-blue w-3 h-3" />
+								)}
+							</span>
+						</div>
+					))}
+					<div className="w-8" />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/components/QuickTopUI.tsx
+++ b/components/QuickTopUI.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRobuxBalance } from "@/hooks/roblox/useRobuxBalance";
+import { RobuxIcon } from "./RobloxIcons";
+
+export function QuickTopUI() {
+	const robux = useRobuxBalance();
+	return (
+		<span className="z-50 absolute top-4 right-4 p-4 flex gap-4 items-center">
+			<img src="/icon-128.webp" className="-m-1 w-8 h-8" alt="" />
+			<span className="rounded-full bg-crust/50 flex items-center p-2">
+				<span className="px-2 font-sans text-blue text-xl flex items-center">
+					<RobuxIcon className="w-6 h-6" />
+					<p className="pl-1">{robux}</p>
+				</span>
+			</span>
+		</span>
+	);
+}
--- a/components/RobloxIcons.tsx
+++ b/components/RobloxIcons.tsx
@@ -12,7 +12,6 @@ export const PremiumIconSmall = (props: React.SVGProps<SVGSVGElement>) => (
 				<path d="M14,14V2H2V16a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14a2,2,0,0,1-2,2H8V14ZM12,6v6H8V10h2V6H6V16H4V4h8Z" />
 			</clipPath>
 		</defs>
-		<title>premium_small</title>
 		<g id="premium">
 			<g clipPath="url(#clip-path)">
 				<rect
@@ -27,7 +26,10 @@ export const PremiumIconSmall = (props: React.SVGProps<SVGSVGElement>) => (
 	</svg>
 );

-export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
+export const VerifiedIcon = ({
+	useDefault,
+	...props
+}: React.SVGProps<SVGSVGElement> & { useDefault?: boolean }) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="28"
@@ -42,13 +44,13 @@ export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
 				width="22.89"
 				height="22.89"
 				transform="rotate(15 5.88818 0)"
-				fill="currentFill" /* #0066FF */
+				fill={useDefault ? "#0066FF" : "currentFill"} /* #0066FF */
 			/>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M20.543 8.7508L20.549 8.7568C21.15 9.3578 21.15 10.3318 20.549 10.9328L11.817 19.6648L7.45 15.2968C6.85 14.6958 6.85 13.7218 7.45 13.1218L7.457 13.1148C8.058 12.5138 9.031 12.5138 9.633 13.1148L11.817 15.2998L18.367 8.7508C18.968 8.1498 19.942 8.1498 20.543 8.7508Z"
-				fill="currentColor"  /* white */
+				fill={useDefault ? "white" : "currentColor"} /* white */
 			/>
 		</g>
 		<defs>
@@ -58,3 +60,38 @@ export const VerifiedIcon = (props: React.SVGProps<SVGSVGElement>) => (
 		</defs>
 	</svg>
 );
+
+export const RobuxIcon = (props: React.SVGProps<SVGSVGElement>) => (
+	<svg
+		width="28"
+		height="28"
+		viewBox="0 0 28 28"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<g id="robux_28_dark">
+			<path
+				d="M23.402,5.571 C25.009,6.499 26,8.215 26,10.071 L26,17.927 C26,19.784 25.009,21.499 23.402,22.427 L16.597,26.356 C14.99,27.284 13.009,27.284 11.402,26.356 L4.597,22.427 C2.99,21.499 2,19.784 2,17.927 L2,10.071 C2,8.215 2.99,6.499 4.597,5.571 L11.402,1.643 C13.009,0.715 14.99,0.715 16.597,1.643 L23.402,5.571 Z M12.313,3.426 L5.686,7.252 C4.642,7.855 4,8.968 4,10.174 L4,17.825 C4,19.03 4.642,20.144 5.686,20.747 L12.313,24.572 C13.357,25.175 14.642,25.175 15.686,24.572 L22.313,20.747 C23.357,20.144 24,19.03 24,17.825 L24,10.174 C24,8.968 23.357,7.855 22.313,7.252 L15.686,3.426 C14.642,2.823 13.357,2.823 12.313,3.426 L12.313,3.426 Z M15.385,5.564 L20.614,8.582 C21.471,9.077 22,9.992 22,10.983 L22,17.02 C22,18.01 21.471,18.925 20.614,19.42 L15.385,22.439 C14.528,22.934 13.471,22.934 12.614,22.439 L7.385,19.42 C6.528,18.925 6,18.01 6,17.02 L6,10.983 C6,9.992 6.528,9.077 7.385,8.582 L12.614,5.564 C13.471,5.069 14.528,5.069 15.385,5.564 L15.385,5.564 Z M11,17.001 L17,17.001 L17,11.001 L11,11.001 L11,17.001 Z"
+				id="Fill-1"
+				fill="currentColor"
+			></path>
+			<path
+				d="M51.402,5.571 C53.009,6.499 54,8.215 54,10.071 L54,17.927 C54,19.784 53.009,21.499 51.402,22.427 L44.597,26.356 C42.99,27.284 41.009,27.284 39.402,26.356 L32.597,22.427 C30.99,21.499 30,19.784 30,17.927 L30,10.071 C30,8.215 30.99,6.499 32.597,5.571 L39.402,1.643 C41.009,0.715 42.99,0.715 44.597,1.643 L51.402,5.571 Z M40.313,3.426 L33.686,7.252 C32.642,7.855 32,8.968 32,10.174 L32,17.825 C32,19.03 32.642,20.144 33.686,20.747 L40.313,24.572 C41.357,25.175 42.642,25.175 43.686,24.572 L50.313,20.747 C51.357,20.144 52,19.03 52,17.825 L52,10.174 C52,8.968 51.357,7.855 50.313,7.252 L43.686,3.426 C42.642,2.823 41.357,2.823 40.313,3.426 L40.313,3.426 Z M43.385,5.564 L48.614,8.582 C49.471,9.077 50,9.992 50,10.983 L50,17.02 C50,18.01 49.471,18.925 48.614,19.42 L43.385,22.439 C42.528,22.934 41.471,22.934 40.614,22.439 L35.385,19.42 C34.528,18.925 34,18.01 34,17.02 L34,10.983 C34,9.992 34.528,9.077 35.385,8.582 L40.614,5.564 C41.471,5.069 42.528,5.069 43.385,5.564 L43.385,5.564 Z M39,17.001 L45,17.001 L45,11.001 L39,11.001 L39,17.001 Z"
+				id="Fill-1"
+				fillOpacity="0.7"
+				fill="currentColor"
+			></path>
+			<g id="Fill-1-Copy-2" transform="matrix(1, 0, 0, 1, 0, -0.5)">
+				<use fill="black" fillOpacity="1" filter="url(#filter-3)"></use>
+				<use fill="url(#linearGradient-1)" fillRule="evenodd"></use>
+				<use fill="black" fillOpacity="1" filter="url(#filter-4)"></use>
+			</g>
+			<path
+				d="M23.402,61.574 C25.009,62.502 26,64.218 26,66.074 L26,73.93 C26,75.787 25.009,77.502 23.402,78.43 L16.597,82.359 C14.99,83.287 13.009,83.287 11.402,82.359 L4.597,78.43 C2.99,77.502 2,75.787 2,73.93 L2,66.074 C2,64.218 2.99,62.502 4.597,61.574 L11.402,57.646 C13.009,56.718 14.99,56.718 16.597,57.646 L23.402,61.574 Z M12.313,59.429 L5.686,63.255 C4.642,63.858 4,64.971 4,66.177 L4,73.828 C4,75.033 4.642,76.147 5.686,76.75 L12.313,80.575 C13.357,81.178 14.642,81.178 15.686,80.575 L22.313,76.75 C23.357,76.147 24,75.033 24,73.828 L24,66.177 C24,64.971 23.357,63.858 22.313,63.255 L15.686,59.429 C14.642,58.826 13.357,58.826 12.313,59.429 L12.313,59.429 Z M15.385,61.567 L20.614,64.585 C21.471,65.08 22,65.995 22,66.986 L22,73.023 C22,74.013 21.471,74.928 20.614,75.423 L15.385,78.442 C14.528,78.937 13.471,78.937 12.614,78.442 L7.385,75.423 C6.528,74.928 6,74.013 6,73.023 L6,66.986 C6,65.995 6.528,65.08 7.385,64.585 L12.614,61.567 C13.471,61.072 14.528,61.072 15.385,61.567 L15.385,61.567 Z M11,73.004 L17,73.004 L17,67.004 L11,67.004 L11,73.004 Z"
+				id="Fill-1-Copy-2"
+				fill="currentColor"
+			></path>
+		</g>
+	</svg>
+);
--- a/components/RobloxTooltipStuff.tsx
+++ b/components/RobloxTooltipStuff.tsx
@@ -0,0 +1,35 @@
+import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "./ui/tooltip";
+
+export function RobloxPremiumSmall(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<PremiumIconSmall {...props} />
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<p className="text-sm">Roblox Premium</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+export function RobloxVerifiedSmall(
+	props: React.SVGProps<SVGSVGElement> & { useDefault?: boolean }
+) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<VerifiedIcon {...props} />
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<p className="text-sm">Verified user</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
--- a/components/lazyLoadedImage.tsx
+++ b/components/lazyLoadedImage.tsx
@@ -9,15 +9,23 @@ interface LazyLoadedImageProps {
 	[prop: string]: string;
 }

-const LazyLoadedImage: React.FC<
-	LazyLoadedImageProps
-> = ({ imgId, alt, ...props }) => {
+const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({
+	imgId,
+	alt,
+	...props
+}) => {
 	const imgUrl = useThumbnailURL(imgId);

 	return (
 		<div>
 			{imgUrl ? (
-				<Image src={imgUrl as any} width={1024} height={1024} alt={alt} {...props} />
+				<Image
+					src={imgUrl as any}
+					width={1024}
+					height={1024}
+					alt={alt}
+					{...props}
+				/>
 			) : (
 				<Skeleton {...props} />
 			)}
--- a/components/loggedInHeader.tsx
+++ b/components/loggedInHeader.tsx
@@ -1,57 +1,65 @@
 "use client";

-import {
-	getLoggedInUser,
-	getUserByUserId,
-	UserProfileDetails
-} from "@/lib/profile";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import LazyLoadedImage from "./lazyLoadedImage";
-import { loadThumbnails } from "@/lib/thumbnailLoader";
-import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { OctagonXIcon } from "lucide-react";
+import { RobloxPremiumSmall, RobloxVerifiedSmall } from "./RobloxTooltipStuff";
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { Skeleton } from "./ui/skeleton";

-export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
-	const [profileDetails, setProfileDetails] =
-		useState<UserProfileDetails | null>(null);
+export function HomeLoggedInHeader() {
+	const profile = useCurrentAccount();

-	useEffect(() => {
-		(async () => {
-			const authed = await getLoggedInUser();
-			setProfileDetails(await getUserByUserId(authed.id.toString()));
-		})();
-	}, []);
-
-	if (!profileDetails) {
-		return <></>;
+	if (profile === false) {
+		return (
+			<div className="justify-center w-screen px-8 py-6">
+				<Alert variant="destructive" className="space-x-2">
+					<OctagonXIcon />
+					<AlertTitle>Failed to fetch account info</AlertTitle>
+					<AlertDescription>
+						Please make sure <code>.ROBLOSECURITY</code> is set! Is
+						Roblox having an outage?
+					</AlertDescription>
+				</Alert>
+			</div>
+		);
 	}

-	loadThumbnails([
-		{
-			type: "AvatarHeadShot",
-			targetId: profileDetails.id,
-			format: "webp",
-			size: "720x720"
-		}
-	]).catch((a) => {});
-
 	return (
-		<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
-			<LazyLoadedImage
-				imgId={`AvatarHeadShot_${profileDetails.id}`}
-				alt=""
-				className="w-28 h-28 rounded-full shadow-2xl"
-			/>
-			<div className="flex flex-col justify-center">
-				<span className="text-3xl font-bold text-text flex items-center gap-2">
-					Hello, {profileDetails.displayName}
-					{/* TODO: Fetch the User's Roblox Premium subscription state */}
-					<PremiumIconSmall className="w-6 h-6 fill-transparent" />
-					<VerifiedIcon className="w-6 h-6 fill-blue text-base" />
-				</span>
-				<span className="text-base font-mono text-subtext0 mt-1">
-					@{profileDetails.name}
-				</span>
+		<>
+			<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
+				{!profile ? (
+					<Skeleton className="w-28 h-28 rounded-full" />
+				) : (
+					<LazyLoadedImage
+						imgId={`AvatarHeadShot_${profile.id}`}
+						alt=""
+						className="w-28 h-28 rounded-full shadow-crust"
+					/>
+				)}
+				<div className="flex flex-col justify-center">
+					<span className="text-3xl font-bold text-text flex items-center gap-2">
+						{profile ? (
+							<>Hello, {profile.displayName}</>
+						) : (
+							<>
+								<Skeleton className="w-96 h-8 rounded-lg" />
+							</>
+						)}
+						{/* TODO: Fetch the User's Roblox Premium subscription state */}
+						<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
+						<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
+					</span>
+					<span className="text-base font-mono text-subtext0 mt-1">
+						{profile ? (
+							<>@{profile.name}</>
+						) : (
+							<Skeleton className="w-64 h-6 rounded-lg" />
+						)}
+					</span>
+				</div>
 			</div>
-		</div>
+		</>
 	);
-});
+}
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,82 +1,228 @@
 "use client";

 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import {
+	ChevronDownIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";

 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+import { Button, buttonVariants } from "@/components/ui/button";

 function Calendar({
 	className,
 	classNames,
 	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
 	...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
 	return (
 		<DayPicker
 			showOutsideDays={showOutsideDays}
-			className={cn("p-3", className)}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString("default", { month: "short" }),
+				...formatters
+			}}
 			classNames={{
-				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-				month: "space-y-4",
-				caption: "flex justify-center pt-1 relative items-center",
-				caption_label: "text-sm font-medium",
-				nav: "space-x-1 flex items-center",
-				nav_button: cn(
-					buttonVariants({ variant: "outline" }),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"relative flex flex-col gap-4 md:flex-row",
+					defaultClassNames.months
 				),
-				nav_button_previous: "absolute left-1",
-				nav_button_next: "absolute right-1",
-				table: "w-full border-collapse space-y-1",
-				head_row: "flex",
-				head_cell:
-					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-				row: "flex w-full mt-2",
-				cell: cn(
-					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-					props.mode === "range"
-						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-						: "[&:has([aria-selected])]:rounded-md"
+				month: cn(
+					"flex w-full flex-col gap-4",
+					defaultClassNames.month
+				),
+				nav: cn(
+					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+					defaultClassNames.nav
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_previous
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_next
+				),
+				month_caption: cn(
+					"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+					defaultClassNames.month_caption
+				),
+				dropdowns: cn(
+					"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+					defaultClassNames.dropdowns
+				),
+				dropdown_root: cn(
+					"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+					defaultClassNames.dropdown_root
+				),
+				dropdown: cn(
+					"bg-popover absolute inset-0 opacity-0",
+					defaultClassNames.dropdown
+				),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+					defaultClassNames.caption_label
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+					defaultClassNames.weekday
+				),
+				week: cn("mt-2 flex w-full", defaultClassNames.week),
+				week_number_header: cn(
+					"w-[--cell-size] select-none",
+					defaultClassNames.week_number_header
+				),
+				week_number: cn(
+					"text-muted-foreground select-none text-[0.8rem]",
+					defaultClassNames.week_number
 				),
 				day: cn(
-					buttonVariants({ variant: "ghost" }),
-					"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+					"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+					defaultClassNames.day
 				),
-				day_range_start: "day-range-start",
-				day_range_end: "day-range-end",
-				day_selected:
-					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-				day_today: "bg-accent text-accent-foreground",
-				day_outside:
-					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-				day_disabled: "text-muted-foreground opacity-50",
-				day_range_middle:
-					"aria-selected:bg-accent aria-selected:text-accent-foreground",
-				day_hidden: "invisible",
+				range_start: cn(
+					"bg-accent rounded-l-md",
+					defaultClassNames.range_start
+				),
+				range_middle: cn(
+					"rounded-none",
+					defaultClassNames.range_middle
+				),
+				range_end: cn(
+					"bg-accent rounded-r-md",
+					defaultClassNames.range_end
+				),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
 				...classNames
 			}}
 			components={{
-				IconLeft: ({ className, ...props }) => (
-					<ChevronLeft
-						className={cn("h-4 w-4", className)}
-						{...props}
-					/>
-				),
-				IconRight: ({ className, ...props }) => (
-					<ChevronRight
-						className={cn("h-4 w-4", className)}
-						{...props}
-					/>
-				)
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<ChevronLeftIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					if (orientation === "right") {
+						return (
+							<ChevronRightIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					return (
+						<ChevronDownIcon
+							className={cn("size-4", className)}
+							{...props}
+						/>
+					);
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-[--cell-size] items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components
 			}}
 			{...props}
 		/>
 	);
 }
-Calendar.displayName = "Calendar";

-export { Calendar };
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -139,7 +139,7 @@ const ChartTooltipContent = React.forwardRef<
 			}

 			const [item] = payload;
-			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+			const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
 			const itemConfig = getPayloadConfigFromPayload(config, item, key);
 			const value =
 				!labelKey && typeof label === "string"
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
 	<ContextMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
 		<ContextMenuPrimitive.Content
 			ref={ref}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 			inset && "pl-8",
 			className
 		)}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -5,11 +5,11 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
 	Controller,
-	ControllerProps,
-	FieldPath,
-	FieldValues,
 	FormProvider,
-	useFormContext
+	useFormContext,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues
 } from "react-hook-form";

 import { cn } from "@/lib/utils";
@@ -148,7 +148,7 @@ const FormMessage = React.forwardRef<
 	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
 	const { error, formMessageId } = useFormField();
-	const body = error ? String(error?.message) : children;
+	const body = error ? String(error?.message ?? "") : children;

 	if (!body) {
 		return null;
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
 			className
 		)}
 		{...props}
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -94,7 +94,7 @@ const MenubarSubContent = React.forwardRef<
 	<MenubarPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
 			className
 		)}
 		{...props}
@@ -123,7 +123,7 @@ const MenubarContent = React.forwardRef<
 				alignOffset={alignOffset}
 				sideOffset={sideOffset}
 				className={cn(
-					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
 					className
 				)}
 				{...props}
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;

 const navigationMenuTriggerStyle = cva(
-	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 );

 const NavigationMenuTrigger = React.forwardRef<
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+			className
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className
 		)}
 		{...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
 				position === "popper" &&
 					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 				className
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -10,7 +10,13 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
@@ -26,7 +32,7 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";

-type SidebarContext = {
+type SidebarContextProps = {
 	state: "expanded" | "collapsed";
 	open: boolean;
 	setOpen: (open: boolean) => void;
@@ -36,7 +42,7 @@ type SidebarContext = {
 	toggleSidebar: () => void;
 };

-const SidebarContext = React.createContext<SidebarContext | null>(null);
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);

 function useSidebar() {
 	const context = React.useContext(SidebarContext);
@@ -117,7 +123,7 @@ const SidebarProvider = React.forwardRef<
 		// This makes it easier to style the sidebar with Tailwind classes.
 		const state = open ? "expanded" : "collapsed";

-		const contextValue = React.useMemo<SidebarContext>(
+		const contextValue = React.useMemo<SidebarContextProps>(
 			() => ({
 				state,
 				open,
@@ -219,6 +225,12 @@ const Sidebar = React.forwardRef<
 						}
 						side={side}
 					>
+						<SheetHeader className="sr-only">
+							<SheetTitle>Sidebar</SheetTitle>
+							<SheetDescription>
+								Displays the mobile sidebar.
+							</SheetDescription>
+						</SheetHeader>
 						<div className="flex h-full w-full flex-col">
 							{children}
 						</div>
@@ -239,7 +251,7 @@ const Sidebar = React.forwardRef<
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
-						"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+						"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
 						"group-data-[collapsible=offcanvas]:w-0",
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
@@ -337,8 +349,8 @@ const SidebarInset = React.forwardRef<
 		<main
 			ref={ref}
 			className={cn(
-				"relative flex min-h-svh flex-1 flex-col bg-background",
-				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				"relative flex w-full flex-1 flex-col bg-background",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
 				className
 			)}
 			{...props}
@@ -457,7 +469,7 @@ const SidebarGroupLabel = React.forwardRef<
 			ref={ref}
 			data-sidebar="group-label"
 			className={cn(
-				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 				className
 			)}
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
 				className
 			)}
 			{...props}
--- a/hooks/roblox/useCurrentAccount.ts
+++ b/hooks/roblox/useCurrentAccount.ts
@@ -0,0 +1,61 @@
+"use client";
+
+import {
+	getLoggedInUser,
+	getUserByUserId,
+	UserProfileDetails
+} from "@/lib/profile";
+import { loadThumbnails } from "@/lib/thumbnailLoader";
+import { useEffect, useState } from "react";
+
+let isFetching = false;
+let cachedData: any = null;
+
+export function useCurrentAccount() {
+	const [profileDetails, setProfileDetails] = useState<
+		UserProfileDetails | null | false
+	>(cachedData);
+
+	useEffect(() => {
+		let cancelled = false;
+		if (profileDetails !== null) return;
+		if (isFetching) {
+			const IN = setInterval(() => {
+				if (cachedData !== null) {
+					if (!cancelled) setProfileDetails(cachedData);
+					clearInterval(IN);
+				}
+			}, 50);
+			return () => {
+				clearInterval(IN);
+				cancelled = true;
+			};
+		}
+		isFetching = true;
+		(async () => {
+			const authed = await getLoggedInUser();
+			if (authed) {
+				const user = await getUserByUserId(authed.id.toString());
+				if (!cancelled) setProfileDetails(user);
+				cachedData = user;
+				loadThumbnails([
+					{
+						type: "AvatarHeadShot",
+						targetId: authed.id,
+						format: "webp",
+						size: "720x720"
+					}
+				]).catch(() => {});
+			} else {
+				if (!cancelled) setProfileDetails(false);
+				cachedData = false;
+			}
+			isFetching = false;
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [profileDetails]);
+
+	return profileDetails;
+}
--- a/hooks/roblox/useFriendsHome.ts
+++ b/hooks/roblox/useFriendsHome.ts
@@ -0,0 +1,94 @@
+"use client";
+
+// https://friends.roblox.com/v1/users/1083030325/friends/find?userSort=1
+
+import { useEffect, useState } from "react";
+import { useCurrentAccount } from "./useCurrentAccount";
+import { proxyFetch } from "@/lib/utils";
+import { loadThumbnails } from "@/lib/thumbnailLoader";
+
+let isFetching = false;
+let cachedData: any = null;
+
+export function useFriendsHome() {
+	const acct = useCurrentAccount();
+	const [friends, setFriends] = useState<
+		| {
+				hasVerifiedBadge: boolean;
+				id: number;
+				name: string;
+				displayName: string;
+		  }[]
+		| null
+		| false
+	>(cachedData);
+
+	useEffect(() => {
+		let cancelled = false;
+		if (!acct) return;
+		if (isFetching) {
+			const IN = setInterval(() => {
+				if (cachedData !== null) {
+					if (!cancelled) setFriends(cachedData);
+					clearInterval(IN);
+				}
+			}, 50);
+			return () => {
+				clearInterval(IN);
+				cancelled = true;
+			};
+		}
+		isFetching = true;
+		(async () => {
+			const friendsAPICall = await proxyFetch(
+				`https://friends.roblox.com/v1/users/${acct.id}/friends/find?userSort=1`
+			);
+			const J = (await friendsAPICall.json()) as {
+				PageItems: { id: number }[];
+			};
+			const friendsAPICall2 = await proxyFetch(
+				`https://users.roblox.com/v1/users`,
+				{
+					method: "POST",
+					body: JSON.stringify({
+						userIds: J.PageItems.map((a) => a.id),
+						excludeBannedUsers: false
+					})
+				}
+			);
+			const J2 = (await friendsAPICall2.json()) as {
+				data: {
+					hasVerifiedBadge: boolean;
+					id: number;
+					name: string;
+					displayName: string;
+				}[];
+			};
+			loadThumbnails(
+				J2.data.map((a) => ({
+					type: "AvatarHeadShot",
+					size: "420x420",
+					targetId: a.id,
+					format: "webp"
+				}))
+			).catch(() => {});
+			const friendsList = J.PageItems.map((a) => {
+				const x = J2.data.find((b) => b.id === a.id);
+				return {
+					id: a.id,
+					hasVerifiedBadge: x?.hasVerifiedBadge || false,
+					name: x?.name || "?",
+					displayName: x?.displayName || "?"
+				};
+			});
+			if (!cancelled) setFriends(friendsList);
+			cachedData = friendsList;
+			isFetching = false;
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [acct]);
+
+	return friends;
+}
--- a/hooks/roblox/useRobuxBalance.ts
+++ b/hooks/roblox/useRobuxBalance.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCurrentAccount } from "./useCurrentAccount";
+import { proxyFetch } from "@/lib/utils";
+
+let isFetching = false;
+let cachedData: number | false | null = null;
+
+export function useRobuxBalance() {
+	const acct = useCurrentAccount();
+	const [robux, setRobux] = useState<number | false | null>(cachedData);
+
+	useEffect(() => {
+		let cancelled = false;
+		if (!acct) return;
+
+		async function fetchBalance() {
+			if (isFetching) return;
+			if (!acct) return;
+			isFetching = true;
+			try {
+				const res = await proxyFetch(
+					`https://economy.roblox.com/v1/users/${acct.id}/currency`
+				);
+				const data = await res.json();
+				if (!cancelled) setRobux(data.robux);
+				cachedData = data.robux;
+			} catch {
+				if (!cancelled) setRobux(false);
+				cachedData = false;
+			} finally {
+				isFetching = false;
+			}
+		}
+
+		fetchBalance();
+
+		function handleTransaction() {
+			fetchBalance();
+		}
+
+		window.addEventListener("transactionCompletedEvent", handleTransaction);
+
+		return () => {
+			cancelled = true;
+			window.removeEventListener(
+				"transactionCompletedEvent",
+				handleTransaction
+			);
+		};
+	}, [acct]);
+
+	return robux;
+}
--- a/lib/omniRecommendation.ts
+++ b/lib/omniRecommendation.ts
@@ -58,7 +58,7 @@ export type OmniRecommendation = {
 	sorts: RecommendationSort[];
 };

-export async function getOmniRecommendationsHome(): Promise<OmniRecommendation> {
+export async function getOmniRecommendationsHome(): Promise<OmniRecommendation | null> {
 	const data = await proxyFetch(
 		`https://apis.roblox.com/discovery-api/omni-recommendation`,
 		{
@@ -77,7 +77,11 @@ export async function getOmniRecommendationsHome(): Promise<OmniRecommendation>
 			}
 		}
 	);
-	return (await data.json()) as OmniRecommendation;
+	const J = await data.json();
+	if (J.errors) {
+		return null;
+	}
+	return J as OmniRecommendation;
 }

 // https://apis.roblox.com/discovery-api/omni-recommendation
--- a/lib/profile.ts
+++ b/lib/profile.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { proxyFetch } from "./utils";

 export type UserProfileDetails = {
@@ -15,7 +17,7 @@ export async function getLoggedInUser(): Promise<{
 	id: number;
 	name: string;
 	displayName: string;
-}> {
+} | null> {
 	const data = await proxyFetch(
 		`https://users.roblox.com/v1/users/authenticated`,
 		{
@@ -25,7 +27,11 @@ export async function getLoggedInUser(): Promise<{
 			}
 		}
 	);
-	return (await data.json()) as any as {
+	const J = await data.json();
+	if (J.errors) {
+		return null;
+	}
+	return J as any as {
 		id: number;
 		name: string;
 		displayName: string;
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";

--- a/next.config.ts
+++ b/next.config.ts
@@ -11,9 +11,9 @@ const nextConfig: NextConfig = {
 			{
 				protocol: "http",
 				hostname: "**"
-			},
-		],
-	},
+			}
+		]
+	}
 };

 export default nextConfig;
--- a/package.json
+++ b/package.json
@@ -10,54 +10,54 @@
 	},
 	"dependencies": {
 		"@catppuccin/tailwindcss": "^0.1.6",
-		"@hookform/resolvers": "^4.0.0",
-		"@radix-ui/react-accordion": "^1.2.3",
-		"@radix-ui/react-alert-dialog": "^1.1.6",
-		"@radix-ui/react-aspect-ratio": "^1.1.2",
-		"@radix-ui/react-avatar": "^1.1.3",
-		"@radix-ui/react-checkbox": "^1.1.4",
-		"@radix-ui/react-collapsible": "^1.1.3",
-		"@radix-ui/react-context-menu": "^2.2.6",
-		"@radix-ui/react-dialog": "^1.1.6",
-		"@radix-ui/react-dropdown-menu": "^2.1.6",
-		"@radix-ui/react-hover-card": "^1.1.6",
-		"@radix-ui/react-label": "^2.1.2",
-		"@radix-ui/react-menubar": "^1.1.6",
-		"@radix-ui/react-navigation-menu": "^1.2.5",
-		"@radix-ui/react-popover": "^1.1.6",
-		"@radix-ui/react-progress": "^1.1.2",
-		"@radix-ui/react-radio-group": "^1.2.3",
-		"@radix-ui/react-scroll-area": "^1.2.3",
-		"@radix-ui/react-select": "^2.1.6",
-		"@radix-ui/react-separator": "^1.1.2",
-		"@radix-ui/react-slider": "^1.2.3",
-		"@radix-ui/react-slot": "^1.1.2",
-		"@radix-ui/react-switch": "^1.1.3",
-		"@radix-ui/react-tabs": "^1.1.3",
+		"@hookform/resolvers": "^5.1.1",
+		"@radix-ui/react-accordion": "^1.2.11",
+		"@radix-ui/react-alert-dialog": "^1.1.14",
+		"@radix-ui/react-aspect-ratio": "^1.1.7",
+		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-collapsible": "^1.1.11",
+		"@radix-ui/react-context-menu": "^2.2.15",
+		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-hover-card": "^1.1.14",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-menubar": "^1.1.15",
+		"@radix-ui/react-navigation-menu": "^1.2.13",
+		"@radix-ui/react-popover": "^1.1.14",
+		"@radix-ui/react-progress": "^1.1.7",
+		"@radix-ui/react-radio-group": "^1.3.7",
+		"@radix-ui/react-scroll-area": "^1.2.9",
+		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-separator": "^1.1.7",
+		"@radix-ui/react-slider": "^1.3.5",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-switch": "^1.2.5",
+		"@radix-ui/react-tabs": "^1.1.12",
 		"@radix-ui/react-toast": "^1.2.6",
-		"@radix-ui/react-toggle": "^1.1.2",
-		"@radix-ui/react-toggle-group": "^1.1.2",
-		"@radix-ui/react-tooltip": "^1.1.8",
+		"@radix-ui/react-toggle": "^1.1.9",
+		"@radix-ui/react-toggle-group": "^1.1.10",
+		"@radix-ui/react-tooltip": "^1.2.7",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"cmdk": "1.0.0",
+		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
-		"embla-carousel-react": "^8.5.2",
+		"embla-carousel-react": "^8.6.0",
 		"input-otp": "^1.4.2",
-		"lucide-react": "^0.475.0",
+		"lucide-react": "^0.525.0",
 		"next": "15.1.6",
-		"next-themes": "^0.4.4",
+		"next-themes": "^0.4.6",
 		"react": "^19.0.0",
-		"react-day-picker": "8.10.1",
+		"react-day-picker": "^9.8.0",
 		"react-dom": "^19.0.0",
-		"react-hook-form": "^7.54.2",
-		"react-resizable-panels": "^2.1.7",
-		"recharts": "^2.15.1",
-		"sonner": "^1.7.4",
+		"react-hook-form": "^7.60.0",
+		"react-resizable-panels": "^3.0.3",
+		"recharts": "2.15.4",
+		"sonner": "^2.0.6",
 		"tailwind-merge": "^3.0.1",
 		"tailwindcss-animate": "^1.0.7",
 		"vaul": "^1.1.2",
-		"zod": "^3.24.2"
+		"zod": "^4.0.5"
 	},
 	"devDependencies": {
 		"typescript": "^5",
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon-128.webp
+++ b/public/icon-128.webp
--- a/public/icon-512.webp
+++ b/public/icon-512.webp
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -60,7 +60,10 @@ export default {
 					"accent-foreground":
 						"hsl(var(--sidebar-accent-foreground))",
 					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))"
+					ring: "hsl(var(--sidebar-ring))",
+					"primary-foreground":
+						"hsl(var(--sidebar-primary-foreground))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))"
 				}
 			},
 			borderRadius: {
@@ -69,6 +72,22 @@ export default {
 				sm: "calc(var(--radius) - 4px)"
 			},
 			keyframes: {
+				"accordion-down": {
+					from: {
+						height: "0"
+					},
+					to: {
+						height: "var(--radix-accordion-content-height)"
+					}
+				},
+				"accordion-up": {
+					from: {
+						height: "var(--radix-accordion-content-height)"
+					},
+					to: {
+						height: "0"
+					}
+				},
 				"accordion-down": {
 					from: {
 						height: "0"
@@ -87,6 +106,8 @@ export default {
 				}
 			},
 			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out"
 			}