feat: show translation progress in locale picker

Inspired by https://opencollective.com/

Author: serhalp

app/pages/settings.vue

@@ -4,7 +4,14 @@ const canGoBack = useCanGoBack()
 const { settings } = useSettings()
 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
-const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
+const { currentLocaleStatus, isSourceLocale, getLocaleStatus } = useI18nStatus()
+
+const localeItems = computed(() =>
+  locales.value.map(loc => ({
+    label: formatLocaleLabel(loc.name ?? '', getLocaleStatus(loc.code)),
+    value: loc.code,
+  })),
+)
 
 // Escape to go back (but not when focused on form elements or modal is open)
 onKeyStroke(
@@ -219,7 +226,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <ClientOnly>
                 <SelectField
                   id="language-select"
-                  :items="locales.map(loc => ({ label: loc.name ?? '', value: loc.code }))"
+                  :items="localeItems"
                   v-model="locale"
                   @update:modelValue="setLocale($event as typeof locale)"
                   block

app/utils/locale-label.ts

@@ -0,0 +1,12 @@
+import type { I18nLocaleStatus } from '#shared/types'
+
+/**
+ * Format a locale label for the language selector, appending the completion
+ * percentage when the locale is not fully translated.
+ */
+export function formatLocaleLabel(name: string, localeStatus: I18nLocaleStatus | null): string {
+  if (localeStatus && localeStatus.percentComplete < 100) {
+    return `${name} (${localeStatus.percentComplete}%)`
+  }
+  return name
+}

test/unit/app/utils/locale-label.spec.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { formatLocaleLabel } from '../../../../app/utils/locale-label'
+import type { I18nLocaleStatus } from '#shared/types'
+
+function makeStatus(percentComplete: number): I18nLocaleStatus {
+  return {
+    lang: 'fr-FR',
+    label: 'Français',
+    totalKeys: 200,
+    completedKeys: Math.round((percentComplete / 100) * 200),
+    missingKeys: [],
+    percentComplete,
+    githubEditUrl: '',
+    githubHistoryUrl: '',
+  }
+}
+
+describe('formatLocaleLabel', () => {
+  it('appends percentage when locale is partially translated', () => {
+    expect(formatLocaleLabel('Français', makeStatus(85))).toBe('Français (85%)')
+  })
+
+  it('appends percentage when locale is 0% translated', () => {
+    expect(formatLocaleLabel('العربية', makeStatus(0))).toBe('العربية (0%)')
+  })
+
+  it('does not append percentage when locale is 100% complete', () => {
+    expect(formatLocaleLabel('English (US)', makeStatus(100))).toBe('English (US)')
+  })
+
+  it('returns plain name when locale status is null', () => {
+    expect(formatLocaleLabel('English', null)).toBe('English')
+  })
+})