feat: tab navigation in modal (Index/Transkript/Zusammenfassung)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/app.js

@@ -12,9 +12,11 @@ const modalObsidianBtn = document.getElementById('modal-obsidian-btn');
 const modalFolderBtn = document.getElementById('modal-folder-btn');
 const modalOpenBtn = document.getElementById('modal-open-btn');
 const modalCloseBtn = document.getElementById('modal-close-btn');
+const modalTabs = document.getElementById('modal-tabs');
 let _modalPath = null;
 let _modalPaths = null;
 let _modalFilename = null;
+let _modalRelated = null;
 
 const speakerCard = document.getElementById('speaker-card');
 const speakerRows = document.getElementById('speaker-rows');
@@ -54,18 +56,47 @@ logoutBtn.addEventListener('click', () => {
   });
 });
 
-function openModal(filename, path, paths) {
+function _loadModalContent(filename, activeTab) {
+  modalBody.innerHTML = '';
+  apiFetch(`/transcripts/${filename.split('/').map(encodeURIComponent).join('/')}`)
+    .then(r => r.text())
+    .then(md => { modalBody.innerHTML = DOMPurify.sanitize(marked.parse(md)); });
+  // update active tab
+  modalTabs.querySelectorAll('.modal-tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.file === filename);
+  });
+}
+
+function openModal(filename, path, paths, related) {
   _modalPath = path;
   _modalPaths = paths || null;
   _modalFilename = filename;
-  modalTitle.textContent = filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '');
-  modalBody.innerHTML = '';
+  _modalRelated = related || null;
+  modalTitle.textContent = filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '').replace(/-index$/, '');
   modal.classList.remove('hidden');
-  apiFetch(`/transcripts/${encodeURIComponent(filename)}`)
-    .then(r => r.text())
-    .then(md => {
-      modalBody.innerHTML = DOMPurify.sanitize(marked.parse(md));
+
+  // Build tabs if there are related files
+  modalTabs.innerHTML = '';
+  if (related && (related.transkript || related.zusammenfassung)) {
+    modalTabs.style.display = 'flex';
+    const tabDefs = [
+      { label: 'Index', file: filename },
+      { label: 'Transkript', file: related.transkript },
+      { label: 'Zusammenfassung', file: related.zusammenfassung },
+    ].filter(t => t.file);
+    tabDefs.forEach(({ label, file }) => {
+      const btn = document.createElement('button');
+      btn.className = 'modal-tab';
+      btn.textContent = label;
+      btn.dataset.file = file;
+      btn.addEventListener('click', () => _loadModalContent(file, file));
+      modalTabs.appendChild(btn);
     });
+  } else {
+    modalTabs.style.display = 'none';
+  }
+
+  _loadModalContent(filename, filename);
 }
 
 function closeModal() {
@@ -73,6 +104,7 @@ function closeModal() {
   _modalPath = null;
   _modalPaths = null;
   _modalFilename = null;
+  _modalRelated = null;
 }
 
 modalCloseBtn.addEventListener('click', closeModal);
@@ -239,7 +271,7 @@ async function loadTranscripts() {
       meta.className = 'meta';
       meta.textContent = `${Math.round(t.size / 1024 * 10) / 10} KB`;
 
-      div.addEventListener('click', () => openModal(t.filename, t.path));
+      div.addEventListener('click', () => openModal(t.filename, t.path, null, t.related || null));
 
       const reprocessBtn = document.createElement('button');
       reprocessBtn.className = 'del-btn';

frontend/index.html

@@ -163,6 +163,10 @@
     .modal-body pre { background: var(--surface2); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 0 0 0.8em; }
     .modal-body pre code { background: none; padding: 0; }
     .modal-body hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
+    .modal-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+    .modal-tab { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 5px 12px; font-size: 0.78rem; font-family: inherit; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
+    .modal-tab:hover { color: var(--text); }
+    .modal-tab.active { color: var(--text); border-color: var(--border); background: var(--surface); }
     .del-btn {
       background: none; border: none; color: var(--muted); cursor: pointer;
       padding: 4px; border-radius: 4px; display: flex; align-items: center;
@@ -274,6 +278,7 @@
           <button id="modal-close-btn" class="modal-btn" title="Schließen">✕</button>
         </div>
       </div>
+      <div id="modal-tabs" class="modal-tabs" style="display:none"></div>
       <div id="modal-body" class="modal-body"></div>
     </div>
   </div>