feat(sources): UI fuer Quellen-Klassifikation (Filter, Badges, Edit-Form)

- Quellen-Modal: 4 neue Filter (Politik, Medientyp, Reliability, Alignment).
- Edit-Form: Selects fuer political_orientation/media_type/reliability,
  Multi-Select-Chips fuer alignments, Toggle state_affiliated, Country-Code-Input.
- renderSourceGroup: Politik-Badge mit DACH-Farbskala (rot=L, blau=R),
  Reliability-Punkt (gruen→rot), Alignment-Tags, state-affiliated-Indikator.
  Tooltip um alle 4 Achsen erweitert.
- CSS-Block fuer alle neuen Badge-/Chip-Styles.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-05-07 18:37:09 +00:00
Ursprung f8e2f73bc0
Commit 715af17ac3
4 geänderte Dateien mit 431 neuen und 4 gelöschten Zeilen

Datei anzeigen

@@ -3503,6 +3503,117 @@ a.dev-source-pill:hover {
color: var(--info);
}
/* Klassifikations-Badges (politisch / reliability / alignments / state) */
.source-classification-badges {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.source-political-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 2px 6px;
border-radius: var(--radius);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
color: #fff;
background: #9e9e9e;
}
.source-political-badge.pol-links_extrem { background: #b71c1c; }
.source-political-badge.pol-links { background: #e53935; }
.source-political-badge.pol-mitte_links { background: #ef9a9a; color: #4a0d0d; }
.source-political-badge.pol-liberal { background: #fdd835; color: #4a3700; }
.source-political-badge.pol-mitte { background: #9e9e9e; }
.source-political-badge.pol-konservativ { background: #90caf9; color: #0d2740; }
.source-political-badge.pol-mitte_rechts { background: #5c6bc0; }
.source-political-badge.pol-rechts { background: #1976d2; }
.source-political-badge.pol-rechts_extrem { background: #0d47a1; }
.source-reliability-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #9e9e9e;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.source-reliability-dot.rel-sehr_hoch { background: #2e7d32; }
.source-reliability-dot.rel-hoch { background: #66bb6a; }
.source-reliability-dot.rel-gemischt { background: #fbc02d; }
.source-reliability-dot.rel-niedrig { background: #ef6c00; }
.source-reliability-dot.rel-sehr_niedrig { background: #c62828; }
.source-state-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #4a148c;
color: #fff;
font-size: 11px;
line-height: 1;
}
.source-alignment-chip-badge {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 500;
background: var(--cat-sonstige-bg, #eef);
color: var(--text-secondary, #555);
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Edit-Form: Klassifikations-Sektion */
.sources-classification-section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}
.sources-classification-header {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary, #555);
margin-bottom: 8px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.alignment-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.alignment-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
background: transparent;
color: var(--text-secondary, #555);
border: 1px solid var(--border-color, rgba(0,0,0,0.15));
cursor: pointer;
transition: all 0.12s ease;
}
.alignment-chip:hover {
background: var(--cat-sonstige-bg, #eef);
}
.alignment-chip.active {
background: var(--primary, #2a81cb);
color: #fff;
border-color: var(--primary, #2a81cb);
}
/* Typ-Badges */
.source-type-badge {
display: inline-flex;