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.)