Promote develop → main (2026-05-01 16:09 UTC)

src/static/css/style.css

@@ -1704,6 +1704,108 @@ a.dev-source-pill:hover {
     border-radius: var(--radius);
     background: var(--bg-primary);
     border: 1px solid var(--border);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    outline: none;
+}
+.source-overview-item:hover {
+    border-color: var(--accent);
+    background: var(--bg-elevated);
+}
+.source-overview-item:focus-visible {
+    box-shadow: 0 0 0 2px var(--tint-accent-strong);
+}
+.source-overview-item.active {
+    border-color: var(--accent);
+    background: var(--tint-accent-subtle);
+    box-shadow: var(--glow-accent);
+}
+
+/* Inline-Aufklapp-Bereich (volle Reihen-Breite, direkt unter dem geklickten Item) */
+.source-overview-detail {
+    grid-column: 1 / -1;
+    padding: var(--sp-md) var(--sp-lg);
+    background: var(--bg-elevated);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius);
+    animation: source-detail-in 0.18s ease;
+}
+@keyframes source-detail-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.source-overview-detail-empty {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-style: italic;
+}
+.source-overview-detail-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 320px;
+    overflow-y: auto;
+}
+.source-overview-detail-list::-webkit-scrollbar { width: 6px; }
+.source-overview-detail-list::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; }
+.source-overview-detail-list::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 3px; }
+.source-overview-detail-list li {
+    font-size: 12px;
+    line-height: 1.4;
+    padding: 4px 0;
+    border-top: 1px dashed var(--border);
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    gap: var(--sp-md);
+    align-items: baseline;
+}
+.source-overview-detail-list li:first-child { border-top: none; }
+.source-overview-detail-list li a {
+    color: var(--text-primary);
+    text-decoration: none;
+}
+.source-overview-detail-list li a:hover {
+    color: var(--accent);
+    text-decoration: underline;
+}
+.source-overview-detail-num {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--accent);
+    min-width: 36px;
+    text-align: right;
+    white-space: nowrap;
+}
+.source-overview-detail-num--none {
+    color: var(--text-disabled);
+    font-weight: 400;
+}
+.source-overview-detail-date {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-tertiary);
+    white-space: nowrap;
+}
+.source-overview-detail-headline {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+@media (max-width: 600px) {
+    .source-overview-detail-list li {
+        grid-template-columns: auto 1fr;
+    }
+    .source-overview-detail-date {
+        grid-column: 1 / -1;
+        margin-left: 32px;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .source-overview-detail { animation: none; }
+    .source-overview-item { transition: none; }
 }
 
 .source-overview-name {

src/static/dashboard.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="/static/vendor/leaflet.css">
     <link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
     <link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
-    <link rel="stylesheet" href="/static/css/style.css?v=20260501e">
+    <link rel="stylesheet" href="/static/css/style.css?v=20260501h">
 <style>
 /* Export Modal Radio */
 .export-radio { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; border-radius:var(--radius-sm); transition:background 0.15s; border:1px solid transparent; margin-bottom:4px; }
@@ -647,7 +647,7 @@
     <script src="/static/js/components.js?v=20260427a"></script>
     <script src="/static/js/layout.js?v=20260316b"></script>
     <script src="/static/js/pipeline.js?v=20260501a"></script>
-    <script src="/static/js/app.js?v=20260501e"></script>
+    <script src="/static/js/app.js?v=20260501h"></script>
     <script src="/static/js/cluster-data.js?v=20260322f"></script>
     <script src="/static/js/tutorial.js?v=20260316z"></script>
     <script src="/static/js/chat.js?v=20260422a"></script>

src/static/js/app.js

@@ -866,6 +866,97 @@ const App = {
         }
     },
 
+    /** Klick auf eine Quellen-Box: Liste der Artikel inline aufklappen (mutual-exclusive). */
+    toggleSourceOverviewDetail(el) {
+        if (!el) return;
+        const grid = el.parentElement;
+        if (!grid) return;
+        const sourceName = el.dataset.source || '';
+        const wasActive = el.classList.contains('active');
+
+        // Alle anderen schliessen + bestehendes Detail entfernen
+        grid.querySelectorAll('.source-overview-item.active').forEach(it => {
+            it.classList.remove('active');
+            it.setAttribute('aria-expanded', 'false');
+        });
+        const existingDetail = grid.querySelector('.source-overview-detail');
+        if (existingDetail) existingDetail.remove();
+
+        // Wenn das geklickte Item bereits aktiv war: nur schliessen
+        if (wasActive) return;
+
+        // Neues Detail einfuegen direkt nach dem geklickten Item
+        el.classList.add('active');
+        el.setAttribute('aria-expanded', 'true');
+
+        const type = this._currentIncidentType;
+        const getDate = (a) => (type === 'research' && a.published_at) ? a.published_at : (a.collected_at || a.published_at);
+        const articles = (this._currentArticles || [])
+            .filter(a => (a.source || 'Unbekannt') === sourceName)
+            .sort((a, b) => {
+                const ta = new Date(getDate(a) || 0).getTime();
+                const tb = new Date(getDate(b) || 0).getTime();
+                return tb - ta;
+            });
+
+        // Lagebild-Quellennummer pro Artikel ermitteln (matcht Artikel zu sources_json)
+        const normalize = (s) => (s || '').toLowerCase().replace(/^(der|die|das)\s+/, '').replace(/\s+/g, ' ').trim();
+        const sourcesList = this._currentSources || [];
+        const urlToNr = new Map();
+        sourcesList.forEach(s => {
+            if (s.url && s.nr != null) urlToNr.set(String(s.url).trim(), s.nr);
+        });
+        const findNr = (a) => {
+            // 1) Exakter URL-Match
+            if (a.source_url) {
+                const exact = urlToNr.get(String(a.source_url).trim());
+                if (exact != null) return exact;
+            }
+            // 2) Fallback: Match via Quellen-Namen (kann mehrfach treffen, nimm erstes)
+            if (a.source) {
+                const target = normalize(a.source);
+                const hit = sourcesList.find(s => s.nr != null && normalize(s.name) === target);
+                if (hit) return hit.nr;
+            }
+            return null;
+        };
+
+        const detail = document.createElement('div');
+        detail.className = 'source-overview-detail';
+        if (articles.length === 0) {
+            detail.innerHTML = '<div class="source-overview-detail-empty">Keine Artikel gefunden.</div>';
+        } else {
+            const fmtDate = (ts) => {
+                if (!ts) return '—';
+                try {
+                    const d = new Date(ts);
+                    if (isNaN(d.getTime())) return '—';
+                    return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit', timeZone: TIMEZONE })
+                        + ' '
+                        + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
+                } catch (e) { return '—'; }
+            };
+            const items = articles.map(a => {
+                const nr = findNr(a);
+                const numHtml = nr != null
+                    ? `<span class="source-overview-detail-num">[${UI.escape(String(nr))}]</span>`
+                    : `<span class="source-overview-detail-num source-overview-detail-num--none" title="Nicht im Lagebild zitiert">—</span>`;
+                const dateStr = fmtDate(getDate(a));
+                const headline = UI.escape(a.headline_de || a.headline || '(ohne Titel)');
+                const inner = a.source_url
+                    ? `<a href="${UI.escape(a.source_url)}" target="_blank" rel="noopener">${headline}</a>`
+                    : headline;
+                return `<li>
+                    ${numHtml}
+                    <span class="source-overview-detail-date">${UI.escape(dateStr)}</span>
+                    <span class="source-overview-detail-headline">${inner}</span>
+                </li>`;
+            }).join('');
+            detail.innerHTML = `<ul class="source-overview-detail-list">${items}</ul>`;
+        }
+        el.insertAdjacentElement('afterend', detail);
+    },
+
     /** Restliche Artikel seitenweise im Hintergrund nachladen und in _currentArticles mergen. */
     async _loadRemainingArticlesInBackground(incidentId) {
         const BATCH = 500;

src/static/js/components.js

@@ -971,8 +971,9 @@ const UI = {
         html += '<div class="source-overview-grid">';
         data.sources.forEach(s => {
             const langs = (s.languages || ['de']).map(l => (l || 'de').toUpperCase()).join('/');
-            html += `<div class="source-overview-item">
+            const sourceName = this.escape(s.source || 'Unbekannt');
-                <span class="source-overview-name">${this.escape(s.source || 'Unbekannt')}</span>
+            html += `<div class="source-overview-item" data-source="${sourceName}" tabindex="0" role="button" aria-expanded="false" onclick="App.toggleSourceOverviewDetail(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();App.toggleSourceOverviewDetail(this);}">
+                <span class="source-overview-name">${sourceName}</span>
                 <span class="source-overview-lang">${langs}</span>
                 <span class="source-overview-count">${s.article_count}</span>
             </div>`;