feat(library): add ordered backlog page and up-next dashboard tile

2026-10-06 09:06:51 +02:00
1 parent c158909083
commit b213b067dc
@@ -0,0 +1,46 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {ArrowRight, ListOrdered} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import GameCover from './GameCover.jsx';
+import FitText from './FitText.jsx';
+
+/**
+ * The first games of the user's own backlog order.
+ */
+export default function UpNextCard({games}) {
+    const {t} = useTranslation();
+    return (
+        <Card className="gap-0 py-0">
+            <div className="flex flex-wrap items-center justify-between gap-x-3 px-5 py-4 border-b">
+                <h2 className="flex items-center gap-2 font-semibold">
+                    <ListOrdered className="size-4 text-primary"/>
+                    {t('DASHBOARD.UP_NEXT')}
+                </h2>
+                <Button asChild variant="ghost" size="sm">
+                    <Link to="/backlog">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
+                </Button>
+            </div>
+
+            {games.length === 0 ? (
+                <p className="px-5 py-10 text-center text-sm text-muted-foreground">{t('DASHBOARD.UP_NEXT_EMPTY')}</p>
+            ) : (
+                <ol className="divide-y">
+                    {games.map((g, index) => (
+                        <li key={g.appid}>
+                            <Link to={`/library/${g.appid}`} className="group flex items-center gap-3 px-4 py-2.5 transition-colors hover:bg-muted/50">
+                                <span className="w-4 shrink-0 text-right text-sm tabular-nums text-muted-foreground">{index + 1}</span>
+                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
+                                <div className="@container min-w-0 flex-1 text-sm font-medium group-hover:text-primary transition-colors">
+                                    <FitText text={g.name ?? `App ${g.appid}`}/>
+                                </div>
+                            </Link>
+                        </li>
+                    ))}
+                </ol>
+            )}
+        </Card>
+    );
+}