Inital attempt

assets/page/actions.js

@@ -125,5 +125,27 @@ function deletePage() {
 }
 
 document.addEventListener('DOMContentLoaded', function () {
-    wireDropdown(document.querySelector('[data-action="actions-drop"]'));
+    var panel = document.querySelector('.actions');
+    if (!panel) return;
+
+    var toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className = 'panel-toggle';
+    toggle.textContent = 'Actions';
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.addEventListener('click', function () {
+        var open = panel.classList.toggle('is-open');
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    });
+
+    var main = document.querySelector('main');
+    if (!main) return;
+    // Insert at the top of main's parent (right after the header) so the
+    // ACTIONS toggle sits above any toggles other panels may have added.
+    var header = document.querySelector('header');
+    var anchor = header ? header.nextSibling : main.parentNode.firstChild;
+    main.parentNode.insertBefore(toggle, anchor);
+    if (window.matchMedia('(max-width: 1100px)').matches) {
+        main.parentNode.insertBefore(panel, toggle.nextSibling);
+    }
 });

assets/page/fab.js

@@ -1,18 +0,0 @@
-// Lift the floating action button above the footer when the footer is on
-// screen, so it never overlaps the request-time line or the companion icon.
-// Mirrors the TOC's header-aware top-offset behaviour in toc.js.
-(function () {
-    var fab = document.querySelector(".fab");
-    var footer = document.querySelector("footer");
-    if (!fab || !footer) return;
-
-    function updateBottom() {
-        var rect = footer.getBoundingClientRect();
-        var overlap = Math.max(0, window.innerHeight - rect.top);
-        fab.style.bottom = (overlap + 16) + "px";
-    }
-
-    window.addEventListener("scroll", updateBottom, { passive: true });
-    window.addEventListener("resize", updateBottom);
-    updateBottom();
-})();

assets/page/main.html

@@ -35,20 +35,19 @@
 {{end}}
 
 {{define "extras"}}
-{{if .SidebarWidget}}{{.SidebarWidget}}{{end}}
-{{if .CanEdit}}
-<script src="/_/page/fab.js" defer></script>
-<div class="fab dropdown">
-    <button class="btn btn-fab" data-action="actions-drop" title="Actions" aria-label="Actions">≡</button>
-    <div class="dropdown-menu align-right open-up">
-        <button class="btn dropdown-item" onclick="newPage()" title="New page (N)">NEW</button>
-        <a class="btn dropdown-item" href="?edit" title="Edit page (E)">EDIT</a>
-        <button class="btn dropdown-item" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button>
+<div class="right-rail">
+    {{if .CanEdit}}
+    <nav class="actions">
+        <div class="panel-header">ACTIONS</div>
+        <button class="btn" onclick="newPage()" title="New page (N)">NEW</button>
+        <a class="btn" href="?edit" title="Edit page (E)">EDIT</a>
+        <button class="btn" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button>
         {{if not .IsRoot}}
-        <button class="btn dropdown-item" onclick="movePage()" title="Move page (M)">MOVE</button>
-        <button class="btn dropdown-item danger" onclick="deletePage()" title="Delete page">DELETE</button>
+        <button class="btn" onclick="movePage()" title="Move page (M)">MOVE</button>
+        <button class="btn danger" onclick="deletePage()" title="Delete page">DELETE</button>
         {{end}}
-    </div>
+    </nav>
+    {{end}}
+    {{if .SidebarWidget}}{{.SidebarWidget}}{{end}}
 </div>
 {{end}}
-{{end}}

assets/page/toc.js

@@ -1,4 +1,4 @@
-(function () {
+document.addEventListener("DOMContentLoaded", function () {
   var content = document.querySelector("main");
   if (!content) return;
 
@@ -28,32 +28,24 @@
   });
   nav.appendChild(list);
 
-  var toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "panel-toggle";
-  toggle.textContent = "Contents";
-  toggle.setAttribute("aria-expanded", "false");
-  toggle.addEventListener("click", function () {
+  var rail = document.querySelector(".right-rail");
+  if (!rail) {
+    rail = document.createElement("div");
+    rail.className = "right-rail";
+    document.body.appendChild(rail);
+  }
+  rail.appendChild(nav);
+
+  var fab = document.createElement("button");
+  fab.type = "button";
+  fab.className = "btn btn-fab fab";
+  fab.title = "Contents";
+  fab.setAttribute("aria-label", "Contents");
+  fab.setAttribute("aria-expanded", "false");
+  fab.textContent = "≡";
+  fab.addEventListener("click", function () {
     var open = nav.classList.toggle("is-open");
-    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    fab.setAttribute("aria-expanded", open ? "true" : "false");
   });
-
-  var main = document.querySelector("main");
-  if (main) {
-    main.parentNode.insertBefore(toggle, main);
-    main.parentNode.insertBefore(nav, main);
-  } else {
-    document.body.appendChild(toggle);
-    document.body.appendChild(nav);
-  }
-
-  var pageHeader = document.querySelector("header");
-  function updateTop() {
-    if (!pageHeader || getComputedStyle(nav).position !== "fixed") return;
-    var rect = pageHeader.getBoundingClientRect();
-    nav.style.top = Math.max(8, rect.bottom + 8) + "px";
-  }
-  window.addEventListener("scroll", updateTop, { passive: true });
-  window.addEventListener("resize", updateTop);
-  updateTop();
-})();
+  document.body.appendChild(fab);
+});