feat: polish

webui/html/app.js

@@ -313,7 +313,6 @@ function createButton(text, onClick) {
 
 function setActivePane(pane) {
   state.activePane = pane;
-  document.getElementById("active-pane-label").textContent = pane;
   document.getElementById("left-pane").classList.toggle("active-pane", pane === "left");
   document.getElementById("right-pane").classList.toggle("active-pane", pane === "right");
   updateActionButtons();
@@ -985,7 +984,6 @@ async function loadBrowsePane(pane) {
     });
     const data = await apiRequest("GET", `/api/browse?${query.toString()}`);
     model.currentPath = data.path;
-    document.getElementById(`${pane}-current-path`).textContent = data.path;
     renderBreadcrumbs(pane, data.path);
 
     const visibleItems = [];

webui/html/base.css

@@ -108,6 +108,7 @@ h1 {
   overflow-y: auto;
   border-top: 1px solid var(--color-border);
   padding-top: 5px;
+  position: relative;
 }
 
 .toolbar {
@@ -123,16 +124,7 @@ h1 {
 }
 
 .pane-topbar {
-  justify-content: space-between;
-}
-
-.pane-title {
-  min-width: 42px;
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  justify-content: flex-end;
 }
 
 .checkbox {
@@ -207,7 +199,7 @@ button:disabled {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
   color: var(--color-text-muted);
   font-size: 12px;
 }
@@ -234,7 +226,7 @@ button:disabled {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 88px 138px;
   gap: 6px;
-  padding: 4px 6px 5px 6px;
+  padding: 5px 6px 6px 6px;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 3px;
   background: var(--color-list-header-bg);
@@ -243,6 +235,14 @@ button:disabled {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+}
+
+.col-name {
+  padding-left: 0;
 }
 
 .col-size,
@@ -485,15 +485,8 @@ button:disabled {
 #footer-bar {
   border-top: 1px solid var(--color-border);
   background: var(--color-surface-elevated);
-  padding: 5px 12px 4px 12px;
+  padding: 6px 12px 5px 12px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-}
-
-#function-bar-meta {
-  margin-bottom: 0;
   justify-content: center;
 }
 

webui/html/index.html

@@ -31,17 +31,14 @@
       <section class="panel pane" id="left-pane" data-pane="left">
         <div class="pane-header">
           <div class="toolbar compact-toolbar pane-topbar">
-            <h2 class="pane-title">Left</h2>
             <label class="checkbox"><input id="left-hidden-toggle" type="checkbox">Hidden</label>
           </div>
-          <div class="pathline compact-line">C:<code id="left-current-path"></code></div>
           <nav id="left-breadcrumbs" class="breadcrumbs" aria-label="Left breadcrumb"></nav>
           <div id="left-browse-error" class="error"></div>
         </div>
 
         <div class="pane-content">
           <div class="list-grid-header">
-            <span class="col-sel"></span>
             <span class="col-name">Name</span>
             <span class="col-size">Size</span>
             <span class="col-modified">Modified</span>
@@ -53,17 +50,14 @@
       <section class="panel pane" id="right-pane" data-pane="right">
         <div class="pane-header">
           <div class="toolbar compact-toolbar pane-topbar">
-            <h2 class="pane-title">Right</h2>
             <label class="checkbox"><input id="right-hidden-toggle" type="checkbox">Hidden</label>
           </div>
-          <div class="pathline compact-line">C:<code id="right-current-path"></code></div>
           <nav id="right-breadcrumbs" class="breadcrumbs" aria-label="Right breadcrumb"></nav>
           <div id="right-browse-error" class="error"></div>
         </div>
 
         <div class="pane-content">
           <div class="list-grid-header">
-            <span class="col-sel"></span>
             <span class="col-name">Name</span>
             <span class="col-size">Size</span>
             <span class="col-modified">Modified</span>
@@ -74,7 +68,6 @@
     </main>
 
     <section id="footer-bar">
-      <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="settings-btn" type="button"><span class="shortcut-hint">F1</span><span>Settings</span></button>
         <button id="rename-btn" type="button" disabled><span class="shortcut-hint">F2</span><span>Rename</span></button>