More things

frontend/app/components/SettingsModal.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 /* Centered settings popup, opened by the sidebar cog (and closed with esc,
    a backdrop click, or navigation). It holds the preferences — the light /
-   dark theme switch, the accent colour, and the interface language — which
-   drive the data-theme and data-accent attributes that the pre-paint script
-   in nuxt.config.ts restores from localStorage. The language lives in the
-   mathew-locale cookie and, with an account behind the session, on the
-   account itself, so it follows the person across devices. */
+   dark theme switch and the accent colour — which drive the data-theme and
+   data-accent attributes that the pre-paint script in nuxt.config.ts
+   restores from localStorage. The interface language lives in the profile
+   popup instead, since it follows the person across devices. */
 const { open, hide } = useSettings()
 const { hide: hideSearch } = useSearch()
 const { hide: hideSignIn } = useSignInPopup()
 const { hide: hideProfile } = useProfileMenu()
-const { loggedIn, updateLocale } = useAuth()
-const { t, locale } = useI18n()
-const { choose } = useAppLocale()
+const { t } = useI18n()
 const route = useRoute()
 
 const theme = ref<'light' | 'dark'>('light')
 const accent = ref('violet')
-const language = ref('en')
 const panelEl = ref<HTMLElement | null>(null)
 
 const themes = [
@@ -38,7 +34,7 @@ const accents = [
   { value: 'slate', labelKey: 'accentSlate', from: '#334155', to: '#64748b' },
 ] as const
 
-/* read the live theme, accent + language whenever the popup opens so the
+/* read the live theme + accent whenever the popup opens so the
    switches are in sync */
 watch(
   open,
@@ -51,7 +47,6 @@ watch(
     theme.value =
       (document.documentElement.getAttribute('data-theme') as 'light' | 'dark') || 'light'
     accent.value = document.documentElement.getAttribute('data-accent') || 'violet'
-    language.value = locale.value
     await nextTick()
     panelEl.value?.focus()
   },
@@ -79,23 +74,6 @@ function setAccent(value: string) {
   }
 }
 
-/* Turn the interface language. The device's own choice (the cookie setLocale
-   keeps) lands at once; with an account it is saved there too, so the next
-   device says the same hello. An account that won't take it — a session gone
-   quiet — doesn't undo the switch made here. */
-async function setLanguage(code: string) {
-  if (language.value === code) return
-  language.value = code
-  await choose(code)
-  if (loggedIn.value) {
-    try {
-      await updateLocale(code)
-    } catch {
-      /* the device-level switch stands on its own */
-    }
-  }
-}
-
 /* --- esc closes, navigation closes --- */
 function onGlobalKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape' && open.value) hide()
@@ -198,29 +176,6 @@ watch(
                 </button>
               </div>
             </section>
-
-            <section class="settings-group" aria-labelledby="settings-language">
-              <div class="settings-group-head">
-                <span id="settings-language" class="settings-group-title">{{ t('settings.language') }}</span>
-                <span class="settings-group-hint">{{ t('settings.languageHint') }}</span>
-              </div>
-
-              <div class="theme-switch" role="radiogroup" :aria-label="t('settings.languageAria')">
-                <button
-                  v-for="l in APP_LANGUAGES"
-                  :key="l.code"
-                  type="button"
-                  role="radio"
-                  class="theme-option"
-                  :class="{ active: language === l.code }"
-                  :aria-checked="language === l.code"
-                  :lang="l.code"
-                  @click="setLanguage(l.code)"
-                >
-                  <span>{{ l.name }}</span>
-                </button>
-              </div>
-            </section>
           </div>
         </div>
       </div>