ui aanpassing, debug scherm weg

app/static/app.js

@@ -39,7 +39,6 @@
     fileDownBtn: document.getElementById("fileDownBtn"),
     fileRemoveBtn: document.getElementById("fileRemoveBtn"),
     selectedFilesList: document.getElementById("selectedFilesList"),
-    filenamePreviewBtn: document.getElementById("filenamePreviewBtn"),
     renameExecuteBtn: document.getElementById("renameExecuteBtn"),
     fileModal: document.getElementById("fileModal"),
     fileModalTitle: document.getElementById("fileModalTitle"),
@@ -85,7 +84,12 @@
   }
 
   function out(label, payload) {
-    el.outputBox.textContent = `${label}\n${JSON.stringify(payload, null, 2)}`;
+    const text = `${label}\n${JSON.stringify(payload, null, 2)}`;
+    if (el.outputBox) {
+      el.outputBox.textContent = text;
+      return;
+    }
+    console.log(text);
   }
 
   function makeBtn(label, handler, secondary) {
@@ -478,7 +482,6 @@
     el.fileDownBtn.addEventListener("click", () => withHandler(() => reorderSelectedFiles(1), el.fileDownBtn));
     el.fileRemoveBtn.addEventListener("click", () => withHandler(removeSelectedFile, el.fileRemoveBtn));
 
-    el.filenamePreviewBtn.addEventListener("click", () => withHandler(async () => out("Filename preview", await api(q("/api/session/filename-preview"))), el.filenamePreviewBtn));
     el.renameExecuteBtn.addEventListener("click", () => withHandler(executeRename, el.renameExecuteBtn));
 
     el.closeFileModalBtn.addEventListener("click", closeFileModal);

app/static/styles.css

@@ -51,6 +51,18 @@ body {
   font-size: 16px;
 }
 
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.panel-head h2 {
+  margin: 0;
+}
+
 .panel h3 {
   margin: 10px 0 6px;
   font-size: 14px;
@@ -139,9 +151,10 @@ button.secondary {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
+  min-height: 38px;
 }
 
-.advanced-row {
+.panel-actions {
   margin-top: 8px;
   justify-content: flex-end;
 }
@@ -189,8 +202,10 @@ button.secondary {
 }
 
 #panelSelectedEpisodes .panel-footer button:first-child,
+#panelSelectedEpisodes .panel-footer button:last-child,
+#panelSelectedFiles .panel-footer button:first-child,
 #panelSelectedFiles .panel-footer button:last-child,
-#panelSelectedFiles .advanced-row button:last-child {
+#panelSelectedFiles .panel-actions button:last-child {
   border-color: #0b3a6e;
   background: #0b3a6e;
   color: #ffffff;
@@ -226,19 +241,8 @@ button.secondary {
   font-size: 12px;
 }
 
-.debug-box {
-  margin: 0 12px 12px;
-  background: #ffffff;
-  border: 1px solid #d7dee9;
-  border-radius: 8px;
-  padding: 8px;
-}
-
-.debug-box > summary {
-  cursor: pointer;
-  user-select: none;
-  color: #334155;
-  font-size: 13px;
+.debug-page {
+  margin: 12px;
 }
 
 @media (max-width: 1600px) {