WrestleDesk/docs/superpowers/specs/2026-03-23-leistungstest-ui-design.md

# Leistungstest & UI Modernisierung - Design

## Status
- **Draft** - Needs user review
- **Date**: 2026-03-23

---

## Teil 1: Backend Fixes

### Problem 1: Template-Erstellung
**Aktuell**: Template wird erstellt, aber Übungen werden in separaten POST-Requests gesendet → Inkonsistenz

**Lösung**: Die `create()` Methode im ViewSet sollte Übungen direkt mit dem Template speichern

```python
def create(self, request, *args, **kwargs):
    # 1. Template erstellen
    # 2. Übungen direkt in derselben Transaktion speichern
    # 3. Response mit allen Daten zurückgeben
```

### Problem 2: IDs statt Namen
**Ursache**: Frontend zeigt `SelectItem key={id} value={String(id)}` - der `value` ist die ID, aber `SelectValue` zeigt `children` nicht korrekt

**Lösung**: Nach dem Speichern der Übungen muss das Template mit `prefetch_related` neu geladen werden, damit `exercise_name` verfügbar ist

---

## Teil 2: UI Modernisierung (Ganze App)

### Design Philosophy: "Elegant & Clean"
- Sanfte, subtile Animationen
- Professionelles Erscheinungsbild
- Fokus auf Lesbarkeit und Benutzerfreundlichkeit
- Keine übertriebenen Effekte

### Aktuelle Probleme
1. **Keine Page Transitions** - Seitenwechsel sind abrupt
2. **Statische Hover-Effekte** - Keine sanften Übergänge
3. **Cards ohne Tiefe** - Keine subtilen Schatten oder Glows
4. **Monochrome Icons** - Keine Farbvariation
5. **FadeIn nur auf Hauptelementen** - Inkonsistente Animationen

### Geplante Verbesserungen

#### 2.1 Global Page Transitions
```tsx
// app/(dashboard)/layout.tsx
import { motion, AnimatePresence } from "framer-motion"

// Page-Übergänge mit smooth fade + slide
<AnimatePresence mode="wait">
  <motion.div
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -10 }}
    transition={{ duration: 0.2, ease: "easeOut" }}
  >
    {children}
  </motion.div>
</AnimatePresence>
```

#### 2.2 Subtile Card-Hover-Effekte
```tsx
// Aktuell
<Card>
// Neu mit motion
<motion.div whileHover={{ y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.1)" }}>
  <Card>
</motion.div>
```

#### 2.3 Button Micro-Interactions
```tsx
// Scale + subtle glow on hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
```

#### 2.4 Staggered List Animations
```tsx
// Für Listen und Cards mit verzögertem Erscheinen
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ staggerChildren: 0.05 }}
>
  {items.map(item => (
    <motion.div key={item.id} variants={itemVariant} />
  ))}
</motion.div>
```

#### 2.5 Smooth Scrollbar Styling
```css
/* Modern scrollbar für Webkit-Browser */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.5);
}
```

#### 2.6 Icon Color Transitions
```tsx
// Icons mit Farbwechsel bei Hover
<motion.div whileHover={{ color: "#1B1A55" }}>
  <Icon className="transition-colors" />
</motion.div>
```

---

## Teil 3: Component-Spezifische Änderungen

### 3.1 Sidebar
- Hover-State mit sanftem Slide + Farbwechsel
- Active-State mit subtle glow/underline
- Smooth expand/collapse für Submenüs

### 3.2 Cards (Stat Cards, Data Cards)
- Subtle lift bei Hover
- Border-color transition
- Sanfte Schatten-Verstärkung

### 3.3 Tables
- Row hover mit background shift
- Smooth row appearance (staggered)
- Subtle column highlight

### 3.4 Forms
- Input focus mit border-color + subtle glow
- Label animation (float label style optional)
- Button loading state mit spinner

### 3.5 Tabs
- Underline indicator mit smooth slide
- Active tab mit subtle scale

---

## Teil 4: Animations-Token

```typescript
// lib/animations.ts (neu oder erweitern)
export const transitions = {
  fast: "150ms",
  normal: "250ms", 
  slow: "400ms",
}

export const easing = {
  default: "easeOut",
  smooth: [0.4, 0, 0.2, 1], // cubic-bezier
  bounce: [0.68, -0.55, 0.265, 1.55],
}

export const stagger = {
  fast: 0.05,
  normal: 0.1,
  slow: 0.15,
}
```

---

## Implementation Reihenfolge

1. **Backend Fix** (10 min)
   - Template create mit embedded exercises
   - Verify exercise_name wird korrekt zurückgegeben

2. **Animation Library Setup** (5 min)
   - Framer Motion installieren/verifizieren
   - Animation tokens definieren

3. **Global Layout** (15 min)
   - Page transitions in layout.tsx
   - Smooth scrolling CSS

4. **Sidebar Enhancement** (15 min)
   - Hover/active animations
   - Icon transitions

5. **Card Components** (20 min)
   - Alle Cards mit hover effects
   - Stat cards auf Dashboard

6. **List/Table Enhancements** (20 min)
   - Staggered animations
   - Row hover effects

7. **Form Enhancements** (15 min)
   - Input focus states
   - Button micro-interactions

8. **Tab Enhancements** (10 min)
   - Slide underline indicator

---

## Erfolgskriterien

- [ ] Template-Erstellung funktioniert vollständig mit Übungen
- [ ] Dropdowns zeigen Namen statt IDs
- [ ] Seitenwechsel sind smooth (fade + slide)
- [ ] Hover-Effekte auf allen interaktiven Elementen
- [ ] Listen appear mit staggered animation
- [ ] Keine "jarring" Übergänge
- [ ] Performance bleibt gut (nicht zu viele Animationen)