feat(import): add the import page, multi-select add and the favorite platform

src/pages/GameDetail.jsx

@@ -34,6 +34,7 @@ import {celebrationFor, celebrationLevel} from '../utils/confetti.js';
 import {setGameHidden} from '../utils/hiddenGames.js';
 import {hasSession} from '../utils/auth.js';
 import {isSteamKey} from '../utils/manualGames.js';
+import {platformLabel} from '../utils/platforms.js';
 
 const SPEEDRUN_PREFIX = 'https://www.speedrun.com/';
 
@@ -221,8 +222,8 @@ export default function GameDetail() {
                                         {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(data.playtimeMinutes)})}
                                     </Badge>
                                     <GameStatusBadge status={data.status}/>
-                                    {data.platform && (
-                                        <Badge variant="outline"><Gamepad2 className="size-3"/>{data.platform}</Badge>
+                                    {platformLabel(data) && (
+                                        <Badge variant="outline"><Gamepad2 className="size-3"/>{platformLabel(data)}</Badge>
                                     )}
                                 </div>
                                 <div className="mt-3">

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, EyeOff, Gamepad2, Library, Plus, RefreshCw, Search, SearchX, Timer, Trophy} from 'lucide-react';
+import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, EyeOff, Gamepad2, Library, Plus, RefreshCw, Search, SearchX, Timer, Trophy, Upload} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
@@ -22,6 +22,7 @@ import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {apiFetch} from '../utils/api.js';
 import {hasSession} from '../utils/auth.js';
+import {platformLabel} from '../utils/platforms.js';
 
 const PAGE_SIZES = [20, 40, 80];
 const DEFAULT_SIZE = 20;
@@ -195,6 +196,9 @@ export default function GameLibrary() {
                         <Button variant="outline" size="sm" onClick={() => setAdding(true)} disabled={adding}>
                             <Plus/>{t('MANUAL_GAME.ADD_BUTTON')}
                         </Button>
+                        <Button variant="outline" size="sm" asChild>
+                            <Link to="/import"><Upload/>{t('IMPORT.OPEN')}</Link>
+                        </Button>
                     </div>
                 </div>
                 <div className="flex flex-wrap items-center gap-3">
@@ -309,9 +313,9 @@ export default function GameLibrary() {
                                     <span className="min-w-0 flex-1 truncate font-medium group-hover:text-primary transition-colors">
                                         {g.name ?? `App ${g.appid}`}
                                     </span>
-                                    {g.platform && (
-                                        <Badge variant="outline" className="hidden sm:inline-flex" title={g.platform}>
-                                            <Gamepad2 className="size-3"/>{g.platform}
+                                    {platformLabel(g) && (
+                                        <Badge variant="outline" className="hidden sm:inline-flex" title={platformLabel(g)}>
+                                            <Gamepad2 className="size-3"/>{platformLabel(g)}
                                         </Badge>
                                     )}
                                     <GameStatusBadge status={g.status} compact/>

src/pages/GameLibrary.test.jsx

@@ -184,6 +184,15 @@ describe('GameLibrary with games added by hand', () => {
         expect(document.querySelector('img[src="https://images.igdb.com/z.jpg"]')).toBeTruthy();
     });
 
+    it('shows Steam as the platform of a Steam game, and links the import', async () => {
+        globalThis.fetch = answer([{appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'BACKLOG', source: 'STEAM',
+            platform: null}], true);
+        renderLibrary();
+
+        expect(await screen.findByText('Steam')).toBeTruthy();
+        expect(screen.getByRole('link', {name: 'IMPORT.OPEN'}).getAttribute('href')).toBe('/import');
+    });
+
     it('hides the Steam sync for a user without a Steam ID but still offers adding a game', async () => {
         globalThis.fetch = answer([zelda], false);
         renderLibrary();

src/pages/ImportPage.jsx

@@ -0,0 +1,554 @@
+import {memo, useCallback, useEffect, useRef, useState} from 'react';
+import {Link, useNavigate, useSearchParams} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
+import {ArrowLeft, CheckCircle2, Circle, Loader2, RotateCcw, Search, Upload, XCircle} 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 {Textarea} from '@/components/ui/textarea';
+import {cn} from '@/lib/utils';
+import GameSearch from '../components/GameSearch.jsx';
+import PageContainer from '../components/PageContainer.jsx';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import useStartImport from '../hooks/useStartImport.js';
+import {hasSession} from '../utils/auth.js';
+import {GAME_STATUSES} from '../utils/backlog.js';
+import {
+    checkUndo, getImport, listImports, MAX_IMPORT_ROWS, parseCsv, parseTextList, retryImport, saveImport, undoImport,
+} from '../utils/imports.js';
+import {hoursToMinutes, MAX_PLATFORM_LENGTH, toHours} from '../utils/manualGames.js';
+import {loadFavoritePlatform, preselectPlatform} from '../utils/platforms.js';
+
+const POLL_MS = 2000;
+// Statuses a worker still has: the page polls while it shows one.
+const RUNNING = ['QUEUED', 'MATCHING', 'SAVING'];
+// The steps an import goes through, as shown to the user.
+const STEPS = ['QUEUED', 'MATCHING', 'REVIEW', 'SAVING', 'DETAILS', 'DONE'];
+
+/**
+ * The step an import is in; a FAILED one is in the step it stopped in.
+ */
+export const stepOf = (data) => {
+    switch (data.status) {
+        case 'QUEUED': return 'QUEUED';
+        case 'MATCHING': return 'MATCHING';
+        case 'READY': return 'REVIEW';
+        case 'SAVING': return data.step === 'DETAILS' ? 'DETAILS' : 'SAVING';
+        case 'FAILED': return data.chosen > 0 ? 'SAVING' : 'MATCHING';
+        default: return 'DONE';
+    }
+};
+// The native select: a review of 1000 lines would mount 3000 Radix selects.
+const SELECT_CLASS = 'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2 text-sm dark:bg-input/30';
+
+/**
+ * Many games at once: a list or a CSV goes to Core, which matches it with IGDB in the background; the user checks
+ * the matches and saves them. ?id= opens one import; the history below can undo a saved import.
+ */
+export default function ImportPage() {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    const expireSession = useSessionExpired();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [imports, setImports] = useState(null);
+    const id = searchParams.get('id');
+
+    const loadImports = useCallback(async () => {
+        try {
+            const response = await listImports();
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            setImports(response.ok ? (await response.json()).imports : []);
+        } catch (err) {
+            console.error('Import list error:', err);
+            setImports([]);
+        }
+    }, [expireSession]);
+
+    useEffect(() => {
+        if (!hasSession()) {
+            navigate('/login');
+            return;
+        }
+        loadImports();
+    }, [navigate, loadImports]);
+
+    // Without ?id=, an import a worker still has is shown first; one to review or failed is in the history.
+    const open = imports?.find((entry) => RUNNING.includes(entry.status));
+    const show = useCallback((next) => setSearchParams(next ? {id: String(next)} : {}, {replace: !id}),
+        [setSearchParams, id]);
+    // Into the URL, so the import stays shown when it leaves the worker (review, done).
+    useEffect(() => {
+        if (!id && open) show(open.id);
+    }, [id, open, show]);
+    const shownId = id ?? (open ? String(open.id) : null);
+    const done = () => {
+        show(null);
+        loadImports();
+    };
+
+    return (
+        <PageContainer className="space-y-6">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+                <h1 className="flex items-center gap-2 text-2xl font-bold"><Upload className="size-5 text-primary"/>{t('IMPORT.TITLE')}</h1>
+                <Button variant="ghost" size="sm" asChild>
+                    <Link to="/library"><ArrowLeft/>{t('IMPORT.BACK')}</Link>
+                </Button>
+            </div>
+            {imports === null ? (
+                <Loader2 className="animate-spin text-muted-foreground"/>
+            ) : shownId ? (
+                <ImportView key={shownId} id={shownId} onDone={done} onChanged={loadImports} expireSession={expireSession}/>
+            ) : (
+                <ImportInput onCreated={(created) => {
+                    show(created);
+                    loadImports();
+                }}/>
+            )}
+            {imports?.length > 0 && <History imports={imports} onOpen={show} onChanged={loadImports} expireSession={expireSession}/>}
+        </PageContainer>
+    );
+}
+
+function ImportInput({onCreated}) {
+    const {t} = useTranslation();
+    const [source, setSource] = useState('TEXT');
+    const [text, setText] = useState('');
+    const [csv, setCsv] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const rows = source === 'TEXT' ? parseTextList(text) : csv?.rows ?? [];
+    const tooMany = rows.length > MAX_IMPORT_ROWS;
+
+    const readFile = async (file) => setCsv(file ? parseCsv(await file.text()) : null);
+
+    const startImport = useStartImport();
+    const start = async () => {
+        setBusy(true);
+        const id = await startImport(source, rows);
+        setBusy(false);
+        if (id) onCreated(id);
+    };
+
+    return (
+        <Card className="gap-4 p-5">
+            <p className="text-sm text-muted-foreground">{t('IMPORT.HINT')}</p>
+            <div role="group" aria-label={t('IMPORT.SOURCE')} className="flex gap-2">
+                {['TEXT', 'CSV'].map((value) => (
+                    <Button key={value} size="sm" variant={source === value ? 'default' : 'outline'} aria-pressed={source === value}
+                            onClick={() => setSource(value)}>{t(`IMPORT.SOURCE_${value}`)}</Button>
+                ))}
+            </div>
+            {source === 'TEXT' ? (
+                <Textarea rows={10} value={text} aria-label={t('IMPORT.TEXT_LABEL')} placeholder={t('IMPORT.TEXT_PLACEHOLDER')}
+                          onChange={(e) => setText(e.target.value)}/>
+            ) : (
+                <div className="space-y-2">
+                    <Input type="file" accept=".csv,text/csv" aria-label={t('IMPORT.CSV_LABEL')}
+                           onChange={(e) => readFile(e.target.files?.[0])}/>
+                    <p className="text-xs text-muted-foreground">{t('IMPORT.CSV_HINT')}</p>
+                    {csv?.error && <p className="text-sm text-destructive">{t(csv.error)}</p>}
+                    {csv?.rows?.length > 0 && (
+                        <ul className="text-sm text-muted-foreground">
+                            {csv.rows.slice(0, 5).map((row, index) => (
+                                <li key={index} className="truncate">
+                                    {[row.title, row.platform, row.status].filter(Boolean).join(' · ')}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            )}
+            <div className="flex flex-wrap items-center justify-between gap-3">
+                <span className={tooMany ? 'text-sm text-destructive' : 'text-sm text-muted-foreground'}>
+                    {t(tooMany ? 'IMPORT.TOO_MANY' : 'IMPORT.LINES', {count: rows.length, max: MAX_IMPORT_ROWS})}
+                </span>
+                <Button onClick={start} disabled={busy || rows.length === 0 || tooMany}>
+                    {busy ? <Loader2 className="animate-spin"/> : <Search/>}{t('IMPORT.START')}
+                </Button>
+            </div>
+        </Card>
+    );
+}
+
+// Polls while a worker has the import.
+function ImportView({id, onDone, onChanged, expireSession}) {
+    const {t} = useTranslation();
+    const [data, setData] = useState(null);
+    const [failed, setFailed] = useState(false);
+    // Grows after a save or a retry: the import is back with a worker, so polling starts again.
+    const [version, setVersion] = useState(0);
+    const reload = () => setVersion((current) => current + 1);
+    const lastStatus = useRef(null);
+    // undefined while loading: the review preselects with it, so it waits.
+    const [favorite, setFavorite] = useState(undefined);
+
+    useEffect(() => {
+        loadFavoritePlatform().then(setFavorite);
+    }, []);
+
+    useEffect(() => {
+        let timer;
+        let cancelled = false;
+        const load = async () => {
+            try {
+                const response = await getImport(id);
+                if (cancelled) return;
+                if (response.status === 401) {
+                    expireSession();
+                    return;
+                }
+                // A 4xx ends the polling; a 5xx while Core restarts is asked again.
+                if (response.status >= 400 && response.status < 500) {
+                    setFailed(true);
+                    return;
+                }
+                if (!response.ok) {
+                    timer = setTimeout(load, POLL_MS);
+                    return;
+                }
+                const next = await response.json();
+                if (cancelled) return;
+                // A new status also shows in the history.
+                if (lastStatus.current && lastStatus.current !== next.status) onChanged();
+                lastStatus.current = next.status;
+                setData(next);
+                if (RUNNING.includes(next.status)) timer = setTimeout(load, POLL_MS);
+            } catch (err) {
+                console.error('Import load error:', err);
+                if (!cancelled) timer = setTimeout(load, POLL_MS);
+            }
+        };
+        load();
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [id, expireSession, version, onChanged]);
+
+    if (failed) return <p className="text-sm text-destructive">{t('IMPORT.LOAD_FAILED')}</p>;
+    if (!data || favorite === undefined) return <Loader2 className="animate-spin text-muted-foreground"/>;
+    return (
+        <div className="space-y-4">
+            <ImportSteps data={data}/>
+            {data.status === 'READY' ? (
+                <Review data={data} favorite={favorite} onSaved={reload} onDone={onDone} expireSession={expireSession}/>
+            ) : (
+                <ImportProgress data={data} onRetried={reload} onDone={onDone} expireSession={expireSession}/>
+            )}
+        </div>
+    );
+}
+
+// The steps in a row: done ones checked, the current one marked (red when the import failed there).
+function ImportSteps({data}) {
+    const {t} = useTranslation();
+    const current = STEPS.indexOf(stepOf(data));
+    const failedHere = data.status === 'FAILED';
+    return (
+        <ol className="flex flex-wrap gap-x-4 gap-y-2 text-sm" aria-label={t('IMPORT.STEPS')}>
+            {STEPS.map((step, index) => {
+                const done = index < current || (index === current && step === 'DONE');
+                const now = index === current && !done;
+                return (
+                    <li key={step} aria-current={now ? 'step' : undefined}
+                        className={cn('flex items-center gap-1.5', done && 'text-muted-foreground',
+                            now && (failedHere ? 'font-medium text-destructive' : 'font-medium text-primary'),
+                            !done && !now && 'text-muted-foreground/60')}>
+                        {done ? <CheckCircle2 className="size-4"/> : now && failedHere ? <XCircle className="size-4"/>
+                            : now && RUNNING.includes(data.status) ? <Loader2 className="size-4 animate-spin"/>
+                                : <Circle className="size-4"/>}
+                        {t(`IMPORT.STEP.${step}`)}
+                    </li>
+                );
+            })}
+        </ol>
+    );
+}
+
+// What the current step does, with its numbers; Retry for a FAILED import.
+function ImportProgress({data, onRetried, onDone, expireSession}) {
+    const {t} = useTranslation();
+    const [busy, setBusy] = useState(false);
+    const step = stepOf(data);
+    const waiting = data.ahead != null;
+
+    const retry = async () => {
+        setBusy(true);
+        try {
+            const response = await retryImport(data.id);
+            if (response.status === 401) {
+                expireSession();
+            } else if (response.status === 409) {
+                toast.error(t('IMPORT.RUNNING'));
+            } else if (!response.ok) {
+                toast.error(t('IMPORT.RETRY_FAILED'));
+            } else {
+                onRetried();
+            }
+        } catch (err) {
+            console.error('Import retry error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    let text;
+    let progress = null;
+    if (data.status === 'FAILED') {
+        text = t('IMPORT.FAILED', {count: data.attempts});
+    } else if (waiting) {
+        text = data.ahead > 0 ? t('IMPORT.WAITING', {count: data.ahead}) : t('IMPORT.WAITING_NEXT');
+    } else if (step === 'MATCHING') {
+        text = t('IMPORT.MATCHING', {matched: data.matched, total: data.total});
+        progress = [data.matched, data.total];
+    } else if (step === 'SAVING') {
+        text = t('IMPORT.SAVING', {saved: data.saved, chosen: data.chosen});
+        progress = [data.saved, data.chosen];
+    } else if (step === 'DETAILS') {
+        text = t('IMPORT.DETAILS');
+    } else {
+        text = t(data.status === 'UNDONE' ? 'IMPORT.STATUS.UNDONE' : 'IMPORT.DONE',
+            {added: data.added, skipped: data.saved - data.added});
+    }
+
+    return (
+        <Card className="gap-3 p-5">
+            <p className={cn('font-medium', data.status === 'FAILED' && 'text-destructive')}>{text}</p>
+            {progress && <progress className="w-full accent-primary" value={progress[0]} max={progress[1]}/>}
+            {data.attempts > 0 && RUNNING.includes(data.status) && (
+                <p className="text-sm text-muted-foreground">{t('IMPORT.ATTEMPT', {attempt: data.attempts + 1})}</p>
+            )}
+            {RUNNING.includes(data.status) && <p className="text-sm text-muted-foreground">{t('IMPORT.MATCHING_HINT')}</p>}
+            <div className="flex flex-wrap gap-2">
+                {data.status === 'FAILED' && (
+                    <Button onClick={retry} disabled={busy}>
+                        {busy ? <Loader2 className="animate-spin"/> : <RotateCcw/>}{t('IMPORT.RETRY')}
+                    </Button>
+                )}
+                {!RUNNING.includes(data.status) && (
+                    <Button variant="outline" onClick={onDone}>{t('IMPORT.NEW')}</Button>
+                )}
+            </div>
+        </Card>
+    );
+}
+
+/**
+ * The first choice of a line: its best candidate with the preselected platform; checked only for a sure match (the
+ * same name, not in the library yet, a platform found).
+ */
+export const initialChoice = (row, favorite) => {
+    const candidate = row.candidates[0];
+    const platform = candidate ? preselectPlatform(row.platform, candidate.platforms, favorite) : '';
+    return {
+        candidates: row.candidates,
+        igdbId: candidate?.igdbId ?? null,
+        platform,
+        status: row.status ?? 'BACKLOG',
+        hours: toHours(row.playtimeMinutes),
+        checked: row.exact && !!candidate && !candidate.inLibrary && platform !== '',
+    };
+};
+
+function Review({data, favorite, onSaved, onDone, expireSession}) {
+    const {t} = useTranslation();
+    const [choices, setChoices] = useState(() => data.rows.map((row) => initialChoice(row, favorite)));
+    const [busy, setBusy] = useState(false);
+
+    // Stable, so a change in one line re-renders only that line (up to 1000 lines).
+    const change = useCallback((index, changes) => setChoices((current) =>
+        current.map((choice, i) => (i === index ? {...choice, ...changes} : choice))), []);
+    const pick = useCallback((index, candidate) => setChoices((current) => current.map((choice, i) => {
+        if (i !== index) return choice;
+        const candidates = choice.candidates.some((known) => known.igdbId === candidate.igdbId)
+            ? choice.candidates : [...choice.candidates, candidate];
+        return {...choice, candidates, igdbId: candidate.igdbId,
+            platform: preselectPlatform(data.rows[index].platform, candidate.platforms, favorite)};
+    })), [data.rows, favorite]);
+    const chosen = choices.map((choice, index) => ({choice, row: data.rows[index]}))
+        .filter(({choice}) => choice.checked && choice.igdbId && choice.platform.trim());
+
+    const save = async () => {
+        setBusy(true);
+        try {
+            const response = await saveImport(data.id, chosen.map(({choice, row}) => ({
+                lineNo: row.lineNo, igdbId: choice.igdbId, platform: choice.platform.trim(), status: choice.status,
+                playtimeMinutes: hoursToMinutes(choice.hours),
+            })));
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            if (!response.ok) {
+                toast.error(t('IMPORT.SAVE_FAILED'));
+                return;
+            }
+            onSaved();
+        } catch (err) {
+            console.error('Import save error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <Card className="gap-0 overflow-hidden p-0">
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b px-5 py-4">
+                <p className="text-sm text-muted-foreground">{t('IMPORT.REVIEW_HINT')}</p>
+                <div className="flex gap-2">
+                    <Button variant="ghost" onClick={onDone} disabled={busy}>{t('IMPORT.NEW')}</Button>
+                    <Button onClick={save} disabled={busy || chosen.length === 0}>
+                        {busy && <Loader2 className="animate-spin"/>}{t('IMPORT.SAVE', {count: chosen.length})}
+                    </Button>
+                </div>
+            </div>
+            <ul className="divide-y">
+                {choices.map((choice, index) => (
+                    <ReviewRow key={data.rows[index].lineNo} index={index} row={data.rows[index]} choice={choice}
+                               onChange={change} onPick={pick}/>
+                ))}
+            </ul>
+        </Card>
+    );
+}
+
+const ReviewRow = memo(function ReviewRow({index, row, choice, onChange: changeLine, onPick: pickLine}) {
+    const {t} = useTranslation();
+    const onChange = (changes) => changeLine(index, changes);
+    const onPick = (candidate) => pickLine(index, candidate);
+    const [searching, setSearching] = useState(false);
+    const [query, setQuery] = useState(row.title ?? '');
+    const candidate = choice.candidates.find((known) => known.igdbId === choice.igdbId);
+    const label = `${t('IMPORT.LINE', {line: row.lineNo})}: ${row.title ?? ''}`;
+
+    return (
+        <li className="space-y-2 px-5 py-3" data-line={row.lineNo}>
+            <div className="flex items-center gap-2">
+                <input type="checkbox" className="size-4 accent-primary" aria-label={label} checked={choice.checked}
+                       disabled={!candidate} onChange={(e) => onChange({checked: e.target.checked})}/>
+                <span className="min-w-0 flex-1 truncate text-sm">{label}</span>
+                {candidate?.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
+                {row.searchFailed && <Badge variant="destructive">{t('IMPORT.SEARCH_FAILED')}</Badge>}
+                <Button variant="ghost" size="sm" onClick={() => setSearching(!searching)}>
+                    <Search/>{t('IMPORT.SEARCH_AGAIN')}
+                </Button>
+            </div>
+            {searching && (
+                <GameSearch query={query} onQueryChange={setQuery} hide={(hit) => !hit.igdbId} onPick={(hit) => {
+                    onPick(hit);
+                    setSearching(false);
+                }}/>
+            )}
+            {choice.candidates.length === 0 ? (
+                <p className="text-sm text-muted-foreground">{t('IMPORT.NO_MATCH')}</p>
+            ) : (
+                <div className="grid gap-2 sm:grid-cols-[2fr_1fr_1fr_6rem]">
+                    <select className={SELECT_CLASS} aria-label={t('IMPORT.MATCH', {line: row.lineNo})} value={choice.igdbId ?? ''}
+                            onChange={(e) => onPick(choice.candidates.find((known) => String(known.igdbId) === e.target.value))}>
+                        {choice.candidates.map((known) => (
+                            <option key={known.igdbId} value={known.igdbId}>
+                                {known.name}{known.year ? ` (${known.year})` : ''}{known.inLibrary ? ` · ${t('MANUAL_GAME.IN_LIBRARY')}` : ''}
+                            </option>
+                        ))}
+                    </select>
+                    {candidate?.platforms.length > 0 ? (
+                        <select className={SELECT_CLASS} aria-label={t('IMPORT.PLATFORM', {line: row.lineNo})} value={choice.platform}
+                                onChange={(e) => onChange({platform: e.target.value})}>
+                            <option value="">{t('IMPORT.PICK_PLATFORM')}</option>
+                            {!candidate.platforms.includes(choice.platform) && choice.platform && (
+                                <option value={choice.platform}>{choice.platform}</option>
+                            )}
+                            {candidate.platforms.map((platform) => <option key={platform} value={platform}>{platform}</option>)}
+                        </select>
+                    ) : (
+                        <Input value={choice.platform} maxLength={MAX_PLATFORM_LENGTH} aria-label={t('IMPORT.PLATFORM', {line: row.lineNo})}
+                               onChange={(e) => onChange({platform: e.target.value})}/>
+                    )}
+                    <select className={SELECT_CLASS} aria-label={t('IMPORT.STATUS_LABEL', {line: row.lineNo})} value={choice.status}
+                            onChange={(e) => onChange({status: e.target.value})}>
+                        {GAME_STATUSES.map((status) => <option key={status} value={status}>{t(`BACKLOG.STATUS.${status}`)}</option>)}
+                    </select>
+                    <Input type="number" min="0" step="0.5" inputMode="decimal" value={choice.hours}
+                           aria-label={t('IMPORT.HOURS', {line: row.lineNo})} onChange={(e) => onChange({hours: e.target.value})}/>
+                </div>
+            )}
+        </li>
+    );
+});
+
+function History({imports, onOpen, onChanged, expireSession}) {
+    const {t, i18n} = useTranslation();
+    const [confirm, setConfirm] = useState(null);
+    const [busy, setBusy] = useState(false);
+
+    const run = async (call, onOk) => {
+        setBusy(true);
+        try {
+            const response = await call();
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            if (!response.ok) {
+                toast.error(t('IMPORT.UNDO_FAILED'));
+                return;
+            }
+            await onOk(response);
+        } catch (err) {
+            console.error('Import undo error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+    const askUndo = (id) => run(() => checkUndo(id), async (response) => setConfirm({id, ...await response.json()}));
+    const undo = () => run(() => undoImport(confirm.id), () => {
+        toast.success(t('IMPORT.UNDONE', {count: confirm.games}));
+        setConfirm(null);
+        onChanged();
+    });
+
+    return (
+        <Card className="gap-0 p-0">
+            <h2 className="border-b px-5 py-3 font-semibold">{t('IMPORT.HISTORY')}</h2>
+            <ul className="divide-y">
+                {imports.map((entry) => (
+                    <li key={entry.id} className="flex flex-wrap items-center gap-3 px-5 py-3 text-sm">
+                        <span className="tabular-nums text-muted-foreground">
+                            {new Date(entry.createdAt).toLocaleDateString(i18n.language)}
+                        </span>
+                        <span className="flex-1">
+                            {t(`IMPORT.SOURCE_${entry.source}`)} · {t('IMPORT.LINES', {count: entry.total})}
+                        </span>
+                        <Badge variant={entry.status === 'FAILED' ? 'destructive' : 'outline'}>{t(`IMPORT.STATUS.${entry.status}`)}</Badge>
+                        {entry.status !== 'SAVED' && entry.status !== 'UNDONE' && (
+                            <Button variant="outline" size="sm" onClick={() => onOpen(entry.id)}>{t('IMPORT.OPEN_IMPORT')}</Button>
+                        )}
+                        {(entry.status === 'SAVED' || (entry.status === 'FAILED' && entry.added > 0))
+                            && confirm?.id !== entry.id && (
+                            <Button variant="outline" size="sm" disabled={busy} onClick={() => askUndo(entry.id)}>
+                                <RotateCcw/>{t('IMPORT.UNDO')}
+                            </Button>
+                        )}
+                        {confirm?.id === entry.id && (
+                            <div className="flex w-full flex-wrap items-center gap-2">
+                                <span>{t('IMPORT.UNDO_CONFIRM', {count: confirm.games, changed: confirm.changed})}</span>
+                                <Button variant="destructive" size="sm" disabled={busy} onClick={undo}>{t('IMPORT.UNDO_YES')}</Button>
+                                <Button variant="ghost" size="sm" disabled={busy} onClick={() => setConfirm(null)}>
+                                    {t('MANUAL_GAME.REMOVE_NO')}
+                                </Button>
+                            </div>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </Card>
+    );
+}

src/pages/ImportPage.test.jsx

@@ -0,0 +1,226 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor, within} from '@testing-library/react';
+import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {toast} from 'sonner';
+import ImportPage, {initialChoice, stepOf} from './ImportPage.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const json = (status, body) => ({ok: status < 400, status, json: async () => body});
+
+const hades = {igdbId: 1, name: 'Hades', year: 2020, imageUrl: null, platforms: ['PC', 'Switch'], inLibrary: false};
+const hades2 = {igdbId: 2, name: 'Hades II', year: 2025, imageUrl: null, platforms: ['PC'], inLibrary: false};
+const celeste = {igdbId: 3, name: 'Celeste', year: 2018, imageUrl: null, platforms: ['PC', 'PS4'], inLibrary: true};
+const row = (lineNo, title, candidates, extra = {}) => ({
+    lineNo, title, platform: null, playtimeMinutes: null, status: null, searchFailed: false, exact: true, candidates, ...extra,
+});
+const ready = {
+    id: 5, source: 'TEXT', status: 'READY', total: 3, matched: 3, rows: [
+        row(1, 'Hades', [hades, hades2]),
+        row(2, 'Celeste', [celeste]),
+        row(3, 'Hade', [hades2, hades], {exact: false, playtimeMinutes: 90}),
+    ],
+};
+
+// routes: 'METHOD path after /imports' -> response or (init) => response; any other URL (Auth) answers the favorite
+function renderPage(routes, entry = '/import') {
+    globalThis.fetch = vi.fn(async (url, init) => {
+        if (!url.includes('/api/library/imports')) return json(200, {settings: {favoritePlatform: 'Switch'}});
+        const path = new URL(url, 'http://x').pathname.replace(/.*\/api\/library\/imports/, '');
+        const answer = routes[`${init?.method ?? 'GET'} ${path}`];
+        if (!answer) throw new Error(`no route ${init?.method ?? 'GET'} ${path}`);
+        return typeof answer === 'function' ? answer(init) : answer;
+    });
+    render(
+        <MemoryRouter initialEntries={[entry]}>
+            <Routes>
+                <Route path="/import" element={<PreferencesProvider><ImportPage/></PreferencesProvider>}/>
+                <Route path="/login" element={<p>login</p>}/>
+            </Routes>
+        </MemoryRouter>,
+    );
+}
+
+const posted = (method, path) => fetch.mock.calls.find(([url, init]) => init?.method === method && url.endsWith(path));
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('initialChoice', () => {
+    it('checks only a sure match with a platform', () => {
+        expect(initialChoice(ready.rows[0], 'Switch')).toMatchObject({igdbId: 1, platform: 'Switch', checked: true});
+        expect(initialChoice(ready.rows[0], null)).toMatchObject({platform: '', checked: false});
+        expect(initialChoice(ready.rows[1], 'PC')).toMatchObject({platform: 'PC', checked: false});
+        expect(initialChoice(ready.rows[2], 'PC')).toMatchObject({platform: 'PC', checked: false, hours: '1.5'});
+        expect(initialChoice(row(4, 'x', []), 'PC')).toMatchObject({igdbId: null, checked: false});
+    });
+});
+
+describe('stepOf', () => {
+    it('maps the status to the step, and a failed import to the step it stopped in', () => {
+        expect(stepOf({status: 'QUEUED'})).toBe('QUEUED');
+        expect(stepOf({status: 'READY'})).toBe('REVIEW');
+        expect(stepOf({status: 'SAVING', step: null})).toBe('SAVING');
+        expect(stepOf({status: 'SAVING', step: 'DETAILS'})).toBe('DETAILS');
+        expect(stepOf({status: 'FAILED', chosen: 0})).toBe('MATCHING');
+        expect(stepOf({status: 'FAILED', chosen: 3})).toBe('SAVING');
+        expect(stepOf({status: 'UNDONE'})).toBe('DONE');
+    });
+});
+
+describe('ImportPage', () => {
+    it('shows a queued import with the imports before it', async () => {
+        renderPage({
+            'GET ': json(200, {imports: []}),
+            'GET /8': json(200, {id: 8, source: 'CSV', status: 'QUEUED', total: 40, matched: 0, chosen: 0, saved: 0,
+                added: 0, ahead: 2, attempts: 0}),
+        }, '/import?id=8');
+
+        expect(await screen.findByText('IMPORT.WAITING:2')).toBeTruthy();
+        expect(screen.getByText('IMPORT.STEP.QUEUED').closest('li').getAttribute('aria-current')).toBe('step');
+    });
+
+    it('tries a failed import again and polls it', async () => {
+        let retried = false;
+        renderPage({
+            'GET ': json(200, {imports: []}),
+            'GET /6': () => json(200, {id: 6, source: 'TEXT', total: 10, matched: retried ? 4 : 2, chosen: 0, saved: 0,
+                added: 0, ahead: null, attempts: retried ? 0 : 3, status: retried ? 'MATCHING' : 'FAILED'}),
+            'POST /6/retry': () => {
+                retried = true;
+                return json(202, null);
+            },
+        }, '/import?id=6');
+
+        expect(await screen.findByText('IMPORT.FAILED:3')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', {name: 'IMPORT.RETRY'}));
+
+        expect(await screen.findByText('IMPORT.MATCHING')).toBeTruthy();
+        expect(posted('POST', '/6/retry')).toBeTruthy();
+    });
+
+    it('starts an import from the list and shows the progress', async () => {
+        renderPage({
+            'GET ': json(200, {imports: []}),
+            'POST ': json(202, {id: 9}),
+            'GET /9': json(200, {id: 9, source: 'TEXT', status: 'MATCHING', total: 2, matched: 1}),
+        });
+        fireEvent.change(await screen.findByLabelText('IMPORT.TEXT_LABEL'), {target: {value: 'Hades\n\n Celeste \n'}});
+        expect(screen.getByText('IMPORT.LINES:2')).toBeTruthy();
+
+        fireEvent.click(screen.getByRole('button', {name: 'IMPORT.START'}));
+
+        expect(await screen.findByText('IMPORT.MATCHING')).toBeTruthy();
+        expect(JSON.parse(posted('POST', '/imports')[1].body)).toEqual({
+            source: 'TEXT', rows: [{title: 'Hades'}, {title: 'Celeste'}],
+        });
+    });
+
+    it('polls while matching and then shows the review', async () => {
+        let calls = 0;
+        renderPage({
+            'GET ': json(200, {imports: [{...ready, status: 'MATCHING', rows: null}]}),
+            'GET /5': () => (++calls === 1 ? json(200, {...ready, status: 'MATCHING', matched: 1, rows: null}) : json(200, ready)),
+        });
+
+        expect(await screen.findByText('IMPORT.MATCHING')).toBeTruthy();
+        expect(await screen.findByText('IMPORT.LINE: Hades', {}, {timeout: 3000})).toBeTruthy();
+    });
+
+    it('preselects the favorite, checks only sure matches, and saves the checked lines', async () => {
+        let saved = false;
+        renderPage({
+            'GET ': json(200, {imports: []}),
+            'GET /5': () => json(200, saved ? {...ready, status: 'SAVED', chosen: 2, saved: 2, added: 1, rows: null} : ready),
+            'POST /5/save': () => {
+                saved = true;
+                return json(202, null);
+            },
+        }, '/import?id=5');
+
+        const first = await screen.findByLabelText('IMPORT.LINE: Hades');
+        await waitFor(() => expect(within(first.closest('li')).getByLabelText('IMPORT.PLATFORM').value).toBe('Switch'));
+        expect(first.checked).toBe(true);
+        // In the library already, and not the same name.
+        expect(screen.getByLabelText('IMPORT.LINE: Celeste').checked).toBe(false);
+        const third = screen.getByLabelText('IMPORT.LINE: Hade');
+        expect(third.checked).toBe(false);
+
+        const line3 = third.closest('li');
+        fireEvent.change(within(line3).getByLabelText('IMPORT.MATCH'), {target: {value: '1'}});
+        expect(within(line3).getByLabelText('IMPORT.PLATFORM').value).toBe('Switch');
+        fireEvent.change(within(line3).getByLabelText('IMPORT.STATUS_LABEL'), {target: {value: 'PLAYING'}});
+        fireEvent.click(third);
+        fireEvent.click(screen.getByRole('button', {name: 'IMPORT.SAVE:2'}));
+
+        // The save runs in the background; the page polls until it is done.
+        expect(await screen.findByText('IMPORT.DONE')).toBeTruthy();
+        expect(JSON.parse(posted('POST', '/5/save')[1].body)).toEqual({rows: [
+            {lineNo: 1, igdbId: 1, platform: 'Switch', status: 'BACKLOG', playtimeMinutes: 0},
+            {lineNo: 3, igdbId: 1, platform: 'Switch', status: 'PLAYING', playtimeMinutes: 90},
+        ]});
+    });
+
+    it('undoes a saved import after a confirm with the changed count', async () => {
+        renderPage({
+            'GET ': json(200, {imports: [{id: 4, source: 'CSV', status: 'SAVED', total: 3, matched: 3, createdAt: '2026-09-29T10:00:00Z'}]}),
+            'GET /4/undo-check': json(200, {games: 3, changed: 1}),
+            'DELETE /4/games': json(204, null),
+        });
+
+        fireEvent.click(await screen.findByRole('button', {name: 'IMPORT.UNDO'}));
+        expect(await screen.findByText('IMPORT.UNDO_CONFIRM:3')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', {name: 'IMPORT.UNDO_YES'}));
+
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('IMPORT.UNDONE:3'));
+        expect(posted('DELETE', '/4/games')).toBeTruthy();
+    });
+
+    it('says so when another import is still matching', async () => {
+        renderPage({'GET ': json(200, {imports: []}), 'POST ': json(409, {code: 'IMPORT_RUNNING'})});
+        fireEvent.change(await screen.findByLabelText('IMPORT.TEXT_LABEL'), {target: {value: 'Hades'}});
+
+        fireEvent.click(screen.getByRole('button', {name: 'IMPORT.START'}));
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('IMPORT.RUNNING'));
+    });
+
+    it('stops polling on a 4xx and says so', async () => {
+        renderPage({'GET ': json(200, {imports: []}), 'GET /abc': json(400, null)}, '/import?id=abc');
+
+        expect(await screen.findByText('IMPORT.LOAD_FAILED')).toBeTruthy();
+    });
+
+    it('keeps showing an import opened without an id when it leaves the worker', async () => {
+        let polls = 0;
+        const matching = {id: 5, source: 'TEXT', status: 'MATCHING', total: 3, matched: 1, chosen: 0, saved: 0, added: 0,
+            ahead: null, attempts: 0, rows: null};
+        renderPage({
+            'GET ': () => json(200, {imports: [polls > 1 ? {...ready, rows: null} : matching]}),
+            'GET /5': () => (++polls > 1 ? json(200, ready) : json(200, matching)),
+        });
+
+        expect(await screen.findByText('IMPORT.LINE: Hades', {}, {timeout: 4000})).toBeTruthy();
+    }, 10000);
+
+    it('keeps polling after a 502 while Core restarts', async () => {
+        let calls = 0;
+        renderPage({
+            'GET ': json(200, {imports: []}),
+            'GET /8': () => (++calls === 1 ? json(502, null) : json(200, {id: 8, source: 'TEXT', status: 'MATCHING',
+                total: 4, matched: 1, chosen: 0, saved: 0, added: 0, ahead: null, attempts: 0})),
+        }, '/import?id=8');
+
+        expect(await screen.findByText('IMPORT.MATCHING', {}, {timeout: 4000})).toBeTruthy();
+    }, 10000);
+});

src/pages/SettingsPage.jsx

@@ -26,9 +26,11 @@ import {AccentPicker, CornersPicker} from '../components/StylePickers.jsx';
 import ProfileStyleSettings from '../components/ProfileStyleSettings.jsx';
 import {normalizeProfileStyle} from '../utils/profileStyle.js';
 import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
+import useSaveResponse from '../hooks/useSaveResponse.js';
 import {coverUrl} from '../utils/games.js';
 import {apiFetch, refreshSession} from '../utils/api.js';
 import {hasSession, markSession} from '../utils/auth.js';
+import {FAVORITE_PLATFORMS, saveFavoritePlatform} from '../utils/platforms.js';
 
 const BACKEND_ERROR_KEY = {
     DISPLAY_NAME_ALREADY_IN_USE: 'SETTINGS.ERROR_DISPLAY_NAME_IN_USE',
@@ -43,6 +45,8 @@ const STEAM_LINK_TOASTS = {
 };
 
 const SUPPORTED_LANGUAGES = ['en', 'de'];
+// Radix Select has no empty value.
+const NO_FAVORITE = 'NONE';
 
 const formatDate = (value, locale) => {
     if (!value) return '—';
@@ -60,6 +64,7 @@ export default function SettingsPage() {
     const {isDarkMode, setDarkMode, setLanguage, appearance} = usePreferences();
     const saveAppearance = useSaveAppearance();
     const saveStyle = useSaveProfileStyle();
+    const runSave = useSaveResponse();
 
     const [profile, setProfile] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -195,6 +200,14 @@ export default function SettingsPage() {
         await persistSettings({...savedSettings(), language: next});
     };
 
+    const handleFavoritePlatformChange = async (value) => {
+        const platform = value === NO_FAVORITE ? null : value;
+        if (await runSave(() => saveFavoritePlatform(platform))) {
+            setProfile((p) => ({...p, settings: {...p.settings, favoritePlatform: platform}}));
+            toast.success(t('SETTINGS.SAVED'));
+        }
+    };
+
     const handlePublicProfileToggle = async () => {
         const next = !profile?.settings?.publicProfile;
         const result = await persistSettings({...savedSettings(), publicProfile: next});
@@ -308,6 +321,23 @@ export default function SettingsPage() {
                             </SelectContent>
                         </Select>
                     </div>
+                    <div className="flex items-center justify-between gap-4">
+                        <div className="space-y-1">
+                            <Label htmlFor="favoritePlatform">{t('SETTINGS.FAVORITE_PLATFORM')}</Label>
+                            <p className="text-xs text-muted-foreground">{t('SETTINGS.FAVORITE_PLATFORM_HINT')}</p>
+                        </div>
+                        <Select value={profile?.settings?.favoritePlatform ?? NO_FAVORITE} onValueChange={handleFavoritePlatformChange}>
+                            <SelectTrigger id="favoritePlatform" className="w-48">
+                                <SelectValue/>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value={NO_FAVORITE}>{t('SETTINGS.FAVORITE_PLATFORM_NONE')}</SelectItem>
+                                {FAVORITE_PLATFORMS.map((platform) => (
+                                    <SelectItem key={platform.value} value={platform.value}>{platform.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
                 </CardContent>
             </Card>
 

src/pages/SettingsPage.test.jsx

@@ -168,3 +168,33 @@ describe('SettingsPage appearance', () => {
         expect(appearancePuts()[1].showBanner).toBe(false);
     });
 });
+
+describe('SettingsPage favorite platform', () => {
+    beforeEach(() => {
+        localStorage.setItem('tbp_session', '1');
+        // Radix Select needs these in jsdom.
+        Element.prototype.hasPointerCapture ??= () => false;
+        Element.prototype.scrollIntoView ??= () => {};
+    });
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    it('shows the saved favorite and saves a new one, or none', async () => {
+        renderPage(profile({settings: {useDarkTheme: true, language: 'de', publicProfile: true, favoritePlatform: 'PS5'}}));
+
+        const trigger = await screen.findByRole('combobox', {name: 'SETTINGS.FAVORITE_PLATFORM'});
+        expect(trigger.textContent).toContain('PlayStation 5');
+
+        fireEvent.pointerDown(trigger, {button: 0, ctrlKey: false, pointerType: 'mouse'});
+        fireEvent.click(await screen.findByRole('option', {name: 'Nintendo Switch 2'}));
+        await waitFor(() => expect(puts()).toEqual([{platform: 'Switch 2'}]));
+        expect(fetch.mock.calls.find(([, init]) => init?.method === 'PUT')[0]).toContain('/api/users/settings/favorite-platform');
+
+        fireEvent.pointerDown(trigger, {button: 0, ctrlKey: false, pointerType: 'mouse'});
+        fireEvent.click(await screen.findByRole('option', {name: 'SETTINGS.FAVORITE_PLATFORM_NONE'}));
+        await waitFor(() => expect(puts()).toEqual([{platform: 'Switch 2'}, {platform: null}]));
+    });
+});