fix(i18n): restore wrongly removed keys

Author: sybers

app/components/ColumnPicker.vue

@@ -41,7 +41,7 @@ onKeyDown(
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
 // Map column IDs to i18n keys
-const columnLabelKey = computed(() => ({
+const columnLabels = computed(() => ({
   name: $t('filters.columns.name'),
   version: $t('filters.columns.version'),
   description: $t('filters.columns.description'),
@@ -57,7 +57,7 @@ const columnLabelKey = computed(() => ({
 }))
 
 function getColumnLabel(id: ColumnId): string {
-  const key = columnLabelKey.value[id]
+  const key = columnLabels.value[id]
   return key ?? id
 }
 

app/components/Filter/Panel.vue

@@ -27,6 +27,8 @@ const emit = defineEmits<{
   'toggleKeyword': [keyword: string]
 }>()
 
+const { t } = useI18n()
+
 const isExpanded = shallowRef(false)
 const showAllKeywords = shallowRef(false)
 
@@ -55,62 +57,77 @@ const hasMoreKeywords = computed(() => {
 })
 
 // i18n mappings for filter options
-const scopeLabelKeys = {
-  name: 'filters.scope_name',
-  description: 'filters.scope_description',
-  keywords: 'filters.scope_keywords',
-  all: 'filters.scope_all',
-} as const
-
-const scopeDescriptionKeys = {
-  name: 'filters.scope_name_description',
-  description: 'filters.scope_description_description',
-  keywords: 'filters.scope_keywords_description',
-  all: 'filters.scope_all_description',
-} as const
-
-const downloadRangeLabelKeys = {
-  'any': 'filters.download_range.any',
-  'lt100': 'filters.download_range.lt100',
-  '100-1k': 'filters.download_range.100_1k',
-  '1k-10k': 'filters.download_range.1k_10k',
-  '10k-100k': 'filters.download_range.10k_100k',
-  'gt100k': 'filters.download_range.gt100k',
-} as const
-
-const updatedWithinLabelKeys = {
-  any: 'filters.updated.any',
-  week: 'filters.updated.week',
-  month: 'filters.updated.month',
-  quarter: 'filters.updated.quarter',
-  year: 'filters.updated.year',
-} as const
-
-const securityLabelKeys = {
-  all: 'filters.security_options.all',
-  secure: 'filters.security_options.secure',
-  warnings: 'filters.security_options.insecure',
-} as const
+const scopeLabelKeys = computed(
+  () =>
+    ({
+      name: t('filters.scope_name'),
+      description: t('filters.scope_description'),
+      keywords: t('filters.scope_keywords'),
+      all: t('filters.scope_all'),
+    }) as const,
+)
+
+const scopeDescriptionKeys = computed(
+  () =>
+    ({
+      name: t('filters.scope_name_description'),
+      description: t('filters.scope_description_description'),
+      keywords: t('filters.scope_keywords_description'),
+      all: t('filters.scope_all_description'),
+    }) as const,
+)
+
+const downloadRangeLabelKeys = computed(
+  () =>
+    ({
+      'any': t('filters.download_range.any'),
+      'lt100': t('filters.download_range.lt100'),
+      '100-1k': t('filters.download_range.100_1k'),
+      '1k-10k': t('filters.download_range.1k_10k'),
+      '10k-100k': t('filters.download_range.10k_100k'),
+      'gt100k': t('filters.download_range.gt100k'),
+    }) as const,
+)
+
+const updatedWithinLabelKeys = computed(
+  () =>
+    ({
+      any: t('filters.updated.any'),
+      week: t('filters.updated.week'),
+      month: t('filters.updated.month'),
+      quarter: t('filters.updated.quarter'),
+      year: t('filters.updated.year'),
+    }) as const,
+)
+
+const securityLabelKeys = computed(
+  () =>
+    ({
+      all: t('filters.security_options.all'),
+      secure: t('filters.security_options.secure'),
+      warnings: t('filters.security_options.insecure'),
+    }) as const,
+)
 
 // Type-safe accessor functions
 function getScopeLabelKey(value: SearchScope): string {
-  return scopeLabelKeys[value]
+  return scopeLabelKeys.value[value]
 }
 
 function getScopeDescriptionKey(value: SearchScope): string {
-  return scopeDescriptionKeys[value]
+  return scopeDescriptionKeys.value[value]
 }
 
 function getDownloadRangeLabelKey(value: DownloadRange): string {
-  return downloadRangeLabelKeys[value]
+  return downloadRangeLabelKeys.value[value]
 }
 
 function getUpdatedWithinLabelKey(value: UpdatedWithin): string {
-  return updatedWithinLabelKeys[value]
+  return updatedWithinLabelKeys.value[value]
 }
 
 function getSecurityLabelKey(value: SecurityFilter): string {
-  return securityLabelKeys[value]
+  return securityLabelKeys.value[value]
 }
 
 function handleTextInput(event: Event) {
@@ -215,10 +232,10 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
                     : 'text-fg-muted hover:text-fg'
                 "
                 :aria-pressed="filters.searchScope === scope"
-                :title="$t(getScopeDescriptionKey(scope))"
+                :title="getScopeDescriptionKey(scope)"
                 @click="emit('update:searchScope', scope)"
               >
-                {{ $t(getScopeLabelKey(scope)) }}
+                {{ getScopeLabelKey(scope) }}
               </button>
             </div>
           </div>
@@ -251,7 +268,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               @update:modelValue="emit('update:downloadRange', $event as DownloadRange)"
               name="range"
             >
-              {{ $t(getDownloadRangeLabelKey(range.value)) }}
+              {{ getDownloadRangeLabelKey(range.value) }}
             </TagRadioButton>
           </div>
         </fieldset>
@@ -274,7 +291,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               name="updatedWithin"
               @update:modelValue="emit('update:updatedWithin', $event as UpdatedWithin)"
             >
-              {{ $t(getUpdatedWithinLabelKey(option.value)) }}
+              {{ getUpdatedWithinLabelKey(option.value) }}
             </TagRadioButton>
           </div>
         </fieldset>
@@ -296,7 +313,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :value="security"
               name="security"
             >
-              {{ $t(getSecurityLabelKey(security)) }}
+              {{ getSecurityLabelKey(security) }}
             </TagRadioButton>
           </div>
         </fieldset>

app/components/Package/ListToolbar.vue

@@ -32,6 +32,8 @@ const props = defineProps<{
   searchContext?: boolean
 }>()
 
+const { t } = useI18n()
+
 const sortOption = defineModel<SortOption>('sortOption', { required: true })
 const viewMode = defineModel<ViewMode>('viewMode', { required: true })
 const paginationMode = defineModel<PaginationMode>('paginationMode', { required: true })
@@ -85,22 +87,22 @@ function handleToggleDirection() {
 }
 
 // Map sort key to i18n key
-const sortKeyLabelKeys: Record<SortKey, string> = {
-  'relevance': 'filters.sort.relevance',
-  'downloads-week': 'filters.sort.downloads_week',
-  'downloads-day': 'filters.sort.downloads_day',
-  'downloads-month': 'filters.sort.downloads_month',
-  'downloads-year': 'filters.sort.downloads_year',
-  'updated': 'filters.sort.published',
-  'name': 'filters.sort.name',
+const sortKeyLabelKeys = computed<Record<SortKey, string>>(() => ({
+  'relevance': t('filters.sort.relevance'),
+  'downloads-week': t('filters.sort.downloads_week'),
+  'downloads-day': t('filters.sort.downloads_day'),
+  'downloads-month': t('filters.sort.downloads_month'),
+  'downloads-year': t('filters.sort.downloads_year'),
+  'updated': t('filters.sort.published'),
+  'name': t('filters.sort.name'),
   'quality': 'filters.sort.quality',
-  'popularity': 'filters.sort.popularity',
-  'maintenance': 'filters.sort.maintenance',
-  'score': 'filters.sort.score',
-}
+  'popularity': t('filters.sort.popularity'),
+  'maintenance': t('filters.sort.maintenance'),
+  'score': t('filters.sort.score'),
+}))
 
 function getSortKeyLabelKey(key: SortKey): string {
-  return sortKeyLabelKeys[key]
+  return sortKeyLabelKeys.value[key]
 }
 </script>
 
@@ -169,7 +171,7 @@ function getSortKeyLabelKey(key: SortKey): string {
                 :value="keyConfig.key"
                 :disabled="keyConfig.disabled"
               >
-                {{ $t(getSortKeyLabelKey(keyConfig.key)) }}
+                {{ getSortKeyLabelKey(keyConfig.key) }}
               </option>
             </select>
             <div

app/components/Package/Table.vue

@@ -16,6 +16,8 @@ const props = defineProps<{
   isLoading?: boolean
 }>()
 
+const { t } = useI18n()
+
 const sortOption = defineModel<SortOption>('sortOption')
 
 const emit = defineEmits<{
@@ -87,23 +89,23 @@ function toggleSort(id: string) {
 }
 
 // Map column IDs to i18n keys
-const columnLabelKeys: Record<ColumnId, string> = {
-  name: 'filters.columns.name',
-  version: 'filters.columns.version',
-  description: 'filters.columns.description',
-  downloads: 'filters.columns.downloads',
-  updated: 'filters.columns.published',
-  maintainers: 'filters.columns.maintainers',
-  keywords: 'filters.columns.keywords',
-  qualityScore: 'filters.columns.quality_score',
-  popularityScore: 'filters.columns.popularity_score',
-  maintenanceScore: 'filters.columns.maintenance_score',
-  combinedScore: 'filters.columns.combined_score',
-  security: 'filters.columns.security',
-}
+const columnLabels = computed(() => ({
+  name: t('filters.columns.name'),
+  version: t('filters.columns.version'),
+  description: t('filters.columns.description'),
+  downloads: t('filters.columns.downloads'),
+  updated: t('filters.columns.published'),
+  maintainers: t('filters.columns.maintainers'),
+  keywords: t('filters.columns.keywords'),
+  qualityScore: t('filters.columns.quality_score'),
+  popularityScore: t('filters.columns.popularity_score'),
+  maintenanceScore: t('filters.columns.maintenance_score'),
+  combinedScore: t('filters.columns.combined_score'),
+  security: t('filters.columns.security'),
+}))
 
-function getColumnLabelKey(id: ColumnId): string {
-  return columnLabelKeys[id]
+function getColumnLabel(id: ColumnId): string {
+  return columnLabels.value[id]
 }
 </script>
 
@@ -133,7 +135,7 @@ function getColumnLabelKey(id: ColumnId): string {
             @keydown.space.prevent="toggleSort('name')"
           >
             <span class="inline-flex items-center gap-1">
-              {{ $t(getColumnLabelKey('name')) }}
+              {{ getColumnLabel('name') }}
               <template v-if="isSortable('name')">
                 <span
                   v-if="isColumnSorted('name')"
@@ -151,15 +153,15 @@ function getColumnLabelKey(id: ColumnId): string {
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
-            {{ $t(getColumnLabelKey('version')) }}
+            {{ getColumnLabel('version') }}
           </th>
 
           <th
             v-if="isColumnVisible('description')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
-            {{ $t(getColumnLabelKey('description')) }}
+            {{ getColumnLabel('description') }}
           </th>
 
           <th
@@ -184,7 +186,7 @@ function getColumnLabelKey(id: ColumnId): string {
             @keydown.space.prevent="toggleSort('downloads')"
           >
             <span class="inline-flex items-center gap-1 justify-end">
-              {{ $t(getColumnLabelKey('downloads')) }}
+              {{ getColumnLabel('downloads') }}
               <template v-if="isSortable('downloads')">
                 <span
                   v-if="isColumnSorted('downloads')"
@@ -218,7 +220,7 @@ function getColumnLabelKey(id: ColumnId): string {
             @keydown.space.prevent="toggleSort('updated')"
           >
             <span class="inline-flex items-center gap-1">
-              {{ $t(getColumnLabelKey('updated')) }}
+              {{ getColumnLabel('updated') }}
               <template v-if="isSortable('updated')">
                 <span
                   v-if="isColumnSorted('updated')"
@@ -236,55 +238,55 @@ function getColumnLabelKey(id: ColumnId): string {
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('maintainers')) }}
+            {{ getColumnLabel('maintainers') }}
           </th>
 
           <th
             v-if="isColumnVisible('keywords')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('keywords')) }}
+            {{ getColumnLabel('keywords') }}
           </th>
 
           <th
             v-if="isColumnVisible('qualityScore')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('qualityScore')) }}
+            {{ getColumnLabel('qualityScore') }}
           </th>
 
           <th
             v-if="isColumnVisible('popularityScore')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('popularityScore')) }}
+            {{ getColumnLabel('popularityScore') }}
           </th>
 
           <th
             v-if="isColumnVisible('maintenanceScore')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('maintenanceScore')) }}
+            {{ getColumnLabel('maintenanceScore') }}
           </th>
 
           <th
             v-if="isColumnVisible('combinedScore')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('combinedScore')) }}
+            {{ getColumnLabel('combinedScore') }}
           </th>
 
           <th
             v-if="isColumnVisible('security')"
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
-            {{ $t(getColumnLabelKey('security')) }}
+            {{ getColumnLabel('security') }}
           </th>
         </tr>
       </thead>