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

src/pages/Dashboard.jsx

@@ -187,9 +187,10 @@ const Dashboard = () => {
                     const data = await profileResponse.json();
                     setUserData(data);
 
-                    if (data.steamId) {
-                        await Promise.all([fetchSteamCount(), fetchTopGames(), fetchPlaying(), fetchSummary(), fetchActivity(), fetchAchievements()]);
-                    }
+                    // Games added by hand need no Steam ID; history and achievements come only from Steam.
+                    await Promise.all(data.steamId
+                        ? [fetchSteamCount(), fetchTopGames(), fetchPlaying(), fetchSummary(), fetchActivity(), fetchAchievements()]
+                        : [fetchSteamCount(), fetchTopGames(), fetchPlaying(), fetchSummary()]);
                 } else if (profileResponse.status === 401) {
                     expireSession();
                 } else {
@@ -207,6 +208,7 @@ const Dashboard = () => {
     }, [navigate, expireSession, t, fetchSteamCount, fetchTopGames, fetchPlaying, fetchSummary, fetchActivity, fetchAchievements]);
 
     const hasSteamId = !!userData?.steamId;
+    const showLibrary = hasSteamId || steamData.count > 0;
     const {appearance} = usePreferences();
     const steamProfile = useSteamProfile(hasSteamId);
     const bannerAppid = appearance.showBanner
@@ -284,7 +286,7 @@ const Dashboard = () => {
                 )}
             </Card>
 
-            {hasSteamId && (
+            {showLibrary && (
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                     <SteamGameCount targetCount={steamData.count}/>
 
@@ -314,7 +316,7 @@ const Dashboard = () => {
                                             <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">
                                                 {index + 1}
                                             </span>
-                                            <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"/>
                                             <div className="min-w-0 flex-1">
                                                 <div className="truncate font-medium group-hover:text-primary transition-colors">
                                                     {g.name ?? `App ${g.appid}`}
@@ -338,7 +340,7 @@ const Dashboard = () => {
                 </div>
             )}
 
-            {hasSteamId && (
+            {showLibrary && (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <CurrentlyPlayingCard games={playing} syncing={sync.isRunning}/>
                     {summary && (

src/pages/GameDetail.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ArrowLeft, Clock, ExternalLink, Image as ImageIcon, ImageOff, PanelTop, RotateCcw, ShieldOff, Trophy} from 'lucide-react';
+import {ArrowLeft, Clock, ExternalLink, Gamepad2, Image as ImageIcon, ImageOff, PanelTop, RotateCcw, ShieldOff, Trophy} from 'lucide-react';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
@@ -11,6 +11,7 @@ import {cn} from '@/lib/utils';
 import BacklogCard from '../components/BacklogCard.jsx';
 import GameCover from '../components/GameCover.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
+import ManualGameCard from '../components/ManualGameCard.jsx';
 import CompletedHint from '../components/CompletedHint.jsx';
 import PlayingHint from '../components/PlayingHint.jsx';
 import TimeToBeat from '../components/TimeToBeat.jsx';
@@ -21,6 +22,7 @@ import {usePreferences} from '../context/PreferencesContext.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {apiFetch} from '../utils/api.js';
 import {hasSession} from '../utils/auth.js';
+import {isSteamKey} from '../utils/manualGames.js';
 
 const formatUnlockedAt = (instant, locale) => {
     if (!instant) return '';
@@ -99,6 +101,8 @@ export default function GameDetail() {
         });
     }, [data]);
 
+    const manual = data?.source === 'MANUAL';
+    const onSteam = !!data && isSteamKey(data.appid);
     const isBackground = !!data && appearance.backgroundAppid === data.appid;
     const isBanner = !!data && appearance.showBanner && appearance.bannerAppid === data.appid;
 
@@ -131,7 +135,7 @@ export default function GameDetail() {
             {!isLoading && !error && data && (
                 <>
                     <Card className="relative overflow-hidden p-0 gap-0 md:flex-row">
-                        <GameCover appid={data.appid} className="w-full rounded-none md:w-96 md:shrink-0"/>
+                        <GameCover appid={data.appid} imageUrl={data.imageUrl} className="w-full rounded-none md:w-96 md:shrink-0"/>
                         <div className="flex flex-1 flex-col justify-between gap-4 p-6">
                             <div>
                                 <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
@@ -143,12 +147,16 @@ 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>
+                                    )}
                                 </div>
                                 <div className="mt-3">
                                     <TimeToBeat time={data.timeToBeat}/>
                                 </div>
                             </div>
-                            <div className="flex flex-wrap gap-2">
+                            {/* Store page, background and banner need Steam art, so a game off Steam has none of them. */}
+                            {onSteam && <div className="flex flex-wrap gap-2">
                                 <Button asChild variant="outline" size="sm">
                                     <a href={`https://store.steampowered.com/app/${data.appid}`} target="_blank" rel="noopener noreferrer">
                                         {t('GAME_DETAIL.OPEN_IN_STEAM')}<ExternalLink/>
@@ -173,7 +181,7 @@ export default function GameDetail() {
                                         <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
                                     </Button>
                                 )}
-                            </div>
+                            </div>}
                         </div>
                     </Card>
 
@@ -183,10 +191,15 @@ export default function GameDetail() {
                     <BacklogCard key={data.appid} game={data}
                                  onSaved={(entry) => setData((d) => ({...d, ...entry}))}/>
 
+                    {manual && (
+                        <ManualGameCard key={`manual-${data.appid}`} game={data}
+                                        onSaved={(changes) => setData((d) => ({...d, ...changes}))}/>
+                    )}
+
                     {!data.hasAchievements && (
                         <Card className="items-center py-10 text-center text-sm text-muted-foreground">
                             <Trophy className="size-8"/>
-                            {t('GAME_DETAIL.NO_ACHIEVEMENTS')}
+                            {t(manual ? 'MANUAL_GAME.NO_ACHIEVEMENTS' : 'GAME_DETAIL.NO_ACHIEVEMENTS')}
                         </Card>
                     )}
 

src/pages/GameDetail.test.jsx

@@ -13,9 +13,12 @@ const game = {
     rating: null, notes: null, priority: null, hasAchievements: false, statsVisible: false, achievements: [],
 };
 
-const renderDetail = () => render(
-    <MemoryRouter initialEntries={['/library/220']}><PreferencesProvider>
-        <Routes><Route path="/library/:appid" element={<GameDetail/>}/></Routes>
+const renderDetail = (appid = 220) => render(
+    <MemoryRouter initialEntries={[`/library/${appid}`]}><PreferencesProvider>
+        <Routes>
+            <Route path="/library/:appid" element={<GameDetail/>}/>
+            <Route path="/library" element={<p>library page</p>}/>
+        </Routes>
     </PreferencesProvider></MemoryRouter>,
 );
 
@@ -81,3 +84,71 @@ describe('GameDetail', () => {
         expect(JSON.parse(init.body)).toMatchObject({bannerAppid: 220, showBanner: true});
     });
 });
+
+describe('GameDetail of a game added by hand', () => {
+    const manualGame = {
+        ...game, appid: -1025, name: 'Zelda', source: 'MANUAL', platform: 'Nintendo Switch', playtimeMinutes: 90,
+        playtime2Weeks: 0, imageUrl: 'https://images.igdb.com/z.jpg',
+    };
+
+    beforeEach(() => {
+        globalThis.fetch = vi.fn(async (url, init) => (init?.method === 'PUT' || init?.method === 'DELETE')
+            ? {ok: true, status: 204, json: async () => { throw new Error('204 has no body'); }}
+            : {ok: true, status: 200, json: async () => manualGame});
+    });
+
+    it('shows platform and IGDB picture, and offers no Steam actions', async () => {
+        const {container} = renderDetail(-1025);
+
+        expect(await screen.findByLabelText('MANUAL_GAME.PLATFORM')).toBeTruthy();
+        expect(screen.getAllByText('Nintendo Switch').length).toBeGreaterThan(0);
+        expect(container.querySelector('img[src="https://images.igdb.com/z.jpg"]')).toBeTruthy();
+        expect(screen.queryByRole('button', {name: 'GAME_DETAIL.SET_BACKGROUND'})).toBeNull();
+        expect(screen.queryByRole('button', {name: 'GAME_DETAIL.SET_BANNER'})).toBeNull();
+        expect(screen.queryByText('GAME_DETAIL.OPEN_IN_STEAM')).toBeNull();
+        expect(screen.getByText('MANUAL_GAME.NO_ACHIEVEMENTS')).toBeTruthy();
+    });
+
+    it('saves platform and hours', async () => {
+        renderDetail(-1025);
+        fireEvent.change(await screen.findByLabelText('MANUAL_GAME.HOURS'), {target: {value: '2.5'}});
+        fireEvent.change(screen.getByLabelText('MANUAL_GAME.PLATFORM'), {target: {value: ' PS5 '}});
+
+        const saveButtons = screen.getAllByRole('button', {name: 'BACKLOG.SAVE'});
+        fireEvent.click(saveButtons.at(-1));
+
+        await waitFor(() => expect(fetch.mock.calls.some(([, call]) => call?.method === 'PUT')).toBe(true));
+        const [url, init] = fetch.mock.calls.find(([, call]) => call?.method === 'PUT');
+        expect(url).toContain('/api/library/games/-1025/manual');
+        expect(JSON.parse(init.body)).toEqual({platform: 'PS5', playtimeMinutes: 150});
+    });
+
+    it('removes the game only after the confirm step and goes back to the library', async () => {
+        renderDetail(-1025);
+        fireEvent.click(await screen.findByRole('button', {name: 'MANUAL_GAME.REMOVE'}));
+        expect(fetch.mock.calls.some(([, call]) => call?.method === 'DELETE')).toBe(false);
+
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.REMOVE_YES'}));
+
+        expect(await screen.findByText('library page')).toBeTruthy();
+        const [url] = fetch.mock.calls.find(([, call]) => call?.method === 'DELETE');
+        expect(url).toContain('/api/library/games/-1025');
+    });
+
+    it('keeps Save off for an unchanged game with 75 minutes', async () => {
+        globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({...manualGame, playtimeMinutes: 75})}));
+        renderDetail(-1025);
+
+        await screen.findByLabelText('MANUAL_GAME.HOURS');
+
+        expect(screen.getAllByRole('button', {name: 'BACKLOG.SAVE'}).at(-1).disabled).toBe(true);
+    });
+
+    it('shows no manual card for a Steam game', async () => {
+        globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({...game, source: 'STEAM'})}));
+        renderDetail();
+
+        expect(await screen.findByRole('button', {name: 'GAME_DETAIL.SET_BACKGROUND'})).toBeTruthy();
+        expect(screen.queryByText('MANUAL_GAME.TITLE')).toBeNull();
+    });
+});

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"

src/pages/GameLibrary.test.jsx

@@ -127,3 +127,39 @@ describe('GameLibrary short games', () => {
         expect(screen.getByRole('button', {name: 'LIBRARY.FILTER_SHORT'}).getAttribute('aria-pressed')).toBe('true');
     });
 });
+
+describe('GameLibrary with games added by hand', () => {
+    const answer = (games, hasSteamId) => vi.fn(async (url) => ({
+        ok: true, status: 200,
+        json: async () => (String(url).includes('/games-count') ? {count: games.length, hasSteamId} : {...page, content: games}),
+    }));
+    const zelda = {appid: -1025, name: 'Zelda', playtimeMinutes: 90, status: 'BACKLOG', source: 'MANUAL',
+        platform: 'Nintendo Switch', imageUrl: 'https://images.igdb.com/z.jpg'};
+
+    it('shows the platform and the IGDB picture of a manual game', async () => {
+        globalThis.fetch = answer([zelda], true);
+        renderLibrary();
+
+        expect(await screen.findByText('Nintendo Switch')).toBeTruthy();
+        expect(document.querySelector('img[src="https://images.igdb.com/z.jpg"]')).toBeTruthy();
+    });
+
+    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();
+
+        await screen.findByText('Zelda');
+        await waitFor(() => expect(screen.queryByText('LIBRARY.RESYNC')).toBeNull());
+        expect(screen.getByRole('button', {name: 'MANUAL_GAME.ADD_BUTTON'})).toBeTruthy();
+    });
+
+    it('opens the add panel', async () => {
+        globalThis.fetch = answer([zelda], true);
+        renderLibrary();
+
+        fireEvent.click(await screen.findByRole('button', {name: 'MANUAL_GAME.ADD_BUTTON'}));
+
+        expect(screen.getByText('MANUAL_GAME.ADD_TITLE')).toBeTruthy();
+        expect(screen.getByText('LIBRARY.RESYNC')).toBeTruthy();
+    });
+});

src/pages/LandingPage.jsx

@@ -25,7 +25,7 @@ function RankedGames({title, games, formatValue}) {
                 {games.map((g, idx) => (
                     <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
                         <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
-                        <GameCover appid={g.appid} className="w-16 shrink-0"/>
+                        <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
                         <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
                         <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
                     </li>

src/pages/PlayNextPage.jsx

@@ -187,7 +187,7 @@ function PickCard({game, expireSession}) {
     return (
         <Card className="gap-3 overflow-hidden p-0">
             <Link to={`/library/${game.appid}`} className="block">
-                <GameCover appid={game.appid} className="w-full"/>
+                <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-full"/>
             </Link>
             <div className="flex flex-1 flex-col gap-3 px-4 pb-4">
                 <Link to={`/library/${game.appid}`} className="font-semibold hover:text-primary transition-colors">

src/pages/PublicProfilePage.jsx

@@ -149,7 +149,7 @@ export default function PublicProfilePage() {
                     <ul className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                         {library.playing.map((g) => (
                             <li key={g.appid} className="space-y-1.5">
-                                <GameCover appid={g.appid} className="w-full"/>
+                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-full"/>
                                 <div className="truncate text-sm font-medium">{g.name ?? `App ${g.appid}`}</div>
                                 <div className="text-xs text-muted-foreground tabular-nums">{formatPlaytime(g.playtimeMinutes)}</div>
                             </li>
@@ -166,7 +166,7 @@ export default function PublicProfilePage() {
                     <ul className="divide-y">
                         {library.finished.map((g) => (
                             <li key={g.appid} className="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3">
-                                <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">{g.name ?? `App ${g.appid}`}</span>
                                 {g.rating && (
                                     <span className="flex items-center gap-0.5" aria-label={t('BACKLOG.RATING_STARS', {count: g.rating})}>