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,10 +38,6 @@ 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" />
@@ -54,8 +47,8 @@ export default function Home() {
 					<AlertTriangleIcon />
 					<AlertTitle>Warning</AlertTitle>
 					<AlertDescription>
-							This is work in progess, you can follow the
+						This is work in progess, you can follow the development
-							development process on GitHub.
+						process on GitHub.
 					</AlertDescription>
 				</Alert>
 			</div>
@@ -72,14 +65,10 @@ export default function Home() {
 					</Card>
 				) : (
 					rec.sorts
-							.filter((a) =>
+						.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
-								SORTS_ALLOWED_IDS.includes(a.topicId)
-							)
 						.map((sort, idx) => (
 							<div key={idx}>
-									<h1 className="text-2xl pb-2">
+								<h1 className="text-2xl pb-2">{sort.topic}</h1>
-										{sort.topic}
-									</h1>
 								<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 									{(sort.recommendationList || []).map(
 										(recommendation, idxb) => {
@@ -100,7 +89,6 @@ export default function Home() {
 						))
 				)}
 			</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,6 +10,11 @@ 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
@@ -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 ? (
+			{isOutfitSelectorVisible ? (
-				<OutfitSelector setVisible={setIsOutfitSelectorVisible} updateOutfit={updateOutfit} />
+				<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="" />
+			<Link href="/" className="-m-1 w-8 h-8">
-			<p className="mt-2">{"not roblox lol"}</p>
+				<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> {
@@ -17,11 +20,12 @@ export async function proxyFetch(
 			: input instanceof Request
 			? 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;
+}