Redirect unsupported locale paths to English and display notice banner

frontend/src/app.vue

@@ -15,6 +15,7 @@ import { useLayout } from "~/composables/use-layout"
 import { useDarkMode } from "~/composables/use-dark-mode"
 
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
+import LanguageRedirectBanner from '~/components/LanguageRedirectBanner.vue'
 
 const config = useRuntimeConfig()
 
@@ -85,6 +86,7 @@ onMounted(() => {
   <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
     <VSkipToContentButton />
     <NuxtLayout>
+    <LanguageRedirectBanner />
       <NuxtPage />
     </NuxtLayout>
     <VGlobalAudioSection />

frontend/src/components/LanguageRedirectBanner.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useCookie } from '#app'
+
+const unsupportedLocale = useCookie<string>('unsupported_language_code')
+
+function closeBanner() {
+  unsupportedLocale.value = null
+}
+</script>
+
+<template>
+  <div
+    v-if="unsupportedLocale"
+    class="language-redirect-banner"
+    role="alert"
+  >
+    <span>
+      We don’t have translations for
+      <strong>{{ unsupportedLocale }}</strong>.
+      Showing the English version instead.
+    </span>
+
+    <button
+      type="button"
+      aria-label="Dismiss language notice"
+      @click="closeBanner"
+    >
+      ×
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.language-redirect-banner {
+  background: #fff4cc;
+  color: #333;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+</style>

frontend/src/middleware/language-redirect.global.ts

@@ -0,0 +1,30 @@
+import {
+  defineNuxtRouteMiddleware,
+  navigateTo,
+  useCookie,
+  useNuxtApp,
+} from '#app'
+
+export default defineNuxtRouteMiddleware((to) => {
+  const { $i18n } = useNuxtApp()
+  const availableLocales = $i18n.availableLocales as string[]
+
+  const segments = to.path.split('/').filter(Boolean)
+  if (!segments.length) return
+
+  const locale = segments[0]
+
+  // Only act on two-letter language codes
+  if (locale.length !== 2) return
+
+  // Supported locale → do nothing
+  if (availableLocales.includes(locale)) return
+
+  // Store unsupported locale to show banner
+  const bannerCookie = useCookie<string>('unsupported_language_code')
+  bannerCookie.value = locale
+
+  // Redirect to English path (strip the locale)
+  const newPath = '/' + segments.slice(1).join('/')
+  return navigateTo(newPath || '/', { redirectCode: 302 })
+})