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;

webui/html/index.html

@@ -111,6 +111,15 @@
     </div>
   </div>
 
+  <div id="info-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="info-title">
+    <div class="popup-card info-card">
+      <button id="info-close-btn" class="viewer-close" type="button" aria-label="Close info">X</button>
+      <h3 id="info-title">Info</h3>
+      <div id="info-error" class="error"></div>
+      <div id="info-grid" class="info-grid"></div>
+    </div>
+  </div>
+
   <div id="wildcard-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="wildcard-popup-title">
     <div class="popup-card">
       <h3 id="wildcard-popup-title">Wildcard Select</h3>

webui/html/style.css

@@ -528,6 +528,29 @@ button:disabled {
   width: min(680px, calc(100vw - 32px));
 }
 
+.info-card {
+  width: min(620px, calc(100vw - 32px));
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
+  gap: 10px 14px;
+  margin-top: 12px;
+}
+
+.info-label {
+  color: var(--color-muted);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.info-value {
+  color: var(--color-text);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .search-input {
   width: 100%;
 }