feat(viewer): #90 regroupement fonctionnel des boutons de la barre d'actions + spacers

Ordre: [TOC][pop-out][Bookmark] | [Editer][Source][.md][Forge] | [Copier][PDF][Export] | [Partager]
- viewer.js: construction par groupes nav/edit/export/share, spacer .action-sep
  entre groupes non vides; Pretty ancre au groupe edition
- popout.html: meme assemblage groupe, ordre aligne
- style.css: regle .file-actions .action-sep (1px, var(--border-md))
- tests: tests/frontend/toolbar-order.test.mjs (9) branche au CI

frontend/js/viewer.js

@@ -879,12 +879,28 @@ export function renderFile(data) {
     });
   }
 
-  const fileActions = [copyBtn, sourceBtn];
-  if (!data.is_image) fileActions.push(mdBtn);
-  if (data.is_markdown) fileActions.push(pdfBtn, exportWrap, forgeBtn, tocBtn);
-  if (!data.unsupported) fileActions.push(editBtn);
-  if (prettyBtn) fileActions.push(prettyBtn);
-  fileActions.push(openNewWindowBtn, shareBtn, bookmarkBtn);
+  // Separateur visuel entre les groupes d'actions (#90)
+  const actionSep = () => el("span", { class: "action-sep" });
+  // Ordre des boutons par groupes fonctionnels (#90) :
+  // [TOC][pop-out][Bookmark] | [Editer][Source][.md][Forge] | [Copier][PDF][Export] | [Partager]
+  // Boutons non affiches selon le type de fichier (Pretty, PDF/Export hors
+  // markdown, ...) restent ancres a leur groupe ; spacer de groupe vide retire.
+  const navBtns = [tocBtn, openNewWindowBtn, bookmarkBtn];
+  const editBtns = [];
+  if (!data.unsupported) editBtns.push(editBtn);
+  editBtns.push(sourceBtn);
+  if (!data.is_image) editBtns.push(mdBtn);
+  if (data.is_markdown) editBtns.push(forgeBtn);
+  if (prettyBtn) editBtns.push(prettyBtn);
+  const exportBtns = [copyBtn];
+  if (data.is_markdown) exportBtns.push(pdfBtn, exportWrap);
+  const shareBtns = [shareBtn];
+  const fileActions = [];
+  [navBtns, editBtns, exportBtns, shareBtns].forEach((group) => {
+    if (group.length === 0) return;
+    if (fileActions.length > 0) fileActions.push(actionSep());
+    group.forEach((b) => fileActions.push(b));
+  });
 
   // Assemble
   area.innerHTML = "";

frontend/popout.html

@@ -734,9 +734,14 @@ const RightSidebarManager = {
           header.appendChild(tagsDiv);
         }
 
-        // Action buttons
+        // Action buttons — memes groupes/spacers que le viewer principal (#90)
         const actionsDiv = document.createElement("div");
         actionsDiv.className = "file-actions";
+        const actionSep = () => {
+          const s = document.createElement("span");
+          s.className = "action-sep";
+          return s;
+        };
         
         const copyBtn = document.createElement("button");
         copyBtn.className = "btn-action";
@@ -752,7 +757,6 @@ const RightSidebarManager = {
             if (window.lucide) window.lucide.createIcons();
           } catch (e) {}
         });
-        actionsDiv.appendChild(copyBtn);
 
         const sourceBtn = document.createElement("button");
         sourceBtn.className = "btn-action";
@@ -782,7 +786,6 @@ const RightSidebarManager = {
             raw.style.display = "none";
           }
         });
-        actionsDiv.appendChild(sourceBtn);
 
         const dlBtn = document.createElement("button");
         dlBtn.className = "btn-action";
@@ -796,7 +799,6 @@ const RightSidebarManager = {
           a.click();
           document.body.removeChild(a);
         });
-        actionsDiv.appendChild(dlBtn);
 
         const pdfBtn = document.createElement("button");
         pdfBtn.className = "btn-action";
@@ -805,7 +807,6 @@ const RightSidebarManager = {
         pdfBtn.addEventListener("click", () => {
           window.open(`/api/file/${encodeURIComponent(vault)}/pdf?path=${encodeURIComponent(path)}`, "_blank");
         });
-        actionsDiv.appendChild(pdfBtn);
 
         const editBtn = document.createElement("button");
         editBtn.className = "btn-action";
@@ -814,7 +815,6 @@ const RightSidebarManager = {
         editBtn.addEventListener("click", () => {
           openEditor(vault, path);
         });
-        actionsDiv.appendChild(editBtn);
 
         const tocBtn = document.createElement("button");
         tocBtn.className = "btn-action";
@@ -822,7 +822,6 @@ const RightSidebarManager = {
         tocBtn.title = "Afficher/Masquer le sommaire";
         tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
         tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
-        actionsDiv.appendChild(tocBtn);
 
         // Share button
         const shareBtn = document.createElement("button");
@@ -844,7 +843,6 @@ const RightSidebarManager = {
             alert("Lien copié : " + url);
           } catch (err) { alert("Erreur: " + err.message); }
         });
-        actionsDiv.appendChild(shareBtn);
 
         // Bookmark button
         const bookmarkBtn = document.createElement("button");
@@ -864,8 +862,15 @@ const RightSidebarManager = {
             bookmarkBtn.classList.toggle("active", bm.bookmarked);
           } catch (err) { alert("Erreur: " + err.message); }
         });
-        actionsDiv.appendChild(bookmarkBtn);
-        
+
+        // Assemble par groupes (ordre aligne sur le viewer principal, #90) :
+        // [TOC][Bookmark] | [Editer][Source][.md] | [Copier][PDF] | [Partager]
+        [[tocBtn, bookmarkBtn], [editBtn, sourceBtn, dlBtn], [copyBtn, pdfBtn], [shareBtn]]
+          .forEach(function (group) {
+            if (actionsDiv.childNodes.length > 0) actionsDiv.appendChild(actionSep());
+            group.forEach(function (b) { actionsDiv.appendChild(b); });
+          });
+
         header.appendChild(actionsDiv);
         area.appendChild(header);
 

frontend/style.css

@@ -1798,6 +1798,15 @@ select {
   gap: 6px;
   align-items: center;
 }
+/* Separateur vertical entre groupes d'actions (#90) */
+.file-actions .action-sep {
+  align-self: stretch;
+  width: 1px;
+  min-height: 20px;
+  margin: 2px 4px;
+  background: var(--border-md, var(--border));
+  flex-shrink: 0;
+}
 .btn-action {
   font-family: "JetBrains Mono", monospace;
   font-size: 0.75rem;