Merge branch 'main' into add-rtl-css-script

# Conflicts:
#	package.json

Author: userquin

.github/workflows/ci.yml

@@ -210,3 +210,25 @@ jobs:
 
       - name: 🧹 Check for unused production code
         run: pnpm knip --production
+
+  i18n:
+    name: 🌐 i18n validation
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies (root only, no scripts)
+        run: pnpm install --filter . --ignore-scripts
+
+      - name: 🌐 Check for missing or dynamic i18n keys
+        run: pnpm i18n:report

app/components/ColumnPicker.vue

@@ -41,24 +41,24 @@ onKeyDown(
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
 // Map column IDs to i18n keys
-const columnLabelKey: Record<string, 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 columnLabelKey = 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 getColumnLabel(id: string): string {
-  const key = columnLabelKey[id]
-  return key ? $t(key) : id
+function getColumnLabel(id: ColumnId): string {
+  const key = columnLabelKey.value[id]
+  return key ?? id
 }
 
 function handleReset() {

app/components/Org/MembersPanel.vue

@@ -2,6 +2,9 @@
 import type { NewOperation } from '~/composables/useConnector'
 import { buildScopeTeam } from '~/utils/npm/common'
 
+type MemberRole = 'developer' | 'admin' | 'owner'
+type MemberRoleFilter = MemberRole | 'all'
+
 const props = defineProps<{
   orgName: string
 }>()
@@ -21,7 +24,7 @@ const {
 } = useConnector()
 
 // Members data: { username: role }
-const members = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const members = shallowRef<Record<string, MemberRole>>({})
 const isLoading = shallowRef(false)
 const error = shallowRef<string | null>(null)
 
@@ -31,15 +34,15 @@ const isLoadingTeams = shallowRef(false)
 
 // Search/filter
 const searchQuery = shallowRef('')
-const filterRole = shallowRef<'all' | 'developer' | 'admin' | 'owner'>('all')
+const filterRole = shallowRef<MemberRoleFilter>('all')
 const filterTeam = shallowRef<string | null>(null)
 const sortBy = shallowRef<'name' | 'role'>('name')
 const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Add member form
 const showAddMember = shallowRef(false)
 const newUsername = shallowRef('')
-const newRole = shallowRef<'developer' | 'admin' | 'owner'>('developer')
+const newRole = shallowRef<MemberRole>('developer')
 const newTeam = shallowRef<string>('') // Empty string means "developers" (default)
 const isAddingMember = shallowRef(false)
 
@@ -259,6 +262,17 @@ function getRoleBadgeClass(role: string): string {
   }
 }
 
+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.value[role]
+}
+
 // Click on team badge to switch to teams tab and highlight
 function handleTeamClick(teamName: string) {
   emit('select-team', teamName)
@@ -341,7 +355,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
         >
-          {{ $t(`org.members.role.${role}`) }}
+          {{ getRoleLabel(role) }}
           <span v-if="role !== 'all'" class="text-fg-subtle">({{ roleCounts[role] }})</span>
         </button>
       </div>
@@ -439,7 +453,7 @@ watch(lastExecutionTime, () => {
               class="px-1.5 py-0.5 font-mono text-xs border rounded"
               :class="getRoleBadgeClass(member.role)"
             >
-              {{ member.role }}
+              {{ getRoleLabel(member.role) }}
             </span>
           </div>
           <div class="flex items-center gap-1">
@@ -459,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,6 +785,17 @@ function buildExportFilename(extension: string): string {
   return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
 }
 
+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.value[granularity]
+}
+
 // VueUiXy chart component configuration
 const chartConfig = computed(() => {
   return {
@@ -835,7 +846,7 @@ const chartConfig = computed(() => {
           fontSize: isMobile.value ? 24 : 16,
           axis: {
             yLabel: $t('package.downloads.y_axis_label', {
-              granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
+              granularity: getGranularityLabel(selectedGranularity.value),
             }),
             xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,

app/components/Package/Replacement.vue

@@ -5,38 +5,6 @@ const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const message = computed<
-  [string, { replacement?: string; nodeVersion?: string; community?: string }]
->(() => {
-  switch (props.replacement.type) {
-    case 'native':
-      return [
-        'package.replacement.native',
-        {
-          replacement: props.replacement.replacement,
-          nodeVersion: props.replacement.nodeVersion,
-        },
-      ]
-    case 'simple':
-      return [
-        'package.replacement.simple',
-        {
-          replacement: props.replacement.replacement,
-          community: $t('package.replacement.community'),
-        },
-      ]
-    case 'documented':
-      return [
-        'package.replacement.documented',
-        {
-          community: $t('package.replacement.community'),
-        },
-      ]
-    case 'none':
-      return ['package.replacement.none', {}]
-  }
-})
-
 const mdnUrl = computed(() => {
   if (props.replacement.type !== 'native' || !props.replacement.mdnPath) return null
   return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${props.replacement.mdnPath}`
@@ -57,13 +25,43 @@ const docPath = computed(() => {
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
-      <i18n-t :keypath="message[0]" scope="global">
+      <i18n-t
+        v-if="replacement.type === 'native'"
+        keypath="package.replacement.native"
+        scope="global"
+      >
         <template #replacement>
-          {{ message[1].replacement ?? '' }}
+          {{ replacement.replacement }}
         </template>
         <template #nodeVersion>
-          {{ message[1].nodeVersion ?? '' }}
+          {{ replacement.nodeVersion }}
+        </template>
+      </i18n-t>
+      <i18n-t
+        v-else-if="replacement.type === 'simple'"
+        keypath="package.replacement.simple"
+        scope="global"
+      >
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+        <template #replacement>
+          {{ replacement.replacement }}
         </template>
+      </i18n-t>
+      <i18n-t
+        v-else-if="replacement.type === 'documented'"
+        keypath="package.replacement.documented"
+        scope="global"
+      >
         <template #community>
           <a
             href="https://e18e.dev/docs/replacements/"
@@ -76,6 +74,9 @@ const docPath = computed(() => {
           </a>
         </template>
       </i18n-t>
+      <template v-else>
+        {{ $t('package.replacement.none') }}
+      </template>
       <a
         v-if="mdnUrl"
         :href="mdnUrl"

app/components/Package/VulnerabilityTree.vue

@@ -23,11 +23,22 @@ 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 = 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.value[severity]
+}
+
 const summaryText = computed(() => {
   if (!vulnTree.value) return ''
   const { totalCounts } = vulnTree.value
   return SEVERITY_LEVELS.filter(s => totalCounts[s] > 0)
-    .map(s => `${totalCounts[s]} ${$t(`package.vulnerabilities.severity.${s}`)}`)
+    .map(s => `${totalCounts[s]} ${getPackageSeverityLabel(s)}`)
     .join(', ')
 })
 
@@ -130,7 +141,7 @@ function getDepthStyle(depth: string | undefined) {
                   class="px-1.5 py-0.5 text-[10px] font-mono rounded border"
                   :class="SEVERITY_COLORS[s]"
                 >
-                  {{ pkg.counts[s] }} {{ $t(`package.vulnerabilities.severity.${s}`) }}
+                  {{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}
                 </span>
               </div>
             </div>

app/components/Terminal/Install.vue

@@ -104,7 +104,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
-      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1 overflow-x-auto">
+      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1 overflow-x-auto" dir="ltr">
         <!-- Install command - render all PM variants, CSS controls visibility -->
         <div
           v-for="pm in packageManagers"
@@ -162,7 +162,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
         <!-- Run command (only if package has executables) - render all PM variants -->
         <template v-if="executableInfo?.hasExecutable">
           <!-- Comment line -->
-          <div class="flex items-center gap-2 pt-1">
+          <div class="flex items-center gap-2 pt-1" dir="auto">
             <span class="text-fg-subtle font-mono text-sm select-none"
               ># {{ $t('package.run.locally') }}</span
             >
@@ -196,7 +196,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
         <!-- Create command (for packages with associated create-* package) - render all PM variants -->
         <template v-if="createPackageInfo">
           <!-- Comment line -->
-          <div class="flex items-center gap-2 pt-1 select-none">
+          <div class="flex items-center gap-2 pt-1 select-none" dir="auto">
             <span class="text-fg-subtle font-mono text-sm"># {{ $t('package.create.title') }}</span>
             <TooltipApp
               :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"