@cat-factory/app 0.46.0 → 0.46.1

package/app/components/layout/LanguageSwitcher.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import { useLocaleStore } from '~/stores/locale'
+
+// Language picker for the SPA's supported locales, shown at the sidebar bottom next to
+// the user menu. The list is data-driven from the i18n config (`useI18n().locales`), so
+// adding a locale in nuxt.config.ts surfaces it here automatically. Selecting one switches
+// the live locale AND persists the choice (the locale store) so it survives a reload.
+const { t, locale, locales, setLocale } = useI18n()
+const localeStore = useLocaleStore()
+
+const current = computed(
+  () => locales.value.find((l) => l.code === locale.value)?.name ?? locale.value,
+)
+
+// The typed-messages guard narrows the locale to the configured union, so take the same
+// type setLocale expects rather than a bare string.
+async function choose(code: typeof locale.value) {
+  if (code === locale.value) return
+  await setLocale(code)
+  localeStore.set(code)
+}
+
+const items = computed<DropdownMenuItem[][]>(() => [
+  locales.value.map((l) => ({
+    label: l.name ?? l.code,
+    icon: l.code === locale.value ? 'i-lucide-check' : undefined,
+    onSelect: () => {
+      void choose(l.code)
+    },
+  })),
+])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
+    <button
+      type="button"
+      data-testid="language-switcher"
+      :aria-label="t('language.switcher')"
+      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-left transition hover:bg-slate-800/60"
+    >
+      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-slate-400" />
+      <div class="min-w-0 flex-1">
+        <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('language.switcher') }}
+        </div>
+        <div class="truncate text-xs font-medium text-white">{{ current }}</div>
+      </div>
+      <UIcon name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-slate-500" />
+    </button>
+  </UDropdownMenu>
+</template>

package/app/components/layout/SideBar.vue

@@ -7,6 +7,7 @@
 // default models).
 import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
+import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 
@@ -306,6 +307,9 @@ watch(
       </section>
     </div>
 
-    <UserMenu class="mt-auto" />
+    <div class="mt-auto space-y-2">
+      <LanguageSwitcher />
+      <UserMenu />
+    </div>
   </aside>
 </template>

package/app/components/layout/TranslationWarningBanner.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+// Shown whenever the active locale is NOT English: the non-English catalogs are
+// community/AI-provided and may be inaccurate, so warn the user and point them at the
+// repository to report mistakes or open a fix PR. Rendered as a slim full-width strip at
+// the very top (distinct from the centered config-warning cards below it, so they don't
+// overlap). Dismissible per session; re-appears the next time the user switches locale.
+const REPO_URL = 'https://github.com/kibertoad/cat-factory'
+
+const { t, locale } = useI18n()
+
+const dismissed = ref(false)
+const show = computed(() => locale.value !== 'en' && !dismissed.value)
+
+// A fresh switch is a new context for the warning, so un-dismiss on every locale change.
+watch(locale, () => {
+  dismissed.value = false
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="show"
+      data-testid="translation-warning"
+      role="alert"
+      class="fixed inset-x-0 top-0 z-50 flex items-center gap-3 border-b border-amber-500/40 bg-amber-950/95 px-4 py-2 text-[13px] text-amber-100 shadow-lg backdrop-blur"
+    >
+      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-amber-400" />
+      <p class="min-w-0 flex-1">
+        <span class="font-semibold">{{ t('language.warning.title') }}</span>
+        <span class="mx-1.5 text-amber-400/60">·</span>
+        <i18n-t keypath="language.warning.body" tag="span" scope="global">
+          <template #repoLink>
+            <a
+              :href="REPO_URL"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 font-medium text-sky-300 hover:underline"
+            >
+              {{ t('language.warning.repoLinkLabel') }}
+              <UIcon name="i-lucide-external-link" class="h-3 w-3" />
+            </a>
+          </template>
+        </i18n-t>
+      </p>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-x"
+        :aria-label="t('language.warning.dismiss')"
+        @click="dismissed = true"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/pages/index.vue

@@ -208,6 +208,8 @@ watch(
 
 <template>
   <div class="flex h-screen w-screen overflow-hidden bg-slate-950 text-slate-100">
+    <!-- Non-English locale warning (unofficial translation); slim strip above everything. -->
+    <TranslationWarningBanner />
     <!-- Local-mode setup prompt (missing GitHub PAT); floats over whatever is shown below. -->
     <GitHubPatBanner />
     <!-- AI-readiness prompt (no usable model source, or default preset uses unavailable models). -->

package/app/plugins/locale.client.ts

@@ -0,0 +1,20 @@
+import { useLocaleStore } from '~/stores/locale'
+
+// Restore the user's persisted language choice on boot. The app defaults to English
+// (the locale store's default); this only re-applies an EXPLICIT prior pick. Kept
+// client-only (the SPA renders client-side) and guarded against an unknown code so a
+// stale/removed locale falls back to the i18n default instead of throwing.
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const i18n = nuxtApp.$i18n as {
+    locale: { value: string }
+    locales: { value: Array<{ code: string }> }
+    setLocale: (code: string) => Promise<void>
+  }
+  if (!i18n?.setLocale) return
+
+  const stored = useLocaleStore().current
+  const supported = i18n.locales.value.some((l) => l.code === stored)
+  if (supported && stored !== i18n.locale.value) {
+    await i18n.setLocale(stored)
+  }
+})

package/app/stores/locale.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+// Persists the user's EXPLICIT language choice so it survives reloads. The app always
+// boots in English (the `current` default) — there is no browser auto-detect — and only
+// an explicit pick via the switcher changes this. A client plugin applies `current` to
+// the active i18n locale on startup; the switcher writes here AND calls i18n's setLocale.
+export const useLocaleStore = defineStore(
+  'locale',
+  () => {
+    const current = ref('en')
+
+    function set(code: string) {
+      current.value = code
+    }
+
+    return { current, set }
+  },
+  { persist: { pick: ['current'] } },
+)

package/i18n/locales/en.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Language",
+    "warning": {
+      "title": "Unofficial translation",
+      "body": "This translation is community-provided and may be inaccurate. Spotted a mistake? Please report it or open a fix on {repoLink}.",
+      "repoLinkLabel": "the cat-factory repository",
+      "dismiss": "Dismiss"
+    }
+  },
   "common": {
     "save": "Save",
     "cancel": "Cancel",

package/i18n/locales/es.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Idioma",
+    "warning": {
+      "title": "Traducción no oficial",
+      "body": "Esta traducción es proporcionada por la comunidad y puede contener errores. ¿Has encontrado un error? Repórtalo o envía una corrección en {repoLink}.",
+      "repoLinkLabel": "el repositorio de cat-factory",
+      "dismiss": "Descartar"
+    }
+  },
   "common": {
     "save": "Guardar",
     "cancel": "Cancelar",

package/i18n/locales/fr.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Langue",
+    "warning": {
+      "title": "Traduction non officielle",
+      "body": "Cette traduction est fournie par la communauté et peut être inexacte. Vous avez repéré une erreur ? Signalez-la ou proposez une correction sur {repoLink}.",
+      "repoLinkLabel": "le dépôt cat-factory",
+      "dismiss": "Fermer"
+    }
+  },
   "common": {
     "save": "Enregistrer",
     "cancel": "Annuler",

package/i18n/locales/pl.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Język",
+    "warning": {
+      "title": "Nieoficjalne tłumaczenie",
+      "body": "To tłumaczenie pochodzi od społeczności i może być niedokładne. Zauważyłeś błąd? Zgłoś go lub prześlij poprawkę w {repoLink}.",
+      "repoLinkLabel": "repozytorium cat-factory",
+      "dismiss": "Odrzuć"
+    }
+  },
   "common": {
     "save": "Zapisz",
     "cancel": "Anuluj",

package/i18n/locales/uk.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Мова",
+    "warning": {
+      "title": "Неофіційний переклад",
+      "body": "Цей переклад надано спільнотою та може бути неточним. Помітили помилку? Повідомте про неї або надішліть виправлення у {repoLink}.",
+      "repoLinkLabel": "репозиторії cat-factory",
+      "dismiss": "Закрити"
+    }
+  },
   "common": {
     "save": "Зберегти",
     "cancel": "Скасувати",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",