From 5191962ce0f6fa786aaa5e4ab2c000b232bd880e Mon Sep 17 00:00:00 2001
From: "Claude (cleanup)" <claude@aegis-sight.de>
Date: Sat, 9 May 2026 14:18:04 +0000
Subject: [PATCH] =?UTF-8?q?ux(quellen-health):=20Verschlankung=20-=20Besch?=
 =?UTF-8?q?reibung=20gek=C3=BCrzt,=20Verlauf=20eingeklappt,=20schmalere=20?=
 =?UTF-8?q?Health-Tabelle,=20Icon-Buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vier UX-Hebel zusammengelegt, alle reines Frontend:

1. Vorschlaege-Tabelle: Beschreibung als Einzeiler mit Ellipsis;
   voller Text im title-Tooltip. Spart bei 24 offenen Vorschlaegen
   ~25 Bildschirmhoehen.

2. Verlauf-Card: standardmaessig eingeklappt via <details>-Element.
   Header zeigt nur "Verlauf (N erledigte Vorschlaege - klick zum
   Aufklappen)". Klick expandiert die Tabelle.

3. Health-Tabelle: Spalten Domain und Sprache aus der Tabelle raus,
   beide als Tooltip auf dem Quellen-Namen. Tabelle hat statt 8
   Spalten nur noch 6, ist schmaler und besser lesbar.

4. Aktionen-Spalten: Text-Buttons ("Annehmen", "Ablehnen", "Lösung
   suchen") durch kompakte Icon-Buttons ersetzt (✓ ✗ 🔍).
   Funktion identisch, Tooltip via title-Attribut.

Cache-Buster fuer source-health.js auf 20260509h gebumpt.
---
 src/static/dashboard.html      |  2 +-
 src/static/js/source-health.js | 46 ++++++++++++++++++++--------------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 421014e..eda15ca 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -715,7 +715,7 @@
 
   <script src="/static/js/app.js?v=20260509d"></script>
   <script src="/static/js/sources.js?v=20260509d"></script>
-  <script src="/static/js/source-health.js?v=20260509g"></script>
+  <script src="/static/js/source-health.js?v=20260509h"></script>
   <script src="/static/js/audit.js?v=20260509d"></script>
   <div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>
 </body>
diff --git a/src/static/js/source-health.js b/src/static/js/source-health.js
index 2927c94..4c2c219 100644
--- a/src/static/js/source-health.js
+++ b/src/static/js/source-health.js
@@ -143,13 +143,13 @@ function renderHealthDashboard() {
                 <tr>
                   <td><span class="badge badge-suggestion-${s.suggestion_type}">${SUGGESTION_TYPE_LABELS[s.suggestion_type] || s.suggestion_type}</span></td>
                   <td>${esc(s.title)}</td>
-                  <td class="text-secondary" style="max-width:300px;">${esc(s.description || "")}</td>
+                  <td class="text-secondary" style="max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="${esc(s.description || "")}">${esc(s.description || "")}</td>
                   <td><span class="badge badge-priority-${s.priority}">${PRIORITY_LABELS[s.priority] || s.priority}</span></td>
                   <td class="text-secondary">${formatDateTime(s.created_at)}</td>
                   <td style="white-space:nowrap;">
-                    ${s.suggestion_type === "deactivate_source" && s.source_id ? `<button class="btn btn-secondary btn-small" data-source-id="${s.source_id}" data-source-name="${esc(s.title.split(':')[0] || s.title)}" onclick="searchFix(this)">Lösung suchen</button> ` : ""}
-                    <button class="btn btn-success btn-small" onclick="handleSuggestion(${s.id}, true)">Annehmen</button>
-                    <button class="btn btn-danger btn-small" onclick="handleSuggestion(${s.id}, false)">Ablehnen</button>
+                    ${s.suggestion_type === "deactivate_source" && s.source_id ? `<button class="btn btn-secondary btn-small" data-source-id="${s.source_id}" data-source-name="${esc(s.title.split(':')[0] || s.title)}" onclick="searchFix(this)" title="Lösung suchen">&#128269;</button> ` : ""}
+                    <button class="btn btn-success btn-small" onclick="handleSuggestion(${s.id}, true)" title="Annehmen">&check;</button>
+                    <button class="btn btn-danger btn-small" onclick="handleSuggestion(${s.id}, false)" title="Ablehnen">&times;</button>
                   </td>
                 </tr>`,
                 )
@@ -166,20 +166,23 @@ function renderHealthDashboard() {
       </div>`;
   }
 
-  // Vergangene Vorschläge
+  // Vergangene Vorschläge - eingeklappt by default, weil rein historisch.
   let historyHtml = "";
   if (recentSuggestions.length > 0) {
+    const shown = recentSuggestions.slice(0, 20);
     historyHtml = `
-      <div class="card" style="margin-bottom:16px;">
-        <div class="card-header"><h2>Verlauf</h2></div>
-        <div class="table-wrap">
+      <details class="card" style="margin-bottom:16px;">
+        <summary style="cursor:pointer; padding:14px 18px; list-style:none;">
+          <span style="color:var(--accent, #C8A851); font-weight:600; font-size:1.02rem;">Verlauf</span>
+          <span class="text-secondary" style="font-size:13px; margin-left:8px;">(${recentSuggestions.length} erledigte Vorschläge - klick zum Aufklappen)</span>
+        </summary>
+        <div class="table-wrap" style="border-top:1px solid var(--border, rgba(255,255,255,0.08));">
           <table>
             <thead>
               <tr><th>Typ</th><th>Titel</th><th>Status</th><th>Bearbeitet</th></tr>
             </thead>
             <tbody>
-              ${recentSuggestions
-                .slice(0, 20)
+              ${shown
                 .map(
                   (s) => `
                 <tr>
@@ -193,7 +196,7 @@ function renderHealthDashboard() {
             </tbody>
           </table>
         </div>
-      </div>`;
+      </details>`;
   }
 
   // Health-Check Ergebnisse
@@ -268,22 +271,27 @@ function renderHealthDashboard() {
         <div class="table-wrap">
           <table>
             <thead>
-              <tr><th>Quelle</th><th>Domain</th><th>Typ</th><th>Org</th><th>Sprache</th><th>Status</th><th>Details</th><th>Aktionen</th></tr>
+              <tr><th>Quelle</th><th>Typ</th><th>Org</th><th>Status</th><th>Details</th><th>Aktion</th></tr>
             </thead>
             <tbody>
               ${filtered
                 .map(
-                  (c) => `
+                  (c) => {
+                    // Domain + Sprache in Tooltip vom Quellnamen, statt eigene Spalten.
+                    const tipParts = [];
+                    if (c.domain) tipParts.push(c.domain);
+                    if (c.language) tipParts.push(c.language);
+                    const nameTip = tipParts.length ? ` title="${esc(tipParts.join(" · "))}"` : "";
+                    return `
                 <tr>
-                  <td>${esc(c.name)}</td>
-                  <td class="text-secondary">${esc(c.domain || "-")}</td>
+                  <td${nameTip}>${esc(c.name)}</td>
                   <td>${CHECK_TYPE_LABELS[c.check_type] || c.check_type}</td>
                   <td class="text-secondary">${c.tenant_id == null ? '<span style="color:#94a3b8;">global</span>' : esc(c.org_name || ("Org " + c.tenant_id))}</td>
-                  <td class="text-secondary">${esc(c.language || "-")}</td>
                   <td><span class="badge badge-health-${c.status}">${c.status === "error" ? "Fehler" : (c.status === "warning" ? "Warnung" : "OK")}</span></td>
-                  <td class="text-secondary" style="max-width:250px;" title="${esc(c.message || "")}">${esc(c.message || "")}</td>
-                  <td>${c.status === "error" && c.check_type === "reachability" ? `<button class="btn btn-secondary btn-small" data-source-id="${c.source_id}" data-source-name="${esc(c.name)}" onclick="searchFix(this)">Lösung suchen</button>` : ""}</td>
-                </tr>`,
+                  <td class="text-secondary" style="max-width:300px;" title="${esc(c.message || "")}">${esc(c.message || "")}</td>
+                  <td>${c.status === "error" && c.check_type === "reachability" ? `<button class="btn btn-secondary btn-small" data-source-id="${c.source_id}" data-source-name="${esc(c.name)}" onclick="searchFix(this)" title="Lösung suchen">&#128269;</button>` : ""}</td>
+                </tr>`;
+                  }
                 )
                 .join("")}
             </tbody>