From a1e35e98f3871e872224bc8e94cf284453827dae Mon Sep 17 00:00:00 2001
From: OpenClaw Bot <claw@working-ai.de>
Date: Sat, 21 Mar 2026 15:41:12 +0100
Subject: [PATCH] feat(diarization-ui): restyle library to project-list style
 table with toolbar filters

---
 app.py | 59 ++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/app.py b/app.py
index 307aa2f..2c2126e 100644
--- a/app.py
+++ b/app.py
@@ -517,34 +517,53 @@ def library(project_id: Optional[str] = None, q_title: str = "", q_content: str
     p_opts = "<option value=''>Alle</option>" + "".join(
         [f"<option value='{p['id']}' {'selected' if project_id_int==p['id'] else ''}>{p['name']}</option>" for p in projects]
     )
-    items = "".join(
+    rows = "".join(
         [
-            f"<div class='card'><b>#{d['id']}</b> [{d['kind']}] {d['title']}<br><small>{d['project']} · {d['created_at']}</small><br>"
-            f"<div class='row' style='margin-top:8px'>"
-            f"<a href='/document/{d['id']}' style='text-decoration:none'><button type='button'>👁️ Ansehen</button></a>"
+            f"<tr>"
+            f"<td>#{d['id']}</td>"
+            f"<td>{d['title']}</td>"
+            f"<td>{d['kind']}</td>"
+            f"<td>{d['project']}</td>"
+            f"<td><small>{d['created_at']}</small></td>"
+            f"<td class='row'>"
+            f"<a href='/document/{d['id']}' class='iconbtn' title='Ansehen'>👁️</a>"
             f"<a href='/document/{d['id']}/download.md' class='iconbtn' title='Download'>⬇️</a>"
-            f"<a href='#' class='iconbtn' title='Umbenennen' onclick=\"libRename({d['id']}, {json.dumps(d['title'])});return false;\">✏️</a>"
-            f"<a href='#' class='iconbtn' title='Verschieben' onclick=\"libMove({d['id']});return false;\">📁</a>"
-            f"<a href='#' class='iconbtn' title='Löschen' onclick=\"libDelete({d['id']});return false;\">🗑️</a>"
-            f"</div></div>"
+            f"<a href='#' class='iconbtn' title='Umbenennen' onclick='libRename({d['id']}, {json.dumps(d['title'])});return false;'>✏️</a>"
+            f"<a href='#' class='iconbtn' title='Verschieben' onclick='libMove({d['id']});return false;'>📁</a>"
+            f"<a href='#' class='iconbtn' title='Löschen' onclick='libDelete({d['id']});return false;'>🗑️</a>"
+            f"</td>"
+            f"</tr>"
             for d in docs
         ]
     )
     project_js = json.dumps([{"value": p["id"], "label": p["name"]} for p in projects], ensure_ascii=False)
     body = f"""
-<h2>Datenbank / Dokumente</h2>
-<form method='get' class='card'>
-  <div class='row'>
-    <label>Projekt:</label>
-    <select name='project_id'>{p_opts}</select>
-  </div>
-  <div class='row' style='margin-top:8px'>
-    <input name='q_title' placeholder='Titel enthält …' value='{title_q.replace("'", "&#39;")}'>
-    <input name='q_content' placeholder='Inhalt enthält …' value='{content_q.replace("'", "&#39;")}'>
-    <button type='submit'>Filtern</button>
-  </div>
+<style>
+.toolbar{{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}}
+.toolbar .spacer{{flex:1}}
+.gridcard{{padding:0;overflow:auto}}
+.grid{{width:100%;border-collapse:collapse;min-width:860px}}
+.grid th,.grid td{{padding:10px 12px;border-bottom:1px solid #1f2937;text-align:left}}
+.grid th{{position:sticky;top:0;background:#0b1222;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.04em}}
+.grid tr:hover{{background:rgba(56,189,248,.06)}}
+</style>
+<h2 style='margin-bottom:6px'>Projekte · Dokumente</h2>
+<div class='hint' style='margin-bottom:10px'>Ansicht im Projektlisten-Stil mit Schnellaktionen.</div>
+<form method='get' class='card toolbar'>
+  <select name='project_id'>{p_opts}</select>
+  <input name='q_title' placeholder='Titel enthält …' value='{title_q.replace("'", "&#39;")}' style='min-width:220px'>
+  <input name='q_content' placeholder='Inhalt enthält …' value='{content_q.replace("'", "&#39;")}' style='min-width:260px'>
+  <button type='submit'>Filtern</button>
+  <a class='iconbtn' href='/library' title='Filter zurücksetzen'>↺</a>
+  <div class='spacer'></div>
+  <small>{len(docs)} Treffer</small>
 </form>
-{items or '<p>Keine Einträge.</p>'}
+<div class='card gridcard'>
+  <table class='grid'>
+    <thead><tr><th>ID</th><th>Titel</th><th>Typ</th><th>Projekt</th><th>Erstellt</th><th>Aktionen</th></tr></thead>
+    <tbody>{rows or "<tr><td colspan='6'>Keine Einträge.</td></tr>"}</tbody>
+  </table>
+</div>
 <script>
 async function libPost(url, data) {{
   const r = await fetch(url, {{method:'POST', headers:{{'Content-Type':'application/x-www-form-urlencoded'}}, body:new URLSearchParams(data)}});