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

src/components/AddGamePanel.jsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {toast} from 'sonner';
@@ -12,11 +12,14 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/c
 import GameCover from './GameCover.jsx';
 import GameSearch from './GameSearch.jsx';
 import useSessionExpired from '../hooks/useSessionExpired.js';
+import useStartImport from '../hooks/useStartImport.js';
 import {GAME_STATUSES} from '../utils/backlog.js';
 import {addGame, hoursToMinutes} from '../utils/manualGames.js';
+import {loadFavoritePlatform, preselectPlatform} from '../utils/platforms.js';
 
 /**
- * Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch.
+ * Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch; or check several and review
+ * them on the import page.
  */
 export default function AddGamePanel({onClose}) {
     const {t} = useTranslation();
@@ -24,6 +27,29 @@ export default function AddGamePanel({onClose}) {
     const expireSession = useSessionExpired();
     const [query, setQuery] = useState('');
     const [picked, setPicked] = useState(null);
+    // igdbId -> hit, over several searches.
+    const [selected, setSelected] = useState(() => new Map());
+    const [busy, setBusy] = useState(false);
+    const [favorite, setFavorite] = useState(null);
+    useEffect(() => {
+        loadFavoritePlatform().then(setFavorite);
+    }, []);
+    const startImport = useStartImport();
+
+    const toggle = (hit) => {
+        const next = new Map(selected);
+        if (!next.delete(hit.igdbId)) next.set(hit.igdbId, hit);
+        setSelected(next);
+    };
+
+    // Several games go through a SEARCH import: its review picks the platforms, and it can be undone.
+    const reviewSelected = async () => {
+        setBusy(true);
+        const id = await startImport('SEARCH', [...selected.values()]
+            .map((hit) => ({igdbId: hit.igdbId, title: hit.name.slice(0, 100)})));
+        setBusy(false);
+        if (id) navigate(`/import?id=${id}`);
+    };
 
     return (
         <Card className="p-5 gap-4">
@@ -38,20 +64,34 @@ export default function AddGamePanel({onClose}) {
             </div>
 
             {picked ? (
-                <AddForm hit={picked} onBack={() => setPicked(null)} navigate={navigate} expireSession={expireSession}/>
+                <AddForm hit={picked} favorite={favorite} onBack={() => setPicked(null)} navigate={navigate}
+                         expireSession={expireSession}/>
             ) : (
                 <>
                     <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.ADD_HINT')}</p>
-                    <GameSearch query={query} onQueryChange={setQuery} onPick={setPicked} blockInLibrary/>
+                    <GameSearch query={query} onQueryChange={setQuery} onPick={setPicked} blockInLibrary
+                                selected={selected} onToggle={toggle}/>
+                    {selected.size > 0 && (
+                        <div className="flex flex-wrap items-center justify-between gap-3">
+                            <span className="text-sm text-muted-foreground">{t('MANUAL_GAME.SELECTED', {count: selected.size})}</span>
+                            <Button onClick={reviewSelected} disabled={busy}>
+                                {busy ? <Loader2 className="animate-spin"/> : <Plus/>}{t('MANUAL_GAME.ADD_SELECTED')}
+                            </Button>
+                        </div>
+                    )}
                 </>
             )}
         </Card>
     );
 }
 
-function AddForm({hit, onBack, navigate, expireSession}) {
+function AddForm({hit, favorite, onBack, navigate, expireSession}) {
     const {t} = useTranslation();
-    const [platform, setPlatform] = useState(hit.platforms[0] ?? '');
+    const [platform, setPlatform] = useState(() => preselectPlatform(null, hit.platforms, favorite));
+    // The favorite can arrive after the pick; it fills only a platform the user has not picked yet.
+    useEffect(() => {
+        setPlatform((current) => current || preselectPlatform(null, hit.platforms, favorite));
+    }, [favorite, hit.platforms]);
     const [status, setStatus] = useState('BACKLOG');
     const [hours, setHours] = useState('');
     const [busy, setBusy] = useState(false);
@@ -97,7 +137,9 @@ function AddForm({hit, onBack, navigate, expireSession}) {
                     <Label htmlFor="add-platform">{t('MANUAL_GAME.PLATFORM')}</Label>
                     {hit.platforms.length > 0 ? (
                         <Select value={platform} onValueChange={setPlatform}>
-                            <SelectTrigger id="add-platform" className="w-full"><SelectValue/></SelectTrigger>
+                            <SelectTrigger id="add-platform" className="w-full">
+                                <SelectValue placeholder={t('IMPORT.PICK_PLATFORM')}/>
+                            </SelectTrigger>
                             <SelectContent>
                                 {hit.platforms.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
                             </SelectContent>

src/components/AddGamePanel.test.jsx

@@ -16,20 +16,24 @@ const portal = {...zelda, appid: 400, igdbId: 71, name: 'Portal', inLibrary: tru
 
 const json = (status, body) => ({ok: status < 400, status, json: async () => body});
 
-function renderPanel(post = json(201, {appid: -1025})) {
-    globalThis.fetch = vi.fn(async (url, init) => init?.method === 'POST'
-        ? post
-        : json(200, {available: true, results: [zelda, portal]}));
+function renderPanel(post = json(201, {appid: -1025}), favoritePlatform = 'Nintendo Switch') {
+    globalThis.fetch = vi.fn(async (url, init) => {
+        if (url.includes('/api/users/me')) return json(200, {role: 'USER', settings: {favoritePlatform}});
+        return init?.method === 'POST' ? post : json(200, {available: true, results: [zelda, portal]});
+    });
     render(
         <MemoryRouter initialEntries={['/library']}>
             <Routes>
                 <Route path="/library" element={<AddGamePanel onClose={() => {}}/>}/>
                 <Route path="/library/:appid" element={<p>detail page</p>}/>
+                <Route path="/import" element={<p>import page</p>}/>
             </Routes>
         </MemoryRouter>,
     );
 }
 
+const searchCalls = () => fetch.mock.calls.filter(([url]) => url.includes('game-search'));
+
 const search = (value) => fireEvent.change(screen.getByRole('searchbox'), {target: {value}});
 
 beforeEach(() => {
@@ -48,7 +52,7 @@ describe('AddGamePanel', () => {
         search('z');
 
         await new Promise((resolve) => setTimeout(resolve, 600));
-        expect(fetch).not.toHaveBeenCalled();
+        expect(searchCalls()).toHaveLength(0);
     });
 
     it('searches once after typing stops and blocks games already in the library', async () => {
@@ -57,13 +61,13 @@ describe('AddGamePanel', () => {
         search('zel');
 
         const hit = await screen.findByRole('button', {name: /Zelda \(2017\)/});
-        expect(fetch).toHaveBeenCalledTimes(1);
-        expect(fetch.mock.calls[0][0]).toContain('/api/library/game-search?q=zel');
+        expect(searchCalls()).toHaveLength(1);
+        expect(searchCalls()[0][0]).toContain('/api/library/game-search?q=zel');
         expect(hit.disabled).toBe(false);
         expect(screen.getByRole('button', {name: /Portal/}).disabled).toBe(true);
     });
 
-    it('adds the picked game with the first platform and the hours, then opens its page', async () => {
+    it('adds the picked game with the favorite platform and the hours, then opens its page', async () => {
         renderPanel();
         search('zelda');
         fireEvent.click(await screen.findByRole('button', {name: /Zelda/}));
@@ -79,6 +83,29 @@ describe('AddGamePanel', () => {
         });
     });
 
+    it('preselects no platform without a favorite among several, so Add waits for a pick', async () => {
+        renderPanel(undefined, null);
+        search('zelda');
+        fireEvent.click(await screen.findByRole('button', {name: /Zelda/}));
+
+        expect(screen.getByRole('button', {name: 'MANUAL_GAME.ADD'}).disabled).toBe(true);
+    });
+
+    it('sends several checked games to a search import and opens its review', async () => {
+        renderPanel(json(202, {id: 7}));
+        search('zelda');
+        const [zeldaBox, portalBox] = await screen.findAllByRole('checkbox', {name: 'MANUAL_GAME.SELECT'});
+        expect(portalBox.disabled).toBe(true);
+        fireEvent.click(zeldaBox);
+
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.ADD_SELECTED'}));
+
+        expect(await screen.findByText('import page')).toBeTruthy();
+        const [url, init] = fetch.mock.calls.find(([, call]) => call?.method === 'POST');
+        expect(url).toContain('/api/library/imports');
+        expect(JSON.parse(init.body)).toEqual({source: 'SEARCH', rows: [{igdbId: 1025, title: 'Zelda'}]});
+    });
+
     it('says so when the game is already in the library', async () => {
         renderPanel(json(409, {code: 'ALREADY_IN_LIBRARY'}));
         search('zelda');
@@ -92,7 +119,8 @@ describe('AddGamePanel', () => {
 
     it('shows that adding is off when Core has no IGDB app', async () => {
         renderPanel();
-        fetch.mockImplementation(async () => json(200, {available: false, results: []}));
+        fetch.mockImplementation(async (url) => (url.includes('/api/users/me')
+            ? json(200, {settings: {}}) : json(200, {available: false, results: []})));
         search('zelda');
 
         expect(await screen.findByText('MANUAL_GAME.UNAVAILABLE')).toBeTruthy();

src/components/GameSearch.jsx

@@ -17,8 +17,10 @@ const MIN_QUERY = 2;
  *
  * @param hide hits not offered at all
  * @param blockInLibrary hits already in the own library are shown, but cannot be picked
+ * @param selected with onToggle: igdb ids checked for a pick of several games; each hit gets a checkbox
  */
-export default function GameSearch({query, onQueryChange, onPick, hide = () => false, blockInLibrary = false}) {
+export default function GameSearch({query, onQueryChange, onPick, hide = () => false, blockInLibrary = false,
+                                       selected, onToggle}) {
     const {t} = useTranslation();
     const {searchState, results} = useGameSearch(query);
     const hits = results.filter((hit) => !hide(hit));
@@ -45,23 +47,32 @@ export default function GameSearch({query, onQueryChange, onPick, hide = () => f
             )}
             {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})` : ''}
+                    {hits.map((hit) => {
+                        const blocked = blockInLibrary && hit.inLibrary;
+                        return (
+                            <li key={hit.appid} className="flex items-center">
+                                {onToggle && (
+                                    <input type="checkbox" className="ml-3 size-4 shrink-0 accent-primary"
+                                           aria-label={t('MANUAL_GAME.SELECT', {name: hit.name})}
+                                           checked={selected.has(hit.igdbId)} disabled={!hit.igdbId || blocked}
+                                           onChange={() => onToggle(hit)}/>
+                                )}
+                                <button type="button" disabled={blocked} 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>
-                                    <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>
-                    ))}
+                                    {blocked && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
+                                </button>
+                            </li>
+                        );
+                    })}
                 </ul>
             )}
         </>

src/components/ManualGameCard.jsx

@@ -9,10 +9,7 @@ import {Card} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
 import useSessionExpired from '../hooks/useSessionExpired.js';
-import {hoursToMinutes, removeGame, updateManualGame} from '../utils/manualGames.js';
-
-// Two decimals: then hoursToMinutes gives back the same minute, so an unchanged form is not dirty.
-const toHours = (minutes) => (minutes > 0 ? String(Math.round((minutes / 60) * 100) / 100) : '');
+import {hoursToMinutes, removeGame, toHours, updateManualGame} from '../utils/manualGames.js';
 
 /**
  * Platform and hours of a game added by hand, and removing it. Steam games get both from the sync.