new page thing

app/layout.tsx

@@ -3,6 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/toaster";
+import Image from "next/image";
+import { QuickTopUI, QuickTopUILogoPart } from "@/components/site/QuickTopUI";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -15,7 +17,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-	title: "ocbwoy3-chan-blox",
+	title: "home | ocbwoy3-chan's roblox",
 	description: "roblox meets next.js i think"
 };
 
@@ -30,7 +32,21 @@ export default function RootLayout({
 				className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden`}
 			>
 				<TooltipProvider>
-					<main>{children}</main>
+					<main>
+						<Image
+							/* window.localStorage.BgImageUrl */
+							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"
+							alt=""
+						/>
+						<div className="z-10 isolate overflow-scroll no-scrollbar w-screen max-h-screen h-screen antialiased overflow-x-hidden">
+							<QuickTopUI />
+							<QuickTopUILogoPart />
+							{children}
+						</div>
+					</main>
 					<Toaster />
 				</TooltipProvider>
 			</body>

app/page.tsx

@@ -6,8 +6,6 @@ import {
 } from "@/components/roblox/FriendsOnline";
 import { GameCard } from "@/components/roblox/GameCard";
 import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
-import { OutfitSelector } from "@/components/site/OutfitQuickChooser";
-import { QuickTopUI, QuickTopUILogoPart } from "@/components/site/QuickTopUI";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -16,7 +14,6 @@ import {
 } from "@/lib/omniRecommendation";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { AlertTriangleIcon } from "lucide-react";
-import Image from "next/image";
 import { useEffect, useState } from "react";
 
 export default function Home() {
@@ -41,65 +38,56 @@ export default function Home() {
 
 	return (
 		<>
-			<Image src={window.localStorage.BgImageUrl || "/bg.png"} width={1920} height={1080} className="w-screen h-screen bg-blend-hard-light fixed top-0 left-0 blur-lg opacity-25" alt=""/>
-			<div className="z-10 isolate overflow-scroll no-scrollbar w-screen max-h-screen h-screen antialiased overflow-x-hidden">
-				<QuickTopUI />
-				<QuickTopUILogoPart />
-				<HomeLoggedInHeader />
-				<div className="h-4" />
-				<BestFriendsHomeSect className="pt-2" />
-				<FriendsHomeSect className="pt-2" />
-				<div className="justify-center w-screen px-8 pt-6">
-					<Alert variant="default" className="bg-base/50 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>
-							<CardContent className="p-4">
-								<div className="h-[200px] flex items-center justify-center">
-									<div className="animate-pulse text-muted-foreground">
-										{"Loading..."}
-									</div>
+			<HomeLoggedInHeader />
+			<div className="h-4" />
+			<BestFriendsHomeSect className="pt-2" />
+			<FriendsHomeSect className="pt-2" />
+			<div className="justify-center w-screen px-8 pt-6">
+				<Alert variant="default" className="bg-base/50 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>
+						<CardContent className="p-4">
+							<div className="h-[200px] flex items-center justify-center">
+								<div className="animate-pulse text-muted-foreground">
+									{"Loading..."}
 								</div>
-							</CardContent>
-						</Card>
-					) : (
-						rec.sorts
-							.filter((a) =>
-								SORTS_ALLOWED_IDS.includes(a.topicId)
-							)
-							.map((sort, idx) => (
-								<div key={idx}>
-									<h1 className="text-2xl pb-2">
-										{sort.topic}
-									</h1>
-									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-										{(sort.recommendationList || []).map(
-											(recommendation, idxb) => {
-												const game =
-													rec.contentMetadata.Game[
-														recommendation.contentId.toString()
-													];
-												return (
-													<GameCard
-														key={idxb}
-														game={game}
-													/>
-												);
-											}
-										)}
-									</div>
+							</div>
+						</CardContent>
+					</Card>
+				) : (
+					rec.sorts
+						.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
+						.map((sort, idx) => (
+							<div key={idx}>
+								<h1 className="text-2xl pb-2">{sort.topic}</h1>
+								<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+									{(sort.recommendationList || []).map(
+										(recommendation, idxb) => {
+											const game =
+												rec.contentMetadata.Game[
+													recommendation.contentId.toString()
+												];
+											return (
+												<GameCard
+													key={idxb}
+													game={game}
+												/>
+											);
+										}
+									)}
 								</div>
-							))
-					)}
-				</div>
+							</div>
+						))
+				)}
 			</div>
 		</>
 	);

app/test/page.tsx

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

components/roblox/FriendCarousel.tsx

@@ -63,9 +63,10 @@ export function FriendCarousel({
 		}
 		setFriendsLabel(
 			[
-				`${friends.length}`,
+				// `${friends.length}`,
+				(numOnline+numGame+numStudio === 0 || numOnline === 0) ? null : `${numOnline+numGame+numStudio} online`,
 				numGame === 0 ? null : `${numGame} in-game`,
-				numStudio === 0 ? null : `${numStudio} studio`
+
 			]
 				.filter((a) => !!a)
 				.join(" | ")

components/site/QuickTopUI.tsx

@@ -10,13 +10,18 @@ import { toast } from "sonner";
 import { OutfitSelector } from "./OutfitQuickChooser";
 import { proxyFetch } from "@/lib/utils";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
+import Link from "next/link";
+import { useFriendsHome } from "@/hooks/roblox/useFriends";
+import { useBestFriends } from "@/hooks/roblox/useBestFriends";
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { useFriendsPresence } from "@/hooks/roblox/usePresence";
 
 /**
 requires csrf token cuz u cant use noblox.js on the web
 
 either go to https://roblox.com/my/avataar or the app to change ur fit
 */
-async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
+async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
 	try {
 		const J = (await (
 			await proxyFetch(
@@ -32,7 +37,7 @@ async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
 			{
 				method: "POST",
 				body: JSON.stringify({
-					assetIds: J.assets.map(a=>a.id).filter(a=>!!a)
+					assetIds: J.assets.map((a) => a.id).filter((a) => !!a)
 				})
 			}
 		);
@@ -47,21 +52,28 @@ async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
 	} catch {}
 }
 
-
-
 export const QuickTopUI = React.memo(function () {
+	const f = useFriendsHome();
+	const bf = useBestFriends();
+	useCurrentAccount();
+
+	useFriendsPresence([...(f ? f : []), ...(bf ? bf : [])].map(a=>a.id))
+
 	const robux = useRobuxBalance();
 	const [isOutfitSelectorVisible, setIsOutfitSelectorVisible] =
 		useState<boolean>(false);
 	return (
 		<>
-			{/* {isOutfitSelectorVisible ? (
-				<OutfitSelector setVisible={setIsOutfitSelectorVisible} updateOutfit={updateOutfit} />
+			{isOutfitSelectorVisible ? (
+				<OutfitSelector
+					setVisible={setIsOutfitSelectorVisible}
+					updateOutfit={updateOutfit}
+				/>
 			) : (
 				<></>
-			)} */}
+			)}
 			<div className="z-50 absolute top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
-				{/* <StupidHoverThing text="Change Outfit">
+				<StupidHoverThing text="Change Outfit">
 					<button
 						className="rounded-full bg-crust/50 flex items-center p-2"
 						onClick={() => {
@@ -70,7 +82,7 @@ export const QuickTopUI = React.memo(function () {
 					>
 						<ShirtIcon />
 					</button>
-				</StupidHoverThing> */}
+				</StupidHoverThing>
 
 				<StupidHoverThing
 					text={!robux ? "Loading..." : `You have ${robux} Robux`}
@@ -78,7 +90,7 @@ export const QuickTopUI = React.memo(function () {
 					<div className="rounded-full bg-crust/50 flex items-center p-2">
 						<RobuxIcon className="w-6 h-6" />
 						{robux ? (
-							<p className="pl-1">{robux || "???"}</p>
+							<p className="pl-1">{robux.toLocaleString()}</p>
 						) : (
 							<></>
 						)}
@@ -92,8 +104,12 @@ export const QuickTopUI = React.memo(function () {
 export const QuickTopUILogoPart = React.memo(function () {
 	return (
 		<div className="z-[15] relative top-4 left-4 p-4 flex gap-4 items-center text-blue">
-			<img src="/icon-512.webp" className="-m-1 w-8 h-8" alt="" />
-			<p className="mt-2">{"not roblox lol"}</p>
+			<Link href="/" className="-m-1 w-8 h-8">
+				<img src="/icon-512.webp" className="w-8 h-8" alt="" />
+			</Link>
+			<Link href="/test" className="mt-2">
+				<p>{"ocbwoy3-chan's roblox"}</p>
+			</Link>
 		</div>
 	);
 });

lib/utils.ts

@@ -7,7 +7,10 @@ export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
 
-export async function proxyFetch(
+/**
+ * ! Do not use in actual code, only used by proxy fetch to fix the CSRF thing
+*/
+async function proxyFetchRaw(
 	input: RequestInfo | URL,
 	init?: RequestInit
 ): Promise<Response> {
@@ -15,13 +18,14 @@ export async function proxyFetch(
 		typeof input === "string"
 			? input
 			: input instanceof Request
-				? input.url
-				: "";
+			? input.url
+			: "";
+
 	const proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
 
-	// fix headers
+	// Fix headers
 	const headers = new Headers(init?.headers || {});
-	headers.delete("accept-encoding"); // prevent stupid encoding bug
+	headers.delete("accept-encoding"); // prevent encoding issues
 
 	const fetchInit: RequestInit = {
 		...init,
@@ -32,3 +36,33 @@ export async function proxyFetch(
 
 	return window.fetch(proxyUrl, fetchInit);
 }
+
+// CSRF-aware proxy fetch
+export async function proxyFetch(
+	input: RequestInfo | URL,
+	init?: RequestInit
+): Promise<Response> {
+	const xsrfRequestMethods = ["POST", "PATCH", "DELETE"];
+	const csrfTokenHeader = "x-csrf-token";
+	const csrfInvalidResponseCode = 403;
+
+	const method = init?.method?.toUpperCase() || "GET";
+
+	let response = await proxyFetchRaw(input, init);
+
+	if (
+		xsrfRequestMethods.includes(method) &&
+		response.status === csrfInvalidResponseCode &&
+		response.headers.has(csrfTokenHeader)
+	) {
+		const newHeaders = new Headers(init?.headers || {});
+		newHeaders.set(csrfTokenHeader, response.headers.get(csrfTokenHeader)!);
+
+		response = await proxyFetchRaw(input, {
+			...init,
+			headers: newHeaders
+		});
+	}
+
+	return response;
+}