feat: menu layout

webui/backend/tests/golden/test_ui_smoke_golden.py

@@ -32,9 +32,14 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('id="right-pane"', body)
         self.assertIn('id="left-items"', body)
         self.assertIn('id="right-items"', body)
+        self.assertIn('id="function-bar"', body)
+        self.assertIn('id="view-btn"', body)
+        self.assertIn('id="edit-btn"', body)
         self.assertIn('id="mkdir-btn"', body)
         self.assertIn('id="copy-btn"', body)
         self.assertIn('id="move-btn"', body)
+        self.assertIn('id="rename-btn"', body)
+        self.assertIn('id="delete-btn"', body)
         self.assertIn('id="left-breadcrumbs"', body)
         self.assertIn('id="right-breadcrumbs"', body)
         self.assertIn('id="wildcard-popup"', body)
@@ -42,6 +47,18 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertNotIn('id="bookmarks-panel"', body)
         self.assertNotIn('id="tasks-panel"', body)
 
+        ordered_ids = [
+            'id="view-btn"',
+            'id="edit-btn"',
+            'id="copy-btn"',
+            'id="move-btn"',
+            'id="rename-btn"',
+            'id="mkdir-btn"',
+            'id="delete-btn"',
+        ]
+        positions = [body.index(marker) for marker in ordered_ids]
+        self.assertEqual(positions, sorted(positions))
+
     def test_ui_static_assets_are_present_and_mapped(self) -> None:
         mount = self._ui_mount()
         static_root = Path(mount.app.directory)

webui/html/app.js

@@ -856,7 +856,6 @@ function setupEvents() {
   document.getElementById("copy-btn").onclick = startCopySelected;
   document.getElementById("move-btn").onclick = startMoveSelected;
   document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
-  document.getElementById("add-bookmark-btn").onclick = addBookmark;
 
   const wildcard = wildcardPopupElements();
   wildcard.cancelButton.onclick = closeWildcardPopup;

webui/html/index.html

@@ -60,14 +60,15 @@
     </main>
 
     <section id="footer-bar">
-      <div class="toolbar compact-toolbar">
-        <div class="pathline compact-line">A:<code id="active-pane-label">left</code></div>
-        <button id="rename-btn" disabled>Rename</button>
-        <button id="delete-btn" disabled>Delete</button>
-        <button id="copy-btn" disabled>Copy</button>
-        <button id="move-btn" disabled>Move</button>
-        <button id="mkdir-btn">Mkdir</button>
-        <button id="add-bookmark-btn">Add bookmark</button>
+      <div id="function-bar-meta" class="pathline compact-line">Active:<code id="active-pane-label">left</code></div>
+      <div id="function-bar" class="toolbar compact-toolbar">
+        <button id="view-btn" type="button" disabled>View</button>
+        <button id="edit-btn" type="button" disabled>Edit</button>
+        <button id="copy-btn" type="button" disabled>Copy</button>
+        <button id="move-btn" type="button" disabled>Move</button>
+        <button id="rename-btn" type="button" disabled>Rename</button>
+        <button id="mkdir-btn" type="button">MKdir</button>
+        <button id="delete-btn" type="button" disabled>Delete</button>
       </div>
       <div id="actions-error" class="error"></div>
     </section>

webui/html/style.css

@@ -295,7 +295,29 @@ button:disabled {
 #footer-bar {
   border-top: 1px solid var(--border);
   background: var(--panel);
-  padding: 4px 10px 2px 10px;
+  padding: 4px 10px 3px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+
+#function-bar-meta {
+  margin-bottom: 0;
+  justify-content: center;
+}
+
+#function-bar {
+  margin-bottom: 0;
+  justify-content: center;
+  gap: 5px;
+  width: 100%;
+  max-width: 760px;
+}
+
+#function-bar button {
+  min-width: 72px;
+  padding: 3px 8px;
 }
 
 .popup-overlay {