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

src/components/ManualGameCard.jsx

@@ -0,0 +1,109 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
+import {Hand, Loader2, Trash2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import 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) : '');
+
+/**
+ * Platform and hours of a game added by hand, and removing it. Steam games get both from the sync.
+ *
+ * @param onSaved gets the saved platform and playtimeMinutes
+ */
+export default function ManualGameCard({game, onSaved}) {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    const expireSession = useSessionExpired();
+    const [platform, setPlatform] = useState(game.platform ?? '');
+    const [hours, setHours] = useState(toHours(game.playtimeMinutes));
+    const [busy, setBusy] = useState(false);
+    const [confirmRemove, setConfirmRemove] = useState(false);
+
+    const playtimeMinutes = hoursToMinutes(hours);
+    const dirty = platform.trim() !== (game.platform ?? '') || playtimeMinutes !== game.playtimeMinutes;
+
+    const run = async (request, onOk) => {
+        setBusy(true);
+        try {
+            const response = await request();
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            if (!response.ok) {
+                toast.error(t('BACKLOG.SAVE_FAILED'));
+                return;
+            }
+            onOk();
+        } catch (err) {
+            console.error('manual game error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const save = () => run(() => updateManualGame(game.appid, {platform: platform.trim(), playtimeMinutes}), () => {
+        onSaved({platform: platform.trim(), playtimeMinutes});
+        toast.success(t('BACKLOG.SAVED'));
+    });
+
+    const remove = () => run(() => removeGame(game.appid), () => {
+        toast.success(t('MANUAL_GAME.REMOVED'));
+        navigate('/library', {replace: true});
+    });
+
+    return (
+        <Card className="p-6 gap-5">
+            <h2 className="flex items-center gap-2 text-lg font-semibold">
+                <Hand className="size-4 text-primary"/>
+                {t('MANUAL_GAME.TITLE')}
+            </h2>
+            <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.HINT')}</p>
+
+            <div className="grid gap-5 sm:grid-cols-2">
+                <div className="space-y-2">
+                    <Label htmlFor="manual-platform">{t('MANUAL_GAME.PLATFORM')}</Label>
+                    <Input id="manual-platform" value={platform} maxLength={32}
+                           onChange={(e) => setPlatform(e.target.value)}/>
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="manual-hours">{t('MANUAL_GAME.HOURS')}</Label>
+                    <Input id="manual-hours" type="number" min="0" step="0.5" inputMode="decimal" value={hours}
+                           onChange={(e) => setHours(e.target.value)}/>
+                </div>
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3">
+                {confirmRemove ? (
+                    <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-sm">{t('MANUAL_GAME.REMOVE_CONFIRM')}</span>
+                        <Button variant="destructive" size="sm" onClick={remove} disabled={busy}>
+                            <Trash2/>{t('MANUAL_GAME.REMOVE_YES')}
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => setConfirmRemove(false)} disabled={busy}>
+                            {t('MANUAL_GAME.REMOVE_NO')}
+                        </Button>
+                    </div>
+                ) : (
+                    <Button variant="outline" size="sm" onClick={() => setConfirmRemove(true)} disabled={busy}>
+                        <Trash2/>{t('MANUAL_GAME.REMOVE')}
+                    </Button>
+                )}
+                <Button onClick={save} disabled={busy || !dirty || !platform.trim()}>
+                    {busy && <Loader2 className="animate-spin"/>}
+                    {t('BACKLOG.SAVE')}
+                </Button>
+            </div>
+        </Card>
+    );
+}