From 948e55e4f282818dd1651fd867055f36b2ad35a4 Mon Sep 17 00:00:00 2001 From: Hitonabi Date: Fri, 25 Sep 2026 14:22:39 +0200 Subject: [PATCH] =?UTF-8?q?design=20v5:=20=C3=9Cbersicht=20als=20Vorschau,?= =?UTF-8?q?=20Grundbausteine=20im=20neuen=20Look?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tiefblauer Grund mit Lichtflecken in den Bereichsfarben, Glasflächen mit Lichtkante (flaeche), ruhigere Schrift (Überschriften normal geschrieben, Großbuchstaben nur als kleines Etikett) und dezente Bewegung. - Startseite neu: Geräte-Ring mit Gesamtlage, drei Eckwerte, Instrumente (8 Messringe), Bereichskarten mit Kacheln je Modell, Baustein und Gerät (Symbol, Zustandspunkt, Update direkt an der Kachel), Speicher/NAS, Zeitleisten „Als Nächstes“ und „Zuletzt eingespielt“. - Panel, Schildchen, Kennzahl, Verlaufslinie, Seitenleiste und Kopf im neuen Look — wirkt schon auf allen Seiten. - Symbole je Gerät (lib/geraetebild): Farbe des Bereichs, Zustände nur als Punkt. Vorbilder: Heimdall, Dashy, Homepage, umbrelOS, Pulse. Noch nicht ausgerollt (kein dist): erst nach dem Ja des Users. Co-Authored-By: Claude Opus 5.5 --- frontend/src/app/MenueSchublade.tsx | 2 +- frontend/src/app/Seitenleiste.tsx | 77 +- frontend/src/app/Shell.tsx | 30 +- frontend/src/components/cockpit/Chip.tsx | 23 +- .../src/components/cockpit/Geraetesymbol.tsx | 48 ++ frontend/src/components/cockpit/Panel.tsx | 17 +- .../src/components/diagramme/Kennzahl.tsx | 8 +- .../src/components/diagramme/Messring.tsx | 82 ++ .../src/components/diagramme/Sparkline.tsx | 13 +- .../src/components/uebersicht/Lagering.tsx | 64 ++ frontend/src/index.css | 133 +++- frontend/src/lib/geraetebild.ts | 67 ++ frontend/src/views/Uebersicht.tsx | 740 +++++++++++++----- 13 files changed, 1006 insertions(+), 298 deletions(-) create mode 100644 frontend/src/components/cockpit/Geraetesymbol.tsx create mode 100644 frontend/src/components/diagramme/Messring.tsx create mode 100644 frontend/src/components/uebersicht/Lagering.tsx create mode 100644 frontend/src/lib/geraetebild.ts diff --git a/frontend/src/app/MenueSchublade.tsx b/frontend/src/app/MenueSchublade.tsx index 11fa360..37f6099 100644 --- a/frontend/src/app/MenueSchublade.tsx +++ b/frontend/src/app/MenueSchublade.tsx @@ -10,7 +10,7 @@ export function MenueSchublade({ onSchliessen }: { onSchliessen: () => void }) { !o && onSchliessen()}> diff --git a/frontend/src/app/Seitenleiste.tsx b/frontend/src/app/Seitenleiste.tsx index 4a6d802..1245cd5 100644 --- a/frontend/src/app/Seitenleiste.tsx +++ b/frontend/src/app/Seitenleiste.tsx @@ -1,60 +1,61 @@ import { Link } from "@tanstack/react-router" -import { ExternalLink } from "lucide-react" +import { BrainCircuit, ExternalLink, type LucideIcon, Server } from "lucide-react" import { cn } from "cn" import { useInstanz } from "@/lib/abfragen" import { BEREICHE, type Ort, SEITEN, type Seite, useBereichStand, type Verbindung } from "@/lib/navigation" const VERBINDUNG: Record = { - online: { punkt: "bg-gruen shadow-[0_0_8px_rgba(61,220,138,0.7)]", text: "online" }, + online: { punkt: "bg-gruen shadow-[0_0_8px_var(--gruen)]", text: "online" }, verbinde: { punkt: "bg-bernstein", text: "verbinde" }, - getrennt: { punkt: "bg-rot", text: "getrennt" }, + getrennt: { punkt: "bg-rot shadow-[0_0_8px_var(--rot)]", text: "getrennt" }, fehlt: { punkt: "bg-text-3", text: "nicht eingerichtet" }, } -// Jeder Ort hat seine Farbe: die aktive Seite trägt sie als Balken links, Grund und Symbol. -const FARBE: Record = { - uebersicht: { aktiv: "!border-bernstein bg-bernstein-grund", symbol: "group-data-[status=active]:text-bernstein" }, - box: { aktiv: "!border-box bg-box-grund", symbol: "group-data-[status=active]:text-box" }, - homelab: { aktiv: "!border-lab bg-lab-grund", symbol: "group-data-[status=active]:text-lab" }, - system: { aktiv: "!border-text-2 bg-erhaben", symbol: "group-data-[status=active]:text-foreground" }, +// Jeder Ort hat seine Farbe: die aktive Seite trägt sie als leuchtenden Balken links, als Verlauf im Grund und im +// Symbol (Design v5). TanStack setzt an aktiven Links data-status="active". +const FARBE: Record = { + uebersicht: + "data-[status=active]:from-bernstein/[0.16] before:bg-bernstein before:shadow-[0_0_12px_var(--bernstein)] data-[status=active]:[&>svg]:text-bernstein", + box: "data-[status=active]:from-box/[0.2] before:bg-box before:shadow-[0_0_12px_var(--box)] data-[status=active]:[&>svg]:text-box", + homelab: "data-[status=active]:from-lab/[0.2] before:bg-lab before:shadow-[0_0_12px_var(--lab)] data-[status=active]:[&>svg]:text-lab", + system: "data-[status=active]:from-white/[0.08] before:bg-text-2 data-[status=active]:[&>svg]:text-foreground", } -const KOPF: Record<"box" | "homelab", { text: string; balken: string }> = { - box: { text: "text-box-text", balken: "bg-box" }, - homelab: { text: "text-lab-text", balken: "bg-lab" }, +const KOPF: Record<"box" | "homelab", { text: string; kachel: string; Icon: LucideIcon }> = { + box: { text: "text-box-text", kachel: "from-box/30 to-box/[0.05] ring-box/35 text-box", Icon: BrainCircuit }, + homelab: { text: "text-lab-text", kachel: "from-lab/30 to-lab/[0.05] ring-lab/35 text-lab", Icon: Server }, } const EINTRAG = - "group flex h-11 items-center gap-3 rounded-lg border-l-2 border-transparent pr-3 pl-3 text-[15px] text-text-2 " + - "hover:bg-erhaben hover:text-foreground" + "group relative flex h-10 items-center gap-3 rounded-xl pr-3 pl-3.5 text-[14.5px] text-text-2 transition-colors " + + "hover:bg-white/[0.045] hover:text-foreground " + + "bg-gradient-to-r to-transparent data-[status=active]:text-foreground " + + "before:absolute before:top-2.5 before:bottom-2.5 before:left-0 before:w-[3px] before:rounded-full before:opacity-0 " + + "before:transition-opacity data-[status=active]:before:opacity-100" /** Homelab Orchestrator (vormals MC2, Name seit 24.09.2026). */ export function Marke() { return ( -
- +
+ + + + - Homelab - Orchestrator + Homelab + Orchestrator
) } function SeitenLink({ s, zahl, onGewaehlt }: { s: Seite; zahl?: number; onGewaehlt?: () => void }) { - const f = FARBE[s.ort] return ( - - + + {s.label} {!!zahl && ( - + {zahl} {zahl === 1 ? "Update" : "Updates"} bereit @@ -64,7 +65,7 @@ function SeitenLink({ s, zahl, onGewaehlt }: { s: Seite; zahl?: number; onGewaeh } /** - * Die Menüführung: oben die Übersicht, dann je Bereich ein farbiger Block mit Verbindungsanzeige und seinen + * Die Menüführung: oben die Übersicht, dann je Bereich ein Block mit Symbol, Verbindungsanzeige und seinen * Seiten, unten die Einstellungen. Am PC steht sie fest links, am Handy in der Schublade hinter dem Menü-Knopf. */ export function Seitenleiste({ onGewaehlt }: { @@ -76,20 +77,22 @@ export function Seitenleiste({ onGewaehlt }: { const hermes = useInstanz().data?.rolle !== "homelab" const seite = (to: Seite["to"]) => SEITEN.find((s) => s.to === to)! return ( -