From f1abb6457318c88298600da0b686263f285d2e5e Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 20 May 2026 21:24:12 +0200
Subject: [PATCH] feat(frontend): settings page with dark mode and defaults

---
 packages/frontend/src/components/Layout.tsx |  8 +++++++-
 packages/frontend/src/pages/Settings.tsx    | 16 ++++++++++++++++
 packages/frontend/src/router.tsx            |  2 ++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/pages/Settings.tsx

diff --git a/packages/frontend/src/components/Layout.tsx b/packages/frontend/src/components/Layout.tsx
index a1af438..2092933 100644
--- a/packages/frontend/src/components/Layout.tsx
+++ b/packages/frontend/src/components/Layout.tsx
@@ -1,13 +1,19 @@
 import { Link, Outlet } from 'react-router-dom';
+import { useSettings } from '../stores/settingsStore.js';
 
 export function Layout() {
+  const { theme, toggleTheme } = useSettings();
   return (
     <div className="flex h-full flex-col">
       <header className="border-b border-slate-200 bg-white px-6 py-3 dark:border-slate-800 dark:bg-slate-900">
-        <nav className="flex gap-4 text-sm">
+        <nav className="flex items-center gap-4 text-sm">
           <Link to="/" className="font-semibold">Flashcards</Link>
           <Link to="/admin">Admin</Link>
           <Link to="/stats">Stats</Link>
+          <Link to="/settings" className="ml-auto">Instellingen</Link>
+          <button onClick={toggleTheme} className="rounded border px-2 py-0.5 text-xs">
+            {theme === 'dark' ? '☀️' : '🌙'}
+          </button>
         </nav>
       </header>
       <main className="flex-1 overflow-auto"><Outlet /></main>
diff --git a/packages/frontend/src/pages/Settings.tsx b/packages/frontend/src/pages/Settings.tsx
new file mode 100644
index 0000000..a536444
--- /dev/null
+++ b/packages/frontend/src/pages/Settings.tsx
@@ -0,0 +1,16 @@
+import { useSettings } from '../stores/settingsStore.js';
+
+export function SettingsPage() {
+  const { theme, defaultMaxCards, toggleTheme, setDefaultMaxCards } = useSettings();
+  return (
+    <div className="mx-auto max-w-md p-6">
+      <h1 className="mb-4 text-2xl font-semibold">Instellingen</h1>
+      <label className="mb-3 flex items-center gap-2 text-sm">
+        <input type="checkbox" checked={theme === 'dark'} onChange={toggleTheme} /> Dark mode
+      </label>
+      <label className="block text-sm">Standaard max kaarten per sessie
+        <input type="number" min={1} max={500} className="ml-2 w-20 rounded border px-2 py-1 dark:bg-slate-900" value={defaultMaxCards} onChange={(e) => setDefaultMaxCards(Math.max(1, Number(e.target.value)))} />
+      </label>
+    </div>
+  );
+}
diff --git a/packages/frontend/src/router.tsx b/packages/frontend/src/router.tsx
index be7eb30..88b6ac6 100644
--- a/packages/frontend/src/router.tsx
+++ b/packages/frontend/src/router.tsx
@@ -9,6 +9,7 @@ import { PracticeDonePage } from './pages/PracticeDone.js';
 import { StatsPage } from './pages/Stats.js';
 import { StatsLessonPage } from './pages/StatsLesson.js';
 import { StatsCardPage } from './pages/StatsCard.js';
+import { SettingsPage } from './pages/Settings.js';
 
 export const router = createBrowserRouter([
   {
@@ -24,6 +25,7 @@ export const router = createBrowserRouter([
       { path: 'stats', element: <StatsPage /> },
       { path: 'stats/lessons/:id', element: <StatsLessonPage /> },
       { path: 'stats/cards/:id', element: <StatsCardPage /> },
+      { path: 'settings', element: <SettingsPage /> },
       { path: '*', element: <Navigate to="/" replace /> },
     ],
   },