feat(library): time to beat, short-games filter and backlog hours

src/components/PileOfShameCard.jsx

@@ -7,6 +7,7 @@ import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import {STATUS_META} from './GameStatusBadge.jsx';
 import {backlogShare, GAME_STATUSES} from '../utils/backlog.js';
+import {formatPlaytime} from '../utils/games.js';
 
 export default function PileOfShameCard({summary, syncing, onShuffle, shuffling}) {
     const {t, i18n} = useTranslation();
@@ -36,6 +37,11 @@ export default function PileOfShameCard({summary, syncing, onShuffle, shuffling}
                 <p className="mt-1 text-sm text-muted-foreground">
                     {t('DASHBOARD.NEVER_PLAYED', {count: summary.neverPlayed})}
                 </p>
+                {summary.backlogMinutes > 0 && (
+                    <p className="text-sm text-muted-foreground">
+                        {t('DASHBOARD.BACKLOG_HOURS', {time: formatPlaytime(summary.backlogMinutes)})}
+                    </p>
+                )}
             </div>
 
             {summary.total > 0 && (

src/components/PileOfShameCard.test.jsx

@@ -47,4 +47,16 @@ describe('PileOfShameCard', () => {
 
         expect(screen.getByText('DASHBOARD.BACKLOG_EMPTY')).toBeTruthy();
     });
+
+    it('shows the backlog hours when IGDB knows some', () => {
+        renderCard({summary: summary(2, {backlogMinutes: 7440})});
+
+        expect(screen.getByText('DASHBOARD.BACKLOG_HOURS')).toBeTruthy();
+    });
+
+    it('hides the backlog hours without data', () => {
+        renderCard({summary: summary(2, {backlogMinutes: 0})});
+
+        expect(screen.queryByText('DASHBOARD.BACKLOG_HOURS')).toBeNull();
+    });
 });

src/components/TimeToBeat.jsx

@@ -0,0 +1,29 @@
+import {useTranslation} from 'react-i18next';
+import {Timer} from 'lucide-react';
+
+import {formatPlaytime} from '../utils/games.js';
+
+const ROWS = [
+    ['hastilyMinutes', 'GAME_DETAIL.TTB_HASTILY'],
+    ['normallyMinutes', 'GAME_DETAIL.TTB_NORMALLY'],
+    ['completelyMinutes', 'GAME_DETAIL.TTB_COMPLETELY'],
+];
+
+/**
+ * IGDB's average time to beat; renders nothing without data.
+ */
+export default function TimeToBeat({time}) {
+    const {t} = useTranslation();
+    const known = ROWS.filter(([field]) => time?.[field]);
+    if (known.length === 0) return null;
+    return (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+            <Timer className="size-4 text-primary" aria-label={t('GAME_DETAIL.TTB')}/>
+            {known.map(([field, labelKey]) => (
+                <span key={field}>
+                    {t(labelKey)} <span className="font-medium text-foreground tabular-nums">{formatPlaytime(time[field])}</span>
+                </span>
+            ))}
+        </div>
+    );
+}

src/components/TimeToBeat.test.jsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import TimeToBeat from './TimeToBeat.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+describe('TimeToBeat', () => {
+    afterEach(cleanup);
+
+    it('shows the known times', () => {
+        render(<TimeToBeat time={{hastilyMinutes: 510, normallyMinutes: 750, completelyMinutes: null}}/>);
+
+        expect(screen.getByText('8.5h')).toBeTruthy();
+        expect(screen.getByText('13h')).toBeTruthy();
+        expect(screen.queryByText('GAME_DETAIL.TTB_COMPLETELY')).toBeNull();
+    });
+
+    it('renders nothing without data', () => {
+        const {container} = render(<TimeToBeat time={{hastilyMinutes: null, normallyMinutes: null, completelyMinutes: null}}/>);
+
+        expect(container.textContent).toBe('');
+        cleanup();
+        expect(render(<TimeToBeat time={null}/>).container.textContent).toBe('');
+    });
+});

src/pages/GameDetail.jsx

@@ -12,6 +12,7 @@ import BacklogCard from '../components/BacklogCard.jsx';
 import GameCover from '../components/GameCover.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import PlayingHint from '../components/PlayingHint.jsx';
+import TimeToBeat from '../components/TimeToBeat.jsx';
 import {formatPlaytime} from '../utils/games.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 
@@ -134,6 +135,9 @@ export default function GameDetail() {
                                     </Badge>
                                     <GameStatusBadge status={data.status}/>
                                 </div>
+                                <div className="mt-3">
+                                    <TimeToBeat time={data.timeToBeat}/>
+                                </div>
                             </div>
                             <Button asChild variant="outline" size="sm" className="self-start">
                                 <a href={`https://store.steampowered.com/app/${data.appid}`} target="_blank" rel="noopener noreferrer">

src/pages/GameLibrary.jsx

@@ -7,7 +7,7 @@ import useForceSync from '../hooks/useForceSync.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import {formatPlaytime} from '../utils/games.js';
 import {GAME_STATUSES, libraryQuery, parseStatus} from '../utils/backlog.js';
-import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, Library, RefreshCw, Search, SearchX} from 'lucide-react';
+import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, Library, RefreshCw, Search, SearchX, Timer} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
@@ -23,6 +23,8 @@ const PAGE_SIZES = [20, 40, 80];
 const DEFAULT_SIZE = 20;
 const DEFAULT_SORT = 'playtimeMinutes,desc';
 const SEARCH_DEBOUNCE_MS = 300;
+// "Short" games: IGDB's normal time to beat of at most 10 hours.
+const SHORT_GAME_MINUTES = 600;
 const SORT_OPTIONS = [
     {value: 'playtimeMinutes,desc', labelKey: 'LIBRARY.SORT_PLAYTIME_DESC'},
     {value: 'playtimeMinutes,asc', labelKey: 'LIBRARY.SORT_PLAYTIME_ASC'},
@@ -45,7 +47,8 @@ export default function GameLibrary() {
     const sort = SORT_OPTIONS.some((o) => o.value === sortParam) ? sortParam : DEFAULT_SORT;
     const status = parseStatus(searchParams.get('status'));
     const q = searchParams.get('q') ?? '';
-    const filtered = Boolean(status || q.trim());
+    const shortOnly = searchParams.get('maxMinutes') === String(SHORT_GAME_MINUTES);
+    const filtered = Boolean(status || q.trim() || shortOnly);
     const librarySearch = searchParams.toString();
     const [search, setSearch] = useState(q);
 
@@ -62,7 +65,7 @@ export default function GameLibrary() {
         setIsLoading(true);
         setError(null);
         try {
-            const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?${libraryQuery({page, size, sort, status, q})}`;
+            const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?${libraryQuery({page, size, sort, status, q, maxMinutes: shortOnly ? SHORT_GAME_MINUTES : null})}`;
             const response = await fetch(url, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -88,7 +91,7 @@ export default function GameLibrary() {
         } finally {
             setIsLoading(false);
         }
-    }, [navigate, expireSession, page, size, sort, status, q, t]);
+    }, [navigate, expireSession, page, size, sort, status, q, shortOnly, t]);
 
     useEffect(() => {
         load();
@@ -199,6 +202,15 @@ export default function GameLibrary() {
                             {s ? t(`BACKLOG.STATUS.${s}`) : t('LIBRARY.FILTER_ALL')}
                         </Button>
                     ))}
+                    <Button
+                        size="sm"
+                        variant={shortOnly ? 'default' : 'outline'}
+                        aria-pressed={shortOnly}
+                        className="h-7 rounded-full px-3 text-xs"
+                        onClick={() => updateParams({maxMinutes: shortOnly ? null : SHORT_GAME_MINUTES, page: 0})}
+                    >
+                        <Timer className="size-3"/>{t('LIBRARY.FILTER_SHORT')}
+                    </Button>
                 </div>
                 <div className="relative sm:w-64">
                     <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>

src/pages/GameLibrary.test.jsx

@@ -102,3 +102,16 @@ describe('GameLibrary sort', () => {
         expect(new URL(fetch.mock.calls[0][0], 'http://x').searchParams.get('sort')).toBe(sort);
     });
 });
+
+describe('GameLibrary short games', () => {
+    it('filters by time to beat and keeps the chip state in the URL', async () => {
+        const lib = renderLibrary();
+        await waitFor(() => expect(fetch).toHaveBeenCalled());
+
+        fireEvent.click(screen.getByRole('button', {name: 'LIBRARY.FILTER_SHORT'}));
+
+        await waitFor(() => expect(lib.params().get('maxMinutes')).toBe('600'));
+        await waitFor(() => expect(fetch.mock.calls.at(-1)[0]).toMatch(/[?&]maxMinutes=600(&|$)/));
+        expect(screen.getByRole('button', {name: 'LIBRARY.FILTER_SHORT'}).getAttribute('aria-pressed')).toBe('true');
+    });
+});

src/utils/backlog.js

@@ -25,10 +25,11 @@ export const saveBacklogEntry = (appid, entry) =>
         body: JSON.stringify(entry),
     });
 
-export const libraryQuery = ({page, size, sort, status, q}) => {
+export const libraryQuery = ({page, size, sort, status, q, maxMinutes}) => {
     const params = new URLSearchParams({page: String(page), size: String(size), sort});
     if (status) params.set('status', status);
     if (q?.trim()) params.set('q', q.trim());
+    if (maxMinutes) params.set('maxMinutes', String(maxMinutes));
     return params.toString();
 };
 

src/utils/backlog.test.js

@@ -27,6 +27,11 @@ describe('libraryQuery', () => {
             .toBe('page=0&size=20&sort=playtimeMinutes%2Cdesc');
     });
 
+    it('adds the time-to-beat limit', () => {
+        expect(libraryQuery({page: 0, size: 20, sort: 'appid,asc', status: null, q: '', maxMinutes: 600}))
+            .toBe('page=0&size=20&sort=appid%2Casc&maxMinutes=600');
+    });
+
     it('adds status and the trimmed, encoded search', () => {
         expect(libraryQuery({page: 1, size: 40, sort: 'appid,asc', status: 'DROPPED', q: ' 100% & more '}))
             .toBe('page=1&size=40&sort=appid%2Casc&status=DROPPED&q=100%25+%26+more');