fix: localize diff sidebar copy

Author: taskylizard

app/components/diff/MobileSidebarDrawer.vue

@@ -65,12 +65,12 @@ watch(open, value => {
             <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
           </span>
           <span class="text-fg-subtle">•</span>
-          <span>{{ props.allChanges.length }} files</span>
+          <span>{{ $t('compare.files_count', { count: props.allChanges.length }) }}</span>
         </div>
         <button
           type="button"
           class="text-fg-muted hover:text-fg transition-colors"
-          aria-label="Close files panel"
+          :aria-label="$t('compare.close_files_panel')"
           @click="open = false"
         >
           <span class="i-carbon:close w-5 h-5" />

app/components/diff/SidebarPanel.vue

@@ -18,21 +18,22 @@ const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFi
 })
 
 const sectionOrder = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
-const sectionMeta: Record<string, { label: string; icon: string }> = {
-  dependencies: { label: 'Dependencies', icon: 'i-carbon-cube' },
-  devDependencies: { label: 'Dev Dependencies', icon: 'i-carbon-tools' },
-  peerDependencies: { label: 'Peer Dependencies', icon: 'i-carbon-user-multiple' },
-  optionalDependencies: { label: 'Optional Dependencies', icon: 'i-carbon-help' },
-}
+const { t } = useI18n()
+const sectionMeta = computed<Record<string, { label: string; icon: string }>>(() => ({
+  dependencies: { label: t('compare.dependencies'), icon: 'i-carbon-cube' },
+  devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-carbon-tools' },
+  peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-carbon-user-multiple' },
+  optionalDependencies: { label: t('compare.optional_dependencies'), icon: 'i-carbon-help' },
+}))
 
 const sectionList = computed(() => {
   const entries = Array.from(props.groupedDeps.entries())
   return entries
     .map(([key, changes]) => ({
       key,
       changes,
-      label: sectionMeta[key]?.label ?? key,
-      icon: sectionMeta[key]?.icon ?? 'i-carbon-cube',
+      label: sectionMeta.value[key]?.label ?? key,
+      icon: sectionMeta.value[key]?.icon ?? 'i-carbon-cube',
       order: sectionOrder.indexOf(key) === -1 ? sectionOrder.length + 1 : sectionOrder.indexOf(key),
     }))
     .sort((a, b) => a.order - b.order)
@@ -72,7 +73,7 @@ function handleFileSelect(file: FileChange) {
         <div class="flex flex-wrap items-center justify-between gap-2">
           <span class="text-xs font-medium flex items-center gap-1.5">
             <span class="i-lucide-lightbulb w-3.5 h-3.5" />
-            Summary
+            {{ $t('compare.summary') }}
           </span>
           <div class="flex items-center gap-3 font-mono text-[10px]">
             <span class="flex items-center gap-1">
@@ -83,9 +84,7 @@ function handleFileSelect(file: FileChange) {
               <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
             </span>
             <span v-if="compare.dependencyChanges.length > 0" class="text-fg-muted">
-              {{ compare.dependencyChanges.length }} dep{{
-                compare.dependencyChanges.length !== 1 ? 's' : ''
-              }}
+              {{ $t('compare.deps_count', { count: compare.dependencyChanges.length }) }}
             </span>
           </div>
         </div>
@@ -168,7 +167,7 @@ function handleFileSelect(file: FileChange) {
         v-if="compare.dependencyChanges.length === 0 && !compare.meta.warnings?.length"
         class="px-3 py-2 text-[10px] text-fg-muted text-center"
       >
-        No dependency changes
+        {{ $t('compare.no_dependency_changes') }}
       </div>
     </div>
 
@@ -179,17 +178,27 @@ function handleFileSelect(file: FileChange) {
       >
         <span class="text-xs font-medium flex items-center gap-1.5">
           <span class="i-carbon-document w-3.5 h-3.5" />
-          Changed Files
+          {{ $t('compare.file_changes') }}
         </span>
         <span class="flex items-center gap-2">
           <select
             v-model="fileFilter"
             class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
           >
-            <option value="all">All ({{ allChanges.length }})</option>
-            <option value="added">Added ({{ compare.stats.filesAdded }})</option>
-            <option value="removed">Removed ({{ compare.stats.filesRemoved }})</option>
-            <option value="modified">Modified ({{ compare.stats.filesModified }})</option>
+            <option value="all">
+              {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
+            </option>
+            <option value="added">
+              {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
+            </option>
+            <option value="removed">
+              {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
+            </option>
+            <option value="modified">
+              {{
+                $t('compare.file_filter_option.modified', { count: compare.stats.filesModified })
+              }}
+            </option>
           </select>
           <span
             class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
@@ -199,7 +208,11 @@ function handleFileSelect(file: FileChange) {
 
       <div class="flex-1 overflow-y-auto min-h-0">
         <div v-if="filteredChanges.length === 0" class="p-8 text-center text-xs text-fg-muted">
-          No {{ fileFilter === 'all' ? '' : fileFilter }} files
+          {{
+            fileFilter === 'all'
+              ? $t('compare.no_files_all')
+              : $t('compare.no_files_filtered', { filter: $t(`compare.filter.${fileFilter}`) })
+          }}
         </div>
 
         <DiffFileTree

app/pages/diff/[...path].vue

@@ -227,15 +227,15 @@ useSeoMeta({
               <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
             </span>
             <span class="text-fg-subtle">•</span>
-            <span>{{ allChanges.length }} files</span>
+            <span>{{ $t('compare.files_count', { count: allChanges.length }) }}</span>
           </div>
           <button
             type="button"
             class="px-2 py-1 inline-flex items-center gap-1.5 font-mono text-xs bg-bg-muted border border-border rounded text-fg-muted hover:text-fg hover:border-border-hover transition-colors"
             @click="mobileDrawerOpen = true"
           >
             <span class="i-carbon:document w-3.5 h-3.5" />
-            Files
+            {{ $t('compare.files_button') }}
           </button>
         </div>
 
@@ -253,7 +253,7 @@ useSeoMeta({
               <span
                 class="i-carbon-document-blank w-16 h-16 mx-auto text-fg-subtle/50 block mb-4"
               />
-              <p class="text-fg-muted">Select a file from the sidebar to view its diff</p>
+              <p class="text-fg-muted">{{ $t('compare.select_file_prompt') }}</p>
             </div>
           </div>
         </div>

i18n/locales/en.json

@@ -952,6 +952,29 @@
     "view_in_browser": "View in code browser",
     "close_diff": "Close diff",
     "lines_hidden": "{count} lines hidden",
-    "compare_versions": "Diff"
+    "compare_versions": "Diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "no_files_all": "No files",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel"
   }
 }

lunaria/files/en-GB.json

@@ -952,6 +952,29 @@
     "view_in_browser": "View in code browser",
     "close_diff": "Close diff",
     "lines_hidden": "{count} lines hidden",
-    "compare_versions": "Diff"
+    "compare_versions": "Diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "no_files_all": "No files",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel"
   }
 }

lunaria/files/en-US.json

@@ -952,6 +952,29 @@
     "view_in_browser": "View in code browser",
     "close_diff": "Close diff",
     "lines_hidden": "{count} lines hidden",
-    "compare_versions": "Diff"
+    "compare_versions": "Diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "no_files_all": "No files",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel"
   }
 }