Account-Liste: einklappbare Anbieter-Gruppen (z.B. "Mega-Debrid · 4 Accounts")

User-Idee: Anbieter mit mehreren Accounts zusammenfassbar machen, platzsparend.

- Anbieter mit >= 2 Accounts (Mega-Debrid, Debrid-Link) bekommen einen klickbaren
  Gruppen-Kopf "<Anbieter> · N Accounts" mit Chevron zum Ein-/Ausklappen; Einzel-
  account-Anbieter bleiben normale flache Zeilen.
- Gruppen-Kopf zeigt eine Mini-Status-Zusammenfassung als Badges: "X OK" (gruen),
  "Y Problem" (rot, ungueltige Logins), "Z aus" (deaktiviert).
- Standard ausgeklappt (Status bleibt auf einen Blick sichtbar); Klapp-Zustand wird
  pro Anbieter in localStorage gemerkt (rd-account-collapsed-groups-v1).
- Mitglied-Zeilen leicht eingerueckt mit Akzent-Leiste. Zebra-Streifen entfernt
  (mit Gruppen-Koepfen unruhig).
- Zeilen-Rendering in renderAccountRow ausgelagert (fuer flache + Gruppen-Mitglieder
  wiederverwendet); neues groupedAccountRows-useMemo gruppiert accountRows nach Service.

Reine Renderer-Aenderung. 810 Tests gruen, tsc=6, build ok.
This commit is contained in:
Sucukdeluxe
2026-06-15 01:46:23 +02:00
parent 04b8ba1dc4
commit 32e43d1a62
2 changed files with 134 additions and 55 deletions
+10 -1
View File
@@ -3291,9 +3291,18 @@ td {
font-size: 13px;
}
.acct2-row:last-child { border-bottom: 0; }
.acct2-row:nth-child(even) { background: color-mix(in srgb, var(--card) 28%, transparent); }
.acct2-row.acct2-problem { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.acct2-row.acct2-disabled { opacity: 0.55; }
.acct2-group-head { cursor: pointer; background: color-mix(in srgb, var(--card) 50%, transparent); }
.acct2-group-head:hover { background: color-mix(in srgb, var(--card) 68%, transparent); }
.acct2-group-head .acct2-hoster strong { font-size: 13px; }
.acct2-chevron { display: inline-block; color: var(--muted); font-size: 9px; transition: transform 0.12s ease; }
.acct2-chevron.open { transform: rotate(90deg); }
.acct2-grp-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.acct2-row.acct2-member .acct2-hoster {
padding-left: 12px;
border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.acct2-c-check { display: flex; justify-content: center; }
.acct2-c-check input { cursor: pointer; }
.acct2-c-actions { display: flex; gap: 6px; justify-content: flex-end; }