refactor(dashboard): load in useDashboardData, welcome and most played cards

2026-09-30 08:46:51 +02:00
1 parent 05f4ca42e5
commit 6da612bebd
@@ -0,0 +1,69 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+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 HeroBanner from './HeroBanner.jsx';
+import SteamAvatar from './SteamAvatar.jsx';
+import SyncStatusBadge from './SyncStatusBadge.jsx';
+import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
+
+export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, editing, onCustomize}) {
+    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">
+            {/* 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">
+                        <SteamAvatar url={avatarUrl} className="size-16" iconClassName="size-8 text-muted-foreground"/>
+                    </span>
+                )}
+                <div className="min-w-0">
+                    <p className="text-sm font-medium text-muted-foreground">{t('DASHBOARD.WELCOME_BACK')}</p>
+                    <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight truncate">
+                        {t('DASHBOARD.HELLO')} {userData?.displayName ?? userData?.email?.split('@')[0]} 👋
+                    </h1>
+                    {hasSteamId ? (
+                        <Badge variant="outline" className="mt-3 gap-1.5 font-mono text-muted-foreground">
+                            <Hash className="size-3"/>
+                            {userData.steamId}
+                        </Badge>
+                    ) : (
+                        <Button asChild variant="link" className="mt-2 h-auto p-0">
+                            <Link to="/settings"><Link2 className="size-4"/>{t('DASHBOARD.NO_STEAM_ID')}</Link>
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            <div className="relative flex flex-col items-start md:items-end gap-3 shrink-0">
+                {hasSteamId && (
+                    <>
+                        <SyncStatusBadge
+                            status={sync.status}
+                            lastSyncedAt={sync.lastSyncedAt}
+                            isRunning={sync.isRunning}
+                            stale={sync.stale}
+                        />
+                        <Button onClick={forceSync.trigger} disabled={syncBusy}>
+                            <RefreshCw className={syncBusy ? 'animate-spin' : ''}/>
+                            {t('LIBRARY.RESYNC')}
+                        </Button>
+                    </>
+                )}
+                <Button variant="ghost" size="sm" disabled={editing} onClick={onCustomize}>
+                    <LayoutGrid/>{t('TILES.CUSTOMIZE')}
+                </Button>
+            </div>
+        </Card>
+    );
+}