feat: visionneuse XLSX - ruban groupe, onglets permanents et badges d'etat #154

frontend/js/viewer.js

@@ -1047,11 +1047,18 @@ export function renderXlsxViewer(area, data) {
   // per workbook, not a global preference).
   let lossyConfirmed = false;
   let allowFormula = false;
-  const tabs = sheets.length > 1
-    ? `<div class="xlsx-tabs">${sheets.map((s, i) =>
-        `<button class="xlsx-tab${i === 0 ? " active" : ""}" data-sheet="${i}">${escapeHtml(s.name)}</button>`
-      ).join("")}</div>`
-    : "";
+  // #154-A1 — the command bar is grouped (Formules · Insertion · Vue · Fichier)
+  // and the sheet tabs are ALWAYS rendered (a single sheet used to show no tab
+  // at all, hiding the fact that a workbook can hold several). An editable
+  // workbook also gets an explicit “+” button next to the tabs.
+  const editable = !isCsv && !readOnly;
+  const tabs = isCsv
+    ? ""
+    : `<div class="xlsx-tabs" role="tablist">${sheets.map((s, i) =>
+        `<button class="xlsx-tab${i === 0 ? " active" : ""}" data-sheet="${i}" role="tab" aria-selected="${i === 0}">${escapeHtml(s.name)}</button>`
+      ).join("")}${editable
+        ? `<button class="xlsx-tab-add" id="xlsx-tab-add" type="button" title="${escapeHtml(t("xlsx.tabs_add_sheet"))}" aria-label="${escapeHtml(t("xlsx.tabs_add_sheet"))}">+</button>`
+        : ""}</div>`;
   // #153 A15 — inline styles (bold/italic/colors from the file itself), merged
   // ranges and the freeze anchor are applied AFTER the panels are in the DOM
   // (the HTML string alone cannot carry them: col/row spans need the table).
@@ -1123,24 +1130,55 @@ export function renderXlsxViewer(area, data) {
        </div>`
     : "";
 
+  // #154-A1 — status pills make the viewer's limits visible up front: a
+  // read-only format (.xls/.ods) and the fact that formulas are never
+  // recalculated on screen (the workbook is only written back, Excel recomputes).
+  const statusPills = [
+    readOnly
+      ? `<span class="xlsx-status-pill xlsx-status-readonly" title="${escapeHtml(t("xlsx.readonly_hint"))}"><i data-lucide="lock" class="xlsx-status-icon"></i>${escapeHtml(t("xlsx.readonly_badge"))}</span>`
+      : "",
+    !isCsv
+      ? `<span class="xlsx-status-pill xlsx-status-formula" title="${escapeHtml(t("xlsx.formulas_note_title"))}"><i data-lucide="sigma" class="xlsx-status-icon"></i>${escapeHtml(t("xlsx.formulas_note"))}</span>`
+      : "",
+  ].filter(Boolean).join("");
+  const statusBar = statusPills ? `<div class="xlsx-status-bar">${statusPills}</div>` : "";
+
+  // Command groups, separated by thin rules. The dashboard button is appended
+  // later into the dedicated (empty) “view” group.
+  const actionGroups = [];
+  if (!readOnly) {
+    actionGroups.push(`<span class="xlsx-cmd-group" data-group="formulas">
+            <button class="btn-action xlsx-formula-toggle" id="xlsx-formula-btn" type="button"
+                    aria-pressed="false" title="${escapeHtml(t("xlsx.formula_toggle_title"))}">f(x)</button>
+          </span>`);
+  }
+  if (editable) {
+    actionGroups.push(`<span class="xlsx-cmd-group" data-group="insert">
+            <button class="btn-action" id="xlsx-structure-btn" title="${escapeHtml(t("xlsx.structure_btn"))}">
+              <i data-lucide="table-properties" style="width:14px;height:14px"></i>
+            </button>
+          </span>`);
+    actionGroups.push(`<span class="xlsx-cmd-group" id="xlsx-view-group" data-group="view"></span>`);
+  }
+  actionGroups.push(`<span class="xlsx-cmd-group" data-group="file">
+            <button class="btn-action" id="xlsx-download-btn">
+              <i data-lucide="download" style="width:14px;height:14px"></i> ${t("viewer.download")}
+            </button>
+            <button class="btn-action" id="xlsx-csv-btn" title="${escapeHtml(t("xlsx.csv_export"))}">
+              <i data-lucide="file-spreadsheet" style="width:14px;height:14px"></i> CSV
+            </button>
+            <button class="btn-action xlsx-save-primary" id="xlsx-save-btn" disabled>${t("common.save")}</button>
+          </span>`);
+  const actionsHtml = actionGroups.join('<span class="xlsx-cmd-sep" aria-hidden="true"></span>');
+
   area.innerHTML = `
     <div class="xlsx-viewer">
-      <div class="xlsx-toolbar">
-        ${tabs}
-        <span class="xlsx-toolbar-actions">
-          <button class="btn-action xlsx-formula-toggle" id="xlsx-formula-btn" type="button"
-                  aria-pressed="false" title="${escapeHtml(t("xlsx.formula_toggle_title"))}">f(x)</button>
-          <button class="btn-action" id="xlsx-save-btn" disabled${isCsv || readOnly ? "" : ""}>${t("common.save")}</button>
-          <button class="btn-action" id="xlsx-download-btn">
-            <i data-lucide="download" style="width:14px;height:14px"></i> ${t("viewer.download")}
-          </button>
-          <button class="btn-action" id="xlsx-csv-btn" title="${escapeHtml(t("xlsx.csv_export"))}">
-            <i data-lucide="file-spreadsheet" style="width:14px;height:14px"></i> CSV
-          </button>
-          ${isCsv || readOnly ? "" : `<button class="btn-action" id="xlsx-structure-btn" title="${escapeHtml(t("xlsx.structure_btn"))}">
-            <i data-lucide="table-properties" style="width:14px;height:14px"></i>
-          </button>`}
-        </span>
+      <div class="xlsx-toolbar" role="toolbar">
+        <div class="xlsx-cmdbar">
+          ${tabs}
+          <span class="xlsx-toolbar-actions">${actionsHtml}</span>
+        </div>
+        ${statusBar}
       </div>
       ${lossWarning}
       <div class="xlsx-formula-bar">
@@ -1173,7 +1211,7 @@ export function renderXlsxViewer(area, data) {
       type: "button",
       title: t("xlsx.dashboard_btn"),
     }, [icon("layout-dashboard", 14), document.createTextNode(t("xlsx.dashboard_btn"))]);
-    area.querySelector(".xlsx-toolbar-actions").prepend(dashBtn);
+    (area.querySelector("#xlsx-view-group") || area.querySelector(".xlsx-toolbar-actions")).appendChild(dashBtn);
     dashBtn.addEventListener("click", async () => {
       const old = area.querySelector(".xlsx-dashboard");
       if (old) { old.remove(); dashBtn.classList.remove("active"); return; }
@@ -1482,8 +1520,9 @@ export function renderXlsxViewer(area, data) {
   });
 
   // Formula toggle (#153 A4) — opt-in for this viewing session only.
+  // #154-A1 — absent on a read-only workbook (nothing can be saved).
   const formulaBtn = area.querySelector("#xlsx-formula-btn");
-  formulaBtn.addEventListener("click", () => {
+  if (formulaBtn) formulaBtn.addEventListener("click", () => {
     allowFormula = !allowFormula;
     formulaBtn.setAttribute("aria-pressed", String(allowFormula));
     formulaBtn.classList.toggle("active", allowFormula);
@@ -1749,6 +1788,16 @@ export function renderXlsxViewer(area, data) {
     return null;
   };
 
+  // #154-A1 — the “+” button mirrors the structure menu's « Ajouter une
+  // feuille » item, right where the tabs are (Excel-like).
+  const tabAddBtn = area.querySelector("#xlsx-tab-add");
+  if (tabAddBtn) tabAddBtn.addEventListener("click", async () => {
+    const name = prompt(t("xlsx.structure_prompt_add"));
+    if (!name) return;
+    const actions = [{ op: "sheet_add", name }];
+    try { await putStructure(actions); } catch (err) { structureError(err, actions); }
+  });
+
   // Structure menu: built on demand, positioned under the button.
   // (.csv / read-only workbooks have no such button — the menu block above
   // is skipped for them.)

frontend/locales/en.json

@@ -1829,6 +1829,11 @@
   "xlsx.lossy_cancelled": "Save cancelled",
   "xlsx.formula_toggle_title": "Treat “=” and “@” as formulas (off by default)",
   "xlsx.cached_value_title": "Last value calculated by Excel",
+  "xlsx.tabs_add_sheet": "Add a sheet",
+  "xlsx.readonly_badge": "Read-only",
+  "xlsx.readonly_hint": "This format (.xls / .ods) cannot be edited in ObsiGate — convert it to .xlsx to edit.",
+  "xlsx.formulas_note": "Formulas not recalculated",
+  "xlsx.formulas_note_title": "ObsiGate shows the formula as stored: Excel recalculates it on open. Dependent cells do not refresh on screen.",
   "xlsx.truncated_title": "Truncated sheet",
   "xlsx.truncated_rows": "{shown} of {total} rows displayed.",
   "xlsx.truncated_cols": "{shown} of {total} columns displayed.",

frontend/locales/fr.json

@@ -1829,6 +1829,11 @@
   "xlsx.lossy_cancelled": "Sauvegarde annulée",
   "xlsx.formula_toggle_title": "Interpréter « = » et « @ » comme des formules (désactivé par défaut)",
   "xlsx.cached_value_title": "Dernière valeur calculée par Excel",
+  "xlsx.tabs_add_sheet": "Ajouter une feuille",
+  "xlsx.readonly_badge": "Lecture seule",
+  "xlsx.readonly_hint": "Ce format (.xls / .ods) n'est pas modifiable dans ObsiGate — convertissez-le en .xlsx pour l'éditer.",
+  "xlsx.formulas_note": "Formules non recalculées",
+  "xlsx.formulas_note_title": "ObsiGate affiche la formule telle qu'elle est enregistrée : Excel la recalcule à l'ouverture. Les cellules dépendantes ne se rafraîchissent pas à l'écran.",
   "xlsx.truncated_title": "Feuille tronquée",
   "xlsx.truncated_rows": "{shown} lignes affichées sur {total}.",
   "xlsx.truncated_cols": "{shown} colonnes affichées sur {total}.",

frontend/style.css

@@ -57,6 +57,13 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  /* #154-A1 — data-grid tokens: the sheet reads slightly lighter than the
+     chrome (toolbar/panels), headers are clearly distinct from cells. */
+  --grid-bg: #161b22;
+  --grid-header-bg: #1f2430;
+  --grid-header-text: #e6edf3;
+  --grid-border: #30363d;
+  --grid-zebra: rgba(255, 255, 255, 0.025);
 }
 
 /* ===== THEME — DARK (explicit) ===== */
@@ -101,6 +108,11 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  --grid-bg: #161b22;
+  --grid-header-bg: #1f2430;
+  --grid-header-text: #e6edf3;
+  --grid-border: #30363d;
+  --grid-zebra: rgba(255, 255, 255, 0.025);
 }
 
 /* ===== THEME — LIGHT ===== */
@@ -145,6 +157,11 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  --grid-bg: #ffffff;
+  --grid-header-bg: #eaeef2;
+  --grid-header-text: #1f2328;
+  --grid-border: #d0d7de;
+  --grid-zebra: rgba(0, 0, 0, 0.025);
 }
 
 /* ===== BASE ===== */
@@ -10925,21 +10942,54 @@ body.desktop-mode .editor-container {
 }
 
 /* ── XLSX Viewer ── */
+/* #154-A1 — the viewer shell is a grouped command bar: sheet tabs on the left,
+   action groups (Formules · Insertion · Vue · Fichier) on the right, then a
+   status row stating the viewer's limits (read-only, formulas not recalculated). */
 .xlsx-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface2);
+  position: relative; /* anchors the A14 structure menu */
+}
+.xlsx-cmdbar {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 8px;
   flex-wrap: wrap;
-  position: relative; /* anchors the A14 structure menu */
 }
 .xlsx-toolbar-actions {
   margin-left: auto;
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+}
+.xlsx-cmd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.xlsx-cmd-sep {
+  width: 1px;
+  height: 20px;
+  flex: 0 0 auto;
+  background: var(--border);
+}
+.xlsx-save-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.xlsx-save-primary:disabled {
+  opacity: 0.5;
 }
 .xlsx-tabs {
   display: flex;
+  align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }
@@ -10957,15 +11007,73 @@ body.desktop-mode .editor-container {
   border-color: var(--accent, #4a90d9);
   color: #fff;
 }
+.xlsx-tab-add {
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.xlsx-tab-add:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.xlsx-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.xlsx-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+.xlsx-status-icon {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+}
+.xlsx-status-readonly {
+  border-color: var(--warning, #e0a800);
+  color: var(--warning, #e0a800);
+}
+.xlsx-status-formula {
+  color: var(--accent);
+}
+.xlsx-table {
+  background: var(--grid-bg);
+}
+.xlsx-table td {
+  border-bottom: 1px solid var(--grid-border);
+}
+/* #154-A1 — zebra + hover make rows scannable; headers use dedicated tokens so
+   they are visually distinct from the cells. */
+.xlsx-table tbody tr:nth-child(even) td {
+  background: var(--grid-zebra);
+}
+.xlsx-table tbody tr:hover td {
+  background: var(--bg-hover);
+}
 .xlsx-table th.xlsx-corner,
 .xlsx-table th.xlsx-rownum {
-  background: var(--surface);
-  color: var(--text-secondary);
-  font-weight: 400;
+  background: var(--grid-header-bg);
+  color: var(--grid-header-text);
+  font-weight: 500;
   text-align: right;
   padding: 6px 8px;
-  border-bottom: 2px solid var(--border);
-  border-right: 1px solid var(--border-light, var(--border));
+  border-bottom: 2px solid var(--grid-border);
+  border-right: 1px solid var(--grid-border);
   position: sticky;
   left: 0;
   /* #153 A8 — `top: auto` is load-bearing: `.csv-table th` pins EVERY `th`
@@ -10986,7 +11094,9 @@ body.desktop-mode .editor-container {
   position: sticky;
   top: 0;
   z-index: 3;
-  background: var(--surface);
+  background: var(--grid-header-bg);
+  color: var(--grid-header-text);
+  border-bottom: 2px solid var(--grid-border);
 }
 .xlsx-table td[contenteditable] {
   cursor: text;
@@ -10998,9 +11108,10 @@ body.desktop-mode .editor-container {
   outline-offset: -2px;
 }
 /* #153 A7 — the active cell keeps its outline even when focus moves to the
-   formula bar, so the user never loses track of what the bar edits. */
+   formula bar, so the user never loses track of what the bar edits.
+   #154-A1 — solid (not dashed) for a stronger active-cell affordance. */
 .xlsx-table td.xlsx-active:not(:focus) {
-  outline: 2px dashed var(--accent, #4a90d9);
+  outline: 2px solid var(--accent, #4a90d9);
   outline-offset: -2px;
 }
 
@@ -11099,12 +11210,12 @@ body.desktop-mode .editor-container {
   position: sticky;
   top: 33px; /* thead height — keeps the frozen row below the header */
   z-index: 2;
-  background: var(--surface);
+  background: var(--grid-header-bg);
 }
 .xlsx-table td.xlsx-frozen-col {
   position: sticky;
   left: 44px; /* the row-number column width */
-  background: var(--surface);
+  background: var(--grid-bg);
 }
 
 /* #153 A14 — structure menu (sheets / rows / columns) */
@@ -11232,7 +11343,9 @@ body.desktop-mode .editor-container {
 mark {
   font: inherit;
 }
-.xlsx-table td.xlsx-dirty {
+/* #154-A1 — scoped to tbody so a dirty cell keeps its highlight even on the
+   zebra/hover backgrounds (specificity beats the zebra + hover rules). */
+.xlsx-table tbody td.xlsx-dirty {
   background: rgba(255, 196, 0, 0.18);
 }