feat(dashboard): currently playing and pile of shame tiles

Pile of Shame shows the backlog count and share, a status bar and a random backlog pick. Both tiles show the first-sync text while the initial sync runs; a failed summary load shows a retry button.
2026-09-24 11:25:12 +02:00
1 parent f94e0aff15
commit c24c22d5ed
@@ -0,0 +1,47 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {ArrowRight, Gamepad2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import GameCover from './GameCover.jsx';
+import {formatPlaytime} from '../utils/games.js';
+
+export default function CurrentlyPlayingCard({games, syncing}) {
+    const {t} = useTranslation();
+    return (
+        <Card className="gap-0 py-0">
+            <div className="flex items-center justify-between px-5 py-4 border-b">
+                <h2 className="flex items-center gap-2 font-semibold">
+                    <Gamepad2 className="size-4 text-primary"/>
+                    {t('DASHBOARD.CURRENTLY_PLAYING')}
+                </h2>
+                <Button asChild variant="ghost" size="sm">
+                    <Link to="/library?status=PLAYING">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
+                </Button>
+            </div>
+
+            {games.length === 0 ? (
+                <p className="px-5 py-10 text-center text-sm text-muted-foreground">
+                    {syncing ? t('LIBRARY.SYNCING_FIRST_TIME') : t('DASHBOARD.NOTHING_PLAYING')}
+                </p>
+            ) : (
+                <ul className="grid grid-cols-2 gap-3 p-4">
+                    {games.map((g) => (
+                        <li key={g.appid}>
+                            <Link to={`/library/${g.appid}`} className="group block space-y-1.5">
+                                <GameCover appid={g.appid} className="w-full transition-opacity group-hover:opacity-80"/>
+                                <div className="truncate text-sm font-medium group-hover:text-primary transition-colors">
+                                    {g.name ?? `App ${g.appid}`}
+                                </div>
+                                <div className="text-xs text-muted-foreground tabular-nums">
+                                    {formatPlaytime(g.playtimeMinutes)}
+                                </div>
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </Card>
+    );
+}