feat: F1 en F2 en Log UI toegevoegd

webui/html/app.js

@@ -38,6 +38,10 @@ let batchMoveState = {
   destinationBase: "",
   count: 0,
 };
+let settingsState = {
+  activeTab: "general",
+  logsLoaded: false,
+};
 const THEME_STORAGE_KEY = "webmanager-theme";
 
 function preferredTheme() {
@@ -154,6 +158,19 @@ function batchMoveElements() {
   };
 }
 
+function settingsElements() {
+  return {
+    overlay: document.getElementById("settings-modal"),
+    closeButton: document.getElementById("settings-close-btn"),
+    generalTab: document.getElementById("settings-general-tab"),
+    logsTab: document.getElementById("settings-logs-tab"),
+    generalPanel: document.getElementById("settings-general-panel"),
+    logsPanel: document.getElementById("settings-logs-panel"),
+    logsList: document.getElementById("settings-logs-list"),
+    logsError: document.getElementById("settings-logs-error"),
+  };
+}
+
 async function apiRequest(method, url, body) {
   const options = { method, headers: {} };
   if (body !== undefined) {
@@ -899,6 +916,12 @@ function actionShortcutHandled(event) {
   const noModifiers = !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
 
   if (noModifiers) {
+    if (event.key === "F1") {
+      return triggerActionButton("settings-btn");
+    }
+    if (event.key === "F2") {
+      return false;
+    }
     if (event.key === "F3") {
       return triggerActionButton("view-btn");
     }
@@ -956,6 +979,10 @@ function wildcardPopupElements() {
   };
 }
 
+function isSettingsOpen() {
+  return !settingsElements().overlay.classList.contains("hidden");
+}
+
 function isWildcardPopupOpen() {
   return !wildcardPopupElements().overlay.classList.contains("hidden");
 }
@@ -1234,6 +1261,92 @@ function closeViewer() {
   viewer.content.textContent = "";
 }
 
+function setSettingsTab(tab) {
+  const elements = settingsElements();
+  settingsState.activeTab = tab === "logs" ? "logs" : "general";
+  const isGeneral = settingsState.activeTab === "general";
+  elements.generalTab.classList.toggle("is-active", isGeneral);
+  elements.generalTab.setAttribute("aria-selected", isGeneral ? "true" : "false");
+  elements.logsTab.classList.toggle("is-active", !isGeneral);
+  elements.logsTab.setAttribute("aria-selected", !isGeneral ? "true" : "false");
+  elements.generalPanel.classList.toggle("hidden", !isGeneral);
+  elements.logsPanel.classList.toggle("hidden", isGeneral);
+}
+
+function formatHistoryLine(item) {
+  const timestamp = item.finished_at || item.created_at || "";
+  const when = formatModified(timestamp);
+  const primaryPath = item.path || [item.source, item.destination].filter(Boolean).join(" -> ");
+  return {
+    title: `${item.operation} · ${item.status}`,
+    path: primaryPath || "-",
+    meta: when,
+    error: item.status === "failed" ? (item.error_message || item.error_code || "") : "",
+  };
+}
+
+function renderHistoryItems(items) {
+  const elements = settingsElements();
+  elements.logsList.innerHTML = "";
+  if (!Array.isArray(items) || items.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "popup-meta";
+    empty.textContent = "No history entries yet.";
+    elements.logsList.append(empty);
+    return;
+  }
+  for (const item of items) {
+    const line = formatHistoryLine(item);
+    const row = document.createElement("div");
+    row.className = `settings-log-item status-${item.status}`;
+    const title = document.createElement("div");
+    title.className = "settings-log-title";
+    title.textContent = line.title;
+    const path = document.createElement("div");
+    path.className = "settings-log-path";
+    path.textContent = line.path;
+    const meta = document.createElement("div");
+    meta.className = "settings-log-meta";
+    meta.textContent = line.meta;
+    row.append(title, path, meta);
+    if (line.error) {
+      const error = document.createElement("div");
+      error.className = "settings-log-error";
+      error.textContent = line.error;
+      row.append(error);
+    }
+    elements.logsList.append(row);
+  }
+}
+
+async function loadHistoryForSettings() {
+  const elements = settingsElements();
+  elements.logsError.textContent = "";
+  elements.logsList.innerHTML = '<div class="popup-meta">Loading...</div>';
+  try {
+    const data = await apiRequest("GET", "/api/history");
+    renderHistoryItems(data.items || []);
+    settingsState.logsLoaded = true;
+  } catch (err) {
+    elements.logsList.innerHTML = "";
+    elements.logsError.textContent = err.message;
+  }
+}
+
+function closeSettings() {
+  settingsElements().overlay.classList.add("hidden");
+}
+
+async function openSettings(tab = "general") {
+  const elements = settingsElements();
+  elements.overlay.classList.remove("hidden");
+  setSettingsTab(tab);
+  if (settingsState.activeTab === "logs") {
+    await loadHistoryForSettings();
+  }
+  (settingsState.activeTab === "logs" ? elements.logsTab : elements.generalTab).focus();
+}
+
 function editorIsDirty() {
   return editorElements().content.value !== editorState.originalContent;
 }
@@ -1419,6 +1532,14 @@ function clearSelectionForActivePane() {
 }
 
 function handleKeyboardShortcuts(event) {
+  if (isSettingsOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeSettings();
+      return;
+    }
+    return;
+  }
   if (isBatchMovePopupOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1555,6 +1676,7 @@ function setupEvents() {
   setupPaneEvents("right");
   document.addEventListener("keydown", handleKeyboardShortcuts);
   document.getElementById("theme-toggle").onclick = toggleTheme;
+  document.getElementById("settings-btn").onclick = () => openSettings("general");
   document.getElementById("view-btn").onclick = openViewer;
   document.getElementById("edit-btn").onclick = openEditor;
   document.getElementById("rename-btn").onclick = renameSelected;
@@ -1563,6 +1685,19 @@ function setupEvents() {
   document.getElementById("move-btn").onclick = openF6Flow;
   document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
 
+  const settings = settingsElements();
+  settings.closeButton.onclick = closeSettings;
+  settings.generalTab.onclick = () => setSettingsTab("general");
+  settings.logsTab.onclick = async () => {
+    setSettingsTab("logs");
+    await loadHistoryForSettings();
+  };
+  settings.overlay.onclick = (event) => {
+    if (event.target === settings.overlay) {
+      closeSettings();
+    }
+  };
+
   const wildcard = wildcardPopupElements();
   wildcard.cancelButton.onclick = closeWildcardPopup;
   wildcard.applyButton.onclick = submitWildcardPopup;