feat: checkbox verwijderd

webui/backend/tests/golden/test_ui_smoke_golden.py

@@ -121,6 +121,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('"/api/settings"', app_js)
         self.assertIn('`/api/files/thumbnail?', app_js)
         self.assertIn('function createMediaSlot(entry)', app_js)
+        self.assertNotIn("select-marker", app_js)
         self.assertIn('function openSearch()', app_js)
         self.assertIn('async function submitSearch()', app_js)
         self.assertIn('async function openInfo()', app_js)
@@ -160,6 +161,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('.entry-media-slot', style_css)
         self.assertIn('.entry-media-icon.folder', style_css)
         self.assertIn('.entry-media-icon.file', style_css)
+        self.assertNotIn('.select-marker', style_css)
 
         app_js_url = app.url_path_for("ui", path="/app.js")
         style_css_url = app.url_path_for("ui", path="/style.css")

webui/html/app.js

@@ -587,18 +587,6 @@ function createBrowseItem(pane, entry, kind) {
     loadBrowsePane(pane);
   };
 
-  const marker = document.createElement("input");
-  marker.type = "checkbox";
-  marker.className = "select-marker";
-  marker.checked = paths.includes(entry.path);
-  marker.onclick = (ev) => {
-    ev.stopPropagation();
-    setActivePane(pane);
-    toggleSelection(pane, { path: entry.path, name: entry.name, kind });
-    loadBrowsePane(pane);
-  };
-  li.append(marker);
-
   const name = document.createElement("span");
   name.className = `entry-name ${kind === "directory" ? "entry-dir" : "entry-file"}`;
   name.append(createMediaSlot({ ...entry, kind }));
@@ -682,7 +670,6 @@ function renderPaneItems(pane) {
         clearSelectionAnchor(pane);
         renderPaneItems(pane);
       };
-      up.append(document.createElement("span"));
       const upNameCell = document.createElement("span");
       upNameCell.className = "entry-name entry-dir";
       const upMedia = document.createElement("span");
@@ -723,16 +710,6 @@ function renderPaneItems(pane) {
       setSingleSelectionAtIndex(pane, { path: entry.path, name: entry.name, kind: entry.kind }, index);
       renderPaneItems(pane);
     };
-    const checkbox = row.querySelector(".select-marker");
-    if (checkbox) {
-      checkbox.onclick = (ev) => {
-        ev.stopPropagation();
-        setActivePane(pane);
-        model.currentRowIndex = index;
-        toggleSelectionAtIndex(pane, { path: entry.path, name: entry.name, kind: entry.kind }, index);
-        renderPaneItems(pane);
-      };
-    }
     const dirLink = row.querySelector(".dir-link");
     if (dirLink) {
       dirLink.onclick = (ev) => {

webui/html/style.css

@@ -282,7 +282,7 @@ button:disabled {
 
 .list-grid-header {
   display: grid;
-  grid-template-columns: 14px minmax(0, 1fr) 88px 138px;
+  grid-template-columns: minmax(0, 1fr) 88px 138px;
   gap: 6px;
   padding: 4px 6px 5px 6px;
   border-bottom: 1px solid var(--color-border);
@@ -304,10 +304,11 @@ button:disabled {
   border-top: 1px solid var(--color-border);
   padding: 6px 6px 5px 6px;
   display: grid;
-  grid-template-columns: 14px minmax(0, 1fr) 88px 138px;
+  grid-template-columns: minmax(0, 1fr) 88px 138px;
   gap: 6px;
   align-items: center;
   border-radius: var(--radius-sm);
+  transition: background 100ms ease, box-shadow 100ms ease;
 }
 
 .list li.selectable {
@@ -418,6 +419,7 @@ button:disabled {
 
 .list li.is-selected {
   background: var(--color-selection-bg);
+  box-shadow: inset 0 0 0 1px var(--color-selection-border);
 }
 
 .list li.is-current-row {
@@ -430,26 +432,19 @@ button:disabled {
 
 .list li.is-current-row.is-selected {
   background: var(--color-selection-bg);
-  box-shadow: inset 0 0 0 1px var(--color-current-row-border);
+  box-shadow:
+    inset 0 0 0 1px var(--color-current-row-border),
+    inset 3px 0 0 var(--color-active-pane-border);
 }
 
-.select-marker {
-  appearance: none;
-  width: 10px;
-  min-width: 10px;
-  height: 10px;
-  border: 1px solid var(--color-border);
-  border-radius: 2px;
-  display: inline-block;
-  margin: 0;
-  cursor: pointer;
-  background: var(--color-surface);
+.pane:not(.active-pane) .list li.is-selected {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-selection-border) 60%, transparent);
 }
 
-.list li.is-selected .select-marker,
-.select-marker:checked {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
+.pane:not(.active-pane) .list li.is-current-row.is-selected {
+  box-shadow:
+    inset 0 0 0 1px var(--color-current-row-border),
+    inset 2px 0 0 color-mix(in srgb, var(--color-active-pane-border) 55%, transparent);
 }
 
 .entry-name {