refactor(hooks): add useSetStatus for game status saves

Replaces 5 copies of the save code in hints, PlayNextPage and sync.
An empty 2xx body now counts as saved, not a network error.
Refs #46

src/pages/PlayNextPage.jsx

@@ -11,8 +11,7 @@ import {Skeleton} from '@/components/ui/skeleton';
 import GameCover from '../components/GameCover.jsx';
 import FitText from '../components/FitText.jsx';
 import PageContainer from '../components/PageContainer.jsx';
-import usePointsCheck from '../hooks/usePointsCheck.js';
-import {saveGameStatus} from '../utils/backlog.js';
+import useSetStatus from '../hooks/useSetStatus.js';
 import {formatDate} from '../utils/format.js';
 import {formatPlaytime} from '../utils/games.js';
 import {request} from '../utils/api.js';
@@ -280,31 +279,10 @@ const emptyKey = (budget, mood) => {
 
 function PickCard({game}) {
     const {t, i18n} = useTranslation();
-    const [busy, setBusy] = useState(false);
     const [started, setStarted] = useState(false);
-    const check = usePointsCheck();
+    const {setStatus, busy} = useSetStatus(game.appid, {checkPoints: true, onChanged: () => setStarted(true)});
     const reason = reasonText(game.reason, t, i18n.language);
 
-    const startPlaying = async () => {
-        setBusy(true);
-        try {
-            const response = await saveGameStatus(game.appid, 'PLAYING');
-            if (response.status === 401) return;
-            if (!response.ok) {
-                toast.error(t('BACKLOG.SAVE_FAILED'));
-                return;
-            }
-            setStarted(true);
-            toast.success(t('BACKLOG.SAVED'));
-            check(game.appid, {status: 'PLAYING', tell: true});
-        } catch (err) {
-            console.error('Start playing error:', err);
-            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
-        } finally {
-            setBusy(false);
-        }
-    };
-
     return (
         <Card className="gap-3 overflow-hidden p-0">
             <Link to={`/library/${game.appid}`} className="block">
@@ -333,7 +311,7 @@ function PickCard({game}) {
                             <Check className="size-4"/>{t('PLAY_NEXT.STARTED')}
                         </p>
                     ) : (
-                        <Button size="sm" className="w-full" onClick={startPlaying} disabled={busy}>
+                        <Button size="sm" className="w-full" onClick={() => setStatus('PLAYING')} disabled={busy}>
                             {busy ? <Loader2 className="animate-spin"/> : <Play/>}
                             {t('PLAY_NEXT.START_PLAYING')}
                         </Button>