feat: show translation progress in locale picker #1303
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThe changes introduce a locale status formatting system for the language selector. A new utility function formatLocaleLabel in app/utils/locale-label.ts formats locale names by appending translation completion percentages (except when 100% complete). The settings page is updated to use this function through a new getLocaleStatus export from useI18nStatus() and a computed localeItems that maps locales with their formatted labels. Corresponding unit tests verify the formatting behaviour under various locale status scenarios. Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| const localeItems = computed(() => | ||
| locales.value.map(loc => ({ | ||
| label: formatLocaleLabel(loc.name ?? '', getLocaleStatus(loc.code)), | ||
| value: loc.code, | ||
| })), |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the settings.vue file around the mentioned lines
cat -n app/pages/settings.vue | head -50Repository: npmx-dev/npmx.dev
Length of output: 1844
🏁 Script executed:
# Let's also search for locale-related data/setup to understand the structure
rg -A 5 "locales\.value" app/pages/settings.vue | head -30Repository: npmx-dev/npmx.dev
Length of output: 194
🏁 Script executed:
# Check the formatLocaleLabel function to understand how it handles empty strings
rg -B 2 -A 5 "formatLocaleLabel" app/pages/settings.vueRepository: npmx-dev/npmx.dev
Length of output: 307
🏁 Script executed:
# Search for locale data source definition
rg -B 3 -A 8 "const locales" app/pages/settings.vueRepository: npmx-dev/npmx.dev
Length of output: 43
🏁 Script executed:
# Find where useI18n is defined (likely a composable)
rg -l "useI18n|export.*useI18n" --type ts --type jsRepository: npmx-dev/npmx.dev
Length of output: 677
🏁 Script executed:
# Search for formatLocaleLabel function
rg -B 2 -A 10 "function formatLocaleLabel|const formatLocaleLabel|export.*formatLocaleLabel"Repository: npmx-dev/npmx.dev
Length of output: 560
🏁 Script executed:
# Search for locale configuration/initialization
rg -B 3 -A 8 "locales.*=" --type ts --type js | head -50Repository: npmx-dev/npmx.dev
Length of output: 2797
🏁 Script executed:
# Check if there's i18n configuration file
fd -e "ts|js" -i "i18n|locale" | grep -E "(config|setup|composable)" | head -20Repository: npmx-dev/npmx.dev
Length of output: 43
🏁 Script executed:
# Check useI18nStatus composable
cat -n app/composables/useI18nStatus.tsRepository: npmx-dev/npmx.dev
Length of output: 2814
🏁 Script executed:
# Search for where locales.value comes from in useI18n hook
rg -B 5 -A 10 "locales\s*=" app/ | grep -E "(const|let|var|locales)" | head -20Repository: npmx-dev/npmx.dev
Length of output: 43
🏁 Script executed:
# Check how useI18n is imported and if it's from `@nuxtjs/i18n`
rg "from.*i18n|import.*useI18n" app/ --type ts --type vueRepository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
# Search for useI18n imports and usage (without problematic -t flag)
rg "useI18n|@nuxtjs/i18n" app/ --include="*.ts" --include="*.vue" -B 1 -A 1 | head -30Repository: npmx-dev/npmx.dev
Length of output: 502
🏁 Script executed:
# Look for nuxt configuration
cat -n nuxt.config.ts 2>/dev/null || cat -n nuxt.config.js 2>/dev/null || fd -e "ts|js" -i "nuxt.config"Repository: npmx-dev/npmx.dev
Length of output: 10479
🏁 Script executed:
# Check how locales are defined in i18n config
rg -B 5 -A 10 "i18n.*config|locales.*:" --include="*.ts" --include="*.js" | head -50Repository: npmx-dev/npmx.dev
Length of output: 502
🏁 Script executed:
# Verify formatLocaleLabel with empty string
cat -n app/utils/locale-label.tsRepository: npmx-dev/npmx.dev
Length of output: 572
🏁 Script executed:
# Check the i18n config file to see currentLocales structure
cat -n config/i18n.tsRepository: npmx-dev/npmx.dev
Length of output: 14333
🏁 Script executed:
# Also search for currentLocales definition
rg "currentLocales|export.*locales" config/ -B 2 -A 8Repository: npmx-dev/npmx.dev
Length of output: 1610
Use locale code as fallback when name is missing.
If a locale lacks name, the current empty string fallback results in a blank label (or just "(x%)"). Use the locale code as fallback for better UX.
Suggested change
const localeItems = computed(() =>
locales.value.map(loc => ({
- label: formatLocaleLabel(loc.name ?? '', getLocaleStatus(loc.code)),
+ label: formatLocaleLabel(loc.name ?? loc.code, getLocaleStatus(loc.code)),
value: loc.code,
})),
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const localeItems = computed(() => | |
| locales.value.map(loc => ({ | |
| label: formatLocaleLabel(loc.name ?? '', getLocaleStatus(loc.code)), | |
| value: loc.code, | |
| })), | |
| const localeItems = computed(() => | |
| locales.value.map(loc => ({ | |
| label: formatLocaleLabel(loc.name ?? loc.code, getLocaleStatus(loc.code)), | |
| value: loc.code, | |
| })), |
1 participant
Why:
Inspired by https://opencollective.com/