From e43d49540d6fa69c9bb901ece3621830795fc46b Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Fri, 13 Mar 2026 12:26:17 +0100
Subject: [PATCH] feat: selected items

---
 webui/html/app.js     | 27 +++++++++++++++++++--------
 webui/html/base.css   | 16 ++++++++++++++++
 webui/html/index.html | 10 ++++++++--
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/webui/html/app.js b/webui/html/app.js
index 6d9e6be..c556e15 100644
--- a/webui/html/app.js
+++ b/webui/html/app.js
@@ -913,19 +913,30 @@ function scrollCurrentRowIntoView(pane) {
 function updatePaneFocusLine(pane) {
   const model = paneState(pane);
   const focusLine = document.getElementById(`${pane}-focus-line`);
-  if (!focusLine) {
+  const nameEl = document.getElementById(`${pane}-focus-name`);
+  const selectedEl = document.getElementById(`${pane}-focus-selected`);
+  if (!focusLine || !nameEl || !selectedEl) {
     return;
   }
+  let label = "—";
   if (!Array.isArray(model.visibleItems) || model.currentRowIndex < 0 || model.currentRowIndex >= model.visibleItems.length) {
-    focusLine.textContent = "—";
-    return;
+    label = "—";
+  } else {
+    const item = model.visibleItems[model.currentRowIndex];
+    if (item) {
+      label = item.isParent ? "../" : (item.name || "—");
+    }
   }
-  const item = model.visibleItems[model.currentRowIndex];
-  if (!item) {
-    focusLine.textContent = "—";
-    return;
+  nameEl.textContent = label;
+
+  const selectedCount = Array.isArray(model.selectedItems) ? model.selectedItems.length : 0;
+  if (selectedCount > 0) {
+    selectedEl.textContent = `Selected: ${selectedCount} ${selectedCount === 1 ? "item" : "items"}`;
+    selectedEl.classList.remove("hidden");
+  } else {
+    selectedEl.textContent = "";
+    selectedEl.classList.add("hidden");
   }
-  focusLine.textContent = item.isParent ? "../" : (item.name || "—");
 }
 
 function renderPaneItems(pane) {
diff --git a/webui/html/base.css b/webui/html/base.css
index e37dd50..b2d1a2a 100644
--- a/webui/html/base.css
+++ b/webui/html/base.css
@@ -137,11 +137,27 @@ h1 {
   color: var(--color-text-muted);
   font-size: 12px;
   line-height: 1.25;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.pane-focus-name {
+  flex: 1 1 auto;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.pane-focus-selected {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  color: var(--color-text-secondary, var(--color-text-primary));
+  opacity: 0.9;
+}
+
 .toolbar {
   display: flex;
   flex-wrap: wrap;
diff --git a/webui/html/index.html b/webui/html/index.html
index 99508f8..1e6cfc4 100644
--- a/webui/html/index.html
+++ b/webui/html/index.html
@@ -49,7 +49,10 @@
             <ul id="left-items" class="list"></ul>
           </div>
         </div>
-        <div id="left-focus-line" class="pane-focus-line" aria-live="polite">—</div>
+        <div id="left-focus-line" class="pane-focus-line" aria-live="polite">
+          <span id="left-focus-name" class="pane-focus-name">—</span>
+          <span id="left-focus-selected" class="pane-focus-selected hidden"></span>
+        </div>
       </section>
 
       <section class="panel pane" id="right-pane" data-pane="right">
@@ -73,7 +76,10 @@
             <ul id="right-items" class="list"></ul>
           </div>
         </div>
-        <div id="right-focus-line" class="pane-focus-line" aria-live="polite">—</div>
+        <div id="right-focus-line" class="pane-focus-line" aria-live="polite">
+          <span id="right-focus-name" class="pane-focus-name">—</span>
+          <span id="right-focus-selected" class="pane-focus-selected hidden"></span>
+        </div>
       </section>
     </main>