feat: add translation status page

Author: userquin

app/components/AppFooter.vue

@@ -30,6 +30,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'accessibility' }">
             {{ $t('a11y.footer_title') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'translation-status' }">
+            {{ $t('translation_status.title') }}
+          </LinkBase>
           <button
             type="button"
             class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"

app/components/AppHeader.vue

@@ -73,6 +73,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-carbon:accessibility-alt',
       },
+      {
+        name: 'Translation Status',
+        label: $t('translation_status.title'),
+        to: { name: 'translation-status' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:languages',
+      },
     ],
   },
   {

app/composables/useI18nStatus.ts

@@ -18,12 +18,18 @@ export function useI18nStatus() {
     getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] ?? nuxtApp.static.data[key],
   })
 
+  const localesMap = computed<Map<string, I18nLocaleStatus> | undefined>(() => {
+    return status.value?.locales.reduce((acc, locale) => {
+      acc.set(locale.lang, locale)
+      return acc
+    }, new Map())
+  })
+
   /**
    * Get the translation status for a specific locale
    */
   function getLocaleStatus(langCode: string): I18nLocaleStatus | null {
-    if (!status.value) return null
-    return status.value.locales.find(l => l.lang === langCode) ?? null
+    return localesMap.value?.get(langCode) ?? null
   }
 
   /**
@@ -73,5 +79,7 @@ export function useI18nStatus() {
     isSourceLocale,
     /** GitHub edit URL for current locale */
     githubEditUrl,
+    /** locale info map by lang */
+    localesMap,
   }
 }

app/pages/settings.vue

@@ -258,6 +258,11 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 {{ $t('settings.help_translate') }}
               </a>
             </template>
+            <div>
+              <LinkBase :to="{ name: 'translation-status' }">
+                {{ $t('settings.translation_status') }}
+              </LinkBase>
+            </div>
           </div>
         </section>
       </div>