fix: i18n live-reload for dashboard — tabs now respect language setting
CI / lint (push) Failing after 24s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / e2e (push) Has been skipped
CI / security (push) Failing after 10s

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
This commit is contained in:
2026-06-21 00:11:24 -04:00
parent 8e0924a98c
commit e49fb46be7
2 changed files with 18 additions and 11 deletions
+7
View File
@@ -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
+11 -11
View File
@@ -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>`;