From c27d6f53af5c7a0a7dfdbd2aad13802ac591844d Mon Sep 17 00:00:00 2001
From: Sigmabrogz <sigmabrogz@gmail.com>
Date: Wed, 18 Mar 2026 18:09:37 +0000
Subject: [PATCH 1/3] feat: use i18n for hardcoded strings in components and
 pages

Closes #2128
---
 app/components/Package/SkillsModal.vue        | 10 ++-----
 app/components/diff/ViewerPanel.vue           | 20 ++++++-------
 app/pages/blog/index.vue                      |  4 +--
 .../[packageName]/v/[versionRange].vue        | 10 +++----
 i18n/locales/en.json                          | 28 +++++++++++++++++--
 5 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 65d1fb57ac..84b29f47e0 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -67,9 +67,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-npm'"
-        >
-          skills-npm
-        </button>
+        >{{ $t('package.skills.method_npm') }}</button>
         <button
           role="tab"
           :aria-selected="selectedMethod === 'skills-cli'"
@@ -82,9 +80,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-cli'"
-        >
-          skills CLI
-        </button>
+        >{{ $t('package.skills.method_cli') }}</button>
       </div>
     </div>
 
@@ -100,7 +96,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         scope="global"
       >
         <template #tool>
-          <code class="font-mono text-fg">skills-npm</code>
+          <code class="font-mono text-fg">{{ $t('package.skills.method_npm') }}</code>
         </template>
       </i18n-t>
       <a
diff --git a/app/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
index 2c46b37467..64a8129a11 100644
--- a/app/components/diff/ViewerPanel.vue
+++ b/app/components/diff/ViewerPanel.vue
@@ -174,10 +174,10 @@ function getCodeUrl(version: string): string {
             >
               <div class="flex flex-col gap-2">
                 <!-- Merge modified lines toggle -->
-                <SettingsToggle label="Merge modified lines" v-model="mergeModifiedLines" />
+                <SettingsToggle :label="$t('compare.viewer.merge_modified_lines')" v-model="mergeModifiedLines" />
 
                 <!-- Word wrap toggle -->
-                <SettingsToggle label="Word wrap" v-model="wordWrap" />
+                <SettingsToggle :label="$t('compare.viewer.word_wrap')" v-model="wordWrap" />
 
                 <!-- Sliders -->
                 <div
@@ -186,14 +186,14 @@ function getCodeUrl(version: string): string {
                 >
                   <!-- Change ratio slider -->
                   <div class="sr-only">
-                    <label for="change-ratio">Change ratio</label>
+                    <label for="change-ratio">{{ $t('compare.viewer.change_ratio') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Change ratio</span>
+                      <span class="slider-label">{{ $t('compare.viewer.change_ratio') }}</span>
                       <span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
                     </div>
                     <div class="slider-track">
@@ -219,14 +219,14 @@ function getCodeUrl(version: string): string {
 
                   <!-- Diff distance slider -->
                   <div class="sr-only">
-                    <label for="diff-distance">Diff distance</label>
+                    <label for="diff-distance">{{ $t('compare.viewer.diff_distance') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Diff distance</span>
+                      <span class="slider-label">{{ $t('compare.viewer.diff_distance') }}</span>
                       <span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
                     </div>
                     <div class="slider-track">
@@ -252,14 +252,14 @@ function getCodeUrl(version: string): string {
 
                   <!-- Char edits slider -->
                   <div class="sr-only">
-                    <label for="char-edits">Char edits</label>
+                    <label for="char-edits">{{ $t('compare.viewer.char_edits') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Char edits</span>
+                      <span class="slider-label">{{ $t('compare.viewer.char_edits') }}</span>
                       <span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
                     </div>
                     <div class="slider-track">
@@ -317,14 +317,14 @@ function getCodeUrl(version: string): string {
       <!-- Loading state -->
       <div v-else-if="status === 'pending'" class="py-12 text-center">
         <div class="i-svg-spinners-ring-resize w-6 h-6 mx-auto text-fg-muted" />
-        <p class="mt-2 text-sm text-fg-muted">Loading diff...</p>
+        <p class="mt-2 text-sm text-fg-muted">{{ $t('compare.viewer.loading_diff') }}</p>
       </div>
 
       <!-- Error state -->
       <div v-else-if="status === 'error'" class="py-8 text-center">
         <span class="i-lucide:triangle-alert w-8 h-8 mx-auto text-fg-subtle mb-2 block" />
         <p class="text-fg-muted text-sm mb-2">
-          {{ loadError?.message || 'Failed to load diff' }}
+          {{ loadError?.message || $t('compare.viewer.failed_to_load_diff') }}
         </p>
         <div class="flex items-center justify-center gap-2">
           <NuxtLink
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 07e40d2d9d..f20b052884 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -37,7 +37,7 @@ useSeoMeta({
             :authors="post.authors"
             :title="post.title"
             :path="post.slug"
-            :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+            :excerpt="post.excerpt || post.description || $t('blog.no_excerpt')"
             :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
             :published="post.date"
             :index="idx"
@@ -47,7 +47,7 @@ useSeoMeta({
         </template>
       </article>
 
-      <p v-else class="text-center py-20 text-fg-subtle">No posts found.</p>
+      <p v-else class="text-center py-20 text-fg-subtle">{{ $t('blog.no_posts') }}</p>
     </article>
   </main>
 </template>
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 336843087e..070d2b1466 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -135,21 +135,21 @@ useSeoMeta({
     <!-- Error: invalid route -->
     <div v-if="!versionRange" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">
-        Invalid comparison URL. Use format: /diff/package/v/from...to
+        {{ $t('compare.invalid_url') }}
       </p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">Go to package</NuxtLink>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.go_to_package') }}</NuxtLink>
     </div>
 
     <!-- Loading state -->
     <div v-else-if="compareStatus === 'pending'" class="container py-20 text-center">
       <div class="i-svg-spinners-ring-resize w-8 h-8 mx-auto text-fg-muted" />
-      <p class="mt-4 text-fg-muted">Comparing versions...</p>
+      <p class="mt-4 text-fg-muted">{{ $t('compare.comparing_versions') }}</p>
     </div>
 
     <!-- Error state -->
     <div v-else-if="compareStatus === 'error'" class="container py-20 text-center" role="alert">
-      <p class="text-fg-muted mb-4">Failed to compare versions</p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">Back to package</NuxtLink>
+      <p class="text-fg-muted mb-4">{{ $t('compare.failed_to_compare') }}</p>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.back_to_package') }}</NuxtLink>
     </div>
 
     <!-- Comparison content -->
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 842d04d54a..5c896904f7 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -110,7 +110,9 @@
       "like_count": "{count} like | {count} likes",
       "repost_count": "{count} repost | {count} reposts",
       "more_replies": "{count} more reply... | {count} more replies..."
-    }
+    },
+    "no_excerpt": "No Excerpt Available",
+    "no_posts": "No posts found."
   },
   "settings": {
     "title": "settings",
@@ -286,7 +288,9 @@
         "refs": "{count} ref | {count} refs",
         "assets": "{count} asset | {count} assets"
       },
-      "view_source": "View source"
+      "view_source": "View source",
+      "method_npm": "skills-npm",
+      "method_cli": "skills CLI"
     },
     "links": {
       "main": "main",
@@ -1205,7 +1209,25 @@
     "files_button": "Files",
     "select_file_prompt": "Select a file from the sidebar to view its diff",
     "close_files_panel": "Close files panel",
-    "filter_files_label": "Filter files by change type"
+    "filter_files_label": "Filter files by change type",
+    "invalid_url": "Invalid comparison URL. Use format: /diff/package/v/from...to",
+    "go_to_package": "Go to package",
+    "comparing_versions": "Comparing versions...",
+    "failed_to_compare": "Failed to compare versions",
+    "back_to_package": "Back to package",
+    "viewer": {
+      "options": "Options",
+      "merge_modified_lines": "Merge modified lines",
+      "word_wrap": "Word wrap",
+      "change_ratio": "Change ratio",
+      "diff_distance": "Diff distance",
+      "char_edits": "Char edits",
+      "view_file": "View file",
+      "loading_diff": "Loading diff...",
+      "failed_to_load_diff": "Failed to load diff",
+      "view_in_code_browser": "View in code browser",
+      "no_content_changes": "No content changes detected"
+    }
   },
   "pds": {
     "title": "npmx.social",

From ae0348fab3ee8a60faace4f128985bc52b2edec7 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 18:11:00 +0000
Subject: [PATCH 2/3] [autofix.ci] apply automated fixes

---
 app/components/Package/SkillsModal.vue                    | 8 ++++++--
 app/components/diff/ViewerPanel.vue                       | 5 ++++-
 app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue | 8 ++++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 84b29f47e0..f633f0d89e 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -67,7 +67,9 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-npm'"
-        >{{ $t('package.skills.method_npm') }}</button>
+        >
+          {{ $t('package.skills.method_npm') }}
+        </button>
         <button
           role="tab"
           :aria-selected="selectedMethod === 'skills-cli'"
@@ -80,7 +82,9 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-cli'"
-        >{{ $t('package.skills.method_cli') }}</button>
+        >
+          {{ $t('package.skills.method_cli') }}
+        </button>
       </div>
     </div>
 
diff --git a/app/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
index 64a8129a11..7c4c5f5c49 100644
--- a/app/components/diff/ViewerPanel.vue
+++ b/app/components/diff/ViewerPanel.vue
@@ -174,7 +174,10 @@ function getCodeUrl(version: string): string {
             >
               <div class="flex flex-col gap-2">
                 <!-- Merge modified lines toggle -->
-                <SettingsToggle :label="$t('compare.viewer.merge_modified_lines')" v-model="mergeModifiedLines" />
+                <SettingsToggle
+                  :label="$t('compare.viewer.merge_modified_lines')"
+                  v-model="mergeModifiedLines"
+                />
 
                 <!-- Word wrap toggle -->
                 <SettingsToggle :label="$t('compare.viewer.word_wrap')" v-model="wordWrap" />
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 070d2b1466..613ce968f2 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -137,7 +137,9 @@ useSeoMeta({
       <p class="text-fg-muted mb-4">
         {{ $t('compare.invalid_url') }}
       </p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.go_to_package') }}</NuxtLink>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{
+        $t('compare.go_to_package')
+      }}</NuxtLink>
     </div>
 
     <!-- Loading state -->
@@ -149,7 +151,9 @@ useSeoMeta({
     <!-- Error state -->
     <div v-else-if="compareStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('compare.failed_to_compare') }}</p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.back_to_package') }}</NuxtLink>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{
+        $t('compare.back_to_package')
+      }}</NuxtLink>
     </div>
 
     <!-- Comparison content -->

From f9ac6fc08b0c67924e6cf75725a9a17852489417 Mon Sep 17 00:00:00 2001
From: Sigmabrogz <sigmabrogz@gmail.com>
Date: Thu, 19 Mar 2026 08:07:07 +0000
Subject: [PATCH 3/3] fix(i18n): apply remaining string translations in
 ViewerPanel as per code review

---
 app/components/diff/ViewerPanel.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
index 7c4c5f5c49..a2bfa74b07 100644
--- a/app/components/diff/ViewerPanel.vue
+++ b/app/components/diff/ViewerPanel.vue
@@ -145,7 +145,7 @@ function getCodeUrl(version: string): string {
             @click="showOptions = !showOptions"
           >
             <span class="i-lucide:settings w-3.5 h-3.5" />
-            Options
+            {{ $t('compare.viewer.options') }}
             <span
               class="i-lucide:chevron-down w-3 h-3 transition-transform"
               :class="{ 'rotate-180': showOptions }"
@@ -298,7 +298,7 @@ function getCodeUrl(version: string): string {
           class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors"
           target="_blank"
         >
-          View file
+          {{ $t('compare.viewer.view_file') }}
         </NuxtLink>
       </div>
     </div>
@@ -335,7 +335,7 @@ function getCodeUrl(version: string): string {
             :to="getCodeUrl(toVersion)"
             class="text-xs text-fg-muted hover:text-fg underline"
           >
-            View in code browser
+            {{ $t('compare.viewer.view_in_code_browser') }}
           </NuxtLink>
         </div>
       </div>
@@ -345,7 +345,7 @@ function getCodeUrl(version: string): string {
         v-else-if="diff && diff.hunks.length === 0"
         class="py-8 text-center text-fg-muted text-sm"
       >
-        No content changes detected
+        {{ $t('compare.viewer.no_content_changes') }}
       </div>
 
       <!-- Diff content -->