From 289d60b32e39ff426a675c36087873748ca0de00 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@v2202605360184461552.supersrv.de>
Date: Wed, 17 Jun 2026 13:55:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9B=EF=B8=8F=20Admin:=20Pill-Buttons?=
 =?UTF-8?q?=20+=20Schnellfilter=20|=20=F0=9F=92=AC=20Chat:=20TTS-Speaker-B?=
 =?UTF-8?q?utton=20(Web=20Speech=20API)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index 41a6c77..66ae5e2 100644
--- a/app.py
+++ b/app.py
@@ -881,7 +881,13 @@ def admin_dashboard():
   body.light .admin-header {{ background:rgba(242,242,247,0.72); }}
   .admin-header-inner {{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }}
   .admin-header h1 {{ font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); }}
-  .admin-header .meta {{ font-size:0.75rem; color:var(--text2); display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }}
+  .admin-header .meta {{ font-size:0.75rem; color:var(--text2); display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center; }}
+  .count-badge {{ background:var(--surface2); color:var(--text2); padding:0.3rem 0.7rem; border-radius:999px; font-size:0.7rem; font-weight:600; white-space:nowrap; }}
+  .admin-btn {{ display:inline-block; padding:0.35rem 0.85rem; border-radius:999px; font-size:0.72rem; font-weight:600; text-decoration:none; transition:all 0.15s; white-space:nowrap; background:var(--surface2); color:var(--text2); border:1.5px solid transparent; }}
+  .admin-btn:hover {{ background:var(--surface); color:var(--text); border-color:var(--border); }}
+  .admin-btn.active {{ background:var(--accent); color:#fff; border-color:var(--accent); }}
+  .admin-btn.secondary {{ background:transparent; color:var(--text3); }}
+  .admin-btn.secondary:hover {{ color:var(--text); background:var(--surface2); }}
   .admin-header a {{ color:var(--accent); text-decoration:none; font-weight:500; }}
   .admin-header a:hover {{ opacity:0.8; }}
 
@@ -946,7 +952,15 @@ function toggleTheme(){{document.body.classList.toggle('light');localStorage.set
 <header class="admin-header">
   <div class="admin-header-inner">
     <h1>📨 BSN Intake</h1>
-    <div class="meta">{len(rows)} Submissions | <a href="/test">🧪 Test</a> | <a href="/">🌐 Frontend</a> | <a href="/health">⚙️ Health</a></div>
+    <div class="meta">
+      <span class="count-badge">{len(rows)} Submissions</span>
+      <a href="/admin" class="admin-btn{' active' if not status_filter else ''}">📋 Alle</a>
+      <a href="/admin?status=new" class="admin-btn{' active' if status_filter=='new' else ''}">🆕 Neu</a>
+      <a href="/admin?status=published" class="admin-btn{' active' if status_filter=='published' else ''}">✅ Publiziert</a>
+      <a href="/admin?status=flagged" class="admin-btn{' active' if status_filter=='flagged' else ''}">🚩 Markiert</a>
+      <a href="/test" class="admin-btn secondary">🧪 Test</a>
+      <a href="/" class="admin-btn secondary">🌐 Frontend</a>
+    </div>
   </div>
 </header>
 <main class="admin-main">
@@ -1826,7 +1840,10 @@ def public_frontend():
     <button id="chatClose" aria-label="Schließen">✕</button>
   </div>
   <div class="chat-body" id="chatBody">
-    <div class="chat-msg assistant">Hey! 👋 Ich bin der BSN Community Assistant. Frag mich nach Spielen, Ständen oder was auf der SPIEL Essen los ist!</div>
+    <div style="display:flex;align-items:flex-end;gap:0.3rem;align-self:flex-start;">
+      <div class="chat-msg assistant">Hey! 👋 Ich bin der BSN Community Assistant. Frag mich nach Spielen, Ständen oder was auf der SPIEL Essen los ist!</div>
+      <button onclick="(function(t){var u=new SpeechSynthesisUtterance(t);u.lang='de-DE';u.rate=0.95;var v=speechSynthesis.getVoices();var d=v.find(function(x){return x.lang.startsWith('de')});if(d)u.voice=d;speechSynthesis.cancel();speechSynthesis.speak(u)})('Hey! Ich bin der BSN Community Assistant. Frag mich nach Spielen, Ständen oder was auf der SPIEL Essen los ist!')" title="Vorlesen" style="background:none;border:none;cursor:pointer;font-size:0.85rem;opacity:0.5;padding:0 0 0.15rem 0;transition:opacity 0.15s;flex-shrink:0;" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.5'">🔊</button>
+    </div>
   </div>
   <div class="chat-footer">
     <input type="text" id="chatInput" placeholder="Frag was..." aria-label="Chat-Nachricht">
@@ -1855,14 +1872,50 @@ def public_frontend():
   closeBtn.addEventListener('click', () => { open = false; overlay.classList.remove('open'); });
 
   function addMsg(role, text) {
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.alignItems = 'flex-end';
+    wrapper.style.gap = '0.3rem';
+    if (role === 'assistant') wrapper.style.alignSelf = 'flex-start';
+    else wrapper.style.alignSelf = 'flex-end';
+
     const div = document.createElement('div');
     div.className = 'chat-msg ' + role;
     div.textContent = text;
-    body.appendChild(div);
+    wrapper.appendChild(div);
+
+    if (role === 'assistant') {
+      const btn = document.createElement('button');
+      btn.innerHTML = '🔊';
+      btn.title = 'Vorlesen';
+      btn.style.cssText = 'background:none;border:none;cursor:pointer;font-size:0.85rem;opacity:0.5;padding:0 0 0.15rem 0;transition:opacity 0.15s;flex-shrink:0;';
+      btn.onmouseenter = () => btn.style.opacity = '1';
+      btn.onmouseleave = () => btn.style.opacity = '0.5';
+      btn.onclick = () => speak(text);
+      wrapper.appendChild(btn);
+    }
+
+    body.appendChild(wrapper);
     body.scrollTop = body.scrollHeight;
     return div;
   }
 
+  function speak(text) {
+    if (!window.speechSynthesis) return;
+    window.speechSynthesis.cancel();
+    const u = new SpeechSynthesisUtterance(text);
+    u.lang = 'de-DE';
+    u.rate = 0.95;
+    // Prefer German voice
+    const voices = speechSynthesis.getVoices();
+    const de = voices.find(v => v.lang.startsWith('de'));
+    if (de) u.voice = de;
+    speechSynthesis.speak(u);
+  }
+
+  // Preload voices
+  if (window.speechSynthesis) speechSynthesis.getVoices();
+
   function addTyping() {
     const div = document.createElement('div');
     div.className = 'chat-msg assistant typing';