feat(library): ask whether a game is finished

src/components/FinishedHint.jsx

@@ -0,0 +1,77 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
+import {Flag, Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import {dismissFinishedHint, saveGameStatus} from '../utils/backlog.js';
+import {formatPlaytime} from '../utils/games.js';
+
+/**
+ * Core's guess that a game is finished: the ending achievement is unlocked, or the playtime passed the normal time
+ * to beat. Only a question; the user decides.
+ *
+ * @param onChanged gets the saved backlog entry after "Mark as finished"
+ */
+export default function FinishedHint({game, onChanged, onDismissed}) {
+    const {t} = useTranslation();
+    const expireSession = useSessionExpired();
+    const [busy, setBusy] = useState(false);
+
+    const hint = game.finishedHint;
+    // A status saved elsewhere on the page answers the question too.
+    if (!hint || (game.status !== 'BACKLOG' && game.status !== 'PLAYING')) return null;
+
+    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;
+            }
+            await onOk(response);
+        } catch (err) {
+            console.error('finished hint error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const setFinished = () => run(() => saveGameStatus(game.appid, 'FINISHED'), async (response) => {
+        onChanged(await response.json());
+        toast.success(t('BACKLOG.SAVED'));
+    });
+
+    const notYet = () => run(() => dismissFinishedHint(game.appid, hint.type), () => onDismissed());
+
+    const text = hint.type === 'ENDING'
+        ? t('GAME_DETAIL.FINISHED_ENDING', {achievement: hint.achievement})
+        : t('GAME_DETAIL.FINISHED_PLAYTIME', {
+            played: formatPlaytime(game.playtimeMinutes),
+            normal: formatPlaytime(game.timeToBeat?.normallyMinutes ?? 0),
+        });
+
+    return (
+        <Card className="gap-3 border-emerald-500/40 bg-emerald-500/5 p-4 sm:flex-row sm:items-center sm:gap-4">
+            <div className="flex flex-1 items-start gap-3 sm:items-center">
+                <Flag className="size-5 shrink-0 text-emerald-500"/>
+                <p className="text-sm">{text}</p>
+            </div>
+            <div className="flex gap-2 self-end sm:self-auto">
+                <Button size="sm" variant="outline" onClick={notYet} disabled={busy}>{t('GAME_DETAIL.NOT_YET')}</Button>
+                <Button size="sm" onClick={setFinished} disabled={busy}>
+                    {busy && <Loader2 className="animate-spin"/>}
+                    {t('GAME_DETAIL.SET_FINISHED')}
+                </Button>
+            </div>
+        </Card>
+    );
+}