breakpilot-pwa/.claude/rules/experimental-dashboard.md

# Experimental Dashboard - Apple Weather Style UI

**Status:** In Entwicklung
**Letzte Aktualisierung:** 2026-01-24
**URL:** http://macmini:3001/dashboard-experimental

---

## Uebersicht

Das Experimental Dashboard implementiert einen **Apple Weather App Style** mit:
- Ultra-transparenten Glassmorphism-Cards (~8% Opacity)
- Dunklem Sternenhimmel-Hintergrund mit Parallax
- Weisser Schrift auf monochromem Design
- Schwebenden Nachrichten (FloatingMessage) mit ~4% Background
- Nuetzlichen Widgets: Uhr, Wetter, Kompass, Diagramme

---

## Design-Prinzipien

| Prinzip | Umsetzung |
|---------|-----------|
| **Transparenz** | Cards mit 8% Opacity, Messages mit 4% |
| **Verschmelzung** | Elemente verschmelzen mit dem Hintergrund |
| **Monochrom** | Weisse Schrift, keine bunten Akzente |
| **Subtilitaet** | Dezente Hover-Effekte, sanfte Animationen |
| **Nuetzlichkeit** | Echte Informationen (Uhrzeit, Wetter) |

---

## Dateistruktur

```
/studio-v2/
├── app/
│   └── dashboard-experimental/
│       └── page.tsx                 # Haupt-Dashboard (740 Zeilen)
│
├── components/
│   └── spatial-ui/
│       ├── index.ts                 # Exports
│       ├── SpatialCard.tsx          # Original SpatialCard (nicht verwendet)
│       └── FloatingMessage.tsx      # Schwebende Nachrichten
│
└── lib/
    └── spatial-ui/
        ├── index.ts                 # Exports
        ├── depth-system.ts          # Design Tokens
        ├── PerformanceContext.tsx   # Adaptive Qualitaet
        └── FocusContext.tsx         # Focus-Modus
```

---

## Komponenten

### GlassCard
Ultra-transparente Card fuer alle Inhalte.

```typescript
interface GlassCardProps {
  children: React.ReactNode
  className?: string
  onClick?: () => void
  size?: 'sm' | 'md' | 'lg'  // Padding: 16px, 20px, 24px
  delay?: number              // Einblend-Verzoegerung in ms
}
```

**Styling:**
- Background: `rgba(255, 255, 255, 0.08)` (8%)
- Hover: `rgba(255, 255, 255, 0.12)` (12%)
- Border: `1px solid rgba(255, 255, 255, 0.1)`
- Blur: 24px (adaptiv)
- Border-Radius: 24px (rounded-3xl)

### AnalogClock
Analoge Uhr mit Sekundenzeiger.

- Stunden-Zeiger: Weiss, dick
- Minuten-Zeiger: Weiss/80%, duenn
- Sekunden-Zeiger: Orange (#fb923c)
- 12 Stundenmarkierungen
- Aktualisiert jede Sekunde

### Compass
Kompass im Apple Weather Style.

```typescript
interface CompassProps {
  direction?: number  // Grad (0 = Nord, 90 = Ost, etc.)
}
```

- Nord-Nadel: Rot (#ef4444)
- Sued-Nadel: Weiss
- Kardinalrichtungen: N (rot), S, W, O

### BarChart
Balkendiagramm fuer Wochen-Statistiken.

```typescript
interface BarChartProps {
  data: { label: string; value: number; highlight?: boolean }[]
  maxValue?: number
}
```

- Highlight-Balken mit Gradient (blau → lila)
- Normale Balken: 20% weiss
- Labels unten, Werte oben

### ProgressRing
Kreisfoermiger Fortschrittsanzeiger.

```typescript
interface ProgressRingProps {
  progress: number      // 0-100
  size?: number         // Default: 80px
  strokeWidth?: number  // Default: 6px
  label: string
  value: string
  color?: string        // Farbe des Fortschritts
}
```

### TemperatureDisplay
Wetter-Anzeige mit Icon und Temperatur.

```typescript
interface TemperatureDisplayProps {
  temp: number
  condition: 'sunny' | 'cloudy' | 'rainy' | 'snowy' | 'partly_cloudy'
}
```

### FloatingMessage
Schwebende Benachrichtigungen von rechts.

**Aktuell:**
- Background: 4% Opacity
- Blur: 24px
- Border: `1px solid rgba(255, 255, 255, 0.12)`
- Auto-Dismiss mit Progress-Bar
- 3 Antwort-Optionen: Antworten, Oeffnen, Spaeter
- Typewriter-Effekt fuer Text

---

## Farbpalette

| Element | Wert |
|---------|------|
| Background | `from-slate-900 via-indigo-950 to-slate-900` |
| Card Background | `rgba(255, 255, 255, 0.08)` |
| Card Hover | `rgba(255, 255, 255, 0.12)` |
| Message Background | `rgba(255, 255, 255, 0.04)` |
| Border | `rgba(255, 255, 255, 0.1)` |
| Text Primary | `text-white` |
| Text Secondary | `text-white/50` bis `text-white/40` |
| Accent Blue | `#60a5fa` |
| Accent Purple | `#a78bfa` |
| Accent Orange | `#fb923c` (Sekundenzeiger) |
| Accent Red | `#ef4444` (Kompass Nord) |

---

## Performance-System

Das Dashboard nutzt das **PerformanceContext** fuer adaptive Qualitaet:

| Quality Level | Blur | Parallax | Animationen |
|---------------|------|----------|-------------|
| high | 24px | Ja | Spring |
| medium | 17px | Ja | Standard |
| low | 0px | Nein | Reduziert |
| minimal | 0px | Nein | Keine |

**FPS-Monitor** unten links zeigt:
- Aktuelle FPS
- Quality Level
- Blur/Parallax Status

---

## Deployment

```bash
# 1. Sync zu Mac Mini
rsync -avz --delete \
  --exclude 'node_modules' --exclude '.next' --exclude '.git' \
  /Users/benjaminadmin/Projekte/breakpilot-pwa/studio-v2/ \
  macmini:/Users/benjaminadmin/Projekte/breakpilot-pwa/studio-v2/

# 2. Build
ssh macmini "/usr/local/bin/docker compose \
  -f /Users/benjaminadmin/Projekte/breakpilot-pwa/docker-compose.yml \
  build --no-cache studio-v2"

# 3. Deploy
ssh macmini "/usr/local/bin/docker compose \
  -f /Users/benjaminadmin/Projekte/breakpilot-pwa/docker-compose.yml \
  up -d studio-v2"

# 4. Testen
http://macmini:3001/dashboard-experimental
```

---

## Offene Punkte / Ideen

### Kurzfristig
- [ ] Echte Wetterdaten via API integrieren
- [ ] Kompass-Richtung dynamisch (GPS oder manuell)
- [ ] Klick auf Cards fuehrt zu Detailseiten
- [ ] Light Mode Support (aktuell nur Dark)

### Mittelfristig
- [ ] Drag & Drop fuer Card-Anordnung
- [ ] Weitere Widgets: Kalender, Termine, Erinnerungen
- [ ] Animierte Uebergaenge zwischen Seiten
- [ ] Sound-Feedback bei Interaktionen

### Langfristig
- [ ] Personalisierbare Widgets
- [ ] Dashboard als Standard-Startseite
- [ ] Mobile-optimierte Version
- [ ] Integration mit Apple Health / Fitness Daten

---

## Referenzen

- **Apple Weather App** (iOS) - Hauptinspiration
- **Dribbble Shot:** https://dribbble.com/shots/26339637-Smart-Home-Dashboard-Glassmorphism-UI
- **Design Tokens:** `/studio-v2/lib/spatial-ui/depth-system.ts`

---

## Aenderungshistorie

| Datum | Aenderung |
|-------|-----------|
| 2026-01-24 | FloatingMessage auf 4% Opacity reduziert |
| 2026-01-24 | Kompass, Balkendiagramm, Analog-Uhr hinzugefuegt |
| 2026-01-24 | Cards auf 8% Opacity reduziert |
| 2026-01-24 | Apple Weather Style implementiert |
| 2026-01-24 | Erstes Spatial UI System erstellt |