navigatie aangepast

webui/html/app.js

@@ -683,6 +683,17 @@ function currentParentPath(path) {
   return segments.slice(0, -1).join("/");
 }
 
+function navigateToParent(pane) {
+  const model = paneState(pane);
+  const childPath = model.currentPath;
+  const parentPath = currentParentPath(childPath);
+  if (!parentPath) {
+    return;
+  }
+  model.pendingSelectionPath = childPath;
+  navigateTo(pane, parentPath);
+}
+
 function baseName(path) {
   const index = path.lastIndexOf("/");
   return index >= 0 ? path.slice(index + 1) : path;
@@ -890,7 +901,7 @@ function renderPaneItems(pane) {
       upName.onclick = (ev) => {
         ev.stopPropagation();
         setActivePane(pane);
-        navigateTo(pane, entry.path);
+        navigateToParent(pane);
       };
       upName.classList.add("entry-label");
       upNameCell.append(upName);
@@ -2440,6 +2451,11 @@ function handleKeyboardShortcuts(event) {
     setActivePane(otherPane(state.activePane));
     return;
   }
+  if (event.key === "Backspace") {
+    event.preventDefault();
+    navigateToParent(state.activePane);
+    return;
+  }
   if (event.key === "ArrowUp") {
     if (event.shiftKey) {
       event.preventDefault();

webui/html/base.css

@@ -109,6 +109,7 @@ h1 {
   border-top: 1px solid var(--color-border);
   padding-top: 5px;
   position: relative;
+  background: var(--color-surface);
 }
 
 .toolbar {
@@ -228,7 +229,7 @@ button:disabled {
   gap: 6px;
   padding: 5px 6px 6px 6px;
   border-bottom: 1px solid var(--color-border);
-  margin-bottom: 3px;
+  margin-bottom: 0;
   background: var(--color-list-header-bg);
   border-radius: var(--radius-sm);
   color: var(--color-text-muted);
@@ -237,8 +238,12 @@ button:disabled {
   letter-spacing: 0.05em;
   position: sticky;
   top: 0;
-  z-index: 2;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  z-index: 10;
+  isolation: isolate;
+  background-clip: padding-box;
+  box-shadow:
+    0 1px 0 rgba(0, 0, 0, 0.04),
+    0 8px 10px -10px rgba(0, 0, 0, 0.45);
 }
 
 .col-name {