feat: enhance language switcher component and update locale configurations with partial translations

Author: JoachimLK

README.md

@@ -144,6 +144,38 @@ Then sign in with:
 
 ---
 
+### Updating to a new release
+
+When a new version of Reqcore is released, follow these steps **in order** to update your instance. Your data is safe — updates never delete the database or your uploaded files.
+
+**Step 1 — Pull the latest code**
+
+```bash
+git pull origin main
+```
+
+**Step 2 — Rebuild and restart the app**
+
+```bash
+docker compose up --build -d
+```
+
+This rebuilds the app image with the new code, applies any new database migrations automatically on startup, and restarts in the background. The whole process typically takes under a minute.
+
+**Step 3 — Verify it's running**
+
+```bash
+docker compose logs app --tail 20
+```
+
+Look for `Listening on http://[::]:3000`. Then open [http://localhost:3000](http://localhost:3000) — you're on the latest version.
+
+> **Something wrong after an update?** Roll back by running `git checkout <previous-commit>` and then `docker compose up --build -d`.
+
+> **To find the latest release notes**, check the [CHANGELOG](CHANGELOG.md) or [GitHub Releases](https://github.com/reqcore-inc/reqcore/releases).
+
+---
+
 ### Managing your instance
 
 ```bash

app/components/LanguageSwitcher.vue

@@ -1,7 +1,25 @@
 <script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+
 const route = useRoute()
 const requestURL = useRequestURL()
 const { locale, locales, t } = useI18n()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+function closeDropdown() {
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown()
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', handleClickOutside))
+onUnmounted(() => document.removeEventListener('mousedown', handleClickOutside))
 const localePath = useLocalePath()
 const switchLocalePath = useSwitchLocalePath()
 type SwitchLocale = Parameters<typeof switchLocalePath>[0]
@@ -49,13 +67,20 @@ function getLocaleFromRouteName(name: RouteName): string | null {
   return parts[1] ?? null
 }
 
+type LocaleWithPartial = { code?: string | null, partial?: boolean }
+
 const localeOptions = computed(() => {
   return locales.value
-    .map(entry => getLocaleCode(entry as LocaleEntry))
-    .filter((code): code is string => !!code)
-    .map(code => ({
+    .map((entry) => {
+      const code = getLocaleCode(entry as LocaleEntry)
+      const partial = (entry as LocaleWithPartial).partial === true
+      return code ? { code, partial } : null
+    })
+    .filter((item): item is { code: string, partial: boolean } => !!item)
+    .map(({ code, partial }) => ({
       code,
-      label: `${localeFlags[code] ?? '🌐'} ${code.toLowerCase()}`,
+      partial,
+      flag: localeFlags[code] ?? '🌐',
     }))
 })
 
@@ -124,9 +149,12 @@ const showI18nProbe = computed(() => {
 const i18nProbeText = computed(() => t('common.language'))
 
 async function handleLocaleChange(nextLocale: string) {
-  if (!nextLocale || nextLocale === selectedLocaleCode.value) return
+  if (!nextLocale || nextLocale === selectedLocaleCode.value) {
+    closeDropdown()
+    return
+  }
   if (!isSwitchLocale(nextLocale)) return
-
+  closeDropdown()
   const switchPath = switchLocalePath(nextLocale)
   await navigateTo(switchPath || localePath('/'))
 }
@@ -142,18 +170,51 @@ async function handleLocaleChange(nextLocale: string) {
       {{ i18nProbeText }}
     </span>
 
-    <select
-      v-model="selectedLocaleCode"
-      :aria-label="t('common.selectLanguage')"
-      class="h-8 min-w-14 rounded-md border border-surface-300/45 dark:border-surface-700/55 bg-transparent px-2 text-xs font-medium lowercase text-surface-500 dark:text-surface-400 outline-none transition-colors hover:border-surface-400/60 hover:text-surface-700 dark:hover:border-surface-600 dark:hover:text-surface-200 focus:border-brand-500/70 focus:text-surface-800 dark:focus:text-surface-100"
-    >
-      <option
-        v-for="option in localeOptions"
-        :key="option.code"
-        :value="option.code"
+    <div ref="dropdownRef" class="relative">
+      <!-- Trigger button -->
+      <button
+        type="button"
+        :aria-label="t('common.selectLanguage')"
+        :aria-expanded="isOpen"
+        aria-haspopup="listbox"
+        class="flex h-8 items-center gap-1 rounded-md border border-surface-300/45 dark:border-surface-700/55 bg-transparent px-2 text-xs font-medium lowercase text-surface-500 dark:text-surface-400 outline-none transition-colors hover:border-surface-400/60 hover:text-surface-700 dark:hover:border-surface-600 dark:hover:text-surface-200 focus:border-brand-500/70 focus:text-surface-800 dark:focus:text-surface-100"
+        @click="isOpen = !isOpen"
+      >
+        <span>{{ localeOptions.find(o => o.code === selectedLocaleCode)?.flag ?? '🌐' }} {{ selectedLocaleCode }}</span>
+        <ChevronDown class="size-3 opacity-60 transition-transform duration-150" :class="{ 'rotate-180': isOpen }" />
+      </button>
+
+      <!-- Dropdown list -->
+      <ul
+        v-if="isOpen"
+        role="listbox"
+        :aria-label="t('common.selectLanguage')"
+        class="absolute right-0 z-50 mt-1 min-w-40 rounded-md border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg py-1 text-xs"
       >
-        {{ option.label }}
-      </option>
-    </select>
+        <li
+          v-for="option in localeOptions"
+          :key="option.code"
+          role="option"
+          :aria-selected="option.code === selectedLocaleCode"
+          class="flex cursor-pointer items-center justify-between gap-2 px-3 py-1.5 transition-colors"
+          :class="option.code === selectedLocaleCode
+            ? 'bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100'
+            : 'text-surface-600 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800'"
+          @click="handleLocaleChange(option.code)"
+        >
+          <span class="flex items-center gap-1.5">
+            <span>{{ option.flag }}</span>
+            <span class="font-medium">{{ option.code }}</span>
+          </span>
+          <span
+            v-if="option.partial"
+            class="rounded bg-amber-100 dark:bg-amber-900/40 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-400"
+            title="Translation incomplete"
+          >
+            partial
+          </span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>

nuxt.config.ts

@@ -7,11 +7,11 @@ const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || 'https://reqcore.com'
 const i18nDefaultLocale = 'en'
 const i18nLocales = [
   { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
-  { code: 'es', language: 'es-ES', name: 'Español', file: 'es.json' },
-  { code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json' },
-  { code: 'de', language: 'de-DE', name: 'Deutsch', file: 'de.json' },
+  { code: 'es', language: 'es-ES', name: 'Español', file: 'es.json', partial: true },
+  { code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json', partial: true },
+  { code: 'de', language: 'de-DE', name: 'Deutsch', file: 'de.json', partial: true },
   { code: 'nb', language: 'nb-NO', name: 'Norsk Bokmål', file: 'nb.json' },
-  { code: 'vi', language: 'vi-VN', name: 'Tiếng Việt', file: 'vi.json' },
+  { code: 'vi', language: 'vi-VN', name: 'Tiếng Việt', file: 'vi.json', partial: true },
 ]
 
 const localizedPublicRouteRules = Object.fromEntries(