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

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

// 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

// 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

// Scale + subtle glow on hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>

2.4 Staggered List Animations

// 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

/* 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

// 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

// 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)