From c146d7ddb28eda883eb28da2e952179fb30af8fd Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Fri, 24 Apr 2026 10:39:10 +0200
Subject: [PATCH] Fix: Podcast-Selector im Hauptbereich statt nur im
 Seitenpanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Selector war vorher nur im 400px-Panel rechts sichtbar — auf Mobile
oder bei schmalem Fenster quasi unsichtbar. Jetzt wird er zentriert im
Mindmap-Bereich angezeigt, bis ein Podcast gewählt wird.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 webapp/index.html | 47 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/webapp/index.html b/webapp/index.html
index 216b98d..58dd327 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -921,13 +921,19 @@ async function selectPodcast(podcastId) {
     const resp = await fetch(`${API_BASE}/api/podcasts/${podcastId}`);
     DATA = await resp.json();
     CURRENT_PODCAST = podcastId;
-    // Clear existing graph + timeline if switching
-    document.getElementById('svg').innerHTML = '';
+    // Reset mindmap area (might have been used for selector)
+    const mindmap = document.getElementById('mindmap');
+    mindmap.style.display = '';
+    mindmap.style.alignItems = '';
+    mindmap.style.justifyContent = '';
+    mindmap.style.flexDirection = '';
+    mindmap.style.padding = '';
+    mindmap.innerHTML = '<svg id="svg"></svg>';
+    // Clear filters + timeline
     document.getElementById('staffel-filters').innerHTML = '';
     const tl = document.getElementById('timeline-container');
     if (tl) { tl.remove(); timelineBuilt = false; }
     // Reset to mindmap view
-    document.getElementById('mindmap').style.display = '';
     document.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active'));
     document.getElementById('tab-mindmap')?.classList.add('active');
     TRANSCRIPTS = null;
@@ -949,24 +955,35 @@ function showPodcastSelector(podcasts) {
     document.getElementById('cross-toggle').style.display = '';
   }
 
-  let html = '<div class="welcome"><h2>Podcast Mindmap</h2><p>Wähle einen Podcast oder vergleiche zwei.</p></div>';
-  html += '<div class="podcast-selector" id="podcast-selector">';
+  // Hide mindmap, show selector full-width in mindmap area
+  mindmap.innerHTML = '';
+  mindmap.style.display = 'flex';
+  mindmap.style.alignItems = 'center';
+  mindmap.style.justifyContent = 'center';
+  mindmap.style.flexDirection = 'column';
+  mindmap.style.padding = '20px';
+
+  let selectorHtml = '<div class="welcome"><h2>Podcast Mindmap</h2><p>Wähle einen Podcast oder vergleiche zwei.</p></div>';
+  selectorHtml += '<div class="podcast-selector" id="podcast-selector">';
   podcasts.forEach(p => {
-    html += `<div class="podcast-card" id="pc-${p.id}" onclick="selectPodcast('${p.id}')">`;
-    html += `<h3>${escHtml(p.name)}</h3>`;
-    html += `<p>${escHtml(p.description || '')}</p>`;
-    html += `</div>`;
+    selectorHtml += `<div class="podcast-card" id="pc-${p.id}" onclick="selectPodcast('${p.id}')">`;
+    selectorHtml += `<h3>${escHtml(p.name)}</h3>`;
+    selectorHtml += `<p>${escHtml(p.description || '')}</p>`;
+    selectorHtml += `</div>`;
   });
-  html += '</div>';
+  selectorHtml += '</div>';
 
   if (podcasts.length > 1) {
-    html += '<div class="compare-actions">';
-    html += '<button class="compare-btn" onclick="startCompare()">Podcasts vergleichen</button>';
-    html += '</div>';
+    selectorHtml += '<div class="compare-actions">';
+    selectorHtml += '<button class="compare-btn" onclick="startCompare()">Podcasts vergleichen</button>';
+    selectorHtml += '</div>';
   }
 
-  html += '<div id="compare-result"></div>';
-  panel.innerHTML = html;
+  selectorHtml += '<div id="compare-result"></div>';
+  mindmap.innerHTML = selectorHtml;
+
+  // Panel: minimal welcome
+  panel.innerHTML = '<div class="welcome"><h2>Willkommen</h2><p>Wähle links einen Podcast.</p></div>';
 
   document.getElementById('app-title').textContent = 'Podcast';
   document.title = 'Podcast Mindmap';