feat(library): add source chips to game library

Chips show only when the user has 2 or more sources.
A selected source the user lacks stays visible, so it can be cleared.

src/pages/GameLibrary.jsx

@@ -1,12 +1,12 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {Link, useSearchParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import useLibrarySync from '../hooks/useLibrarySync.js';
 import SyncStatusBadge from '../components/SyncStatusBadge.jsx';
 import useForceSync from '../hooks/useForceSync.js';
 import {formatPlaytime} from '../utils/games.js';
-import {libraryQuery, parseStatus} from '../utils/backlog.js';
-import {GAME_STATUSES, MAX_LIBRARY_SEARCH_LENGTH} from '../utils/limits.js';
+import {libraryQuery, parseSources, parseStatus} from '../utils/backlog.js';
+import {GAME_SOURCES, GAME_STATUSES, MAX_LIBRARY_SEARCH_LENGTH} from '../utils/limits.js';
 import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, EyeOff, Gamepad2, Layers, Library, Plus, RefreshCw, Search, SearchX, Timer, Trophy, Upload} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
@@ -63,12 +63,16 @@ export default function GameLibrary() {
     const listStatus = hiddenOnly ? null : status;
     const listShortOnly = !hiddenOnly && shortOnly;
     const listHideDuplicates = !hiddenOnly && hideDuplicates;
-    const filtered = Boolean(listStatus || q.trim() || listShortOnly || hiddenOnly || listHideDuplicates);
+    const sources = parseSources(searchParams.get('source'));
+    const listSources = hiddenOnly ? [] : sources;
+    const sourceKey = listSources.join(',');
+    const filtered = Boolean(listStatus || q.trim() || listShortOnly || hiddenOnly || listHideDuplicates || sourceKey);
     const [search, setSearch] = useState(q);
     const [adding, setAdding] = useState(false);
     // A Steam ID or a PlayStation link. Starts true until /games-count answers, so the sync controls do not vanish
     // and come back.
     const [canSync, setCanSync] = useState(true);
+    const [ownSources, setOwnSources] = useState([]);
 
     const [data, setData] = useState({content: [], page: 0, size, totalElements: 0, totalPages: 0});
     const [isLoading, setIsLoading] = useState(true);
@@ -79,7 +83,7 @@ export default function GameLibrary() {
         const signal = nextSignal();
         setIsLoading(true);
         setError(null);
-        const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?${libraryQuery({page, size, sort, status: listStatus, q, maxMinutes: listShortOnly ? SHORT_GAME_MINUTES : null, hidden: hiddenOnly, hideDuplicates: listHideDuplicates})}`;
+        const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?${libraryQuery({page, size, sort, status: listStatus, q, maxMinutes: listShortOnly ? SHORT_GAME_MINUTES : null, hidden: hiddenOnly, hideDuplicates: listHideDuplicates, source: sourceKey})}`;
         const {ok, status, data: json} = await request(url, {signal});
         if (signal.aborted) return;
         setIsLoading(false);
@@ -89,30 +93,41 @@ export default function GameLibrary() {
             return;
         }
         setData(json);
-    }, [nextSignal, page, size, sort, listStatus, q, listShortOnly, hiddenOnly, listHideDuplicates]);
+    }, [nextSignal, page, size, sort, listStatus, q, listShortOnly, hiddenOnly, listHideDuplicates, sourceKey]);
 
     useEffect(() => {
         load();
     }, [load]);
 
+    const mounted = useRef(true);
     useEffect(() => {
-        let cancelled = false;
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const loadCounts = useCallback(() => {
         apiFetch(`${import.meta.env.VITE_CORE_API_URL}/api/library/games-count`)
             .then((response) => (response.ok ? response.json() : null))
             .then((json) => {
-                if (!cancelled && json) setCanSync(json.canSync);
+                if (!mounted.current || !json) return;
+                setCanSync(json.canSync);
+                setOwnSources(json.sources ?? []);
             })
             .catch(() => {});
-        return () => {
-            cancelled = true;
-        };
     }, []);
+    useEffect(() => {
+        loadCounts();
+    }, [loadCounts]);
 
     const expectInitialSync = !isLoading && !error && !filtered && data.totalElements === 0;
     const sync = useLibrarySync({
         enabled: canSync,
         expectInitialSync,
-        onComplete: load,
+        onComplete: () => {
+            load();
+            loadCounts();
+        },
     });
 
     const updateParams = useCallback((next) => {
@@ -137,8 +152,13 @@ export default function GameLibrary() {
         updateParams({status: value, hidden: null, page: 0});
     };
 
+    const toggleSource = (source) => {
+        const next = GAME_SOURCES.filter((s) => (s === source ? !sources.includes(s) : sources.includes(s)));
+        updateParams({source: next.join(','), hidden: null, page: 0});
+    };
+
     const onHiddenChange = () => {
-        updateParams(hiddenOnly ? {hidden: null, page: 0} : {hidden: true, status: null, maxMinutes: null, hideDuplicates: null, page: 0});
+        updateParams(hiddenOnly ? {hidden: null, page: 0} : {hidden: true, status: null, maxMinutes: null, hideDuplicates: null, source: null, page: 0});
     };
 
     const onSizeChange = (value) => {
@@ -158,6 +178,8 @@ export default function GameLibrary() {
 
     const syncing = syncBusy || sync.isRunning;
     const ready = !isLoading && !error;
+    // A selected source the user lacks stays visible so a stale URL value can be cleared.
+    const sourceChips = GAME_SOURCES.filter((s) => ownSources.includes(s) || sources.includes(s));
 
     return (
         <PageContainer className="p-4 md:p-8 space-y-6">
@@ -216,46 +238,64 @@ export default function GameLibrary() {
             {adding && <AddGamePanel onClose={() => setAdding(false)}/>}
 
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <div role="group" aria-label={t('BACKLOG.STATUS_LABEL')} className="flex flex-wrap gap-1.5">
-                    {[null, ...GAME_STATUSES].map((s) => (
+                <div className="flex flex-col gap-1.5">
+                    <div role="group" aria-label={t('BACKLOG.STATUS_LABEL')} className="flex flex-wrap gap-1.5">
+                        {[null, ...GAME_STATUSES].map((s) => (
+                            <Button
+                                key={s ?? 'ALL'}
+                                size="sm"
+                                variant={listStatus === s && !hiddenOnly ? 'default' : 'outline'}
+                                aria-pressed={listStatus === s && !hiddenOnly}
+                                className="h-7 rounded-full px-3 text-xs"
+                                onClick={() => onStatusChange(s)}
+                            >
+                                {s ? t(`BACKLOG.STATUS.${s}`) : t('LIBRARY.FILTER_ALL')}
+                            </Button>
+                        ))}
                         <Button
-                            key={s ?? 'ALL'}
                             size="sm"
-                            variant={listStatus === s && !hiddenOnly ? 'default' : 'outline'}
-                            aria-pressed={listStatus === s && !hiddenOnly}
+                            variant={listShortOnly ? 'default' : 'outline'}
+                            aria-pressed={listShortOnly}
                             className="h-7 rounded-full px-3 text-xs"
-                            onClick={() => onStatusChange(s)}
+                            onClick={() => updateParams({maxMinutes: listShortOnly ? null : SHORT_GAME_MINUTES, hidden: null, page: 0})}
                         >
-                            {s ? t(`BACKLOG.STATUS.${s}`) : t('LIBRARY.FILTER_ALL')}
+                            <Timer className="size-3"/>{t('LIBRARY.FILTER_SHORT')}
                         </Button>
-                    ))}
-                    <Button
-                        size="sm"
-                        variant={listShortOnly ? 'default' : 'outline'}
-                        aria-pressed={listShortOnly}
-                        className="h-7 rounded-full px-3 text-xs"
-                        onClick={() => updateParams({maxMinutes: listShortOnly ? null : SHORT_GAME_MINUTES, hidden: null, page: 0})}
-                    >
-                        <Timer className="size-3"/>{t('LIBRARY.FILTER_SHORT')}
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant={listHideDuplicates ? 'default' : 'outline'}
-                        aria-pressed={listHideDuplicates}
-                        className="h-7 rounded-full px-3 text-xs"
-                        onClick={() => updateParams({hideDuplicates: listHideDuplicates ? null : true, hidden: null, page: 0})}
-                    >
-                        <Layers className="size-3"/>{t('LIBRARY.FILTER_HIDE_DUPLICATES')}
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant={hiddenOnly ? 'default' : 'outline'}
-                        aria-pressed={hiddenOnly}
-                        className="h-7 rounded-full px-3 text-xs"
-                        onClick={onHiddenChange}
-                    >
-                        <EyeOff className="size-3"/>{t('LIBRARY.FILTER_HIDDEN')}
-                    </Button>
+                        <Button
+                            size="sm"
+                            variant={listHideDuplicates ? 'default' : 'outline'}
+                            aria-pressed={listHideDuplicates}
+                            className="h-7 rounded-full px-3 text-xs"
+                            onClick={() => updateParams({hideDuplicates: listHideDuplicates ? null : true, hidden: null, page: 0})}
+                        >
+                            <Layers className="size-3"/>{t('LIBRARY.FILTER_HIDE_DUPLICATES')}
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant={hiddenOnly ? 'default' : 'outline'}
+                            aria-pressed={hiddenOnly}
+                            className="h-7 rounded-full px-3 text-xs"
+                            onClick={onHiddenChange}
+                        >
+                            <EyeOff className="size-3"/>{t('LIBRARY.FILTER_HIDDEN')}
+                        </Button>
+                    </div>
+                    {sourceChips.length >= 2 && (
+                        <div role="group" aria-label={t('LIBRARY.SOURCE_LABEL')} className="flex flex-wrap gap-1.5">
+                            {sourceChips.map((s) => (
+                                <Button
+                                    key={s}
+                                    size="sm"
+                                    variant={listSources.includes(s) ? 'default' : 'outline'}
+                                    aria-pressed={listSources.includes(s)}
+                                    className="h-7 rounded-full px-3 text-xs"
+                                    onClick={() => toggleSource(s)}
+                                >
+                                    {t(`LIBRARY.SOURCE.${s}`)}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
                 </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

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import {StrictMode} from 'react';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {act, cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {createMemoryRouter, RouterProvider, useLocation, useNavigate} from 'react-router-dom';
@@ -11,16 +12,20 @@ import {toast} from 'sonner';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
-vi.mock('../hooks/useLibrarySync.js', () => ({default: () => ({status: 'OK', lastSyncedAt: null, isRunning: false})}));
+const syncOptions = vi.hoisted(() => ({current: null}));
+vi.mock('../hooks/useLibrarySync.js', () => ({default: (opts) => {
+    syncOptions.current = opts;
+    return {status: 'OK', lastSyncedAt: null, isRunning: false};
+}}));
 vi.mock('../hooks/useForceSync.js', () => ({default: () => ({trigger: vi.fn(), busy: false})}));
 
 const DEBOUNCE_WAIT_MS = 700;
 const page = {content: [{appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'BACKLOG'}], page: 0, size: 20, totalElements: 1, totalPages: 1};
 
-const answer = (games = page.content, canSync = true, hasSteamId = canSync) => fetchRoutes({
+const answer = (games = page.content, canSync = true, hasSteamId = canSync, sources = []) => fetchRoutes({
     'GET /api/users/me': json(200, {settings: {}}),
     'GET /api/library/games': json(200, {...page, content: games, totalElements: games.length, totalPages: games.length ? 1 : 0}),
-    'GET /api/library/games-count': json(200, {count: games.length, hasSteamId, canSync}),
+    'GET /api/library/games-count': json(200, {count: games.length, hasSteamId, canSync, sources}),
 });
 
 const wait = (ms) => act(() => new Promise((resolve) => setTimeout(resolve, ms)));
@@ -250,6 +255,106 @@ describe('GameLibrary short games', () => {
     });
 });
 
+describe('GameLibrary source filter', () => {
+    const lastGamesUrl = () => String(fetch.mock.calls.map(([url]) => url).filter((url) => String(url).includes('/api/library/games?')).at(-1));
+    const chip = (source) => screen.getByRole('button', {name: `LIBRARY.SOURCE.${source}`});
+
+    it('sourceFilter_AddsSourceToTheUrlAndTheRequest', async () => {
+        answer(page.content, true, true, ['STEAM', 'PSN']);
+        const lib = renderLibrary('/library?page=2');
+        await screen.findByRole('group', {name: 'LIBRARY.SOURCE_LABEL'});
+
+        fireEvent.click(chip('STEAM'));
+        await waitFor(() => expect(lib.params().get('source')).toBe('STEAM'));
+        fireEvent.click(chip('PSN'));
+
+        await waitFor(() => expect(lib.params().get('source')).toBe('STEAM,PSN'));
+        expect(lib.params().get('page')).toBe('0');
+        await waitFor(() => expect(lastGamesUrl()).toMatch(/[?&]source=STEAM%2CPSN(&|$)/));
+        expect(chip('STEAM').getAttribute('aria-pressed')).toBe('true');
+        fireEvent.click(chip('STEAM'));
+        await waitFor(() => expect(lib.params().get('source')).toBe('PSN'));
+        fireEvent.click(chip('PSN'));
+        await waitFor(() => expect(lib.params().get('source')).toBeNull());
+    });
+
+    it('sourceFilter_HiddenWithOneOwnSource', async () => {
+        answer(page.content, true, true, ['STEAM']);
+        renderLibrary();
+        await waitFor(() => expect(fetch).toHaveBeenCalled());
+        await wait(50);
+
+        expect(screen.queryByRole('group', {name: 'LIBRARY.SOURCE_LABEL'})).toBeNull();
+    });
+
+    it('sourceFilter_ShowsASelectedSourceTheUserLacks', async () => {
+        answer(page.content, true, true, ['STEAM']);
+        const lib = renderLibrary('/library?source=PSN');
+
+        expect((await screen.findByRole('button', {name: 'LIBRARY.SOURCE.PSN'})).getAttribute('aria-pressed')).toBe('true');
+        fireEvent.click(chip('PSN'));
+        await waitFor(() => expect(lib.params().get('source')).toBeNull());
+    });
+
+    it('sourceFilter_IgnoresUnknownValuesInTheUrl', async () => {
+        answer(page.content, true, true, ['STEAM', 'PSN']);
+        renderLibrary('/library?source=XBOX');
+
+        await waitFor(() => expect(lastGamesUrl()).toContain('/api/library/games?'));
+        expect(lastGamesUrl()).not.toMatch(/source=/);
+    });
+
+    it('hiddenFilter_ClearsTheSource', async () => {
+        answer(page.content, true, true, ['STEAM', 'PSN']);
+        const lib = renderLibrary('/library?source=PSN');
+        await screen.findByRole('group', {name: 'LIBRARY.SOURCE_LABEL'});
+
+        fireEvent.click(screen.getByRole('button', {name: 'LIBRARY.FILTER_HIDDEN'}));
+
+        await waitFor(() => expect(lib.params().get('hidden')).toBe('true'));
+        expect(lib.params().get('source')).toBeNull();
+        await waitFor(() => expect(lastGamesUrl()).not.toMatch(/source=/));
+    });
+
+    it('hiddenLink_IgnoresTheSource', async () => {
+        renderLibrary('/library?hidden=true&source=PSN');
+
+        await waitFor(() => expect(lastGamesUrl()).toMatch(/[?&]hidden=true(&|$)/));
+        expect(lastGamesUrl()).not.toMatch(/source=/);
+    });
+
+    it('sourceFilter_ChipsFollowAFinishedSync', async () => {
+        answer(page.content, true, true, ['STEAM']);
+        renderLibrary();
+        await waitFor(() => expect(fetch).toHaveBeenCalled());
+        await wait(50);
+        expect(screen.queryByRole('group', {name: 'LIBRARY.SOURCE_LABEL'})).toBeNull();
+
+        answer(page.content, true, true, ['STEAM', 'PSN']);
+        await act(async () => syncOptions.current.onComplete());
+
+        expect(await screen.findByRole('group', {name: 'LIBRARY.SOURCE_LABEL'})).toBeTruthy();
+    });
+
+    it('sourceFilter_ChipsShowUnderStrictMode', async () => {
+        answer(page.content, true, true, ['STEAM', 'PSN']);
+        const router = createMemoryRouter([{
+            path: '/library',
+            element: <PreferencesProvider><CurrentUserProvider><GameLibrary/></CurrentUserProvider></PreferencesProvider>,
+        }], {initialEntries: ['/library']});
+        render(<StrictMode><RouterProvider router={router}/></StrictMode>);
+
+        expect(await screen.findByRole('group', {name: 'LIBRARY.SOURCE_LABEL'})).toBeTruthy();
+    });
+
+    it('sourceFilter_EmptyResultShowsNoMatch', async () => {
+        answer([], true, true, ['STEAM', 'PSN']);
+        renderLibrary('/library?source=PSN');
+
+        expect(await screen.findByText('LIBRARY.NO_MATCH')).toBeTruthy();
+    });
+});
+
 describe('GameLibrary with games added by hand', () => {
     const zelda = {appid: -1025, name: 'Zelda', playtimeMinutes: 90, status: 'BACKLOG', source: 'MANUAL',
         platform: 'Nintendo Switch', imageUrl: 'https://images.igdb.com/z.jpg'};

src/utils/backlog.js

@@ -1,11 +1,13 @@
 import {apiFetch} from './api.js';
-import {GAME_STATUSES} from './limits.js';
+import {GAME_SOURCES, GAME_STATUSES} from './limits.js';
 
 // Radix Select has no empty value, so "no priority" needs its own value in the form.
 export const NO_PRIORITY = 'NONE';
 
 export const parseStatus = (value) => (GAME_STATUSES.includes(value) ? value : null);
 
+export const parseSources = (value) => GAME_SOURCES.filter((s) => (value ?? '').split(',').includes(s));
+
 export const toBacklogRequest = ({status, rating, notes, priority}) => ({
     status,
     rating: rating || null,
@@ -56,13 +58,14 @@ export const dismissFinishedHint = (appid, dismissed) =>
         body: JSON.stringify({dismissed}),
     });
 
-export const libraryQuery = ({page, size, sort, status, q, maxMinutes, hidden, hideDuplicates}) => {
+export const libraryQuery = ({page, size, sort, status, q, maxMinutes, hidden, hideDuplicates, source}) => {
     const params = new URLSearchParams({page: String(page), size: String(size), sort});
     if (hidden) params.set('hidden', 'true');
     if (hideDuplicates) params.set('hideDuplicates', 'true');
     if (status) params.set('status', status);
     if (q?.trim()) params.set('q', q.trim());
     if (maxMinutes) params.set('maxMinutes', String(maxMinutes));
+    if (source) params.set('source', source);
     return params.toString();
 };
 

src/utils/backlog.test.js

@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest';
-import {backlogShare, libraryQuery, NO_PRIORITY, parseStatus, toBacklogRequest} from './backlog.js';
+import {backlogShare, libraryQuery, NO_PRIORITY, parseSources, parseStatus, toBacklogRequest} from './backlog.js';
 
 describe('toBacklogRequest', () => {
     it('sends every field', () => {
@@ -60,3 +60,18 @@ describe('libraryQuery hideDuplicates', () => {
         expect(libraryQuery({...base, hideDuplicates: false})).not.toContain('hideDuplicates');
     });
 });
+
+describe('sources', () => {
+    it('parseSources_KeepsKnownValuesInOrder', () => {
+        expect(parseSources('PSN,FOO,STEAM,PSN')).toEqual(['STEAM', 'PSN']);
+        expect(parseSources(null)).toEqual([]);
+        expect(parseSources('')).toEqual([]);
+    });
+
+    it('libraryQuery_SetsSourceOnlyWhenSelected', () => {
+        const base = {page: 0, size: 20, sort: 'appid,asc', status: null, q: ''};
+        expect(libraryQuery({...base, source: 'STEAM,PSN'})).toBe('page=0&size=20&sort=appid%2Casc&source=STEAM%2CPSN');
+        expect(libraryQuery({...base, source: ''})).not.toContain('source');
+        expect(libraryQuery(base)).not.toContain('source');
+    });
+});

src/utils/limits.js

@@ -2,6 +2,8 @@
 
 // Core GameStatus
 export const GAME_STATUSES = ['BACKLOG', 'PLAYING', 'FINISHED', 'COMPLETED', 'DROPPED'];
+// Core GameSource, in the order the UI shows it
+export const GAME_SOURCES = ['STEAM', 'PSN', 'MANUAL'];
 // Core GamePriority, in the order the UI shows it
 export const GAME_PRIORITIES = ['HIGH', 'MEDIUM', 'LOW'];