feat(frontend): practice setup, session and done flow

packages/frontend/src/pages/PracticeSetup.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useSettings } from '../stores/settingsStore.js';
+import { useSession } from '../stores/sessionStore.js';
+
+export function PracticeSetupPage() {
+  const { lessonId } = useParams();
+  const id = Number(lessonId);
+  const defaultMax = useSettings((s) => s.defaultMaxCards);
+  const start = useSession((s) => s.start);
+  const navigate = useNavigate();
+
+  const [maxCards, setMaxCards] = useState<number | 'all'>(defaultMax);
+  const [shuffle, setShuffle] = useState(true);
+  const [direction, setDirection] = useState<'forward' | 'backward' | 'both'>('forward');
+  const [busy, setBusy] = useState(false);
+
+  async function begin() {
+    setBusy(true);
+    await start({ lessonId: id, maxCards: maxCards === 'all' ? null : maxCards, shuffle, direction });
+    navigate(`/practice/${id}`);
+  }
+
+  return (
+    <div className="mx-auto max-w-md p-6">
+      <h1 className="mb-4 text-2xl font-semibold">Sessie starten</h1>
+      <label className="mb-2 block text-sm">Max. aantal kaarten
+        <select className="ml-2 rounded border px-2 py-1 dark:bg-slate-900" value={String(maxCards)} onChange={(e) => setMaxCards(e.target.value === 'all' ? 'all' : Number(e.target.value))}>
+          {[10, 20, 30, 50].map((n) => <option key={n} value={n}>{n}</option>)}
+          <option value="all">Alle</option>
+        </select>
+      </label>
+      <label className="mb-2 flex items-center gap-2 text-sm"><input type="checkbox" checked={shuffle} onChange={(e) => setShuffle(e.target.checked)} /> Shuffle</label>
+      <label className="mb-4 block text-sm">Richting
+        <select className="ml-2 rounded border px-2 py-1 dark:bg-slate-900" value={direction} onChange={(e) => setDirection(e.target.value as typeof direction)}>
+          <option value="forward">Vraag → antwoord</option>
+          <option value="backward">Antwoord → vraag</option>
+          <option value="both">Beide</option>
+        </select>
+      </label>
+      <button className="w-full rounded bg-green-600 py-3 font-medium text-white" onClick={begin} disabled={busy}>
+        Start
+      </button>
+    </div>
+  );
+}