From e49fb46be7cb73bb8d996dc9d0b93aec0978fff5 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 21 Jun 2026 00:11:24 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20i18n=20live-reload=20for=20dashboard=20?=
 =?UTF-8?q?=E2=80=94=20tabs=20now=20respect=20language=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: dashboard tabs rendered via t() template literals had no
data-i18n attributes, so setLocale() _applyDOM() could not re-translate
them live. User switching to English in profile saw no effect without
page reload.

Changes:
- i18n.js: expose t/initI18n/setLocale/getLocale/tr globally (window.*)
  for non-module script compatibility
- viewer.js: add data-i18n attributes to all 4 dashboard tabs + loading
  text + empty state messages (12 elements total)

Verified: tabs show 'Statistics/Bookmarks/Recent/Shared' in EN mode
---
 frontend/js/i18n.js   |  7 +++++++
 frontend/js/viewer.js | 22 +++++++++++-----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js
index bd85c51..8cfe1d7 100644
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -138,6 +138,13 @@ async function _loadLocaleStrings(locale) {
   }
 }
 
+// ── Global exports for non-module scripts (legacy app.js) ──────────────────
+window.t = t;
+window.tr = tr;
+window.getLocale = getLocale;
+window.setLocale = setLocale;
+window.initI18n = initI18n;
+
 /** Walk the DOM and update every element with a data-i18n* attribute. */
 function _applyDOM() {
   // textContent
diff --git a/frontend/js/viewer.js b/frontend/js/viewer.js
index 6e88c2a..fbfdfd1 100644
--- a/frontend/js/viewer.js
+++ b/frontend/js/viewer.js
@@ -932,16 +932,16 @@ export function showWelcome() {
       <div id="dashboard-home" class="dashboard-home" role="region" aria-label="Tableau de bord">
         <!-- Dashboard Tabs -->
         <div class="dashboard-tabs">
-          <button class="dashboard-tab active" data-tab="stats">
+          <button class="dashboard-tab active" data-tab="stats" data-i18n="dashboard.stats">
             <i data-lucide="bar-chart-3" style="width:14px;height:14px"></i> ${t('dashboard.stats')}
           </button>
-          <button class="dashboard-tab" data-tab="bookmarks">
+          <button class="dashboard-tab" data-tab="bookmarks" data-i18n="dashboard.bookmarks">
             <i data-lucide="bookmark" style="width:14px;height:14px"></i> ${t('dashboard.bookmarks')}
           </button>
-          <button class="dashboard-tab" data-tab="recent">
+          <button class="dashboard-tab" data-tab="recent" data-i18n="dashboard.tab_recent">
             <i data-lucide="clock" style="width:14px;height:14px"></i> ${t('dashboard.tab_recent')}
           </button>
-          <button class="dashboard-tab" data-tab="shared">
+          <button class="dashboard-tab" data-tab="shared" data-i18n="dashboard.tab_shared">
             <i data-lucide="share-2" style="width:14px;height:14px"></i> ${t('dashboard.tab_shared')}
           </button>
         </div>
@@ -949,7 +949,7 @@ export function showWelcome() {
         <!-- Stats Panel -->
         <div id="dashboard-panel-stats" class="dashboard-panel active">
           <div id="dashboard-stats-grid" class="dashboard-stats-grid">
-            <div class="dashboard-stats-loading">${t('common.loading')}</div>
+            <div class="dashboard-stats-loading" data-i18n="common.loading">${t('common.loading')}</div>
           </div>
           <div id="dashboard-conflicts-container" style="margin-top:16px"></div>
         </div>
@@ -959,8 +959,8 @@ export function showWelcome() {
           <div id="dashboard-bookmarks-grid" class="dashboard-recent-grid"></div>
           <div id="dashboard-bookmarks-empty" class="dashboard-recent-empty">
             <i data-lucide="pin"></i>
-            <span>${t('dashboard.no_bookmarks')}</span>
-            <p>${t('dashboard.pin_hint')}</p>
+            <span data-i18n="dashboard.no_bookmarks">${t('dashboard.no_bookmarks')}</span>
+            <p data-i18n="dashboard.pin_hint">${t('dashboard.pin_hint')}</p>
           </div>
         </div>
 
@@ -978,8 +978,8 @@ export function showWelcome() {
           </div>
           <div id="dashboard-recent-empty" class="dashboard-recent-empty hidden">
             <i data-lucide="inbox"></i>
-            <span>${t('dashboard.no_recent')}</span>
-            <p>${t('dashboard.recent_hint')}</p>
+            <span data-i18n="dashboard.no_recent">${t('dashboard.no_recent')}</span>
+            <p data-i18n="dashboard.recent_hint">${t('dashboard.recent_hint')}</p>
           </div>
         </div>
 
@@ -988,8 +988,8 @@ export function showWelcome() {
           <div id="dashboard-shared-grid" class="dashboard-recent-grid"></div>
           <div id="dashboard-shared-empty" class="dashboard-recent-empty">
             <i data-lucide="share-2"></i>
-            <span>${t('dashboard.no_shares')}</span>
-            <p>${t('dashboard.shared_hint')}</p>
+            <span data-i18n="dashboard.no_shares">${t('dashboard.no_shares')}</span>
+            <p data-i18n="dashboard.shared_hint">${t('dashboard.shared_hint')}</p>
           </div>
         </div>
       </div>`;