From c236a6bfb435299ccb6d6d8bd069c2e7fc51e8b9 Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Mon, 9 Mar 2026 10:48:03 +0100
Subject: [PATCH] feat (ui): kolommen drie en vier netter gemaakt (hover)

---
 app/static/app.js     | 26 ++++++++++++++++++++++++--
 app/static/styles.css | 21 +++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/static/app.js b/app/static/app.js
index c581308..2951e71 100644
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -112,6 +112,23 @@
     if (btn) btn.disabled = busy;
   }
 
+  function compactEpisodeText(episode) {
+    const season = Number(episode.season_number);
+    const number = Number(episode.episode_number);
+    const title = (episode.title || "").toString().trim() || "(untitled)";
+    if (Number.isFinite(season) && Number.isFinite(number)) {
+      return `S${season.toString().padStart(2, "0")}E${number.toString().padStart(2, "0")} - ${title}`;
+    }
+    return title;
+  }
+
+  function basename(pathText) {
+    const text = (pathText || "").toString();
+    const normalized = text.replace(/\\/g, "/");
+    const idx = normalized.lastIndexOf("/");
+    return idx >= 0 ? normalized.slice(idx + 1) : normalized;
+  }
+
   function fallbackText(value) {
     const text = (value || "").toString().trim();
     return text || "-";
@@ -208,7 +225,9 @@
       badge.className = "badge";
       badge.textContent = `#${idx + 1}`;
       left.appendChild(badge);
-      left.appendChild(document.createTextNode(item.episode.label || item.episode.title || "(episode)"));
+      const compactText = compactEpisodeText(item.episode || {});
+      left.appendChild(document.createTextNode(compactText));
+      left.title = (item.episode && (item.episode.label || compactText)) || compactText;
 
       const right = document.createElement("div");
       right.appendChild(makeBtn("Select", () => selectPair(idx), true));
@@ -232,7 +251,10 @@
       badge.className = "badge";
       badge.textContent = `#${idx + 1}`;
       left.appendChild(badge);
-      left.appendChild(document.createTextNode(item.file.path || item.file.name || "(file)"));
+      const fullPath = (item.file && (item.file.path || item.file.name)) || "(file)";
+      const fileName = basename(fullPath) || "(file)";
+      left.appendChild(document.createTextNode(fileName));
+      left.title = `Name: ${fileName}\nPath: ${fullPath}`;
 
       const right = document.createElement("div");
       right.appendChild(makeBtn("Select", () => selectPair(idx), true));
diff --git a/app/static/styles.css b/app/static/styles.css
index 6f0fb28..da3ece0 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -287,6 +287,27 @@ button.secondary {
   border-bottom: none;
 }
 
+#selectedEpisodesList li,
+#selectedFilesList li {
+  height: 38px;
+  min-height: 38px;
+  align-items: center;
+}
+
+#selectedEpisodesList li > span,
+#selectedFilesList li > span {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#selectedEpisodesList li > div,
+#selectedFilesList li > div {
+  flex-shrink: 0;
+}
+
 .muted {
   color: #475569;
   font-size: 12px;