fixxxxxxxx

2025-12-27 14:20:22 +02:00
parent 3612ada03a
commit 5bfdd7dd2b
26 changed files with 905 additions and 626 deletions
--- a/components/site/HomeUserHeader.tsx
+++ b/components/site/HomeUserHeader.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import LazyLoadedImage from "../util/LazyLoadedImage";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { OctagonXIcon } from "lucide-react";
@@ -15,6 +15,7 @@ import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { toast } from "sonner";
 import Link from "next/link";
+import { Button } from "../ui/button";

 // chatgpt + human
 function randomGreeting(name: string): string {
@@ -27,6 +28,15 @@ function randomGreeting(name: string): string {
 export function HomeLoggedInHeader() {
 	const profile = useCurrentAccount();
 	const accountSettings = useAccountSettings();
+	const [preferredName, setPreferredName] = useState<string | null>(null);
+	const profileId = profile ? profile.id : undefined;
+	const presence = useFriendsPresence(profileId ? [profileId] : []);
+
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const storedName = window.localStorage.getItem("UserPreferredName");
+		if (storedName) setPreferredName(storedName);
+	}, []);

 	if (profile === false) {
 		return (
@@ -43,8 +53,6 @@ export function HomeLoggedInHeader() {
 		);
 	}

-	const presence = useFriendsPresence(profile ? [profile.id] : []);
-
 	const userActivity = presence.find((b) => b.userId === profile?.id);
 	const userPresence = userActivity?.userPresenceType;
 	const borderColor =
@@ -94,7 +102,7 @@ export function HomeLoggedInHeader() {
 						{isLoaded ? (
 							<Link href={`/users/${profile.id}`}>
 								{randomGreeting(
-									window.localStorage.UserPreferredName ||
+									preferredName ||
 										profile.displayName ||
 										"Robloxian!"
 								)}
--- a/components/site/OutfitQuickChooser.tsx
+++ b/components/site/OutfitQuickChooser.tsx
@@ -2,12 +2,12 @@

 import { useAvatarOutfits } from "@/hooks/roblox/useAvatarOutfits";
 import { Button } from "@/components/ui/button";
-import { cn, proxyFetch } from "@/lib/utils";
 import LazyLoadedImage from "../util/LazyLoadedImage";
 import { StupidHoverThing } from "../util/MiscStuff";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
 import { useEffect } from "react";
+import { X } from "lucide-react";

 type OutfitSelectorProps = {
 	setVisible: (visible: boolean) => void;
@@ -25,7 +25,7 @@ export function OutfitSelector({
 	const acc = useCurrentAccount();

 	useEffect(() => {
-		if (!outfits) return;
+		if (!outfits || outfits.length === 0) return;
 		loadThumbnails(
 			outfits.map((a) => ({
 				type: "Outfit",
@@ -34,37 +34,99 @@ export function OutfitSelector({
 				size: "420x420"
 			}))
 		).catch(() => {});
-	}, [acc, outfits]);
+	}, [outfits]);

-	if (!outfits || !acc) return null;
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setVisible(false);
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [setVisible]);
+
+	const isLoading = outfits === null;
+	const hasOutfits = Array.isArray(outfits) && outfits.length > 0;

 	return (
-		<div className="z-30 isolate absolute inset-0 flex items-center justify-center bg-crust/50">
-			<button
-				className="z-10 absolute w-screen h-screen cursor-default"
-				onClick={() => {
-					setVisible(false);
-				}}
-			/>
-			<div className="z-20 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 p-8 bg-crust/90 rounded-xl">
-				{(outfits || []).map((outfit: { id: number; name: string }) => (
-					<StupidHoverThing key={outfit.id} delayDuration={0} text={outfit.name}>
-						<button
-							key={outfit.id}
-							className="hover:bg-base/50 rounded-lg"
-							onClick={async () => {
-								updateOutfit(outfit, acc);
-								setVisible(false);
-							}}
-						>
-							<LazyLoadedImage
-								imgId={`Outfit_${outfit.id}`}
-								alt={outfit.name}
-								className="w-32 h-32 rounded-md"
-							/>
-						</button>
-					</StupidHoverThing>
-				))}
+		<div
+			className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			onClick={() => setVisible(false)}
+		>
+			<div
+				className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				onClick={(event) => event.stopPropagation()}
+			>
+				<div className="flex items-center justify-between border-b border-surface0/60 px-6 py-4">
+					<div>
+						<p className="text-lg font-semibold text-text">Outfits</p>
+						<p className="text-xs text-subtext1">
+							Pick a look to update your avatar instantly.
+						</p>
+					</div>
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={() => setVisible(false)}
+						aria-label="Close outfit chooser"
+					>
+						<X className="h-4 w-4" />
+					</Button>
+				</div>
+
+				<div className="p-6">
+					{!acc ? (
+						<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
+							Sign in to load your outfits.
+						</div>
+					) : isLoading ? (
+						<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+							{Array.from({ length: 8 }).map((_, index) => (
+								<div
+									key={`outfit-skeleton-${index}`}
+									className="rounded-xl border border-surface0/60 bg-base/40 p-3"
+								>
+									<div className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg bg-surface0/70 animate-pulse" />
+									<div className="mt-3 h-3 w-20 rounded bg-surface0/70 animate-pulse" />
+								</div>
+							))}
+						</div>
+					) : hasOutfits ? (
+						<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
+							{outfits.map((outfit: { id: number; name: string }) => (
+								<StupidHoverThing
+									key={outfit.id}
+									delayDuration={0}
+									text={outfit.name}
+								>
+									<button
+										className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
+										onClick={async () => {
+											await updateOutfit(outfit, acc);
+											setVisible(false);
+										}}
+										aria-label={`Wear ${outfit.name}`}
+									>
+										<LazyLoadedImage
+											imgId={`Outfit_${outfit.id}`}
+											alt={outfit.name}
+											className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
+											size="420x420"
+											lazyFetch={false}
+										/>
+										<p className="mt-3 text-xs font-medium text-text line-clamp-2">
+											{outfit.name}
+										</p>
+									</button>
+								</StupidHoverThing>
+							))}
+						</div>
+					) : (
+						<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
+							No outfits found yet. Make one in the Roblox avatar editor,
+							then come back here.
+						</div>
+					)}
+				</div>
 			</div>
 		</div>
 	);
--- a/components/site/QuickTopUI.tsx
+++ b/components/site/QuickTopUI.tsx
@@ -16,7 +16,6 @@ import { useFriendsPresence } from "@/hooks/roblox/usePresence";

 async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
 	try {
-		// ocbwoy3 stupid idiot for using v3 api
 		const details = (await (
 			await proxyFetch(
 				`https://avatar.roblox.com/v1/outfits/${outfit.id}/details`
@@ -24,18 +23,7 @@ async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
 		).json()) as {
 			id: number;
 			name: string;
-			bodyColors: Record<string, string>;
-			scale: Record<string, number>;
-		};
-
-		const detailsV3 = (await (
-			await proxyFetch(
-				`https://avatar.roblox.com/v3/outfits/${outfit.id}/details`
-			)
-		).json()) as {
-			id: number;
-			name: string;
-			assets: any[];
+			assets: Array<{ id: number; meta?: Record<string, unknown> }>;
 			bodyColors: Record<string, string>;
 			scale: Record<string, number>;
 			playerAvatarType: "R6" | "R15";
@@ -58,26 +46,44 @@ async function updateOutfit(outfit: { id: number }, acc: { id: number }) {

 		// u cant set avatar item scaling/rotation cuz roblox can't make good web apis
 		await proxyFetch(
-			`https://avatar.roblox.com/v1/avatar/set-wearing-assets`,
+			`https://avatar.roblox.com/v2/avatar/set-wearing-assets`,
 			{
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
-					assetIds: detailsV3.assets.map((a) => a.id).filter(Boolean)
+					assets: details.assets
+						.map((asset) => ({
+							id: asset.id,
+							meta: asset.meta
+						}))
+						.filter((asset) => Boolean(asset.id))
 				})
 			}
 		);

-		await proxyFetch(
-			`https://avatar.roblox.com/v1/avatar/set-player-avatar-type`,
-			{
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					playerAvatarType: detailsV3.playerAvatarType
-				})
-			}
-		);
+		const avatarType =
+			details.playerAvatarType === "R15"
+				? 3
+				: details.playerAvatarType === "R6"
+					? 1
+					: null;
+
+		if (avatarType !== null) {
+			await proxyFetch(
+				`https://avatar.roblox.com/v1/avatar/set-player-avatar-type`,
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						playerAvatarType: avatarType
+					})
+				}
+			);
+		}
+
+		await proxyFetch(`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`, {
+			method: "POST"
+		});

 		loadThumbnails([
 			{
@@ -112,15 +118,15 @@ export const QuickTopUI = React.memo(function () {
 			) : (
 				<></>
 			)}
-			<div className="z-50 fixed top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
+			<div className="z-50 fixed top-4 right-4 flex gap-2 items-center text-text">
 				<StupidHoverThing text="Change Outfit">
 					<button
-						className="rounded-full bg-crust/50 flex items-center p-2"
+						className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center justify-center h-10 w-10 text-text shadow-sm transition hover:bg-surface1/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
 						onClick={() => {
 							setIsOutfitSelectorVisible((a) => !a);
 						}}
 					>
-						<ShirtIcon />
+						<ShirtIcon className="h-5 w-5" />
 					</button>
 				</StupidHoverThing>

@@ -131,15 +137,11 @@ export const QuickTopUI = React.memo(function () {
 							: `You have ${robux.toLocaleString()} Robux`
 					}
 				>
-					<div className="rounded-full bg-crust/50 flex items-center p-2">
-						<RobuxIcon className="w-6 h-6" />
-						{robux ? (
-							<p className="pl-1">
-								{robux ? robux.toLocaleString() : "???"}
-							</p>
-						) : (
-							<></>
-						)}
+					<div className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center h-10 px-3 gap-2 text-text shadow-sm">
+						<RobuxIcon className="w-5 h-5 text-green" />
+						<p className="text-sm font-super-mono tabular-nums">
+							{robux ? robux.toLocaleString() : "..."}
+						</p>
 					</div>
 				</StupidHoverThing>
 			</div>
@@ -149,12 +151,15 @@ 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">
-			<Link href="/" className="-m-1 w-8 h-8">
-				<img src="/icon-512.webp" className="w-8 h-8" alt="" />
+		<div className="z-15 relative top-4 left-4 flex gap-3 items-center rounded-full">
+			<Link
+				href="/"
+				className="flex h-8 w-8 items-center justify-center rounded-full"
+			>
+				<img src="/roblox.png" className="w-6 h-6" alt="" />
 			</Link>
-			<Link href="/" className="mt-2 gap-2 flex items-center">
-				<p>{"ocbwoy3-chan's roblox"}</p>
+			<Link href="/" className="gap-2 flex items-center text-sm font-medium">
+				<p>{"Roblox"}</p>
 				{/* <p className="text-surface2 line-clamp-1">
 					{process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD}{" "}
 					{process.env.NEXT_PUBLIC_ARGV0}