feat: CMD-ENTER file info toegevoegd

webui/html/app.js

@@ -217,6 +217,15 @@ function searchElements() {
   };
 }
 
+function infoElements() {
+  return {
+    overlay: document.getElementById("info-modal"),
+    closeButton: document.getElementById("info-close-btn"),
+    error: document.getElementById("info-error"),
+    grid: document.getElementById("info-grid"),
+  };
+}
+
 async function apiRequest(method, url, body) {
   const options = { method, headers: {} };
   if (body !== undefined) {
@@ -1410,6 +1419,55 @@ function closeVideoViewer() {
   video.player.load();
 }
 
+function isInfoOpen() {
+  return !infoElements().overlay.classList.contains("hidden");
+}
+
+function closeInfo() {
+  const elements = infoElements();
+  elements.overlay.classList.add("hidden");
+  elements.error.textContent = "";
+  elements.grid.innerHTML = "";
+}
+
+function renderInfoField(label, value) {
+  const grid = infoElements().grid;
+  const labelNode = document.createElement("div");
+  labelNode.className = "info-label";
+  labelNode.textContent = label;
+  const valueNode = document.createElement("div");
+  valueNode.className = "info-value";
+  valueNode.textContent = value == null || value === "" ? "-" : String(value);
+  grid.append(labelNode, valueNode);
+}
+
+async function openInfo() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1) {
+    return;
+  }
+  const selected = selectedItems[0];
+  const elements = infoElements();
+  elements.overlay.classList.remove("hidden");
+  elements.error.textContent = "";
+  elements.grid.innerHTML = "";
+  try {
+    const data = await apiRequest("GET", `/api/files/info?${new URLSearchParams({ path: selected.path }).toString()}`);
+    renderInfoField("Name", data.name);
+    renderInfoField("Path", data.path);
+    renderInfoField("Type", data.type);
+    renderInfoField("Size", data.size);
+    renderInfoField("Modified", formatModified(data.modified));
+    renderInfoField("Root", data.root);
+    renderInfoField("Extension", data.extension);
+    renderInfoField("Content type", data.content_type);
+    renderInfoField("Owner", data.owner);
+    renderInfoField("Group", data.group);
+  } catch (err) {
+    elements.error.textContent = err.message;
+  }
+}
+
 function isSearchOpen() {
   return !searchElements().overlay.classList.contains("hidden");
 }
@@ -1804,6 +1862,13 @@ function clearSelectionForActivePane() {
 }
 
 function handleKeyboardShortcuts(event) {
+  if (isInfoOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeInfo();
+    }
+    return;
+  }
   if (isSearchOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1891,6 +1956,13 @@ function handleKeyboardShortcuts(event) {
     return;
   }
 
+  const isInfoShortcut = event.key === "Enter" && !event.shiftKey && !event.altKey && (event.metaKey || event.ctrlKey);
+  if (isInfoShortcut) {
+    event.preventDefault();
+    openInfo();
+    return;
+  }
+
   const isSearchShortcut = event.key.toLowerCase() === "f" && event.shiftKey && !event.altKey && (event.metaKey || event.ctrlKey);
   if (isSearchShortcut) {
     event.preventDefault();
@@ -2039,6 +2111,14 @@ function setupEvents() {
     }
   };
 
+  const info = infoElements();
+  info.closeButton.onclick = closeInfo;
+  info.overlay.onclick = (event) => {
+    if (event.target === info.overlay) {
+      closeInfo();
+    }
+  };
+
   const wildcard = wildcardPopupElements();
   wildcard.cancelButton.onclick = closeWildcardPopup;
   wildcard.applyButton.onclick = submitWildcardPopup;