skidding

components/providers/ReactQueryProvider.tsx

@@ -15,12 +15,15 @@ export function ReactQueryProvider({ children }: Props) {
 		defaultOptions: {
 			queries: {
 				staleTime: 1000 * 60 * 5, // 5 minutes
-				retry: 1
+				retry: true
 			}
 		}
 	});
 
+	// will cause bun to SEGFAULT
+
 	useEffect(() => {
+		if (!window) return;
 		// Persist to localStorage (safe, runs client-side)
 		const localStoragePersister = createAsyncStoragePersister({
 			storage: window.localStorage

components/roblox/FriendCarousel.tsx

@@ -1,6 +1,6 @@
 import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
 import { useFriendsPresence } from "@/hooks/roblox/usePresence";
-import React, { useMemo } from "react";
+import React, { ReactNode, useMemo } from "react";
 import LazyLoadedImage from "../util/LazyLoadedImage";
 import { StupidHoverThing } from "../util/MiscStuff";
 import { VerifiedIcon } from "./RobloxIcons";
@@ -15,7 +15,7 @@ export function FriendCarousel({
 	React.HTMLAttributes<HTMLDivElement>,
 	HTMLDivElement
 > & {
-	title: string;
+	title: Element | string;
 	dontSortByActivity?: boolean;
 	friends:
 		| {

components/roblox/GameCard.tsx

@@ -10,6 +10,7 @@ import {
 } from "../ui/context-menu";
 import { ContextMenuItem } from "@radix-ui/react-context-menu";
 import React from "react";
+import Link from "next/link";
 
 interface GameCardProps {
 	game: ContentMetadata;
@@ -71,9 +72,9 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 				</ContextMenuItem>
 				<ContextMenuSeparator />
 				<ContextMenuItem>
-					<a href={`https://roblox.com/games/${game.rootPlaceId}`}>
-						Open URL
-					</a>
+					<Link href={`/games/${game.rootPlaceId}`}>
+						Open
+					</Link>
 				</ContextMenuItem>
 				<ContextMenuItem
 					onClick={() => {

components/roblox/RobloxTooltips.tsx

@@ -1,5 +1,6 @@
 import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ShieldBanIcon } from "lucide-react";
 
 export function RobloxPremiumSmall(props: React.SVGProps<SVGSVGElement>) {
 	return (
@@ -28,3 +29,18 @@ export function RobloxVerifiedSmall(
 		</Tooltip>
 	);
 }
+
+export function RobloxBannedSmall(
+	props: React.SVGProps<SVGSVGElement> & { useDefault?: boolean }
+) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<ShieldBanIcon {...props} />
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<p className="text-sm">Banned from Roblox</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}

components/roblox/UserProfileHeader.tsx

@@ -5,6 +5,7 @@ import LazyLoadedImage from "../util/LazyLoadedImage";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { OctagonXIcon } from "lucide-react";
 import {
+	RobloxBannedSmall,
 	RobloxPremiumSmall,
 	RobloxVerifiedSmall
 } from "@/components/roblox/RobloxTooltips";
@@ -90,13 +91,14 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
 								<Skeleton className="w-96 h-8 rounded-lg" />
 							</>
 						)}
-						{isLoaded && user.hasVerifiedBadge ? (
+						{isLoaded && user.hasVerifiedBadge && (
 							<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
-						) : (
-							<></>
+						)}
+						{isLoaded && user.isBanned && (
+							<RobloxBannedSmall className="w-6 h-6 text-blue" />
 						)}
 					</span>
-					<span className="text-base font-mono text-subtext0 mt-1">
+					<span className="text-base font-super-mono text-subtext0 mt-1">
 						{isLoaded ? (
 							<>
 								@{user.name}

components/site/HomeUserHeader.tsx

@@ -116,7 +116,7 @@ export function HomeLoggedInHeader() {
 							<></>
 						)}
 					</span>
-					<span className="text-base font-mono text-subtext0 mt-1">
+					<span className="text-base font-super-mono text-subtext0 mt-1">
 						{isLoaded ? (
 							<>
 								@{profile.name}

components/site/OutfitQuickChooser.tsx

@@ -7,6 +7,7 @@ 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";
 
 type OutfitSelectorProps = {
 	setVisible: (visible: boolean) => void;
@@ -23,6 +24,18 @@ export function OutfitSelector({
 	const outfits = useAvatarOutfits();
 	const acc = useCurrentAccount();
 
+	useEffect(() => {
+		if (!outfits) return;
+		loadThumbnails(
+			outfits.map((a) => ({
+				type: "Outfit",
+				targetId: a.id,
+				format: "webp",
+				size: "420x420"
+			}))
+		).catch(() => {});
+	}, [acc, outfits]);
+
 	if (!outfits || !acc) return null;
 
 	return (
@@ -35,22 +48,22 @@ export function OutfitSelector({
 			/>
 			<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 }) => (
-					<button
-						key={outfit.id}
-						className="hover:bg-base/50 rounded-lg"
-						onClick={async () => {
-							updateOutfit(outfit, acc);
-							setVisible(false);
-						}}
-					>
-						<StupidHoverThing delayDuration={0} text={outfit.name}>
+					<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"
 							/>
-						</StupidHoverThing>
-					</button>
+						</button>
+					</StupidHoverThing>
 				))}
 			</div>
 		</div>

components/site/QuickTopUI.tsx

@@ -112,7 +112,7 @@ export const QuickTopUI = React.memo(function () {
 			) : (
 				<></>
 			)}
-			<div className="z-50 absolute top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
+			<div className="z-50 fixed top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
 				<StupidHoverThing text="Change Outfit">
 					<button
 						className="rounded-full bg-crust/50 flex items-center p-2"

components/util/LazyLoadedImage.tsx

@@ -23,7 +23,7 @@ const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({
 	height = 1024,
 	className,
 	lazyFetch = true,
-	size = "48x48",
+	size = "720x720",
 	...props
 }) => {
 	const [isVisible, setIsVisible] = useState(!lazyFetch);