feat (ui): toevoegen van banner en series info

app/static/app.js

@@ -22,6 +22,13 @@
     searchBtn: document.getElementById("searchBtn"),
     searchResults: document.getElementById("searchResults"),
     seriesInfo: document.getElementById("seriesInfo"),
+    seriesDetails: document.getElementById("seriesDetails"),
+    seriesPoster: document.getElementById("seriesPoster"),
+    seriesFirstAired: document.getElementById("seriesFirstAired"),
+    seriesNetwork: document.getElementById("seriesNetwork"),
+    seriesStatus: document.getElementById("seriesStatus"),
+    seriesOverview: document.getElementById("seriesOverview"),
+    seriesTvdbLink: document.getElementById("seriesTvdbLink"),
     refreshEpisodesBtn: document.getElementById("refreshEpisodesBtn"),
     episodesList: document.getElementById("episodesList"),
     episodeMeta: document.getElementById("episodeMeta"),
@@ -104,6 +111,56 @@
     if (btn) btn.disabled = busy;
   }
 
+  function fallbackText(value) {
+    const text = (value || "").toString().trim();
+    return text || "-";
+  }
+
+  function buildTvdbUrl(item) {
+    const raw = item.raw || {};
+    const slug = (raw.slug || "").toString().trim();
+    if (slug) return `https://www.thetvdb.com/series/${encodeURIComponent(slug)}`;
+
+    const tvdbId = (raw.tvdb_id || item.id || "").toString().trim();
+    if (tvdbId) return `https://www.thetvdb.com/series/${encodeURIComponent(tvdbId)}`;
+    return "";
+  }
+
+  function renderSelectedSeriesDetails() {
+    const item = state.selectedSeries;
+    if (!item) {
+      el.seriesDetails.classList.add("hidden");
+      return;
+    }
+    const raw = item.raw || {};
+    const imageUrl = (raw.image_url || "").toString().trim();
+    const overview = (raw.overview || "").toString().trim();
+    const tvdbUrl = buildTvdbUrl(item);
+
+    if (imageUrl) {
+      el.seriesPoster.src = imageUrl;
+      el.seriesPoster.classList.remove("hidden");
+    } else {
+      el.seriesPoster.removeAttribute("src");
+      el.seriesPoster.classList.add("hidden");
+    }
+
+    el.seriesFirstAired.textContent = fallbackText(raw.first_air_time);
+    el.seriesNetwork.textContent = fallbackText(raw.network);
+    el.seriesStatus.textContent = fallbackText(raw.status);
+    el.seriesOverview.textContent = overview || "No overview available.";
+
+    if (tvdbUrl) {
+      el.seriesTvdbLink.href = tvdbUrl;
+      el.seriesTvdbLink.classList.remove("hidden");
+    } else {
+      el.seriesTvdbLink.removeAttribute("href");
+      el.seriesTvdbLink.classList.add("hidden");
+    }
+
+    el.seriesDetails.classList.remove("hidden");
+  }
+
   function updateMeta() {
     const epCount = state.selectedEpisodes.length;
     const fileCount = state.selectedFiles.length;
@@ -206,6 +263,7 @@
       right.appendChild(makeBtn("Select", async () => {
         state.selectedSeries = item;
         el.seriesInfo.textContent = `Selected: ${item.display_name || item.name}`;
+        renderSelectedSeriesDetails();
         await loadEpisodes();
       }));
       li.appendChild(left);
@@ -521,6 +579,7 @@
   async function init() {
     el.sessionMeta.textContent = `session_id: ${state.sessionId}`;
     el.modalRecursiveInput.checked = true;
+    renderSelectedSeriesDetails();
     bindEvents();
     await loadSelectedEpisodes();
     await loadSelectedFiles();

app/static/styles.css

@@ -293,6 +293,61 @@ button.secondary {
   margin-bottom: 8px;
 }
 
+.hidden {
+  display: none !important;
+}
+
+#panelSearch #searchResults {
+  margin-bottom: 10px;
+}
+
+.series-details {
+  border-top: 1px solid #e4eaf2;
+  padding-top: 10px;
+}
+
+.series-media {
+  margin-bottom: 8px;
+}
+
+.series-media img {
+  width: 96px;
+  height: 144px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid #d7dee9;
+  background: #f8fafc;
+}
+
+.series-meta {
+  font-size: 12px;
+  color: #334155;
+  display: grid;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.series-meta span:first-child {
+  color: #64748b;
+}
+
+.series-overview {
+  margin: 0 0 8px;
+  font-size: 12px;
+  line-height: 1.35;
+  color: #1e293b;
+}
+
+.series-link {
+  font-size: 12px;
+  color: #64748b;
+  text-decoration: none;
+}
+
+.series-link:hover {
+  text-decoration: underline;
+}
+
 #outputBox {
   margin: 0;
   background: #0b1220;