fixxxxxxxx

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>
 	);