feat: menus tableur a icones, fermeture au focus et polish mobile #179

tests/e2e/xlsx-viewer.spec.js

@@ -20,6 +20,10 @@
  *  - `GET …/xlsx/sheet?offset=500` serves the rows the caps used to hide,
  *    with the real A1 coordinates (#153 A9).
  *
+ * Third block (#179) : menus carry one Lucide icon per entry and close on
+ * focus loss (outside click, Escape); mobile viewport checks the ribbon
+ * wrapping and 44px touch targets.
+ *
  * The fixture is restored byte-for-byte in `afterAll` so a local run never
  * dirties the working copy.
  *
@@ -314,3 +318,87 @@ test.describe('Excel viewer — presse-papiers, clavier et zone Nom (#156 P1)',
     expect(await textOf('C10')).toBe(src.c10);
   });
 });
+
+// ── #179 — icônes des menus, fermeture au focus, polish mobile ──────────────
+
+test.describe('Excel viewer — menus à icônes et fermeture au focus (#179)', () => {
+  test('chaque entrée du menu contextuel porte une icône', async ({ page }) => {
+    await login(page);
+    await openFixture(page);
+
+    await page.locator('#content-area td[data-cell="A1"]').click({ button: 'right' });
+    const menu = page.locator('.xlsx-context-menu');
+    await expect(menu).toBeVisible();
+    // Icône rendue par Lucide (svg) ou à rendre (<i data-lucide>) si le CDN
+    // est injoignable — dans les deux cas l'entrée est iconisée.
+    for (const label of ['Couper', 'Copier', 'Coller']) {
+      const entry = menu.locator('.xlsx-context-item', { hasText: label });
+      await expect(entry.locator('i[data-lucide], svg')).toHaveCount(1);
+    }
+    await expect(menu.locator('.xlsx-context-item i[data-lucide="trash-2"], .xlsx-context-item svg.lucide-trash-2')).not.toHaveCount(0);
+  });
+
+  test('le menu contextuel se ferme au clic extérieur et à Échap', async ({ page }) => {
+    await login(page);
+    await openFixture(page);
+
+    const cell = page.locator('#content-area td[data-cell="A1"]');
+    await cell.click({ button: 'right' });
+    await expect(page.locator('.xlsx-context-menu')).toBeVisible();
+    await page.locator('#content-area .xlsx-table').click({ position: { x: 5, y: 5 } });
+    await expect(page.locator('.xlsx-context-menu')).toHaveCount(0);
+
+    await cell.click({ button: 'right' });
+    await expect(page.locator('.xlsx-context-menu')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.locator('.xlsx-context-menu')).toHaveCount(0);
+  });
+
+  test('le menu Structure se ferme quand le focus le quitte', async ({ page }) => {
+    await login(page);
+    await openFixture(page);
+
+    await page.locator('#xlsx-structure-btn').click();
+    const menu = page.locator('.xlsx-structure-menu');
+    await expect(menu).toBeVisible();
+    await expect(menu.locator('.xlsx-structure-item i[data-lucide], .xlsx-structure-item svg').first()).toBeAttached();
+    // Clic dans la grille = le focus quitte le menu → fermeture.
+    await page.locator('#content-area td[data-cell="A1"]').click();
+    await expect(page.locator('.xlsx-structure-menu')).toHaveCount(0);
+    await expect(page.locator('#xlsx-structure-btn')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('le menu Export se ferme au clic extérieur', async ({ page }) => {
+    await login(page);
+    await openFixture(page);
+
+    await page.locator('#xlsx-export-btn').click();
+    const menu = page.locator('#xlsx-export-menu');
+    await expect(menu).toBeVisible();
+    await page.locator('#content-area td[data-cell="A1"]').click();
+    await expect(menu).toBeHidden();
+  });
+
+  test('mobile : ruban sans débordement et cibles tactiles 44px', async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 9999) > 768, 'Mobile viewport required');
+    await login(page);
+    await page.evaluate(() => window.TabManager.open('TestVault', FIXTURE));
+    await expect(page.locator('#content-area .xlsx-table')).toBeVisible({ timeout: 15000 });
+
+    // Le ruban s'enroule au lieu de déborder horizontalement.
+    const overflow = await page.evaluate(() => {
+      const bar = document.querySelector('#content-area .xlsx-cmdbar');
+      return bar ? bar.scrollWidth - bar.clientWidth : -1;
+    });
+    expect(overflow).toBeLessThanOrEqual(1);
+
+    // Menu contextuel (clic droit émulé) : tient dans le viewport, entrées ≥ 44px.
+    await page.locator('#content-area td[data-cell="A1"]').click({ button: 'right' });
+    const menu = page.locator('.xlsx-context-menu');
+    await expect(menu).toBeVisible();
+    const box = await menu.boundingBox();
+    expect(box.width).toBeLessThanOrEqual(viewport.width - 8);
+    const itemBox = await menu.locator('.xlsx-context-item').first().boundingBox();
+    expect(itemBox.height).toBeGreaterThanOrEqual(44);
+  });
+});

tests/frontend/xlsx-menus.test.mjs

@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+/**
+ * ObsiGate — JSDOM tests for the spreadsheet menus polish (ROADMAP #179).
+ *
+ * Covers frontend/js/xlsx/context-menu.js and frontend/js/xlsx/command-bar.js:
+ *  - every grid-menu entry renders its representative Lucide icon + safe label;
+ *  - the grid menu closes on Escape / outside click / focus loss / scroll /
+ *    resize, and offers arrow-key navigation with autofocus on open;
+ *  - trackDismissable() gives Structure / Mise en forme / Export the same
+ *    dismissal contract (toggle exempt, custom onClose);
+ *  - the ribbon carries the new icons (save, tab "+", export entries).
+ *
+ * Usage: node tests/frontend/xlsx-menus.test.mjs
+ */
+
+import { strict as assert } from "node:assert";
+import { JSDOM } from "jsdom";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import path from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const REPO_ROOT = path.resolve(__dirname, "..", "..");
+
+// ── JSDOM bootstrap ─────────────────────────────────────────────────────────
+const dom = new JSDOM(
+  `<!DOCTYPE html><html><body><div id="content-area"></div></body></html>`,
+  { url: "http://localhost/", pretendToBeVisual: true }
+);
+
+const w = dom.window;
+globalThis.window = w;
+globalThis.document = w.document;
+globalThis.DOMParser = w.DOMParser;
+globalThis.HTMLElement = w.HTMLElement;
+globalThis.Element = w.Element;
+globalThis.Node = w.Node;
+globalThis.Event = w.Event;
+globalThis.FocusEvent = w.FocusEvent;
+globalThis.KeyboardEvent = w.KeyboardEvent;
+globalThis.MouseEvent = w.MouseEvent;
+globalThis.localStorage = w.localStorage;
+globalThis.sessionStorage = w.sessionStorage;
+globalThis.requestAnimationFrame = (cb) => setTimeout(() => cb(Date.now()), 0);
+
+// ── Module under test ───────────────────────────────────────────────────────
+const ctxMenuUrl = pathToFileURL(
+  path.join(REPO_ROOT, "frontend", "js", "xlsx", "context-menu.js")
+).href;
+const cmdBarUrl = pathToFileURL(
+  path.join(REPO_ROOT, "frontend", "js", "xlsx", "command-bar.js")
+).href;
+const { openContextMenu, closeContextMenu, isContextMenuOpen, trackDismissable } =
+  await import(ctxMenuUrl);
+const { buildCommandBar } = await import(cmdBarUrl);
+
+// ── Mini runner ─────────────────────────────────────────────────────────────
+let testCount = 0;
+let passCount = 0;
+async function test(name, fn) {
+  testCount++;
+  closeContextMenu();
+  document.body.querySelectorAll(".tmp-menu").forEach((m) => m.remove());
+  try {
+    await fn();
+    passCount++;
+    console.log(`  ✓ ${name}`);
+  } catch (e) {
+    console.error(`  ✗ ${name}`);
+    console.error(e);
+    process.exitCode = 1;
+  }
+}
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const itemsOf = () => [
+  { icon: "scissors", label: "Cut" },
+  { icon: "copy", label: "Copy", disabled: true },
+  { separator: true },
+  { icon: "trash-2", label: "Delete", danger: true, onClick: () => {} },
+];
+
+// ── Rendering ───────────────────────────────────────────────────────────────
+await test("entries render their icon, label, separator and danger style", () => {
+  const menu = openContextMenu(10, 10, itemsOf());
+  const btns = [...menu.querySelectorAll(".xlsx-context-item")];
+  assert.equal(btns.length, 3);
+  assert.equal(btns[0].querySelector("i").getAttribute("data-lucide"), "scissors");
+  assert.equal(btns[0].querySelector(".xlsx-menu-label").textContent, "Cut");
+  assert.equal(btns[1].disabled, true);
+  assert.ok(btns[2].classList.contains("xlsx-context-danger"));
+  assert.ok(menu.querySelector(".xlsx-context-sep"), "separator rendered");
+  assert.equal(menu.getAttribute("role"), "menu");
+});
+
+await test("labels are text, never HTML (XSS-safe)", () => {
+  const menu = openContextMenu(10, 10, [{ icon: "copy", label: "<img src=x onerror=1>" }]);
+  assert.equal(menu.querySelector("img"), null);
+  assert.equal(
+    menu.querySelector(".xlsx-menu-label").textContent,
+    "<img src=x onerror=1>"
+  );
+});
+
+await test("opening focuses the first enabled entry", () => {
+  const menu = openContextMenu(10, 10, itemsOf());
+  const first = menu.querySelectorAll(".xlsx-context-item")[0];
+  assert.equal(document.activeElement, first);
+});
+
+// ── Keyboard navigation ─────────────────────────────────────────────────────
+await test("ArrowDown / ArrowUp / Home / End walk through enabled entries", () => {
+  const menu = openContextMenu(10, 10, itemsOf());
+  const btns = [...menu.querySelectorAll(".xlsx-context-item")];
+  const key = (k) =>
+    menu.dispatchEvent(new w.KeyboardEvent("keydown", { key: k, bubbles: true }));
+  key("ArrowDown"); // Cut (0, disabled Copy skipped) -> Delete (2)
+  assert.equal(document.activeElement, btns[2]);
+  key("ArrowDown"); // wraps to Cut
+  assert.equal(document.activeElement, btns[0]);
+  key("ArrowUp"); // back to Delete
+  assert.equal(document.activeElement, btns[2]);
+  key("Home");
+  assert.equal(document.activeElement, btns[0]);
+  key("End");
+  assert.equal(document.activeElement, btns[2]);
+});
+
+// ── Dismissal ───────────────────────────────────────────────────────────────
+await test("Escape closes the menu", () => {
+  openContextMenu(10, 10, itemsOf());
+  assert.ok(isContextMenuOpen());
+  document.dispatchEvent(new w.KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+  assert.ok(!isContextMenuOpen());
+  assert.equal(document.querySelector(".xlsx-context-menu"), null);
+});
+
+await test("outside click closes, inside click does not", async () => {
+  const menu = openContextMenu(10, 10, itemsOf());
+  await sleep(300); // past the long-press click guard
+  menu.querySelector(".xlsx-context-item").dispatchEvent(
+    new w.MouseEvent("click", { bubbles: true })
+  );
+  assert.ok(!isContextMenuOpen(), "item click closes");
+  openContextMenu(10, 10, itemsOf());
+  await sleep(300);
+  document.body.dispatchEvent(new w.MouseEvent("click", { bubbles: true }));
+  assert.ok(!isContextMenuOpen(), "outside click closes");
+});
+
+await test("focus leaving the menu closes it, focus inside keeps it", () => {
+  const menu = openContextMenu(10, 10, itemsOf());
+  const [first, , last] = menu.querySelectorAll(".xlsx-context-item");
+  first.dispatchEvent(
+    new w.FocusEvent("focusout", { bubbles: true, relatedTarget: last })
+  );
+  assert.ok(isContextMenuOpen(), "focus moving inside keeps the menu");
+  const outside = document.createElement("button");
+  document.body.appendChild(outside);
+  last.dispatchEvent(
+    new w.FocusEvent("focusout", { bubbles: true, relatedTarget: outside })
+  );
+  assert.ok(!isContextMenuOpen(), "focus moving outside closes the menu");
+  outside.remove();
+});
+
+await test("scroll and resize close the menu", () => {
+  openContextMenu(10, 10, itemsOf());
+  window.dispatchEvent(new w.Event("scroll"));
+  assert.ok(!isContextMenuOpen(), "scroll closes");
+  openContextMenu(10, 10, itemsOf());
+  window.dispatchEvent(new w.Event("resize"));
+  assert.ok(!isContextMenuOpen(), "resize closes");
+});
+
+// ── trackDismissable (Structure / Format / Export) ──────────────────────────
+function tmpMenu(toggle) {
+  const menu = document.createElement("div");
+  menu.className = "tmp-menu";
+  const b = document.createElement("button");
+  b.type = "button";
+  b.textContent = "Action";
+  menu.appendChild(b);
+  (toggle.closest("div") || document.body).appendChild(menu);
+  return menu;
+}
+
+await test("trackDismissable: toggle exempt, outside closes with onClose", async () => {
+  const host = document.createElement("div");
+  const toggle = document.createElement("button");
+  host.appendChild(toggle);
+  document.body.appendChild(host);
+  const menu = tmpMenu(toggle);
+  let closed = 0;
+  const dismiss = trackDismissable(menu, { toggle, onClose: () => { closed++; menu.remove(); } });
+  toggle.dispatchEvent(new w.MouseEvent("click", { bubbles: true }));
+  assert.equal(closed, 0, "toggle click does not dismiss");
+  assert.ok(menu.isConnected);
+  document.body.dispatchEvent(new w.MouseEvent("click", { bubbles: true }));
+  assert.equal(closed, 1, "outside click dismisses once");
+  assert.ok(!menu.isConnected);
+  dismiss(); // idempotent manual close
+  assert.equal(closed, 1);
+  host.remove();
+});
+
+await test("trackDismissable: Escape and focus loss dismiss", () => {
+  const toggle = document.createElement("button");
+  document.body.appendChild(toggle);
+  const menu = tmpMenu(toggle);
+  let closed = 0;
+  trackDismissable(menu, { toggle, onClose: () => { closed++; menu.remove(); } });
+  document.dispatchEvent(new w.KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+  assert.equal(closed, 1, "Escape dismisses");
+  assert.ok(!menu.isConnected);
+
+  const menu2 = tmpMenu(toggle);
+  let closed2 = 0;
+  trackDismissable(menu2, { toggle, onClose: () => { closed2++; menu2.remove(); } });
+  const outside = document.createElement("input");
+  document.body.appendChild(outside);
+  menu2.querySelector("button").dispatchEvent(
+    new w.FocusEvent("focusout", { bubbles: true, relatedTarget: outside })
+  );
+  assert.equal(closed2, 1, "focus loss dismisses");
+  outside.remove();
+  toggle.remove();
+});
+
+// ── Ribbon icons ────────────────────────────────────────────────────────────
+await test("the ribbon carries save, tab-plus and export icons", () => {
+  const { actionsHtml, tabs } = buildCommandBar({
+    sheets: [{ name: "F1" }],
+    isCsv: false,
+    readOnly: false,
+    editable: true,
+  });
+  const host = document.createElement("div");
+  host.innerHTML = tabs + actionsHtml;
+  const saveIcon = host.querySelector("#xlsx-save-btn i[data-lucide]");
+  assert.ok(saveIcon, "save button has an icon");
+  assert.equal(saveIcon.getAttribute("data-lucide"), "save");
+  const plusIcon = host.querySelector("#xlsx-tab-add i[data-lucide]");
+  assert.ok(plusIcon, "tab + button has an icon");
+  assert.equal(plusIcon.getAttribute("data-lucide"), "plus");
+  const exportIcons = [...host.querySelectorAll("#xlsx-export-menu i[data-lucide]")].map((i) =>
+    i.getAttribute("data-lucide")
+  );
+  assert.deepEqual(exportIcons, ["file-text", "code", "printer"]);
+});
+
+console.log(`\n${passCount}/${testCount} passed`);
+process.exit(process.exitCode || 0);

tests/frontend/xlsx-viewer.test.mjs

@@ -1867,6 +1867,95 @@ await test("the find scans every sheet and steps across tabs (#156-A11)", () =>
   assert.ok(area.querySelector('.xlsx-panel[data-sheet="1"] mark.xlsx-find-current'), "the current hit sits in sheet 2");
 });
 
+// ── #179 — menu icons + dismissal at viewer level ─────────────────────────
+await test("the grid context menu shows one icon per entry (#179-A1)", () => {
+  const area = mount();
+  const menu = openMenuOn(area, "A1");
+  assert.ok(menu, "menu opens on right-click");
+  const items = [...menu.querySelectorAll(".xlsx-context-item")];
+  assert.ok(items.length > 3, "several entries");
+  for (const b of items) {
+    const icon = b.querySelector("i[data-lucide]");
+    assert.ok(icon, `"${b.textContent}" carries an icon`);
+    assert.match(icon.getAttribute("data-lucide"), /^[a-z0-9-]+$/);
+  }
+  assert.equal(
+    menu.querySelector(".xlsx-context-item .xlsx-menu-label").textContent,
+    FR["xlsx.cut"]
+  );
+  const danger = items.find(
+    (b) => b.textContent === FR["xlsx.delete_rows"].replace("{n}", "1")
+  );
+  assert.ok(danger && danger.querySelector('i[data-lucide="trash-2"]'), "delete reads as danger");
+});
+
+await test("the grid context menu closes when the focus leaves it (#179-A3)", () => {
+  const area = mount();
+  openMenuOn(area, "A1");
+  assert.ok(document.querySelector(".xlsx-context-menu"), "menu open");
+  const first = document.querySelector(".xlsx-context-item");
+  const outside = document.createElement("button");
+  document.body.appendChild(outside);
+  first.dispatchEvent(new w.FocusEvent("focusout", { bubbles: true, relatedTarget: outside }));
+  assert.equal(document.querySelector(".xlsx-context-menu"), null, "menu closed on focus loss");
+  outside.remove();
+});
+
+await test("the structure menu shows icons and closes on outside click (#179-A2/A3)", () => {
+  const area = mount();
+  area.querySelector("#xlsx-structure-btn").click();
+  const menu = area.querySelector(".xlsx-structure-menu");
+  assert.ok(menu, "structure menu opens");
+  const icons = [...menu.querySelectorAll(".xlsx-structure-item i[data-lucide]")].map((i) =>
+    i.getAttribute("data-lucide")
+  );
+  assert.ok(icons.includes("file-plus"), "sheet add icon");
+  assert.ok(icons.includes("trash-2"), "delete icon");
+  assert.equal(
+    area.querySelector("#xlsx-structure-btn").getAttribute("aria-expanded"),
+    "true"
+  );
+  document.body.dispatchEvent(new w.MouseEvent("click", { bubbles: true }));
+  assert.equal(area.querySelector(".xlsx-structure-menu"), null, "outside click closes");
+  assert.equal(
+    area.querySelector("#xlsx-structure-btn").getAttribute("aria-expanded"),
+    "false"
+  );
+});
+
+await test("the format menu shows icons and closes on Escape (#179-A2/A3)", () => {
+  const area = mount();
+  area.querySelector("#xlsx-format-btn").click();
+  const menu = area.querySelector(".xlsx-format-menu");
+  assert.ok(menu, "format menu opens");
+  const find = (icon) => menu.querySelector(`.xlsx-structure-item i[data-lucide="${icon}"]`);
+  assert.ok(find("bold"), "bold icon");
+  assert.ok(find("align-center"), "align icon");
+  assert.ok(menu.querySelector('.xlsx-format-colour i[data-lucide="palette"]'), "font colour icon");
+  document.dispatchEvent(new w.KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+  assert.equal(area.querySelector(".xlsx-format-menu"), null, "Escape closes");
+});
+
+await test("the export menu closes on outside click (#179-A3)", () => {
+  const area = mount();
+  area.querySelector("#xlsx-export-btn").click();
+  assert.equal(area.querySelector("#xlsx-export-menu").style.display, "block", "menu opens");
+  document.body.dispatchEvent(new w.MouseEvent("click", { bubbles: true }));
+  assert.equal(area.querySelector("#xlsx-export-menu").style.display, "none", "outside click closes");
+});
+
+await test("the ribbon save and tab + buttons carry icons (#179-A2)", () => {
+  const area = mount();
+  assert.equal(
+    area.querySelector('#xlsx-save-btn i[data-lucide]').getAttribute("data-lucide"),
+    "save"
+  );
+  assert.equal(
+    area.querySelector('#xlsx-tab-add i[data-lucide]').getAttribute("data-lucide"),
+    "plus"
+  );
+});
+
 // ── Report ──────────────────────────────────────────────────────────────────
 console.log(`\n${passCount}/${testCount} tests passed\n`);
 process.exit(passCount === testCount ? 0 : 1);