From e1deec8b53da2b38489b5766a641d6b766782067 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Fri, 10 Apr 2026 22:24:43 +0200
Subject: [PATCH] =?UTF-8?q?Merkliste:=20eigener=20Tab=20mit=20Bookmark-?=
 =?UTF-8?q?=C3=9Cbersicht,=20klickbar=20zum=20Detail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/index.html | 51 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/app/templates/index.html b/app/templates/index.html
index 0d7465e..85e8033 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -697,6 +697,7 @@
         </select>
         <div class="mode-toggle">
             <button class="mode-btn active" onclick="showMode('browse')">📋 Durchsuchen</button>
+            <button class="mode-btn" onclick="showMode('bookmarks')">⭐ Merkliste</button>
             <button class="mode-btn" onclick="showMode('tags')">🏷️ Tags</button>
             <button class="mode-btn" onclick="showMode('upload')">📤 Prüfen</button>
             <a href="/auswertungen" class="mode-btn" style="text-decoration: none;">📈 Auswertungen</a>
@@ -765,6 +766,16 @@
         </main>
     </div>
     
+    <!-- Bookmarks / Merkliste Mode -->
+    <div class="main-container" id="bookmarks-mode" style="display: none;">
+        <div class="list-panel" style="max-width: 100%;">
+            <h2 style="color: var(--color-blue); margin-bottom: 1rem;">⭐ Merkliste</h2>
+            <div id="bookmarks-content">
+                <p style="color: #888;">Lade Merkliste...</p>
+            </div>
+        </div>
+    </div>
+
     <!-- Tags Mode -->
     <div class="main-container" id="tags-mode" style="display: none;">
         <aside class="list-panel" style="width: 100%; max-width: 400px;">
@@ -1260,6 +1271,44 @@
             }
         }
         
+        // ─── Merkliste (#94) ────────────────────────────────────────
+        async function loadBookmarksList() {
+            const container = document.getElementById('bookmarks-content');
+            if (!currentUser) {
+                container.innerHTML = '<p style="color:#888;">Bitte anmelden um die Merkliste zu sehen.</p>';
+                return;
+            }
+            container.innerHTML = '<p style="color:#888;">Lade...</p>';
+            try {
+                const bookmarkIds = await fetch('/api/bookmarks').then(r => r.json());
+                if (bookmarkIds.length === 0) {
+                    container.innerHTML = '<p style="color:#888;">Keine gemerkten Anträge. Klicke auf "🔖 Merken" bei einem Antrag.</p>';
+                    return;
+                }
+                // Finde die Assessment-Daten für die gebookmarkten Drucksachen
+                const bookmarked = allAssessments.filter(a => bookmarkIds.includes(a.drucksache));
+                if (bookmarked.length === 0) {
+                    container.innerHTML = '<p style="color:#888;">Gemerkte Anträge nicht in der aktuellen Auswahl gefunden. Wechsle zu "Bundesweit".</p>';
+                    return;
+                }
+                container.innerHTML = bookmarked.map(item => {
+                    const scoreClass = item.gwoeScore >= 8 ? 'score-high' : item.gwoeScore >= 5 ? 'score-mid' : item.gwoeScore >= 3 ? 'score-low' : 'score-negative';
+                    const blBadge = item.bundesland ? `<span class="bl-badge">${item.bundesland}</span>` : '';
+                    return `
+                    <div class="list-item" onclick="showMode('browse'); setTimeout(() => showDetail('${item.drucksache}'), 100);" style="cursor:pointer;">
+                        <div class="list-item-header">
+                            <span class="list-item-id">${blBadge}${item.drucksache}</span>
+                            <span class="list-item-score ${scoreClass}">${item.gwoeScore}/10</span>
+                        </div>
+                        <div class="list-item-title">${(item.title || '').substring(0, 80)}${(item.title || '').length > 80 ? '…' : ''}</div>
+                        <div class="list-item-meta">${(item.fraktionen || []).join(', ')} · ${item.datum || ''}</div>
+                    </div>`;
+                }).join('');
+            } catch (e) {
+                container.innerHTML = '<p style="color:#c00;">Fehler beim Laden der Merkliste.</p>';
+            }
+        }
+
         // ─── Bookmarks + Comments (#94) ─────────────────────────────
         async function toggleBookmark(drucksache, btn) {
             const resp = await fetch('/api/bookmark', {
@@ -1884,8 +1933,10 @@
             }
             
             document.getElementById('browse-mode').style.display = mode === 'browse' ? 'flex' : 'none';
+            document.getElementById('bookmarks-mode').style.display = mode === 'bookmarks' ? 'flex' : 'none';
             document.getElementById('tags-mode').style.display = mode === 'tags' ? 'flex' : 'none';
             document.getElementById('upload-mode').style.display = mode === 'upload' ? 'flex' : 'none';
+            if (mode === 'bookmarks') loadBookmarksList();
         }
         
         // Upload Tab Toggle