feat: SHIFT-CMD-F zoek functionaliteit toegevoegd

webui/html/app.js

@@ -8,6 +8,7 @@ let state = {
       visibleItems: [],
       currentRowIndex: -1,
       selectionAnchorIndex: null,
+      pendingSelectionPath: null,
     },
     right: {
       currentPath: "/Volumes",
@@ -17,6 +18,7 @@ let state = {
       visibleItems: [],
       currentRowIndex: -1,
       selectionAnchorIndex: null,
+      pendingSelectionPath: null,
     },
   },
   activePane: "left",
@@ -46,6 +48,11 @@ let settingsState = {
   activeTab: "general",
   logsLoaded: false,
 };
+let searchState = {
+  pane: "left",
+  path: "/Volumes",
+  query: "",
+};
 const THEME_STORAGE_KEY = "webmanager-theme";
 
 function preferredTheme() {
@@ -199,6 +206,17 @@ function settingsElements() {
   };
 }
 
+function searchElements() {
+  return {
+    overlay: document.getElementById("search-modal"),
+    closeButton: document.getElementById("search-close-btn"),
+    context: document.getElementById("search-context"),
+    input: document.getElementById("search-input"),
+    error: document.getElementById("search-error"),
+    results: document.getElementById("search-results"),
+  };
+}
+
 async function apiRequest(method, url, body) {
   const options = { method, headers: {} };
   if (body !== undefined) {
@@ -724,6 +742,16 @@ async function loadBrowsePane(pane) {
       model.selectedItem = model.selectedItems.length > 0 ? model.selectedItems[model.selectedItems.length - 1] : null;
     }
 
+    if (model.pendingSelectionPath) {
+      const pendingIndex = visibleItems.findIndex((item) => !item.isParent && item.path === model.pendingSelectionPath);
+      if (pendingIndex >= 0) {
+        const pendingItem = visibleItems[pendingIndex];
+        model.currentRowIndex = pendingIndex;
+        setSingleSelectionAtIndex(pane, selectedEntryFromItem(pendingItem), pendingIndex);
+      }
+      model.pendingSelectionPath = null;
+    }
+
     renderPaneItems(pane);
     scrollCurrentRowIntoView(pane);
     setStatus(`Loaded ${pane}: ${data.path}`);
@@ -1382,6 +1410,96 @@ function closeVideoViewer() {
   video.player.load();
 }
 
+function isSearchOpen() {
+  return !searchElements().overlay.classList.contains("hidden");
+}
+
+function closeSearch() {
+  const elements = searchElements();
+  elements.overlay.classList.add("hidden");
+  elements.error.textContent = "";
+}
+
+function renderSearchResults(items) {
+  const elements = searchElements();
+  elements.results.innerHTML = "";
+  if (!Array.isArray(items) || items.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "popup-meta";
+    empty.textContent = "No matches found.";
+    elements.results.append(empty);
+    return;
+  }
+
+  for (const item of items) {
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "search-result";
+    row.onclick = () => activateSearchResult(item);
+
+    const name = document.createElement("div");
+    name.className = "search-result-name";
+    name.textContent = item.name;
+
+    const path = document.createElement("div");
+    path.className = "search-result-path";
+    path.textContent = item.parent_path;
+
+    const meta = document.createElement("div");
+    meta.className = "search-result-meta";
+    meta.textContent = `${item.type} · ${item.root}`;
+
+    row.append(name, path, meta);
+    elements.results.append(row);
+  }
+}
+
+function activateSearchResult(item) {
+  const pane = state.activePane;
+  closeSearch();
+  if (item.type === "directory") {
+    navigateTo(pane, item.path);
+    return;
+  }
+  paneState(pane).pendingSelectionPath = item.path;
+  navigateTo(pane, item.parent_path);
+}
+
+function openSearch() {
+  const pane = state.activePane;
+  const elements = searchElements();
+  searchState.pane = pane;
+  searchState.path = paneState(pane).currentPath;
+  searchState.query = "";
+  elements.context.textContent = `Searching under: ${searchState.path}`;
+  elements.input.value = "";
+  elements.error.textContent = "";
+  elements.results.innerHTML = "";
+  elements.overlay.classList.remove("hidden");
+  elements.input.focus();
+  elements.input.select();
+}
+
+async function submitSearch() {
+  const elements = searchElements();
+  const query = elements.input.value.trim();
+  searchState.query = query;
+  elements.error.textContent = "";
+  elements.results.innerHTML = "";
+  try {
+    const data = await apiRequest("GET", `/api/search?${new URLSearchParams({
+      path: searchState.path,
+      query,
+    }).toString()}`);
+    renderSearchResults(data.items);
+    if (data.truncated) {
+      elements.error.textContent = "Result limit reached. Showing first matches.";
+    }
+  } catch (err) {
+    elements.error.textContent = err.message;
+  }
+}
+
 function setSettingsTab(tab) {
   const elements = settingsElements();
   settingsState.activeTab = tab === "logs" ? "logs" : "general";
@@ -1686,6 +1804,19 @@ function clearSelectionForActivePane() {
 }
 
 function handleKeyboardShortcuts(event) {
+  if (isSearchOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeSearch();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitSearch();
+      return;
+    }
+    return;
+  }
   if (isRenamePopupOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1760,6 +1891,13 @@ function handleKeyboardShortcuts(event) {
     return;
   }
 
+  const isSearchShortcut = event.key.toLowerCase() === "f" && event.shiftKey && !event.altKey && (event.metaKey || event.ctrlKey);
+  if (isSearchShortcut) {
+    event.preventDefault();
+    openSearch();
+    return;
+  }
+
   if (actionShortcutHandled(event)) {
     event.preventDefault();
     return;
@@ -1893,6 +2031,14 @@ function setupEvents() {
     }
   };
 
+  const search = searchElements();
+  search.closeButton.onclick = closeSearch;
+  search.overlay.onclick = (event) => {
+    if (event.target === search.overlay) {
+      closeSearch();
+    }
+  };
+
   const wildcard = wildcardPopupElements();
   wildcard.cancelButton.onclick = closeWildcardPopup;
   wildcard.applyButton.onclick = submitWildcardPopup;