UI Phase 1: Statistik 50/50, Footer rechts, Linksammler bis Footer, Bandbreiten-Graph oben rechts, Stat-Karten + Hilfe-Untermenues

Sichtbarkeits-/Layout-Politur (User-Wunsch, Quick-Wins-Paket vor den groesseren
Reworks von Einstellungen-Tab und Account-Verwaltung):

- Statistik: Bandbreitenverlauf und Hoster-Statistik jetzt 50/50 statt 40/60
  (grid-template-columns 1fr 1fr).
- Footer: die Zaehler (Pakete/Links/Session/Gesamt/Hoster/Speed/ETA) wandern
  nach unten-RECHTS, die Aktions-Buttons (Ein-/Ausklappen, Leeren, Clipboard)
  nach links.
- Linksammler: das Textfeld fuellt jetzt die volle Hoehe bis zum Footer
  (collector-view: grid-row 1fr, textarea flex:1) statt bei 220px zu enden.
- Downloads-Tab: neuer Bandbreiten-Graph oben rechts (DownloadSpeedSparkline)
  neben der Suche. Eigener 250ms-Timer mit geglaettetem Verlauf: bei kurzem
  Einbruch auf 0 faellt die Kurve nicht hart ab, sondern gleitet weich runter
  (asymmetrisches Easing: schnell hoch 0.45, langsam runter 0.12) und
  korrigiert sich wieder; die angezeigte Zahl bleibt der echte aktuelle Wert.
  Erste Version - Optik wird nach JDownloader-Screenshot nachgezogen.
- Stat-Karten professioneller: Wert in Zahl + Einheit getrennt (Einheit
  dezent), ruhige Leerzustaende (idle '0'/'—' gedaempft statt nacktem grossen
  '0'), kompaktere Karten, dezentere Eyebrow-Labels.
- Hoster-Balken: flacher Akzent statt Neon-Verlauf (kein Gradient).
- Hilfe-Menue umstrukturiert mit Hover-Untermenues: 'Logs oeffnen' (Haupt-,
  Audit-, Rename-, Session-, Trace-Log), 'Remote-Support' (Support-Bundle +
  Support-Trace), 'Diagnose' (Debug-Setup + Debug-Token); 'Letzte Fehler
  anzeigen' und 'Suche Aktualisierungen' bleiben direkt.

Reine Renderer-Aenderung (App.tsx + styles.css). 808 Tests gruen, tsc=6
Baseline, Build ok.
This commit is contained in:
Sucukdeluxe
2026-06-15 00:18:14 +02:00
parent 73f871bfcb
commit 4c09c9a2f3
2 changed files with 261 additions and 53 deletions
+76 -15
View File
@@ -536,6 +536,33 @@ body,
z-index: 1;
}
.speed-sparkline {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 10px;
background: var(--field);
border: 1px solid var(--border);
border-radius: 8px;
}
.speed-sparkline-canvas {
width: 116px;
height: 22px;
display: block;
}
.speed-sparkline-value {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
min-width: 66px;
text-align: right;
}
.tab {
background: var(--tab-bg);
border: 1px solid var(--border);
@@ -579,6 +606,20 @@ body,
min-height: 280px;
}
.collector-view {
grid-template-rows: 1fr;
}
.collector-view .card.wide {
min-height: 0;
}
.collector-view .card textarea {
flex: 1;
min-height: 120px;
resize: none;
}
.card h3 {
margin: 0;
font-size: 15px;
@@ -2531,7 +2572,7 @@ td {
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 10px;
min-height: 0;
@@ -2579,10 +2620,10 @@ td {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
min-height: 96px;
gap: 10px;
min-height: 82px;
min-width: 0;
padding: 12px 14px;
padding: 11px 14px;
background: var(--field);
border-radius: 10px;
border: 1px solid var(--border);
@@ -2600,16 +2641,17 @@ td {
.stat-top {
display: flex;
flex-direction: column;
gap: 3px;
gap: 2px;
min-width: 0;
}
.stat-eyebrow {
color: var(--muted);
font-size: 10px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
.stat-item.stat-item-clickable {
@@ -2623,25 +2665,44 @@ td {
.stat-label {
color: var(--text);
font-size: 14px;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
}
.stat-value {
font-size: clamp(22px, 1.35vw, 30px);
font-weight: 700;
display: flex;
align-items: baseline;
gap: 4px;
font-variant-numeric: tabular-nums;
line-height: 1.1;
overflow-wrap: anywhere;
}
.stat-value.stat-value-compact {
font-size: clamp(18px, 1.05vw, 24px);
line-height: 1.2;
.stat-num {
font-size: clamp(22px, 1.35vw, 30px);
font-weight: 700;
}
.stat-value.danger {
.stat-unit {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.stat-value.stat-value-compact {
font-size: clamp(18px, 1.05vw, 24px);
font-weight: 700;
}
.stat-value.stat-idle,
.stat-value.stat-idle .stat-num {
color: var(--muted);
opacity: 0.5;
}
.stat-value.danger,
.stat-value.danger .stat-num {
color: var(--danger);
}
@@ -2718,7 +2779,7 @@ td {
}
.bar-fill.completed {
background: linear-gradient(90deg, #f2942d, #ff7a5c);
background: var(--accent, #f2942d);
}
.provider-detail {