feat(i18n): add pluralization to diff page i18n strings

Author: tomvoet

app/components/diff/MobileSidebarDrawer.vue

@@ -65,7 +65,9 @@ watch(open, value => {
             <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
           </span>
           <span class="text-fg-subtle">•</span>
-          <span>{{ $t('compare.files_count', { count: props.allChanges.length }) }}</span>
+          <span>{{
+            $t('compare.files_count', { count: props.allChanges.length }, props.allChanges.length)
+          }}</span>
         </div>
         <button
           type="button"

app/components/diff/SidebarPanel.vue

@@ -94,7 +94,13 @@ 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">
-              {{ $t('compare.deps_count', { count: compare.dependencyChanges.length }) }}
+              {{
+                $t(
+                  'compare.deps_count',
+                  { count: compare.dependencyChanges.length },
+                  compare.dependencyChanges.length,
+                )
+              }}
             </span>
           </div>
         </div>

app/components/diff/SkipBlock.vue

@@ -17,7 +17,7 @@ defineProps<{
     </td>
     <td>
       <span class="px-0 sticky inset-is-2 italic opacity-50">
-        {{ content || $t('compare.lines_hidden', { count }) }}
+        {{ content || $t('compare.lines_hidden', { count }, count) }}
       </span>
     </td>
   </tr>

app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue

@@ -211,7 +211,9 @@ useSeoMeta({
               <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
             </span>
             <span class="text-fg-subtle">•</span>
-            <span>{{ $t('compare.files_count', { count: allChanges.length }) }}</span>
+            <span>{{
+              $t('compare.files_count', { count: allChanges.length }, allChanges.length)
+            }}</span>
           </div>
           <button
             type="button"

i18n/locales/en.json

@@ -1076,11 +1076,11 @@
       }
     },
     "file_changes": "File Changes",
-    "files_count": "{count} files",
-    "lines_hidden": "{count} lines hidden",
+    "files_count": "{count} file | {count} files",
+    "lines_hidden": "{count} line hidden | {count} lines hidden",
     "compare_versions": "diff",
     "summary": "Summary",
-    "deps_count": "{count} deps",
+    "deps_count": "{count} dep | {count} deps",
     "dependencies": "Dependencies",
     "dev_dependencies": "Dev Dependencies",
     "peer_dependencies": "Peer Dependencies",