From 8e26dbfa727f22b45dced968a4bfc9053191f126 Mon Sep 17 00:00:00 2001
From: Denys <ddeenis46@gmail.com>
Date: Sat, 7 Feb 2026 13:23:59 +0000
Subject: [PATCH 1/4] feat: format numbers with Intl.NumberFormat

---
 app/components/Code/DirectoryListing.vue      |  5 +-
 app/components/Compare/PackageSelector.vue    |  6 +-
 app/components/Package/Card.vue               |  4 +-
 app/components/Package/Dependencies.vue       | 14 ++--
 app/components/Package/DownloadAnalytics.vue  |  8 +--
 app/components/Settings/TranslationHelper.vue | 14 +++-
 app/composables/useNumberFormatter.ts         | 35 +++++++++
 app/composables/usePackageComparison.ts       | 13 +++-
 app/pages/package-code/[...path].vue          |  9 ++-
 app/pages/package/[[org]]/[name].vue          | 35 +++++----
 app/utils/formatters.ts                       | 34 ---------
 i18n/locales/en.json                          |  5 ++
 lunaria/files/en-GB.json                      |  5 ++
 lunaria/files/en-US.json                      |  5 ++
 test/unit/app/utils/formatters.spec.ts        | 71 +------------------
 15 files changed, 125 insertions(+), 138 deletions(-)
 create mode 100644 app/composables/useNumberFormatter.ts

diff --git a/app/components/Code/DirectoryListing.vue b/app/components/Code/DirectoryListing.vue
index 226a3a014..5450e8513 100644
--- a/app/components/Code/DirectoryListing.vue
+++ b/app/components/Code/DirectoryListing.vue
@@ -2,7 +2,6 @@
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { getFileIcon } from '~/utils/file-icons'
-import { formatBytes } from '~/utils/formatters'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -51,6 +50,8 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
     params: { path: pathSegments as [string, ...string[]] },
   }
 }
+
+const bytesFormatter = useBytesFormatter()
 </script>
 
 <template>
@@ -108,7 +109,7 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
           </td>
           <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
             <span v-if="node.type === 'file' && node.size">
-              {{ formatBytes(node.size) }}
+              {{ bytesFormatter.format(node.size) }}
             </span>
           </td>
         </tr>
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index d81fa964b..ba95d89a6 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -53,6 +53,8 @@ const filteredResults = computed(() => {
     .filter(r => !packages.value.includes(r.name))
 })
 
+const numberFormatter = useNumberFormatter()
+
 function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
@@ -209,8 +211,8 @@ function handleBlur() {
     <p class="text-xs text-fg-subtle">
       {{
         $t('compare.selector.packages_selected', {
-          count: packages.length,
-          max: maxPackages,
+          count: numberFormatter.format(packages.length),
+          max: numberFormatter.format(maxPackages),
         })
       }}
       <span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index ec3b885a2..ce97a2884 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -34,6 +34,8 @@ const pkgDescription = useMarkdown(() => ({
   plain: true,
   packageName: props.result.package.name,
 }))
+
+const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
@@ -180,7 +182,7 @@ const pkgDescription = useMarkdown(() => ({
         class="text-fg-subtle text-xs pointer-events-auto"
         :title="result.package.keywords.slice(5).join(', ')"
       >
-        +{{ result.package.keywords.length - 5 }}
+        +{{ numberFormatter.format(result.package.keywords.length - 5) }}
       </span>
     </div>
   </BaseCard>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index bbbeb9a5e..c3d1f8ff8 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -65,6 +65,8 @@ const sortedOptionalDependencies = computed(() => {
   if (!props.optionalDependencies) return []
   return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
+
+const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
@@ -73,7 +75,11 @@ const sortedOptionalDependencies = computed(() => {
     <CollapsibleSection
       v-if="sortedDependencies.length > 0"
       id="dependencies"
-      :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
+      :title="
+        $t('package.dependencies.title', {
+          count: numberFormatter.format(sortedDependencies.length),
+        })
+      "
     >
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
@@ -138,7 +144,7 @@ const sortedOptionalDependencies = computed(() => {
       >
         {{
           $t('package.dependencies.show_all', {
-            count: sortedDependencies.length,
+            count: numberFormatter.format(sortedDependencies.length),
           })
         }}
       </button>
@@ -150,7 +156,7 @@ const sortedOptionalDependencies = computed(() => {
       id="peer-dependencies"
       :title="
         $t('package.peer_dependencies.title', {
-          count: sortedPeerDependencies.length,
+          count: numberFormatter.format(sortedPeerDependencies.length),
         })
       "
     >
@@ -198,7 +204,7 @@ const sortedOptionalDependencies = computed(() => {
       id="optional-dependencies"
       :title="
         $t('package.optional_dependencies.title', {
-          count: sortedOptionalDependencies.length,
+          count: numberFormatter.format(sortedOptionalDependencies.length),
         })
       "
     >
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 4b3fd02f4..63f9b8576 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -750,8 +750,6 @@ const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: number
   return { dataset, dates }
 })
 
-const formatter = ({ value }: { value: number }) => formatCompactNumber(value, { decimals: 1 })
-
 const loadFile = (link: string, filename: string) => {
   const a = document.createElement('a')
   a.href = link
@@ -800,6 +798,8 @@ function getGranularityLabel(granularity: ChartTimeGranularity) {
   return granularityLabels.value[granularity]
 }
 
+const compactNumberFormatter = useCompactNumberFormatter()
+
 // VueUiXy chart component configuration
 const chartConfig = computed(() => {
   return {
@@ -867,7 +867,7 @@ const chartConfig = computed(() => {
             },
           },
           yAxis: {
-            formatter,
+            formatter: compactNumberFormatter.value.format,
             useNiceScale: true,
             gap: 24, // vertical gap between individual series in stacked mode
           },
@@ -899,7 +899,7 @@ const chartConfig = computed(() => {
             .map((d: any) => {
               const label = String(d?.name ?? '').trim()
               const raw = Number(d?.value ?? 0)
-              const v = formatter({ value: Number.isFinite(raw) ? raw : 0 })
+              const v = compactNumberFormatter.value.format(Number.isFinite(raw) ? raw : 0)
 
               if (!hasMultipleItems) {
                 // We don't need the name of the package in this case, since it is shown in the xAxis label
diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index b0f48c99b..8aab51f7b 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -29,6 +29,9 @@ const contributionGuideUrl =
 // Copy missing keys as JSON template to clipboard
 const { copy, copied } = useClipboard()
 
+const numberFormatter = useNumberFormatter()
+const percentageFormatter = useNumberFormatter({ style: 'percent' })
+
 function copyMissingKeysTemplate() {
   // Create a template showing what needs to be added
   const template = props.status.missingKeys.map(key => `  "${key}": ""`).join(',\n')
@@ -49,7 +52,10 @@ ${template}`
       <div class="flex items-center justify-between text-xs text-fg-muted">
         <span>{{ $t('settings.translation_progress') }}</span>
         <span class="tabular-nums"
-          >{{ status.completedKeys }}/{{ status.totalKeys }} ({{ status.percentComplete }}%)</span
+          >{{ numberFormatter.format(status.completedKeys) }}/{{
+            numberFormatter.format(status.totalKeys)
+          }}
+          ({{ percentageFormatter.format(status.percentComplete / 100) }})</span
         >
       </div>
       <div class="h-1.5 bg-bg rounded-full overflow-hidden">
@@ -64,7 +70,9 @@ ${template}`
     <div v-if="status.missingKeys.length > 0" class="space-y-2">
       <div class="flex items-center justify-between">
         <h4 class="text-xs text-fg-muted font-medium">
-          {{ $t('i18n.missing_keys', { count: status.missingKeys.length }) }}
+          {{
+            $t('i18n.missing_keys', { count: numberFormatter.format(status.missingKeys.length) })
+          }}
         </h4>
         <button
           type="button"
@@ -87,7 +95,7 @@ ${template}`
         class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-accent/70"
         @click="showAll = true"
       >
-        {{ $t('i18n.show_more_keys', { count: remainingCount }) }}
+        {{ $t('i18n.show_more_keys', { count: numberFormatter.format(remainingCount) }) }}
       </button>
     </div>
 
diff --git a/app/composables/useNumberFormatter.ts b/app/composables/useNumberFormatter.ts
new file mode 100644
index 000000000..0c9b46f6d
--- /dev/null
+++ b/app/composables/useNumberFormatter.ts
@@ -0,0 +1,35 @@
+export function useNumberFormatter(options?: Intl.NumberFormatOptions) {
+  const { locale } = useI18n()
+
+  return computed(() => new Intl.NumberFormat(locale.value, options))
+}
+
+export const useCompactNumberFormatter = () =>
+  useNumberFormatter({
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 1,
+  })
+
+export const useBytesFormatter = () => {
+  const { t } = useI18n()
+  const decimalNumberFormatter = useNumberFormatter({
+    maximumFractionDigits: 1,
+  })
+
+  return {
+    format: (bytes: number) => {
+      if (bytes < 1024)
+        return t('package.size.b', {
+          size: decimalNumberFormatter.value.format(bytes),
+        })
+      if (bytes < 1024 * 1024)
+        return t('package.size.kb', {
+          size: decimalNumberFormatter.value.format(bytes / 1024),
+        })
+      return t('package.size.mb', {
+        size: decimalNumberFormatter.value.format(bytes / (1024 * 1024)),
+      })
+    },
+  }
+}
diff --git a/app/composables/usePackageComparison.ts b/app/composables/usePackageComparison.ts
index 4d4217acb..9bd9b73ac 100644
--- a/app/composables/usePackageComparison.ts
+++ b/app/composables/usePackageComparison.ts
@@ -9,7 +9,6 @@ import type { PackageLikes } from '#shared/types/social'
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
-import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 
 /** Special identifier for the "What Would James Do?" comparison column */
@@ -71,6 +70,8 @@ export interface PackageComparisonData {
  */
 export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   const { t } = useI18n()
+  const compactNumberFormatter = useCompactNumberFormatter()
+  const bytesFormatter = useBytesFormatter()
   const packages = computed(() => toValue(packageNames))
 
   // Cache of fetched data by package name (source of truth)
@@ -260,7 +261,13 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
-      return computeFacetValue(facet, pkg, t)
+      return computeFacetValue(
+        facet,
+        pkg,
+        compactNumberFormatter.value.format,
+        bytesFormatter.format,
+        t,
+      )
     })
   }
 
@@ -342,6 +349,8 @@ function resolveNoDependencyDisplay(
 function computeFacetValue(
   facet: ComparisonFacet,
   data: PackageComparisonData,
+  formatCompactNumber: (num: number) => string,
+  formatBytes: (num: number) => string,
   t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
   const { isNoDependency } = data
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 8ce5b5050..064a241f1 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -4,7 +4,6 @@ import type {
   PackageFileTreeResponse,
   PackageFileContentResponse,
 } from '#shared/types'
-import { formatBytes } from '~/utils/formatters'
 
 definePageMeta({
   name: 'code',
@@ -269,6 +268,8 @@ const markdownViewModes = [
 
 const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
 
+const bytesFormatter = useBytesFormatter()
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -443,7 +444,7 @@ defineOgImageComponent('Default', {
                   $t('code.lines', { count: fileContent.lines })
                 }}</span>
                 <span v-if="currentNode?.size" class="text-fg-subtle">{{
-                  formatBytes(currentNode.size)
+                  bytesFormatter.format(currentNode.size)
                 }}</span>
               </div>
             </div>
@@ -489,7 +490,9 @@ defineOgImageComponent('Default', {
           <div class="i-carbon:document w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
-            {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
+            {{
+              $t('code.file_size_warning', { size: bytesFormatter.format(currentNode?.size ?? 0) })
+            }}
           </p>
           <LinkBase
             variant="button-secondary"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index f84fc258d..84cf1c50c 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -11,7 +11,6 @@ import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
-import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
@@ -231,12 +230,12 @@ const sizeTooltip = computed(() => {
     displayVersion.value &&
       displayVersion.value.dist.unpackedSize &&
       $t('package.stats.size_tooltip.unpacked', {
-        size: formatBytes(displayVersion.value.dist.unpackedSize),
+        size: bytesFormatter.format(displayVersion.value.dist.unpackedSize),
       }),
     installSize.value &&
       installSize.value.dependencyCount &&
       $t('package.stats.size_tooltip.total', {
-        size: formatBytes(installSize.value.totalSize),
+        size: bytesFormatter.format(installSize.value.totalSize),
         count: installSize.value.dependencyCount,
       }),
   ]
@@ -263,7 +262,7 @@ const hasVulnerabilities = computed(() => vulnCount.value > 0)
 // Subtract 1 to exclude the root package itself
 const totalDepsCount = computed(() => {
   if (vulnTree.value) {
-    return vulnTree.value.totalPackages - 1
+    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0
   }
   if (installSize.value) {
     return installSize.value.dependencyCount
@@ -462,6 +461,10 @@ const likeAction = async () => {
   }
 }
 
+const numberFormatter = useNumberFormatter()
+const compactNumberFormatter = useCompactNumberFormatter()
+const bytesFormatter = useBytesFormatter()
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -647,7 +650,7 @@ onKeyStroke(
                       : 'i-lucide-heart-plus'
                   "
                 >
-                  {{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}
+                  {{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}
                 </ButtonBase>
               </TooltipApp>
               <template #fallback>
@@ -726,12 +729,12 @@ onKeyStroke(
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
               <LinkBase :to="starsLink" classicon="i-carbon:star">
-                {{ formatCompactNumber(stars, { decimals: 1 }) }}
+                {{ compactNumberFormatter.format(stars) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
               <LinkBase :to="forksLink" classicon="i-carbon:fork">
-                {{ formatCompactNumber(forks, { decimals: 1 }) }}
+                {{ compactNumberFormatter.format(forks) }}
               </LinkBase>
             </li>
             <li v-if="homepageUrl">
@@ -832,7 +835,9 @@ onKeyStroke(
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               <span class="flex items-center gap-1">
                 <!-- Direct deps (muted) -->
-                <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
+                <span class="text-fg-muted">{{
+                  numberFormatter.format(getDependencyCount(displayVersion))
+                }}</span>
 
                 <!-- Separator and total transitive deps -->
                 <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
@@ -851,7 +856,9 @@ onKeyStroke(
                         aria-hidden="true"
                       />
                     </span>
-                    <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
+                    <span v-else-if="totalDepsCount !== null">{{
+                      numberFormatter.format(totalDepsCount)
+                    }}</span>
                     <span v-else class="text-fg-subtle">-</span>
                     <template #fallback>
                       <span class="text-fg-subtle">-</span>
@@ -899,7 +906,7 @@ onKeyStroke(
               <!-- Package size (greyed out) -->
               <span class="text-fg-muted" dir="ltr">
                 <span v-if="displayVersion?.dist?.unpackedSize">
-                  {{ formatBytes(displayVersion.dist.unpackedSize) }}
+                  {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
                 </span>
                 <span v-else>-</span>
               </span>
@@ -918,7 +925,7 @@ onKeyStroke(
                   />
                 </span>
                 <span v-else-if="installSize?.totalSize" dir="ltr">
-                  {{ formatBytes(installSize.totalSize) }}
+                  {{ bytesFormatter.format(installSize.totalSize) }}
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
               </template>
@@ -942,10 +949,12 @@ onKeyStroke(
                   />
                 </span>
                 <span v-else-if="vulnTreeStatus === 'success'">
-                  <span v-if="hasVulnerabilities" class="text-amber-500">{{ vulnCount }}</span>
+                  <span v-if="hasVulnerabilities" class="text-amber-500">
+                    {{ numberFormatter.format(vulnCount) }}
+                  </span>
                   <span v-else class="inline-flex items-center gap-1 text-fg-muted">
                     <span class="i-carbon:checkmark w-3 h-3" aria-hidden="true" />
-                    0
+                    {{ numberFormatter.format(0) }}
                   </span>
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
diff --git a/app/utils/formatters.ts b/app/utils/formatters.ts
index 8d93280f5..570a9a462 100644
--- a/app/utils/formatters.ts
+++ b/app/utils/formatters.ts
@@ -18,37 +18,3 @@ const htmlEntities: Record<string, string> = {
 export function decodeHtmlEntities(text: string): string {
   return text.replace(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, match => htmlEntities[match] || match)
 }
-
-export function formatCompactNumber(
-  value: number,
-  options?: { decimals?: number; space?: boolean },
-): string {
-  const decimals = options?.decimals ?? 0
-  const space = options?.space ?? false
-
-  const sign = value < 0 ? '-' : ''
-  const abs = Math.abs(value)
-
-  const fmt = (n: number) => {
-    if (decimals <= 0) return Math.round(n).toString()
-    const fixed = n.toFixed(decimals)
-    // Remove trailing zeros after decimal point
-    return fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed
-  }
-
-  const join = (suffix: string, n: number) => `${sign}${fmt(n)}${space ? ' ' : ''}${suffix}`
-
-  if (abs >= 1e12) return join('T', abs / 1e12)
-  if (abs >= 1e9) return join('B', abs / 1e9)
-  if (abs >= 1e6) return join('M', abs / 1e6)
-  if (abs >= 1e3) return join('k', abs / 1e3)
-
-  return `${sign}${Math.round(abs)}`
-}
-
-// Format file size
-export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 21f141067..55425340e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -413,6 +413,11 @@
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 81c3a43e4..5c786ef04 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -413,6 +413,11 @@
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 21f141067..55425340e 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -413,6 +413,11 @@
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {
diff --git a/test/unit/app/utils/formatters.spec.ts b/test/unit/app/utils/formatters.spec.ts
index 7ee02c6a1..02415cd46 100644
--- a/test/unit/app/utils/formatters.spec.ts
+++ b/test/unit/app/utils/formatters.spec.ts
@@ -1,10 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import {
-  decodeHtmlEntities,
-  formatBytes,
-  formatCompactNumber,
-  toIsoDateString,
-} from '../../../../app/utils/formatters'
+import { decodeHtmlEntities, toIsoDateString } from '../../../../app/utils/formatters'
 
 describe('toIsoDateString', () => {
   it('formats a date as YYYY-MM-DD', () => {
@@ -41,67 +36,3 @@ describe('decodeHtmlEntities', () => {
     expect(decodeHtmlEntities('&unknown;')).toBe('&unknown;')
   })
 })
-
-describe('formatCompactNumber', () => {
-  describe('without options', () => {
-    it.each([
-      [0, '0'],
-      [1, '1'],
-      [999, '999'],
-      [1000, '1k'],
-      [1500, '2k'],
-      [10000, '10k'],
-      [1000000, '1M'],
-      [2500000, '3M'],
-      [1000000000, '1B'],
-      [1000000000000, '1T'],
-    ] as const)('%d → %s', (input, expected) => {
-      expect(formatCompactNumber(input)).toBe(expected)
-    })
-  })
-
-  describe('with decimals', () => {
-    it.each([
-      [1500, 1, '1.5k'],
-      [1234567, 2, '1.23M'],
-      [1200000, 1, '1.2M'],
-      [1000, 2, '1k'],
-    ] as const)('%d with %d decimals', (input, decimals, expected) => {
-      expect(formatCompactNumber(input, { decimals })).toBe(expected)
-    })
-  })
-
-  describe('with space', () => {
-    it('adds space before suffix', () => {
-      expect(formatCompactNumber(1500, { space: true })).toBe('2 k')
-    })
-  })
-
-  describe('negative values', () => {
-    it.each([
-      [-1000, '-1k'],
-      [-2500000, '-3M'],
-      [-42, '-42'],
-    ] as const)('%d → %s', (input, expected) => {
-      expect(formatCompactNumber(input)).toBe(expected)
-    })
-  })
-
-  it('handles values below 1000', () => {
-    expect(formatCompactNumber(500)).toBe('500')
-  })
-})
-
-describe('formatBytes', () => {
-  it.each([
-    [0, '0 B'],
-    [512, '512 B'],
-    [1023, '1023 B'],
-    [1024, '1.0 kB'],
-    [1536, '1.5 kB'],
-    [1048576, '1.0 MB'],
-    [1572864, '1.5 MB'],
-  ] as const)('%d → %s', (input, expected) => {
-    expect(formatBytes(input)).toBe(expected)
-  })
-})

From c0768e699b1c9cd8c63cc4e30c52a173def89327 Mon Sep 17 00:00:00 2001
From: Denys <ddeenis46@gmail.com>
Date: Sat, 7 Feb 2026 13:51:17 +0000
Subject: [PATCH 2/4] fix: pass pluralization parameters

---
 app/components/Settings/TranslationHelper.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index 8aab51f7b..7a13db2b7 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -71,7 +71,11 @@ ${template}`
       <div class="flex items-center justify-between">
         <h4 class="text-xs text-fg-muted font-medium">
           {{
-            $t('i18n.missing_keys', { count: numberFormatter.format(status.missingKeys.length) })
+            $t(
+              'i18n.missing_keys',
+              { count: numberFormatter.format(status.missingKeys.length) },
+              status.missingKeys.length,
+            )
           }}
         </h4>
         <button
@@ -95,7 +99,13 @@ ${template}`
         class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-accent/70"
         @click="showAll = true"
       >
-        {{ $t('i18n.show_more_keys', { count: numberFormatter.format(remainingCount) }) }}
+        {{
+          $t(
+            'i18n.show_more_keys',
+            { count: numberFormatter.format(remainingCount) },
+            remainingCount,
+          )
+        }}
       </button>
     </div>
 

From 17558ec12794d7edab9fea954b982c1d076f1126 Mon Sep 17 00:00:00 2001
From: Denys <ddeenis46@gmail.com>
Date: Sat, 7 Feb 2026 14:03:33 +0000
Subject: [PATCH 3/4] fix: unformatted numbers

---
 app/components/Package/Dependencies.vue | 2 +-
 app/composables/usePackageComparison.ts | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index c3d1f8ff8..2e274a5a9 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -192,7 +192,7 @@ const numberFormatter = useNumberFormatter()
       >
         {{
           $t('package.peer_dependencies.show_all', {
-            count: sortedPeerDependencies.length,
+            count: numberFormatter.format(sortedPeerDependencies.length),
           })
         }}
       </button>
diff --git a/app/composables/usePackageComparison.ts b/app/composables/usePackageComparison.ts
index 9bd9b73ac..95ce63e5c 100644
--- a/app/composables/usePackageComparison.ts
+++ b/app/composables/usePackageComparison.ts
@@ -70,6 +70,7 @@ export interface PackageComparisonData {
  */
 export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   const { t } = useI18n()
+  const numberFormatter = useNumberFormatter()
   const compactNumberFormatter = useCompactNumberFormatter()
   const bytesFormatter = useBytesFormatter()
   const packages = computed(() => toValue(packageNames))
@@ -264,6 +265,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
       return computeFacetValue(
         facet,
         pkg,
+        numberFormatter.value.format,
         compactNumberFormatter.value.format,
         bytesFormatter.format,
         t,
@@ -349,6 +351,7 @@ function resolveNoDependencyDisplay(
 function computeFacetValue(
   facet: ComparisonFacet,
   data: PackageComparisonData,
+  formatNumber: (num: number) => string,
   formatCompactNumber: (num: number) => string,
   formatBytes: (num: number) => string,
   t: (key: string, params?: Record<string, unknown>) => string,
@@ -522,7 +525,7 @@ function computeFacetValue(
       if (depCount == null) return null
       return {
         raw: depCount,
-        display: String(depCount),
+        display: formatNumber(depCount),
         status: depCount > 10 ? 'warning' : 'neutral',
       }
     }
@@ -541,7 +544,7 @@ function computeFacetValue(
       const totalDepCount = data.installSize.dependencyCount
       return {
         raw: totalDepCount,
-        display: String(totalDepCount),
+        display: formatNumber(totalDepCount),
         status: totalDepCount > 50 ? 'warning' : 'neutral',
       }
     }

From bf9670bc334d62ea1bf183cd6ed7e67cf61c18a1 Mon Sep 17 00:00:00 2001
From: Denys <ddeenis46@gmail.com>
Date: Sat, 7 Feb 2026 18:53:00 +0000
Subject: [PATCH 4/4] fix: unformatted numbers

---
 app/components/Package/Dependencies.vue | 50 +++++++++++++++++--------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 2e274a5a9..9c1a3abc3 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -76,9 +76,13 @@ const numberFormatter = useNumberFormatter()
       v-if="sortedDependencies.length > 0"
       id="dependencies"
       :title="
-        $t('package.dependencies.title', {
-          count: numberFormatter.format(sortedDependencies.length),
-        })
+        $t(
+          'package.dependencies.title',
+          {
+            count: numberFormatter.format(sortedDependencies.length),
+          },
+          sortedDependencies.length,
+        )
       "
     >
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
@@ -143,9 +147,13 @@ const numberFormatter = useNumberFormatter()
         @click="depsExpanded = true"
       >
         {{
-          $t('package.dependencies.show_all', {
-            count: numberFormatter.format(sortedDependencies.length),
-          })
+          $t(
+            'package.dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedDependencies.length),
+            },
+            sortedDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>
@@ -191,9 +199,13 @@ const numberFormatter = useNumberFormatter()
         @click="peerDepsExpanded = true"
       >
         {{
-          $t('package.peer_dependencies.show_all', {
-            count: numberFormatter.format(sortedPeerDependencies.length),
-          })
+          $t(
+            'package.peer_dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedPeerDependencies.length),
+            },
+            sortedPeerDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>
@@ -203,9 +215,13 @@ const numberFormatter = useNumberFormatter()
       v-if="sortedOptionalDependencies.length > 0"
       id="optional-dependencies"
       :title="
-        $t('package.optional_dependencies.title', {
-          count: numberFormatter.format(sortedOptionalDependencies.length),
-        })
+        $t(
+          'package.optional_dependencies.title',
+          {
+            count: numberFormatter.format(sortedOptionalDependencies.length),
+          },
+          sortedOptionalDependencies.length,
+        )
       "
     >
       <ul
@@ -235,9 +251,13 @@ const numberFormatter = useNumberFormatter()
         @click="optionalDepsExpanded = true"
       >
         {{
-          $t('package.optional_dependencies.show_all', {
-            count: sortedOptionalDependencies.length,
-          })
+          $t(
+            'package.optional_dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedOptionalDependencies.length),
+            },
+            sortedOptionalDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>