feat(dashboard): playtime chart, recently played and a playing hint

The dashboard shows the playtime of the last 30 days and Steam's recently
played games. The detail page offers to set a backlog game to Playing when
Steam reports recent playtime; unsaved edits in the backlog card stay.

src/components/PlayingHint.jsx

@@ -0,0 +1,62 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {toast} from 'sonner';
+import {Gamepad2, Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import {saveBacklogEntry} from '../utils/backlog.js';
+import {formatPlaytime} from '../utils/games.js';
+
+/**
+ * Shown for a backlog game that Steam reports as played in the last two weeks.
+ *
+ * @param onChanged gets the saved backlog entry
+ */
+export default function PlayingHint({game, onChanged}) {
+    const {t} = useTranslation();
+    const expireSession = useSessionExpired();
+    const [busy, setBusy] = useState(false);
+
+    if (game.status !== 'BACKLOG' || !(game.playtime2Weeks > 0)) return null;
+
+    const setPlaying = async () => {
+        setBusy(true);
+        try {
+            const response = await saveBacklogEntry(game.appid, {
+                status: 'PLAYING', rating: game.rating ?? null, notes: game.notes ?? null, priority: game.priority ?? null,
+            });
+            if (response.status === 401) {
+                expireSession();
+                return;
+            }
+            if (!response.ok) {
+                toast.error(t('BACKLOG.SAVE_FAILED'));
+                return;
+            }
+            onChanged(await response.json());
+            toast.success(t('BACKLOG.SAVED'));
+        } catch (err) {
+            console.error('set playing error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <Card className="gap-3 border-primary/40 bg-primary/5 p-4 sm:flex-row sm:items-center sm:gap-4">
+            <div className="flex flex-1 items-start gap-3 sm:items-center">
+                <Gamepad2 className="size-5 shrink-0 text-primary"/>
+                <p className="text-sm">
+                    {t('GAME_DETAIL.PLAYED_RECENTLY', {time: formatPlaytime(game.playtime2Weeks)})}
+                </p>
+            </div>
+            <Button size="sm" className="self-end sm:self-auto" onClick={setPlaying} disabled={busy}>
+                {busy && <Loader2 className="animate-spin"/>}
+                {t('GAME_DETAIL.SET_PLAYING')}
+            </Button>
+        </Card>
+    );
+}