chore(i18n): review

Author: sybers

app/components/ColumnPicker.vue

@@ -37,7 +37,7 @@ useEventListener('keydown', event => {
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
 // Map column IDs to i18n keys
-const columnLabelKey: Record<string, string> = {
+const columnLabelKey = computed(() => ({
   name: $t('filters.columns.name'),
   version: $t('filters.columns.version'),
   description: $t('filters.columns.description'),
@@ -50,10 +50,10 @@ const columnLabelKey: Record<string, string> = {
   maintenanceScore: $t('filters.columns.maintenance_score'),
   combinedScore: $t('filters.columns.combined_score'),
   security: $t('filters.columns.security'),
-}
+}))
 
-function getColumnLabel(id: string): string {
-  const key = columnLabelKey[id]
+function getColumnLabel(id: ColumnId): string {
+  const key = columnLabelKey.value[id]
   return key ?? id
 }
 

app/components/Org/MembersPanel.vue

@@ -262,15 +262,15 @@ function getRoleBadgeClass(role: string): string {
   }
 }
 
-const roleLabels = {
+const roleLabels = computed(() => ({
   owner: $t('org.members.role.owner'),
   admin: $t('org.members.role.admin'),
   developer: $t('org.members.role.developer'),
   all: $t('org.members.role.all'),
-}
+}))
 
 function getRoleLabel(role: MemberRoleFilter): string {
-  return roleLabels[role]
+  return roleLabels.value[role]
 }
 
 // Click on team badge to switch to teams tab and highlight
@@ -473,9 +473,9 @@ watch(lastExecutionTime, () => {
                 )
               "
             >
-              <option value="developer">{{ $t('org.members.role.developer') }}</option>
-              <option value="admin">{{ $t('org.members.role.admin') }}</option>
-              <option value="owner">{{ $t('org.members.role.owner') }}</option>
+              <option value="developer">{{ getRoleLabel('developer') }}</option>
+              <option value="admin">{{ getRoleLabel('admin') }}</option>
+              <option value="owner">{{ getRoleLabel('owner') }}</option>
             </select>
             <!-- Remove button -->
             <button

app/components/Package/DownloadAnalytics.vue

@@ -785,15 +785,15 @@ function buildExportFilename(extension: string): string {
   return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
 }
 
-const granularityLabels = {
+const granularityLabels = computed(() => ({
   daily: $t('package.downloads.granularity_daily'),
   weekly: $t('package.downloads.granularity_weekly'),
   monthly: $t('package.downloads.granularity_monthly'),
   yearly: $t('package.downloads.granularity_yearly'),
-}
+}))
 
 function getGranularityLabel(granularity: ChartTimeGranularity) {
-  return granularityLabels[granularity]
+  return granularityLabels.value[granularity]
 }
 
 // VueUiXy chart component configuration

app/components/Package/VulnerabilityTree.vue

@@ -23,15 +23,15 @@ const hasVulnerabilities = computed(
 // Banner - amber for better light mode contrast
 const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-700 dark:text-amber-400'
 
-const severityLabels = {
+const severityLabels = computed(() => ({
   critical: $t('package.vulnerabilities.severity.critical'),
   high: $t('package.vulnerabilities.severity.high'),
   moderate: $t('package.vulnerabilities.severity.moderate'),
   low: $t('package.vulnerabilities.severity.low'),
-}
+}))
 
 function getPackageSeverityLabel(severity: Exclude<OsvSeverityLevel, 'unknown'>) {
-  return severityLabels[severity]
+  return severityLabels.value[severity]
 }
 
 const summaryText = computed(() => {

app/composables/useFacetSelection.ts

@@ -23,10 +23,10 @@ export interface FacetInfoWithLabels extends Omit<FacetInfo, 'id'> {
 export function useFacetSelection(queryParam = 'facets') {
   const { t } = useI18n()
 
-  const facetLabels = {
+  const facetLabels = computed(() => ({
     downloads: {
       label: t(`compare.facets.items.downloads.label`),
-      description: t(`compare.facets.items.downloads.label`),
+      description: t(`compare.facets.items.downloads.description`),
     },
     packageSize: {
       label: t(`compare.facets.items.packageSize.label`),
@@ -72,15 +72,15 @@ export function useFacetSelection(queryParam = 'facets') {
       label: t(`compare.facets.items.deprecated.label`),
       description: t(`compare.facets.items.deprecated.description`),
     },
-  }
+  }))
 
   // Helper to build facet info with i18n labels
   function buildFacetInfo(facet: ComparisonFacet): FacetInfoWithLabels {
     return {
       id: facet,
       ...FACET_INFO[facet],
-      label: facetLabels[facet].label,
-      description: facetLabels[facet].description,
+      label: facetLabels.value[facet].label,
+      description: facetLabels.value[facet].description,
     }
   }
 

scripts/find-invalid-translations.ts

@@ -89,4 +89,7 @@ async function run(): Promise<void> {
   }
 }
 
-run()
+run().catch((error: unknown) => {
+  console.error(colors.red('\n❌ Unexpected error:'), error)
+  process.exit(1)
+})