feat: add language selection feature to settings and update translations

frontend/src/App.tsx

@@ -48,7 +48,7 @@ const withNotes = (state: ExamState): ExamState => ({
 });
 
 function AppInner() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { user, loading: authLoading, needsSetup, refreshUser, logout } = useAuth();
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -392,23 +392,6 @@ function AppInner() {
             ⚙
           </button>
 
-          <div style={{ display: 'flex', gap: 4, marginLeft: 8, alignItems: 'center' }}>
-            <button
-              className="btn btn-ghost btn-sm"
-              onClick={() => i18n.changeLanguage('en')}
-              style={{ fontWeight: i18n.language === 'en' ? 700 : 400, fontSize: 12 }}
-            >
-              EN
-            </button>
-            <button
-              className="btn btn-ghost btn-sm"
-              onClick={() => i18n.changeLanguage('nl')}
-              style={{ fontWeight: i18n.language === 'nl' ? 700 : 400, fontSize: 12 }}
-            >
-              NL
-            </button>
-          </div>
-
           {!authLoading && !user && (
             <button
               className="btn btn-primary btn-sm"

frontend/src/components/Settings.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '../contexts/AuthContext'
 import * as authApi from '../api/authApi'
 
 export default function Settings() {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { user, refreshUser } = useAuth()
   const [displayName, setDisplayName] = useState(user?.displayName ?? '')
   const [savingName, setSavingName] = useState(false)
@@ -174,6 +174,36 @@ export default function Settings() {
           </div>
         </div>
       </div>
+
+      <div className="workspace-panel">
+        <div className="workspace-panel-header">
+          <h3>{t('workspace.language')}</h3>
+        </div>
+        <div className="workspace-panel-body workspace-settings-form">
+          <div className="workspace-setting-row">
+            <label className="workspace-setting-label">
+              <span className="workspace-setting-title">{t('workspace.languageLabel')}</span>
+              <span className="workspace-setting-desc">{t('workspace.languageDesc')}</span>
+            </label>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <button
+                className="btn btn-ghost btn-sm"
+                onClick={() => i18n.changeLanguage('en')}
+                style={{ fontWeight: i18n.language === 'en' ? 700 : 400, fontSize: 13 }}
+              >
+                English
+              </button>
+              <button
+                className="btn btn-ghost btn-sm"
+                onClick={() => i18n.changeLanguage('nl')}
+                style={{ fontWeight: i18n.language === 'nl' ? 700 : 400, fontSize: 13 }}
+              >
+                Nederlands
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

frontend/src/i18n/en.json

@@ -172,7 +172,10 @@
     "changing": "Changing…",
     "passwordChanged": "Password changed successfully",
     "passwordMinLength": "New password must be at least 8 characters",
-    "passwordsDoNotMatch": "Passwords do not match"
+    "passwordsDoNotMatch": "Passwords do not match",
+    "language": "Language",
+    "languageLabel": "Language",
+    "languageDesc": "Select your preferred display language"
   },
   "admin": {
     "administration": "Administration",

frontend/src/i18n/nl.json

@@ -172,7 +172,10 @@
     "changing": "Wijzigen…",
     "passwordChanged": "Wachtwoord succesvol gewijzigd",
     "passwordMinLength": "Nieuw wachtwoord moet minimaal 8 tekens bevatten",
-    "passwordsDoNotMatch": "Wachtwoorden komen niet overeen"
+    "passwordsDoNotMatch": "Wachtwoorden komen niet overeen",
+    "language": "Taal",
+    "languageLabel": "Taal",
+    "languageDesc": "Selecteer je voorkeurstaal voor de interface"
   },
   "admin": {
     "administration": "Beheer",