perf(alerts): Warnungen sammelweise anlegen, Dark-Mode und Mobilansicht verbessern (#015)

Lasttest mit 200 Hosts und 365.000 Reports: Auswertung der Warnregeln von 3813
auf 293 ms. Logo im dunklen Design sichtbar gemacht, Tabellen blenden auf
schmalen Bildschirmen Spalten aus, Aufgaben-Karte begrenzt.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-17 23:27:23 +02:00
co-authored by Claude Opus 5
parent 9647c19136
commit 4c65c9ddab
22 changed files with 354 additions and 63 deletions
+17 -8
View File
@@ -1,6 +1,7 @@
/**
* ProxLedger-Monogramm: ein P auf zwei Buchungslinien.
* Varianten: "standard" (heller Grund), "sidebar" (dunkler Grund), "mono" (einfarbig für PDF/Rechnungen).
* Varianten: "standard" folgt dem Farbschema (im Dunkelmodus hell), "sidebar" ist immer weiß,
* "mono" einfarbig für PDF und Rechnungen.
*/
export type LogoVariante = "standard" | "sidebar" | "mono";
@@ -9,18 +10,19 @@ interface LogoProps {
variante?: LogoVariante;
groesse?: number;
className?: string;
/** Für dekorative Verwendung neben dem Schriftzug. */
/** Für dekorative Verwendung neben dem Schriftzug leer lassen. */
titel?: string;
}
const FARBEN: Record<LogoVariante, { p: string; linien: string }> = {
standard: { p: "#1E2A44", linien: "#17A2B8" },
const FESTE_FARBEN: Record<Exclude<LogoVariante, "standard">, { p: string; linien: string }> = {
sidebar: { p: "#FFFFFF", linien: "#17A2B8" },
mono: { p: "#1E2A44", linien: "#1E2A44" },
};
export function Logo({ variante = "standard", groesse = 40, className, titel }: LogoProps) {
const farben = FARBEN[variante];
// Die Standardvariante nimmt ihre Farben aus dem Theme, damit sie auch auf dunklem Grund lesbar bleibt.
const farben = variante === "standard" ? null : FESTE_FARBEN[variante];
return (
<svg
viewBox="0 0 48 48"
@@ -36,14 +38,21 @@ export function Logo({ variante = "standard", groesse = 40, className, titel }:
<path
fillRule="evenodd"
d="M8 4h19a12 12 0 0 1 0 24H16v16H8zM16 11h10a5 5 0 0 1 0 10H16z"
fill={farben.p}
className={farben ? undefined : "pl-logo-p"}
fill={farben?.p}
/>
<path
d="M22 36h20M22 43h14"
className={farben ? undefined : "pl-logo-linien"}
stroke={farben?.linien}
strokeWidth="3.5"
strokeLinecap="round"
/>
<path d="M22 36h20M22 43h14" stroke={farben.linien} strokeWidth="3.5" strokeLinecap="round" />
</svg>
);
}
/** Logo mit Schriftzug, wie in Sidebar und Login verwendet. */
/** Logo mit Schriftzug, wie in Sidebar und Anmeldung verwendet. */
export function LogoMitSchriftzug({
variante = "standard",
groesse = 36,