feat(library): add the merge duplicate dialog

src/components/AddGamePanel.jsx

@@ -1,22 +1,19 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {toast} from 'sonner';
-import {ArrowLeft, Loader2, Plus, Search, X} from 'lucide-react';
+import {ArrowLeft, Loader2, Plus, X} from 'lucide-react';
 
-import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
 import GameCover from './GameCover.jsx';
+import GameSearch from './GameSearch.jsx';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import {GAME_STATUSES} from '../utils/backlog.js';
-import {addGame, hoursToMinutes, searchGames} from '../utils/manualGames.js';
-
-const SEARCH_DEBOUNCE_MS = 400;
-const MIN_QUERY = 2;
+import {addGame, hoursToMinutes} from '../utils/manualGames.js';
 
 /**
  * Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch.
@@ -26,44 +23,8 @@ export default function AddGamePanel({onClose}) {
     const navigate = useNavigate();
     const expireSession = useSessionExpired();
     const [query, setQuery] = useState('');
-    // idle | loading | done | unavailable | failed
-    const [searchState, setSearchState] = useState('idle');
-    const [results, setResults] = useState([]);
     const [picked, setPicked] = useState(null);
 
-    useEffect(() => {
-        const trimmed = query.trim();
-        if (trimmed.length < MIN_QUERY) {
-            setSearchState('idle');
-            setResults([]);
-            return undefined;
-        }
-        const controller = new AbortController();
-        const timer = setTimeout(async () => {
-            setSearchState('loading');
-            try {
-                const response = await searchGames(trimmed, controller.signal);
-                if (response.status === 401) {
-                    expireSession();
-                    return;
-                }
-                if (!response.ok) {
-                    setSearchState('failed');
-                    return;
-                }
-                const data = await response.json();
-                setResults(data.results ?? []);
-                setSearchState(data.available ? 'done' : 'unavailable');
-            } catch (err) {
-                if (err.name !== 'AbortError') setSearchState('failed');
-            }
-        }, SEARCH_DEBOUNCE_MS);
-        return () => {
-            clearTimeout(timer);
-            controller.abort();
-        };
-    }, [query, expireSession]);
-
     return (
         <Card className="p-5 gap-4">
             <div className="flex items-center justify-between gap-3">
@@ -81,45 +42,7 @@ export default function AddGamePanel({onClose}) {
             ) : (
                 <>
                     <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.ADD_HINT')}</p>
-                    <div className="relative">
-                        <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>
-                        <Input type="search" autoFocus value={query} maxLength={100} className="pl-8"
-                               placeholder={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
-                               aria-label={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
-                               onChange={(e) => setQuery(e.target.value)}/>
-                    </div>
-
-                    {searchState === 'loading' && (
-                        <p className="flex items-center gap-2 text-sm text-muted-foreground">
-                            <Loader2 className="size-4 animate-spin"/>{t('MANUAL_GAME.SEARCHING')}
-                        </p>
-                    )}
-                    {searchState === 'unavailable' && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.UNAVAILABLE')}</p>}
-                    {searchState === 'failed' && <p className="text-sm text-destructive">{t('MANUAL_GAME.SEARCH_FAILED')}</p>}
-                    {searchState === 'done' && results.length === 0 && (
-                        <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.NO_HITS')}</p>
-                    )}
-                    {searchState === 'done' && results.length > 0 && (
-                        <ul className="divide-y rounded-md border">
-                            {results.map((hit) => (
-                                <li key={hit.igdbId}>
-                                    <button type="button" disabled={hit.inLibrary} onClick={() => setPicked(hit)}
-                                            className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60">
-                                        <GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-20 shrink-0"/>
-                                        <span className="min-w-0 flex-1">
-                                            <span className="block truncate font-medium">
-                                                {hit.name}{hit.year ? ` (${hit.year})` : ''}
-                                            </span>
-                                            <span className="block truncate text-xs text-muted-foreground">
-                                                {hit.platforms.join(' · ')}
-                                            </span>
-                                        </span>
-                                        {hit.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
+                    <GameSearch query={query} onQueryChange={setQuery} onPick={setPicked} blockInLibrary/>
                 </>
             )}
         </Card>

src/components/GameMergeDialog.jsx

@@ -0,0 +1,88 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {ArrowLeft, Loader2, Merge} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
+import GameSearch from './GameSearch.jsx';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import {mergeGame} from '../utils/corrections.js';
+import {isSteamKey} from '../utils/manualGames.js';
+
+const KNOWN_ERRORS = new Set(['SAME_GAME', 'STEAM_GAMES', 'GAME_NOT_FOUND']);
+
+/**
+ * AUDITOR or higher: merges this game with another key of the same game, for every user. onMerged gets the key
+ * the game lives under now.
+ */
+export default function GameMergeDialog({game, open, onOpenChange, onMerged}) {
+    const {t} = useTranslation();
+    const expireSession = useSessionExpired();
+    const [query, setQuery] = useState('');
+    const [picked, setPicked] = useState(null);
+    const [busy, setBusy] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            setQuery('');
+            setPicked(null);
+        }
+    }, [open]);
+
+    const merge = async () => {
+        setBusy(true);
+        try {
+            const response = await mergeGame(game.appid, picked.appid);
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            const data = await response.json().catch(() => ({}));
+            if (response.ok) {
+                toast.success(t('MERGE.DONE'));
+                onOpenChange(false);
+                onMerged(data.appid);
+                return;
+            }
+            toast.error(KNOWN_ERRORS.has(data.code) ? t(`MERGE.ERROR.${data.code}`)
+                : response.status === 403 ? t('MERGE.NO_ACCESS') : t('MERGE.ERROR.OTHER'));
+        } catch (err) {
+            console.error('Merge error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>{t('MERGE.TITLE')}</DialogTitle>
+                    <DialogDescription>{t('MERGE.HINT', {name: game.name})}</DialogDescription>
+                </DialogHeader>
+                {picked ? (
+                    <div className="space-y-4">
+                        <p className="text-sm">{t('MERGE.CONFIRM', {name: game.name, other: picked.name})}</p>
+                        <div className="flex flex-wrap gap-2">
+                            <Button type="button" variant="outline" disabled={busy} onClick={() => setPicked(null)}>
+                                <ArrowLeft/>{t('MERGE.BACK')}
+                            </Button>
+                            <Button type="button" variant="destructive" disabled={busy} onClick={merge}>
+                                {busy ? <Loader2 className="animate-spin"/> : <Merge/>}{t('MERGE.CONFIRM_BUTTON')}
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-3">
+                        {/* Core merges only games it knows and refuses two Steam games, so those are not offered. */}
+                        <GameSearch query={query} onQueryChange={setQuery} onPick={setPicked}
+                                    hide={(hit) => !hit.inCatalog || hit.appid === game.appid
+                                        || (isSteamKey(hit.appid) && isSteamKey(game.appid))}/>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/GameMergeDialog.test.jsx

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import {toast} from 'sonner';
+import GameMergeDialog from './GameMergeDialog.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const hades = {appid: 1145360, name: 'Hades'};
+const hit = (appid, name) => ({appid, igdbId: Math.abs(appid), name, year: 2020, imageUrl: null,
+    platforms: ['Switch'], inLibrary: false, inCatalog: true});
+
+const json = (status, body) => ({ok: status < 400, status, json: async () => body});
+
+function renderDialog(game, post, results) {
+    globalThis.fetch = vi.fn(async (url, init) => init?.method === 'POST'
+        ? post
+        : json(200, {available: true, results}));
+    const onMerged = vi.fn();
+    render(<MemoryRouter><GameMergeDialog game={game} open onOpenChange={vi.fn()} onMerged={onMerged}/></MemoryRouter>);
+    return onMerged;
+}
+
+const search = (value) => fireEvent.change(screen.getByRole('searchbox'), {target: {value}});
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('GameMergeDialog', () => {
+    it('merges the picked game after the confirm step', async () => {
+        const onMerged = renderDialog(hades, json(200, {appid: 1145360}),
+            [hit(1145360, 'Hades'), hit(-113112, 'Hades (Switch)'), hit(1145350, 'Hades II'),
+                {...hit(-4711, 'Hades Fan Remake'), inCatalog: false}]);
+        search('hades');
+
+        const offered = await screen.findByRole('button', {name: /Hades \(Switch\)/});
+        // The page's own game, other Steam games and games not in ToBePlayed are not offered.
+        expect(screen.queryByRole('button', {name: /^Hades \(2020\)/})).toBeNull();
+        expect(screen.queryByRole('button', {name: /Hades II/})).toBeNull();
+        expect(screen.queryByRole('button', {name: /Fan Remake/})).toBeNull();
+        fireEvent.click(offered);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        fireEvent.click(screen.getByRole('button', {name: 'MERGE.CONFIRM_BUTTON'}));
+
+        await waitFor(() => expect(onMerged).toHaveBeenCalledWith(1145360));
+        const [url, init] = fetch.mock.calls[1];
+        expect(url).toContain('/api/library/games/1145360/merge');
+        expect(JSON.parse(init.body)).toEqual({otherAppid: -113112});
+        expect(toast.success).toHaveBeenCalledWith('MERGE.DONE');
+    });
+
+    it('goes back from the confirm step without merging', async () => {
+        renderDialog(hades, json(200, {}), [hit(-113112, 'Hades (Switch)')]);
+        search('hades');
+
+        fireEvent.click(await screen.findByRole('button', {name: /Hades \(Switch\)/}));
+        fireEvent.click(screen.getByRole('button', {name: 'MERGE.BACK'}));
+
+        expect(await screen.findByRole('searchbox')).toBeTruthy();
+        expect(fetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('says why Core refused the merge', async () => {
+        const onMerged = renderDialog({appid: -113112, name: 'Hades (Switch)'},
+            json(404, {code: 'GAME_NOT_FOUND'}), [hit(1145360, 'Hades')]);
+        search('hades');
+
+        fireEvent.click(await screen.findByRole('button', {name: /Hades \(2020\)/}));
+        fireEvent.click(screen.getByRole('button', {name: 'MERGE.CONFIRM_BUTTON'}));
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('MERGE.ERROR.GAME_NOT_FOUND'));
+        expect(onMerged).not.toHaveBeenCalled();
+    });
+});

src/components/GameSearch.jsx

@@ -0,0 +1,111 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Loader2, Search} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Input} from '@/components/ui/input';
+import GameCover from './GameCover.jsx';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import {searchGames} from '../utils/manualGames.js';
+
+const SEARCH_DEBOUNCE_MS = 400;
+const MIN_QUERY = 2;
+
+/**
+ * The search field and the hits of Core's game search. The parent keeps the query, so it stays when the user goes
+ * back.
+ *
+ * @param hide hits not offered at all
+ * @param blockInLibrary hits already in the own library are shown, but cannot be picked
+ */
+export default function GameSearch({query, onQueryChange, onPick, hide = () => false, blockInLibrary = false}) {
+    const {t} = useTranslation();
+    const {searchState, results} = useGameSearch(query);
+    const hits = results.filter((hit) => !hide(hit));
+
+    return (
+        <>
+            <div className="relative">
+                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>
+                <Input type="search" autoFocus value={query} maxLength={100} className="pl-8"
+                       placeholder={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
+                       aria-label={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
+                       onChange={(e) => onQueryChange(e.target.value)}/>
+            </div>
+
+            {searchState === 'loading' && (
+                <p className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin"/>{t('MANUAL_GAME.SEARCHING')}
+                </p>
+            )}
+            {searchState === 'unavailable' && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.UNAVAILABLE')}</p>}
+            {searchState === 'failed' && <p className="text-sm text-destructive">{t('MANUAL_GAME.SEARCH_FAILED')}</p>}
+            {searchState === 'done' && hits.length === 0 && (
+                <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.NO_HITS')}</p>
+            )}
+            {searchState === 'done' && hits.length > 0 && (
+                <ul className="divide-y rounded-md border">
+                    {hits.map((hit) => (
+                        <li key={hit.appid}>
+                            <button type="button" disabled={blockInLibrary && hit.inLibrary} onClick={() => onPick(hit)}
+                                    className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60">
+                                <GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-20 shrink-0"/>
+                                <span className="min-w-0 flex-1">
+                                    <span className="block truncate font-medium">
+                                        {hit.name}{hit.year ? ` (${hit.year})` : ''}
+                                    </span>
+                                    <span className="block truncate text-xs text-muted-foreground">
+                                        {hit.platforms.join(' · ')}
+                                    </span>
+                                </span>
+                                {blockInLibrary && hit.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
+}
+
+// Asks Core 400 ms after the last key press; searchState is idle, loading, done, unavailable or failed.
+function useGameSearch(query) {
+    const expireSession = useSessionExpired();
+    const [searchState, setSearchState] = useState('idle');
+    const [results, setResults] = useState([]);
+
+    useEffect(() => {
+        const trimmed = query.trim();
+        if (trimmed.length < MIN_QUERY) {
+            setSearchState('idle');
+            setResults([]);
+            return undefined;
+        }
+        const controller = new AbortController();
+        const timer = setTimeout(async () => {
+            setSearchState('loading');
+            try {
+                const response = await searchGames(trimmed, controller.signal);
+                if (response.status === 401) {
+                    expireSession();
+                    return;
+                }
+                if (!response.ok) {
+                    setSearchState('failed');
+                    return;
+                }
+                const data = await response.json();
+                setResults(data.results ?? []);
+                setSearchState(data.available ? 'done' : 'unavailable');
+            } catch (err) {
+                if (err.name !== 'AbortError') setSearchState('failed');
+            }
+        }, SEARCH_DEBOUNCE_MS);
+        return () => {
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [query, expireSession]);
+
+    return {searchState, results};
+}