fix(i18n): default to english and make the language switcher visible

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">

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

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>

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>

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;
+    });
+  },
+});

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: {