From e283fdb1e7ae4492364950957ac861067189f64a Mon Sep 17 00:00:00 2001
From: logicalmechanism <logicalmechanism@protonmail.com>
Date: Mon, 4 May 2026 18:42:03 -0700
Subject: [PATCH 1/4] feat(i18n): backfill EN keys for polish-pass defaultValue
 strings

Promote 5 strings from defaultValue fallbacks to proper keys:
- dashboard:shell.walletCreatedTitle / walletCreatedBody
- card.openDescription / card.viewFull
- toast.queueOverflow (preserves {{count}} interpolation)

Other 17 locales pick these up via the translation backfill flow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gui/fe/src/components/EncryptionCard.tsx | 4 ++--
 app/gui/fe/src/components/Toast.tsx          | 2 +-
 app/gui/fe/src/locales/en/common.json        | 5 ++++-
 app/gui/fe/src/locales/en/dashboard.json     | 2 ++
 app/gui/fe/src/pages/Dashboard.tsx           | 4 ++--
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/gui/fe/src/components/EncryptionCard.tsx b/app/gui/fe/src/components/EncryptionCard.tsx
index 67c1c1d4..281c0653 100644
--- a/app/gui/fe/src/components/EncryptionCard.tsx
+++ b/app/gui/fe/src/components/EncryptionCard.tsx
@@ -274,10 +274,10 @@ function EncryptionCard({
               <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); setDescriptionModalOpen(true); }}
-                aria-label={t('card.openDescription', { defaultValue: 'View full description' })}
+                aria-label={t('card.openDescription')}
                 className="mt-1 inline-flex items-center gap-1 text-[11px] text-[var(--link)] hover:text-[var(--link-hover)] focus-visible:text-[var(--link-hover)] rounded transition-colors duration-[var(--transition-fast)]"
               >
-                {t('card.viewFull', { defaultValue: 'View full' })}
+                {t('card.viewFull')}
                 <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                 </svg>
diff --git a/app/gui/fe/src/components/Toast.tsx b/app/gui/fe/src/components/Toast.tsx
index 1e7971c7..5a193726 100644
--- a/app/gui/fe/src/components/Toast.tsx
+++ b/app/gui/fe/src/components/Toast.tsx
@@ -266,7 +266,7 @@ export function ToastContainer({ toasts, onClose, queuedCount = 0, onDismissAll
       {queuedCount > 0 && (
         <div className="self-end inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium text-[var(--text-secondary)] bg-[var(--bg-elevated)] border border-[var(--border-subtle)] shadow-[var(--shadow-sm)]" aria-hidden="true">
           <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] animate-pulse" />
-          {t('toast.queueOverflow', { count: queuedCount, defaultValue: '+{{count}} more' })}
+          {t('toast.queueOverflow', { count: queuedCount })}
         </div>
       )}
       {toasts.length >= 2 && onDismissAll && (
diff --git a/app/gui/fe/src/locales/en/common.json b/app/gui/fe/src/locales/en/common.json
index b559a205..02f25136 100644
--- a/app/gui/fe/src/locales/en/common.json
+++ b/app/gui/fe/src/locales/en/common.json
@@ -38,6 +38,8 @@
     "removeListing": "Remove Listing",
     "remove": "Remove",
     "viewBids": "View Bids",
+    "openDescription": "View full description",
+    "viewFull": "View full",
     "insufficientBalance": "Insufficient balance",
     "insufficientBalanceMinimum": "Insufficient balance (minimum 2 ADA)",
     "insufficientBalanceButton": "Insufficient Balance",
@@ -385,7 +387,8 @@
     "copyError": "Copy error to clipboard",
     "dismiss": "Dismiss notification",
     "dismissAll": "Dismiss all",
-    "dismissAllQueued": "Dismiss all ({{count}} queued)"
+    "dismissAllQueued": "Dismiss all ({{count}} queued)",
+    "queueOverflow": "+{{count}} more"
   },
   "categories": {
     "text": "Text",
diff --git a/app/gui/fe/src/locales/en/dashboard.json b/app/gui/fe/src/locales/en/dashboard.json
index a51216e3..15762ecc 100644
--- a/app/gui/fe/src/locales/en/dashboard.json
+++ b/app/gui/fe/src/locales/en/dashboard.json
@@ -35,6 +35,8 @@
     "disconnect": "Disconnect",
     "unfinishedListingTitle": "Unfinished Listing Found",
     "unfinishedListingBody": "A file listing for \"{{filename}}\" was uploaded but the transaction was not completed. The file is still on Iagon — you can resume without re-uploading.",
+    "walletCreatedTitle": "Welcome to Veiled",
+    "walletCreatedBody": "Your wallet is ready. Fund it to start listing or bidding.",
     "discard": "Discard",
     "resumeListing": "Resume Listing",
     "dismissTitle": "Dismiss",
diff --git a/app/gui/fe/src/pages/Dashboard.tsx b/app/gui/fe/src/pages/Dashboard.tsx
index c3be97c2..9a6d2bdc 100644
--- a/app/gui/fe/src/pages/Dashboard.tsx
+++ b/app/gui/fe/src/pages/Dashboard.tsx
@@ -372,8 +372,8 @@ export default function Dashboard() {
     const navState = location.state as { startTutorial?: string; justCreated?: boolean } | null
     if (navState?.justCreated) {
       toast.celebrate(
-        t('dashboard:shell.walletCreatedTitle', { defaultValue: 'Welcome to Veiled' }),
-        t('dashboard:shell.walletCreatedBody', { defaultValue: 'Your wallet is ready. Fund it to start listing or bidding.' }),
+        t('dashboard:shell.walletCreatedTitle'),
+        t('dashboard:shell.walletCreatedBody'),
       )
       navigate(location.pathname, { replace: true, state: null })
       return

From c8a588bb09a88e6fcd05d11c472868e998deca7e Mon Sep 17 00:00:00 2001
From: logicalmechanism <logicalmechanism@protonmail.com>
Date: Mon, 4 May 2026 19:01:26 -0700
Subject: [PATCH 2/4] feat(i18n): translate Dashboard tab badge aria-labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The polish pass left three template-literal aria-labels with hardcoded
English suffixes ("new bids", "accepted bids ready to decrypt",
"pending transactions"). Visually invisible — only screen-reader users
saw the English. Replace with i18next plural keys (_one / _other) so
the aria-label translates and reads grammatically at count == 1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gui/fe/src/locales/en/dashboard.json | 6 ++++++
 app/gui/fe/src/pages/Dashboard.tsx       | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/gui/fe/src/locales/en/dashboard.json b/app/gui/fe/src/locales/en/dashboard.json
index 15762ecc..8d9637f2 100644
--- a/app/gui/fe/src/locales/en/dashboard.json
+++ b/app/gui/fe/src/locales/en/dashboard.json
@@ -57,6 +57,12 @@
     "refreshTitle": "Refresh data (Ctrl+R)",
     "refreshAria": "Refresh data",
     "tabsAria": "Dashboard tabs",
+    "tabBadgeNewBids_one": "{{count}} new bid",
+    "tabBadgeNewBids_other": "{{count}} new bids",
+    "tabBadgeAcceptedBids_one": "{{count}} accepted bid ready to decrypt",
+    "tabBadgeAcceptedBids_other": "{{count}} accepted bids ready to decrypt",
+    "tabBadgePendingTx_one": "{{count}} pending transaction",
+    "tabBadgePendingTx_other": "{{count}} pending transactions",
     "relistFromLibraryTitle": "Relist from Library",
     "confirmFallback": "Confirm"
   },
diff --git a/app/gui/fe/src/pages/Dashboard.tsx b/app/gui/fe/src/pages/Dashboard.tsx
index 9a6d2bdc..246e0347 100644
--- a/app/gui/fe/src/pages/Dashboard.tsx
+++ b/app/gui/fe/src/pages/Dashboard.tsx
@@ -996,17 +996,17 @@ export default function Dashboard() {
                  *   success (green) — "ready / done": accepted bids ready to decrypt
                  *   accent / neutral — count-only, no implied urgency */}
                 {tab.id === 'my-sales' && effects.bidNotifications.unseenBidCount > 0 && (
-                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--warning)] text-white rounded-full animate-pulse" aria-label={`${effects.bidNotifications.unseenBidCount} new bids`}>
+                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--warning)] text-white rounded-full animate-pulse" aria-label={t('dashboard:shell.tabBadgeNewBids', { count: effects.bidNotifications.unseenBidCount })}>
                     {effects.bidNotifications.unseenBidCount}
                   </span>
                 )}
                 {tab.id === 'my-purchases' && effects.acceptedBidCount > 0 && (
-                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--success)] text-white rounded-full" aria-label={`${effects.acceptedBidCount} accepted bids ready to decrypt`}>
+                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--success)] text-white rounded-full" aria-label={t('dashboard:shell.tabBadgeAcceptedBids', { count: effects.acceptedBidCount })}>
                     {effects.acceptedBidCount}
                   </span>
                 )}
                 {tab.id === 'history' && effects.pendingTxCount > 0 && (
-                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--warning)] text-white rounded-full" aria-label={`${effects.pendingTxCount} pending transactions`}>
+                  <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-medium bg-[var(--warning)] text-white rounded-full" aria-label={t('dashboard:shell.tabBadgePendingTx', { count: effects.pendingTxCount })}>
                     {effects.pendingTxCount}
                   </span>
                 )}

From 3177f0109da44bf3eceef6fde1acef46d6c17911 Mon Sep 17 00:00:00 2001
From: logicalmechanism <logicalmechanism@protonmail.com>
Date: Mon, 4 May 2026 19:17:24 -0700
Subject: [PATCH 3/4] feat(i18n): lint guard + backfill 5 hardcoded a11y
 attribute strings

Add no-restricted-syntax ESLint rule that flags string literals and
template literals in user-facing JSX attributes (aria-label,
aria-description, aria-roledescription, alt, title). Test files are
exempted; placeholder is intentionally not covered (numeric-only in
this app, locale-agnostic).

Backfill the 5 call sites the new rule surfaced:
- LayoutPopover card-size + column-count buttons (4 sites) now look up
  layoutPopover.cardSize{Small,Medium,Large} and the new
  layoutPopover.columnsCount plural key.
- StorageSection disk-usage segment tooltip uses storage.segmentTooltip
  with {{label}}, {{size}}, {{percent}} interpolation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gui/fe/eslint.config.js                   | 21 +++++++++++++++++++
 app/gui/fe/src/components/LayoutPopover.tsx   | 14 +++++++++----
 app/gui/fe/src/locales/en/common.json         |  7 ++++++-
 app/gui/fe/src/locales/en/settings.json       |  1 +
 .../fe/src/pages/settings/StorageSection.tsx  |  2 +-
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/app/gui/fe/eslint.config.js b/app/gui/fe/eslint.config.js
index 427b2477..06b6dc64 100644
--- a/app/gui/fe/eslint.config.js
+++ b/app/gui/fe/eslint.config.js
@@ -21,6 +21,27 @@ export default defineConfig([
     },
     rules: {
       '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      // Catches user-facing strings that bypass i18n in screen-reader-only or
+      // tooltip attributes — these are invisible during visual review.
+      // `placeholder` is intentionally not listed: form placeholders in this
+      // app are numeric ("0", "0.00") or symbolic ("…") and locale-agnostic.
+      'no-restricted-syntax': ['error',
+        {
+          selector: "JSXAttribute[name.name=/^(aria-label|aria-description|aria-roledescription|alt|title)$/] > Literal[value!=''][value!=' ']",
+          message: "Hardcoded user-facing attribute string. Use t() — e.g. aria-label={t('namespace:key')}.",
+        },
+        {
+          selector: "JSXAttribute[name.name=/^(aria-label|aria-description|aria-roledescription|alt|title)$/] > JSXExpressionContainer > TemplateLiteral",
+          message: "User-facing attribute should use t() with interpolation, not a template literal that may contain hardcoded English. e.g. aria-label={t('foo', { count })}.",
+        },
+      ],
+    },
+  },
+  {
+    // Test files use synthetic fixtures — exempt from the i18n attr rule.
+    files: ['**/__tests__/**/*.{ts,tsx}', '**/*.test.{ts,tsx}'],
+    rules: {
+      'no-restricted-syntax': 'off',
     },
   },
 ])
diff --git a/app/gui/fe/src/components/LayoutPopover.tsx b/app/gui/fe/src/components/LayoutPopover.tsx
index b87e02f7..142dc81f 100644
--- a/app/gui/fe/src/components/LayoutPopover.tsx
+++ b/app/gui/fe/src/components/LayoutPopover.tsx
@@ -16,6 +16,12 @@ interface LayoutPopoverProps {
 const SIZE_OPTIONS: CardSize[] = ['small', 'medium', 'large'];
 const COLUMN_OPTIONS: ColumnCount[] = [2, 3, 4];
 
+const SIZE_LABEL_KEY: Record<CardSize, string> = {
+  small: 'layoutPopover.cardSizeSmall',
+  medium: 'layoutPopover.cardSizeMedium',
+  large: 'layoutPopover.cardSizeLarge',
+};
+
 export default function LayoutPopover({
   viewMode,
   cardSize,
@@ -139,8 +145,8 @@ export default function LayoutPopover({
                       ? 'bg-[var(--accent-muted)] text-[var(--accent)]'
                       : 'bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                   }`}
-                  title={`${size.charAt(0).toUpperCase() + size.slice(1)} cards`}
-                  aria-label={`${size.charAt(0).toUpperCase() + size.slice(1)} cards`}
+                  title={t(SIZE_LABEL_KEY[size])}
+                  aria-label={t(SIZE_LABEL_KEY[size])}
                   aria-pressed={cardSize === size}
                 >
                   {size === 'small' && (
@@ -182,8 +188,8 @@ export default function LayoutPopover({
                       ? 'bg-[var(--accent-muted)] text-[var(--accent)]'
                       : 'bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                   }`}
-                  title={`${cols} columns`}
-                  aria-label={`${cols} columns`}
+                  title={t('layoutPopover.columnsCount', { count: cols })}
+                  aria-label={t('layoutPopover.columnsCount', { count: cols })}
                   aria-pressed={columnCount === cols}
                 >
                   {cols === 2 && (
diff --git a/app/gui/fe/src/locales/en/common.json b/app/gui/fe/src/locales/en/common.json
index 02f25136..50d1c543 100644
--- a/app/gui/fe/src/locales/en/common.json
+++ b/app/gui/fe/src/locales/en/common.json
@@ -317,7 +317,12 @@
     "gridView": "Grid view",
     "listView": "List view",
     "cardSize": "Card size",
-    "columns": "Columns"
+    "columns": "Columns",
+    "cardSizeSmall": "Small cards",
+    "cardSizeMedium": "Medium cards",
+    "cardSizeLarge": "Large cards",
+    "columnsCount_one": "{{count}} column",
+    "columnsCount_other": "{{count}} columns"
   },
   "ui": {
     "loading": "Loading",
diff --git a/app/gui/fe/src/locales/en/settings.json b/app/gui/fe/src/locales/en/settings.json
index 447b837a..6861df9d 100644
--- a/app/gui/fe/src/locales/en/settings.json
+++ b/app/gui/fe/src/locales/en/settings.json
@@ -245,6 +245,7 @@
     "snarkSetup": "SNARK Setup",
     "walletLabel": "Wallet",
     "other": "Other",
+    "segmentTooltip": "{{label}}: {{size}} ({{percent}}%)",
     "refresh": "Refresh",
     "loading": "Loading...",
     "imageCacheTitle": "Image Cache",
diff --git a/app/gui/fe/src/pages/settings/StorageSection.tsx b/app/gui/fe/src/pages/settings/StorageSection.tsx
index 54da3fd9..7d04431e 100644
--- a/app/gui/fe/src/pages/settings/StorageSection.tsx
+++ b/app/gui/fe/src/pages/settings/StorageSection.tsx
@@ -116,7 +116,7 @@ export default function StorageSection({
                             key={seg.label}
                             className="h-full transition-all duration-300"
                             style={{ width: `${pct}%`, backgroundColor: seg.color }}
-                            title={`${seg.label}: ${formatBytes(seg.bytes)} (${pct.toFixed(1)}%)`}
+                            title={t('storage.segmentTooltip', { label: seg.label, size: formatBytes(seg.bytes), percent: pct.toFixed(1) })}
                           />
                         )
                       })}

From fe4298542f85be00a22ddaa8130874a3551eeb38 Mon Sep 17 00:00:00 2001
From: logicalmechanism <logicalmechanism@protonmail.com>
Date: Mon, 4 May 2026 19:17:35 -0700
Subject: [PATCH 4/4] feat(i18n): locale-aware formatAda, formatDate,
 formatRelativeTime
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

formatAda + formatDate read i18next.language from the singleton and
pass it to toLocaleString / toLocaleDateString instead of `undefined`,
so number grouping and date format follow the user's selected app
language rather than the OS default. Falls back to undefined when
i18next isn't initialized — keeps unit tests stable.

formatRelativeTime swaps its hardcoded English buckets ("just now",
"5m ago", "2y ago") for Intl.RelativeTimeFormat with style:'narrow'.
English narrow CLDR matches the prior strings exactly except
"just now" → "now"; non-English locales now get their proper CLDR
forms (e.g. "5分钟前" instead of "5m ago"). Uses numeric:'auto' under
60s for the "now" form and numeric:'always' above so "1mo ago" / "1y
ago" don't collapse to "last mo." / "last yr."

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gui/fe/src/utils/formatAda.ts  | 13 +++++++++++--
 app/gui/fe/src/utils/formatDate.ts | 10 ++++++++--
 app/gui/fe/src/utils/time.test.ts  | 12 ++++++------
 app/gui/fe/src/utils/time.ts       | 27 +++++++++++++++++++--------
 4 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/app/gui/fe/src/utils/formatAda.ts b/app/gui/fe/src/utils/formatAda.ts
index 9d65ed0e..32e575a7 100644
--- a/app/gui/fe/src/utils/formatAda.ts
+++ b/app/gui/fe/src/utils/formatAda.ts
@@ -1,10 +1,19 @@
+import i18n from 'i18next';
+
+// Reads from the i18next singleton so number grouping/decimal style follows
+// the user's selected app language. Falls back to `undefined` (the runtime
+// default) when i18next hasn't been initialized — keeps unit tests stable.
+function activeLocale(): string | undefined {
+  return i18n.language || undefined;
+}
+
 /**
  * Format a lovelace amount (number) as ADA with 2–6 decimal places.
  * Always shows at least 2 decimals for visual consistency (e.g., 2_000_000 → "2.00").
  */
 export function formatAda(lovelace: number): string {
   const ada = lovelace / 1_000_000;
-  return ada.toLocaleString(undefined, {
+  return ada.toLocaleString(activeLocale(), {
     minimumFractionDigits: 2,
     maximumFractionDigits: 6,
   });
@@ -17,5 +26,5 @@ export function formatAda(lovelace: number): string {
 export function formatAdaDisplay(lovelaceAmount: string | undefined): string {
   if (!lovelaceAmount) return '...';
   const ada = parseInt(lovelaceAmount) / 1_000_000;
-  return ada.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  return ada.toLocaleString(activeLocale(), { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
diff --git a/app/gui/fe/src/utils/formatDate.ts b/app/gui/fe/src/utils/formatDate.ts
index eb0f170d..44ed9baa 100644
--- a/app/gui/fe/src/utils/formatDate.ts
+++ b/app/gui/fe/src/utils/formatDate.ts
@@ -1,9 +1,15 @@
+import i18n from 'i18next';
+
+function activeLocale(): string | undefined {
+  return i18n.language || undefined;
+}
+
 /**
  * Format an ISO date string as a short date: "Jan 15, 2026".
  */
 export function formatDate(dateString: string): string {
   const date = new Date(dateString);
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(activeLocale(), {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
@@ -17,7 +23,7 @@ export function formatDate(dateString: string): string {
 export function formatDateTime(dateString?: string): string {
   if (!dateString) return '';
   const date = new Date(dateString);
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(activeLocale(), {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
diff --git a/app/gui/fe/src/utils/time.test.ts b/app/gui/fe/src/utils/time.test.ts
index 313b0c07..ff1d9ffc 100644
--- a/app/gui/fe/src/utils/time.test.ts
+++ b/app/gui/fe/src/utils/time.test.ts
@@ -6,16 +6,16 @@ describe('formatRelativeTime', () => {
     vi.useRealTimers();
   });
 
-  it('returns "just now" for dates less than 60 seconds ago', () => {
+  it('returns "now" for dates less than 60 seconds ago', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2025-06-01T12:00:30Z'));
-    expect(formatRelativeTime('2025-06-01T12:00:00Z')).toBe('just now');
+    expect(formatRelativeTime('2025-06-01T12:00:00Z')).toBe('now');
   });
 
-  it('returns "just now" for the current time', () => {
+  it('returns "now" for the current time', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2025-06-01T12:00:00Z'));
-    expect(formatRelativeTime('2025-06-01T12:00:00Z')).toBe('just now');
+    expect(formatRelativeTime('2025-06-01T12:00:00Z')).toBe('now');
   });
 
   it('returns minutes ago for dates less than 1 hour ago', () => {
@@ -54,10 +54,10 @@ describe('formatRelativeTime', () => {
     expect(formatRelativeTime('2024-06-01T12:00:00Z')).toBe('2y ago');
   });
 
-  it('returns "just now" for future dates', () => {
+  it('returns "now" for future dates', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2025-06-01T12:00:00Z'));
-    expect(formatRelativeTime('2025-06-01T13:00:00Z')).toBe('just now');
+    expect(formatRelativeTime('2025-06-01T13:00:00Z')).toBe('now');
   });
 
   it('handles boundary at 30 days (switches to months)', () => {
diff --git a/app/gui/fe/src/utils/time.ts b/app/gui/fe/src/utils/time.ts
index 00ef96cc..f2fe2917 100644
--- a/app/gui/fe/src/utils/time.ts
+++ b/app/gui/fe/src/utils/time.ts
@@ -1,14 +1,25 @@
+import i18n from 'i18next';
+
 /**
- * Format a date as a relative time string ("just now", "5m ago", "2d ago", etc.).
- * Handles past dates only; future dates return "just now".
+ * Format a date as a relative time string. Output is locale-aware via
+ * Intl.RelativeTimeFormat — English narrow renders as "now", "5m ago",
+ * "2d ago" matching the prior hardcoded form; other locales get their
+ * proper CLDR forms. Past dates only; future dates collapse to "now".
  */
 export function formatRelativeTime(dateString: string): string {
   const seconds = Math.floor((Date.now() - new Date(dateString).getTime()) / 1000);
+  const locale = i18n.language || 'en';
 
-  if (seconds < 60) return 'just now';
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  if (seconds < 2592000) return `${Math.floor(seconds / 86400)}d ago`;
-  if (seconds < 31536000) return `${Math.floor(seconds / 2592000)}mo ago`;
-  return `${Math.floor(seconds / 31536000)}y ago`;
+  // numeric:'auto' yields "now" for the under-a-minute bucket. Above that,
+  // numeric:'always' keeps "1m ago" / "1mo ago" / "1y ago" — without it,
+  // English collapses -1 month → "last mo." which loses the count.
+  if (seconds < 60) {
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' }).format(0, 'second');
+  }
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'always', style: 'narrow' });
+  if (seconds < 3600) return rtf.format(-Math.floor(seconds / 60), 'minute');
+  if (seconds < 86400) return rtf.format(-Math.floor(seconds / 3600), 'hour');
+  if (seconds < 2592000) return rtf.format(-Math.floor(seconds / 86400), 'day');
+  if (seconds < 31536000) return rtf.format(-Math.floor(seconds / 2592000), 'month');
+  return rtf.format(-Math.floor(seconds / 31536000), 'year');
 }