From 6723cd82a962ffeeb2896bb61b58da6852ee6416 Mon Sep 17 00:00:00 2001
From: Florian <52180080+florianjs@users.noreply.github.com>
Date: Thu, 8 Oct 2026 15:12:52 +0200
Subject: [PATCH] fix(i18n): default to english and make the language switcher
 visible

- english unless the user picks another language, the browser language is
  no longer used; the choice is kept in a cookie, also on the server
- EN / FR toggle in the header and at the top of the login and register pages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/components/LanguageSwitcher.vue | 30 +++++++++++++++++------------
 app/layouts/default.vue             |  8 ++++++--
 app/pages/auth/login.vue            |  8 ++++----
 app/pages/auth/register.vue         |  8 ++++----
 app/plugins/locale-cookie.ts        | 28 +++++++++++++++++++++++++++
 nuxt.config.ts                      |  9 +++------
 6 files changed, 63 insertions(+), 28 deletions(-)
 create mode 100644 app/plugins/locale-cookie.ts

diff --git a/app/components/LanguageSwitcher.vue b/app/components/LanguageSwitcher.vue
index 6908b082..5a6364ce 100644
--- a/app/components/LanguageSwitcher.vue
+++ b/app/components/LanguageSwitcher.vue
@@ -1,17 +1,23 @@
 <template>
-  <label class="inline-flex items-center gap-1.5 text-text-muted">
-    <Icon name="ph:translate" class="text-base" />
-    <span class="sr-only">{{ t('common.language') }}</span>
-    <select
-      :value="locale"
-      class="bg-transparent text-[10px] font-mono uppercase tracking-widest focus:outline-none cursor-pointer hover:text-white transition-colors"
-      @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
+  <div
+    class="inline-flex items-center gap-1 rounded border border-border bg-bg-secondary/60 p-0.5"
+    role="group"
+    :aria-label="t('common.language')"
+  >
+    <Icon name="ph:translate" class="text-sm text-text-muted mx-1" aria-hidden="true" />
+    <button
+      v-for="l in locales"
+      :key="l.code"
+      type="button"
+      class="px-2 py-0.5 rounded-sm text-[10px] font-bold font-mono uppercase tracking-widest transition-colors"
+      :class="l.code === locale ? 'bg-white/10 text-white' : 'text-text-muted hover:text-white'"
+      :aria-pressed="l.code === locale"
+      :title="l.name"
+      @click="setLocale(l.code)"
     >
-      <option v-for="l in locales" :key="l.code" :value="l.code" class="bg-bg-secondary">
-        {{ l.name }}
-      </option>
-    </select>
-  </label>
+      {{ l.code }}
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 40d8e81c..12cedc72 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -100,6 +100,9 @@
             </button>
           </div>
 
+          <!-- Language -->
+          <LanguageSwitcher class="hidden md:inline-flex ml-2" />
+
           <!-- User Menu -->
           <div class="relative" ref="userMenuRef">
             <button
@@ -310,8 +313,9 @@
           ></span>
           <span class="w-1 h-1 bg-border rounded-full"></span>
           <span>{{ t('layout.p2pProtocol') }}</span>
-          <span class="w-1 h-1 bg-border rounded-full"></span>
-          <LanguageSwitcher />
+          <span class="w-1 h-1 bg-border rounded-full md:hidden"></span>
+          <!-- Header switcher is hidden on small screens -->
+          <LanguageSwitcher class="md:hidden" />
         </div>
         <div class="flex gap-6">
           <a
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index a7a18813..ba2966bb 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-screen bg-bg-primary flex items-center justify-center px-4">
+  <div class="relative min-h-screen bg-bg-primary flex items-center justify-center px-4">
+    <div class="absolute top-4 right-4">
+      <LanguageSwitcher />
+    </div>
     <div class="w-full max-w-md">
       <!-- Logo -->
       <div class="text-center mb-8">
@@ -113,9 +116,6 @@
         </p>
       </div>
 
-      <div class="mt-6 flex justify-center">
-        <LanguageSwitcher />
-      </div>
     </div>
   </div>
 </template>
diff --git a/app/pages/auth/register.vue b/app/pages/auth/register.vue
index 8fa2bdb5..254981c9 100644
--- a/app/pages/auth/register.vue
+++ b/app/pages/auth/register.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-screen bg-bg-primary flex items-center justify-center px-4">
+  <div class="relative min-h-screen bg-bg-primary flex items-center justify-center px-4">
+    <div class="absolute top-4 right-4">
+      <LanguageSwitcher />
+    </div>
     <div class="w-full max-w-md">
       <!-- Logo -->
       <div class="text-center mb-8">
@@ -264,9 +267,6 @@
         </div>
       </div>
 
-      <div class="mt-6 flex justify-center">
-        <LanguageSwitcher />
-      </div>
     </div>
   </div>
 </template>
diff --git a/app/plugins/locale-cookie.ts b/app/plugins/locale-cookie.ts
new file mode 100644
index 00000000..1f127966
--- /dev/null
+++ b/app/plugins/locale-cookie.ts
@@ -0,0 +1,28 @@
+/**
+ * Locale selection: English by default, never guessed from the browser.
+ * The language a user picks is stored in a cookie and restored on every
+ * request (server side too, so pages render in the right language).
+ */
+export const LOCALE_COOKIE = 'trackarr_locale';
+
+export default defineNuxtPlugin({
+  name: 'trackarr:locale-cookie',
+  dependsOn: ['i18n:plugin'],
+  async setup(nuxtApp) {
+    const i18n = nuxtApp.$i18n;
+    const cookie = useCookie<string | null>(LOCALE_COOKIE, {
+      maxAge: 60 * 60 * 24 * 365,
+      sameSite: 'lax',
+      path: '/',
+    });
+
+    const available = i18n.availableLocales as string[];
+    if (cookie.value && available.includes(cookie.value) && cookie.value !== i18n.locale.value) {
+      await i18n.setLocale(cookie.value as typeof i18n.locale.value);
+    }
+
+    nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
+      cookie.value = newLocale;
+    });
+  },
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 566c304c..4ab69552 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -22,12 +22,9 @@ export default defineNuxtConfig({
       { code: 'en', language: 'en-US', name: 'English', files: ['en/app.json', 'en/shop.json'] },
       { code: 'fr', language: 'fr-FR', name: 'Français', files: ['fr/app.json', 'fr/shop.json'] },
     ],
-    detectBrowserLanguage: {
-      useCookie: true,
-      cookieKey: 'trackarr_locale',
-      redirectOn: 'root',
-      fallbackLocale: 'en',
-    },
+    // English unless the user picks another language (stored in a cookie by
+    // app/plugins/locale-cookie.ts); the browser language is not used
+    detectBrowserLanguage: false,
   },
 
   typescript: {