feat(library): search IGDB and add games by hand

src/pages/GameLibrary.jsx

@@ -7,7 +7,7 @@ import useForceSync from '../hooks/useForceSync.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import {formatPlaytime} from '../utils/games.js';
 import {GAME_STATUSES, libraryQuery, parseStatus} from '../utils/backlog.js';
-import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, Library, RefreshCw, Search, SearchX, Timer, Trophy} from 'lucide-react';
+import {ArrowUpDown, ChevronLeft, ChevronRight, Clock, Gamepad2, Library, Plus, RefreshCw, Search, SearchX, Timer, Trophy} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
@@ -15,6 +15,7 @@ import {Card} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
 import {Skeleton} from '@/components/ui/skeleton';
+import AddGamePanel from '../components/AddGamePanel.jsx';
 import GameCover from '../components/GameCover.jsx';
 import LibraryTabs from '../components/LibraryTabs.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
@@ -54,6 +55,9 @@ export default function GameLibrary() {
     const filtered = Boolean(status || q.trim() || shortOnly);
     const librarySearch = searchParams.toString();
     const [search, setSearch] = useState(q);
+    const [adding, setAdding] = useState(false);
+    // Starts true until /games-count answers, so a Steam user does not see the sync controls vanish and come back.
+    const [hasSteamId, setHasSteamId] = useState(true);
 
     const [data, setData] = useState({content: [], page: 0, size, totalElements: 0, totalPages: 0});
     const [isLoading, setIsLoading] = useState(true);
@@ -98,9 +102,23 @@ export default function GameLibrary() {
         load();
     }, [load]);
 
+    useEffect(() => {
+        if (!hasSession()) return undefined;
+        let cancelled = false;
+        apiFetch(`${import.meta.env.VITE_CORE_API_URL}/api/library/games-count`)
+            .then((response) => (response.ok ? response.json() : null))
+            .then((json) => {
+                if (!cancelled && json) setHasSteamId(json.hasSteamId);
+            })
+            .catch(() => {});
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
     const expectInitialSync = !isLoading && !error && !filtered && data.totalElements === 0;
     const sync = useLibrarySync({
-        enabled: true,
+        enabled: hasSteamId,
         expectInitialSync,
         onComplete: load,
         onUnauthorized: expireSession,
@@ -153,14 +171,21 @@ export default function GameLibrary() {
                     <LibraryTabs/>
                     <h1 className="text-3xl font-bold tracking-tight">{t('LIBRARY.TITLE')}</h1>
                     <div className="flex flex-wrap items-center gap-3">
-                        <SyncStatusBadge
-                            status={sync.status}
-                            lastSyncedAt={sync.lastSyncedAt}
-                            isRunning={sync.isRunning}
-                        />
-                        <Button variant="outline" size="sm" onClick={triggerSync} disabled={syncing}>
-                            <RefreshCw className={syncing ? 'animate-spin' : ''}/>
-                            {t('LIBRARY.RESYNC')}
+                        {hasSteamId && (
+                            <>
+                                <SyncStatusBadge
+                                    status={sync.status}
+                                    lastSyncedAt={sync.lastSyncedAt}
+                                    isRunning={sync.isRunning}
+                                />
+                                <Button variant="outline" size="sm" onClick={triggerSync} disabled={syncing}>
+                                    <RefreshCw className={syncing ? 'animate-spin' : ''}/>
+                                    {t('LIBRARY.RESYNC')}
+                                </Button>
+                            </>
+                        )}
+                        <Button variant="outline" size="sm" onClick={() => setAdding(true)} disabled={adding}>
+                            <Plus/>{t('MANUAL_GAME.ADD_BUTTON')}
                         </Button>
                     </div>
                 </div>
@@ -189,6 +214,8 @@ export default function GameLibrary() {
                 </div>
             </div>
 
+            {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) => (
@@ -261,10 +288,15 @@ export default function GameLibrary() {
                                     state={{librarySearch}}
                                     className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 transition-colors hover:bg-muted/50"
                                 >
-                                    <GameCover appid={g.appid} className="w-16 sm:w-24 shrink-0"/>
+                                    <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 sm:w-24 shrink-0"/>
                                     <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}
+                                        </Badge>
+                                    )}
                                     <GameStatusBadge status={g.status} compact/>
                                     {g.achievementsTotal > 0 && g.achievementsUnlocked != null && (
                                         <Badge variant="secondary" className="hidden sm:inline-flex tabular-nums"