Timeline, Style

app/public/assets/css/modal.css

@@ -83,3 +83,31 @@
     font-size: .92rem;
     line-height: 1.4;
 }
+
+.programme-modal-header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.programme-modal-logo {
+    width: 92px;
+    height: 58px;
+    object-fit: contain;
+    border: 1px solid var(--border);
+    border-radius: .7rem;
+    background: var(--panel-2);
+    padding: 4px;
+}
+
+.programme-modal-channel {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+#modalChannel {
+    font-size: 1.05rem;
+    font-weight: 700;
+}

app/public/assets/css/timeline.css

@@ -190,8 +190,6 @@
   border-color: var(--accent);
 }
 
-cat >> app/public/assets/css/timeline.css <<'CSS'
-
 .timeline-channel {
   flex-direction: column;
   justify-content: center;
@@ -297,4 +295,7 @@ cat >> app/public/assets/css/timeline.css <<'CSS'
   font-size: 0.85rem;
   line-height: 1.35;
 }
-CSS
+
+.live-badge[hidden] {
+  display: none !important;
+}

app/public/assets/js/modules/modal.js

@@ -11,6 +11,8 @@ export function initProgrammeModal() {
   const category = document.getElementById("modalCategory");
   const time = document.getElementById("modalTime");
   const meta = document.getElementById("modalMeta");
+  const logo = document.getElementById("modalLogo");
+  const channel = document.getElementById("modalChannel");
 
   const openModal = (programmeElement) => {
     const id = programmeElement.dataset.programmeId;
@@ -30,6 +32,16 @@ export function initProgrammeModal() {
     description.textContent = programme.description || "Keine Beschreibung vorhanden.";
     category.textContent = programme.category || "";
 
+    channel.textContent =
+        `Kanal ${programme.channel_number} · ${programme.channel}`;
+
+    logo.src = `/assets/logos/${encodeURIComponent(programme.channel_id)}.svg`;
+
+    logo.onerror = () => {
+        logo.onerror = null;
+        logo.src = "/assets/logos/default.svg";
+    };
+
     const metaItems = [];
 
     if (metadata.season && metadata.episode) {
@@ -61,7 +73,7 @@ export function initProgrammeModal() {
     meta.textContent = metaItems.join(" • ");
     meta.hidden = metaItems.length === 0;
 
-    time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;
+    time.textContent = `${programme.start} – ${programme.stop}`;
 
     modal.hidden = false;
     document.body.classList.add("modal-open");