# Melo 1.0 – Code-Audit & Design-Review
**Datum:** 26.07.2026  
**Repo:** `/home/dustin/git/melo_app/` (27 Dart-Dateien, v2.7 laut Logger)

---

## 🔴 TOTE BUTTONS (führen zu nichts oder zum falschen Ziel)

### 1. BottomNavigationBar – 3 von 5 Tabs defekt!
**Datei:** `lib/screens/home_screen.dart` Zeile 367–371

| Tab | Label | Was passiert | Sollte passieren |
|-----|-------|-------------|------------------|
| 🎵 Musik | Index 0 | ✅ Home-Screen | ✅ richtig |
| ⬇ Downloads | Index 1 | ✅ DownloadScreen | ✅ richtig |
| 🏷️ Tags | Index 2 | ❌ öffnet **PlaylistSheet**! | Sollte nach Tags filtern o. Tag-Manager zeigen |
| ❤️ Favoriten | Index 3 | ❌ öffnet **PlaylistSheet**! | Sollte favorisierte Songs filtern |
| ⚙️ Einstellungen | Index 4 | ❌ **KEIN Handler** – tut gar nichts! | Sollte Einstellungen-Seite zeigen |

```dart
// Aktueller Code (defekt):
onTap: (i) {
  setState(() => _aktiverTab = i);
  if (i == 2) _zeigePlaylistSheet(); // FALSCH: Tags → Playlists
  if (i == 3) _zeigePlaylistSheet(); // FALSCH: Favoriten → Playlists
  // i == 4 → KEIN Code! Einstellungen-Tab tot.
},
```

### 2. Auskommentierte Widgets (Features existieren, sind aber deaktiviert)
**Datei:** `lib/screens/home_screen.dart` Zeile 272–291

- **RecentWidget** (Zeile 273): `// RecentWidget(songs: _vm.letzteSongs, onPlay: _vm.spieleSong),`
  - Zeigt "Zuletzt gehört" – Code existiert in `lib/widgets/recent_widget.dart`, korrekt implementiert
  
- **TagStatsWidget** (Zeile 290): `// TagStatsWidget(tagCounts: _vm.tagCounts),`
  - Zeigt Tag-Häufigkeiten farbcodiert – Code existiert in `lib/widgets/tag_stats_widget.dart`, korrekt implementiert

### 3. Alle anderen Buttons ✅ intakt
- MeloHeader (Cloud/Suche/Download): alle 3 funktional
- SongTile (Edit/Favorit/Playlist/Play): alle funktional
- MiniPlayer (Play/Pause/Skip): alle funktional
- DownloadScreen (Ordner/Download/Abbrechen): alle funktional
- PlaylistSheet (Neu/Öffnen/Löschen): alle funktional
- NavidromeBrowser (Verbinden/Alben/Stream/Download): alle funktional

---

## 🎨 DESIGN-ANALYSE & VERSCHÖNERUNGSVORSCHLÄGE

### Aktuelles Design (Bestandsaufnahme)
- **Farbschema:** Dark Theme – Schwarz `#0D0D0D`, Dunkelgrau `#1A1A1A`/`#2A2A2A`, Rot `#CC0000` als Akzent
- **Typografie:** System-Standardschrift, keine Custom-Font. Nur Größen-Variation (9-28px).
- **Layout:** Standard-Material mit BottomNavigationBar, ListView, Cards
- **Rundungen:** Konsistent 8-14px Border-Radius
- **Icons:** Material Icons, teils mit Emoji (♪, 💿, 🎵, 💌)
- **Animationen:** Nur implizit (FAB, BottomSheet); keine expliziten

### 🔥 Top 10 Verschönerungs-Maßnahmen (priorisiert)

#### 1. **Custom-Schriftart** – Höchste Wirkung, geringer Aufwand
   - Schriftart wie **Inter** oder **Poppins** via `google_fonts` einbinden
   - Sofort moderneres, hochwertigeres Look & Feel
   - `pubspec.yaml` → `google_fonts: ^6.1.0`

#### 2. **Glassmorphism-Effekte**
   - MiniPlayer + StatistikCard mit `BackdropFilter` + `blur` 
   - Transparenter, schwebender Look statt flache Container
   - `ClipRRect` mit `BackdropFilter(brightness: 0.2, saturation: 0.3)` 

#### 3. **Subtiler Hintergrund-Gradient**
   - Statt `MeloTheme.schwarz` ein radialer Gradient von `#1A0505` nach `#0D0D0D`
   - Gibt Tiefe, wirkt weniger "flach"

#### 4. **Song-Tiles mit Swipe-Gesten**
   - Swipe links → Favorit toggeln
   - Swipe rechts → Zur Playlist hinzufügen
   - `flutter_slidable` Package

#### 5. **Skeleton-Loader / Shimmer**
   - Statt `CircularProgressIndicator` beim Laden
   - Placeholder-Karten mit `shimmer`-Animation
   - Wirkt professioneller, weniger "Lade-Unterbrechung"

#### 6. **Hero-Animationen**
   - MiniPlayer → Vollbild-Player mit fließendem Übergang
   - Album-Cover als Hero-Widget

#### 7. **Leere-Zustände mit Icons/Illustration**
   - "Noch keine Playlists" → mit großer Illustration + CTA-Button
   - "Keine Treffer" → Such-Illustration
   - Statt reinem Text

#### 8. **Animierte Tab-Indikatoren**
   - BottomNavBar mit animiertem Indikator-Balken oder Dot
   - Sanfte Farbverläufe beim Wechseln

#### 9. **Pull-to-Refresh** auf Song-Liste
   - `RefreshIndicator` um die ListView
   - Neu-Scannen per Wischgeste

#### 10. **Farbcodierte Fortschrittsbalken**
   - Fortschritt farblich codieren (grau→gelb→grün bei Download-Fortschritt)
   - Statt einfachem roten Balken

### Farbpaletten-Erweiterung (Vorschlag)
```dart
// Zusätzlich zu bestehenden Farben:
static const Color rotGlow = Color(0x40CC0000);    // für Glow-Effekte
static const Color surfaceHell = Color(0xFF252525); // für Hover/Active
static const Color erfolg = Color(0xFF4CAF50);      // Grün-Akzent
static const Color warnung = Color(0xFFFFC107);     // Gelb-Akzent
```

### Auch interessant (niedrigere Priorität)
- **Waveform-Animation** im MiniPlayer (statt statischem Balken)
- **Konfetti-Effekt** nach erfolgreichem Download
- **Haptisches Feedback** bei Button-Taps (`HapticFeedback.lightImpact()`)
- **Dark-Mode-Only** mit OLED-optimiertem `#000000` für echte Schwarztöne
- **BottomSheet mit Drag-Handle** schon vorhanden → schön!

---

## 📊 Zusammenfassung

| Kategorie | Befund |
|-----------|--------|
| Tote Buttons | **3 von 5 Tabs defekt** – Tags/Favoriten öffnen Playlists, Einstellungen tut nichts |
| Deaktivierte Widgets | RecentWidget + TagStatsWidget auskommentiert, Code intakt |
| Sonstige Buttons | Alle intakt ✅ |
| Design-Level | Solide Basis, Material 3 Dark Theme, konsistent |
| Größtes Manko | Keine Custom-Schriftart, flache Container, keine Animationen |
| Schnellster Gewinn | Custom Font + Glassmorphism + Gradient-Hintergrund |