feat(points): equipped looks on dashboard and public profile

Avatar borders frame the avatar on the dashboard, badges show next to the
heading, banner frames wrap the hero image, and equipped accents set the
color on both pages.

src/components/DashboardWelcomeCard.jsx

@@ -5,25 +5,30 @@ import {Hash, LayoutGrid, Link2, RefreshCw} from 'lucide-react';
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
 import HeroBanner from './HeroBanner.jsx';
+import PointsBadge from './PointsBadge.jsx';
 import SteamAvatar from './SteamAvatar.jsx';
 import SyncStatusBadge from './SyncStatusBadge.jsx';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
+import {lookClass} from '../utils/rewards.js';
 
-export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, editing, onCustomize}) {
+export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, editing, onCustomize, equipped}) {
     const {t} = useTranslation();
     const {user: userData} = useCurrentUserContext();
     const hasSteamId = !!userData?.steamId;
     const syncBusy = forceSync.busy || sync.isRunning;
 
     return (
-        <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+        <Card className={cn('relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6',
+            lookClass(equipped, 'BANNER_FRAME'))}>
             {/* A picked game, else the game played most in the last two weeks. */}
             <HeroBanner appid={bannerAppid}/>
             <div className="relative flex min-w-0 items-center gap-4">
                 {/* The slot is there before the avatar loads, so the title does not jump. */}
                 {hasSteamId && (
-                    <span className="flex size-16 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-primary/60">
+                    <span className={cn('flex size-16 shrink-0 items-center justify-center rounded-full bg-muted',
+                        lookClass(equipped, 'AVATAR_BORDER') ?? 'ring-2 ring-primary/60')}>
                         <SteamAvatar url={avatarUrl} className="size-16" iconClassName="size-8 text-muted-foreground"/>
                     </span>
                 )}
@@ -32,6 +37,7 @@ export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forc
                     <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight truncate">
                         {t('DASHBOARD.HELLO')} {userData?.displayName ?? userData?.email?.split('@')[0]} 👋
                     </h1>
+                    <PointsBadge equipped={equipped} className="mt-2"/>
                     {hasSteamId ? (
                         <Badge variant="outline" className="mt-3 gap-1.5 font-mono text-muted-foreground">
                             <Hash className="size-3"/>