Persistente linke Sidebar und mehrseitiges Dashboard-Layout

Am 2026-06-05 haben wir heatmapx.com/dashboard mit einem vollständigen Supabase/Vercel-artigen persistenten Sidebar-Layout neu aufgebaut (ein strukturelles Follow-up zum vollständigen Dashboard-Redesign, das am selben Tag ausgeliefert wurde).

Neues Layout

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← sticky Header
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Sites / Heutige Events / Plan       │
│   ⌘ CLI&Skills│                                       │
│   $ Plan&Billing│  KI-Analyse-Nutzung [████░]         │
│   ⚙ Settings  │   PV-Nutzung         [██░░░]          │
│               │                                       │
│ COMING SOON   │   Quick Actions                       │
│   🧪 A/B Tests │   [▤ Heatmaps anzeigen] [＋Hinzufügen]│
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Log out     │                                       │
└──────────────┴───────────────────────────────────────┘

Fünf dedizierte Seiten

Route	Seite	Inhalt
`/dashboard`	⌂ Home	Stats-Karten (Sites / heutige Events / aktueller Plan), Nutzungsbalken (KI-Analysen / PV), Quick Actions
`/dashboard/sites`	▤ Heatmaps	Tabellarische Liste registrierter Sites. Neue Sites hier hinzufügen
`/dashboard/cli`	⌘ CLI & Skills	Installationsanleitungen für Terminal-CLI und Claude Code Skill nebeneinander
`/dashboard/billing`	$ Plan & Billing	Aktuelle Nutzungsübersicht + vollständige Planvergleichstabelle (Free / Pro / Team / Enterprise)
`/dashboard/settings`	⚙ Settings	Sprachauswahl (English / 日本語) — weitere Einstellungen folgen

Was sich geändert hat

▤ Supabase-artige persistente linke Sidebar

Alle fünf primären Navigationspunkte sind jederzeit in der linken Sidebar sichtbar, beim Scrollen fixiert, sodass zwischen Seiten von überall gewechselt werden kann.

Aktive-Seite-Hervorhebung: die aktuelle Seite ist im Menü visuell betont
Icons: jeder Menüeintrag hat eine visuelle Kennung
Log out: am Ende der Sidebar fixiert, verringert das Risiko versehentlicher Klicks

⌂ Home als Auf-einen-Blick-Übersicht

/dashboard — der erste Bildschirm nach dem Login — ist jetzt so gestaltet, dass er den vollständigen Kontostatus in einer einzigen Ansicht zeigt.

Stats-Karten mit Siteanzahl, heutiger Event-Gesamtzahl und aktuellem Plan
Fortschrittsbalken für KI-Analysenutzung und monatliche PV (bernsteinfarben ab 80%, rot ab 100%)
Quick Actions: „Heatmaps anzeigen", „Site hinzufügen", „Upgraden" und „CLI Setup"

⌘ CLI & Skills nebeneinander

Beide Verwendungsarten von HeatMapX — Terminal-CLI und Claude Code Skill — sind auf einer einzigen Seite in einem zweispaltigen Layout dokumentiert.

CLI: Schritt für Schritt von npm install -g heatmapx bis zu heatmapx analyze
Claude Code Skill: Mit /plugin install heatmapx-skill@xtv-llc/heatmapx-cli installieren und HeatMapX direkt aus dem Gespräch heraus aufrufen
Beispielbefehle auf Englisch und Japanisch

$ Vollständiger Planvergleich integriert

Die Plan & Billing-Seite enthält jetzt die vollständige Free / Pro / Team / Enterprise-Vergleichstabelle, sodass Optionen geprüft und Upgrades durchgeführt werden können, ohne das Dashboard zu verlassen.

Monatlich / Jährlich-Toggle (jährlich als Standard; jährliche Abrechnung bietet einen deutlichen Rabatt gegenüber monatlich). Aktuelle Preise auf der Preisseite
Aktueller Plan mit grünem „Current"-Badge markiert
Pro ist als empfohlene Option in Orange hervorgehoben
Enterprise verlinkt auf heatmapx@xtv.co.jp für direkten Kontakt

⚙ Sprachauswahl in den Einstellungen

Die Sprachumschaltung war zuvor nur als Zweizustands-Toggle im Header verfügbar. Sie ist jetzt auch als expliziter Radio-Selektor in den Einstellungen zugänglich. Änderungen werden sofort übernommen und im Browser gespeichert.

Demnächst verfügbar

Ein „Coming Soon"-Bereich am Ende der Sidebar zeigt Features, die in kommenden Releases erscheinen:

Feature	Beschreibung
🧪 A/B Tests	Ein-Klick-A/B-Testing für Text- und Layout-Änderungen basierend auf Heatmap-Erkenntnissen
✨ Dynamic UI	Personalisierungs-Engine, die die UI basierend auf Nutzerattributen und Verhaltensmustern anpasst

Weitere Verbesserungen

Sticky Header: Logo, Theme-Umschalter und Sprach-Toggle bleiben beim Scrollen sichtbar
Sticky Sidebar: Navigation bleibt beim Scrollen des Seiteninhalts jederzeit zugänglich
Log out verschoben: vom Header oben rechts an den Fußbereich der Sidebar (wichtige, aber seltene Aktion nach unten verschoben)
Rückwärtskompatibel: Bestehende /dashboard-Lesezeichen landen auf dem neuen Startbildschirm — keine Weiterleitungen erforderlich

Auswirkungsbereich

Dieses Release ist ausschließlich UI/UX — Tracking-Logik, Datenstrukturen und APIs sind unverändert. Bestehende eingebettete Tracker Tags funktionieren weiterhin wie bisher. Für bestehende /dashboard-Lesezeichen sind keine Weiterleitungen erforderlich.