Phase 5: App-Shell mit responsivem Layout, Navigation und Theme

Zwei Layouts aus derselben Zusammensetzung: unter 1000px Tab-Leiste unten, darueber Seitenleiste links mit Brotkrume statt Zurueck-Pfeil. Navigation ist wie im alten Panel ein flacher Zustand mit fester ZURUECK-Tabelle statt eines Router-Pakets - die Verschachtelung ist hoechstens dreistufig. Theme und Tab-Beschriftung ueberleben einen Neustart (localStorage, abgesichert fuer den Privatmodus), Startwert folgt der Systemeinstellung. Symbole aus dem alten Panel uebernommen, damit App und Panel gleich aussehen. Neun Rendertests belegen die Abnahmekriterien: Layoutwechsel in beide Richtungen, Zurueck-Ziel ueber die Tabelle, Zahnrad statt Tab-Leiste fuer die Einstellungen, Theme-Persistenz.
2026-08-11 10:55:10 +02:00
parent 2fe3576682
commit 5c0c2d1898
14 changed files with 1616 additions and 12 deletions
@@ -0,0 +1,112 @@
+/**
+ * Flacher Navigationszustand — kein Router-Paket.
+ *
+ * Übernommen aus dem alten HA-Panel (`route` + `ZURUECK`): Die App hat keinen
+ * Verlaufsstapel, sondern genau eine aktuelle Seite und eine feste Tabelle,
+ * welche Seite der Zurück-Pfeil ansteuert. Das ist bewusst so geblieben —
+ * die Verschachtelung ist flach genug (höchstens drei Ebenen), und ein Router
+ * würde nur Gewicht ohne Nutzen bringen.
+ */
+
+export const HAUPTBEREICHE = ["home", "audi", "trips", "stat", "fuel"] as const
+
+export type Hauptbereich = (typeof HAUPTBEREICHE)[number]
+
+export type SeitenName =
+  | Hauptbereich
+  // Unterseiten von "Mein Audi"
+  | "ident"
+  | "battverlauf"
+  | "service"
+  | "werkstatt"
+  | "sbuch"
+  | "reifen"
+  | "vers"
+  | "beitrag"
+  | "vertragsdetails"
+  | "schutz"
+  | "notruf"
+  | "steuer"
+  // Detailseiten der Listen
+  | "trip"
+  | "fill"
+  // Sonstige
+  | "sicherheit"
+  | "live"
+  | "einst"
+
+export interface Route {
+  name: SeitenName
+  /** Datensatz-Kennung bei Detailseiten (Fahrt, Tankvorgang, Servicebuch). */
+  id?: string
+}
+
+/**
+ * Ziel des Zurück-Pfeils je Unterseite. Seiten, die hier fehlen, sind
+ * Hauptbereiche und zeigen keinen Zurück-Pfeil.
+ */
+export const ZURUECK: Partial<Record<SeitenName, SeitenName>> = {
+  trip: "trips",
+  fill: "fuel",
+  service: "audi",
+  reifen: "audi",
+  ident: "audi",
+  battverlauf: "audi",
+  vers: "audi",
+  beitrag: "vers",
+  vertragsdetails: "vers",
+  schutz: "vertragsdetails",
+  steuer: "vers",
+  notruf: "vers",
+  werkstatt: "service",
+  sbuch: "service",
+  einst: "home",
+  sicherheit: "home",
+  live: "home",
+}
+
+/** Überschrift je Seite. Leer bedeutet: die Seite bringt ihre eigene mit. */
+export const TITEL: Record<SeitenName, string> = {
+  home: "Übersicht",
+  audi: "Mein Audi",
+  trips: "Fahrten",
+  stat: "Statistik",
+  fuel: "Tanken",
+  ident: "Fahrzeugdaten",
+  battverlauf: "Batterie",
+  service: "Service",
+  werkstatt: "Werkstatt",
+  sbuch: "Servicebuch",
+  reifen: "Reifen",
+  vers: "Versicherung & Steuer",
+  beitrag: "Beitrag",
+  vertragsdetails: "Vertragsdetails",
+  schutz: "Schutzbrief",
+  notruf: "Notruf",
+  steuer: "Kfz-Steuer",
+  trip: "Fahrt",
+  fill: "Tankvorgang",
+  sicherheit: "Fahrzeugstatus",
+  live: "Fahrt läuft",
+  einst: "Einstellungen",
+}
+
+export function istHauptbereich(name: SeitenName): name is Hauptbereich {
+  return (HAUPTBEREICHE as readonly string[]).includes(name)
+}
+
+/**
+ * Der Hauptbereich, zu dem eine Seite gehört — bestimmt, welcher Eintrag in
+ * Tab-Leiste bzw. Seitenleiste hervorgehoben wird. Folgt der ZURUECK-Kette
+ * nach oben.
+ */
+export function bereichVon(name: SeitenName): Hauptbereich {
+  let aktuell: SeitenName = name
+  for (let tiefe = 0; tiefe < 5; tiefe++) {
+    if (istHauptbereich(aktuell)) return aktuell
+    const eltern = ZURUECK[aktuell]
+    if (!eltern) return "home"
+    aktuell = eltern
+  }
+  return "home"
+}