Files
Melo/lib/playlists/playlists_screen.dart
T
Hermes (Server)andClaude Opus 5 bc861f6087 UI-Politur: Kontrast, Abstaende, Typografie, Bewegung
Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage
sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie,
Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin
aus Hue.

Behobene Maengel (messbar, nicht Geschmack):
- Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt
  4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 /
  text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei
  jedem Lauf nach, statt sie zu behaupten.
- SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne
  Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird
  Vorlesehilfen als Zustand gemeldet (Semantics.selected).
- mini_player.dart: Expanded UM eine feste Hoehe herum — zwei
  widerspruechliche Angaben. Entschaerft.
- Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten
  Icon) entfernt.

Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion,
Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges
textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars,
Fortschritt, Trenner.

318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
2026-08-21 12:40:25 +02:00

172 lines
5.3 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../library/database.dart';
import '../library/playlist_service.dart';
import '../library/song_list.dart';
import '../shared/theme.dart';
import 'create_playlist_dialog.dart';
import 'playlist_detail_screen.dart';
/// Playlisten-Tab: Favoriten-Kurzeinstieg oben, darunter alle eigenen Playlisten.
class PlaylistsScreen extends StatelessWidget {
const PlaylistsScreen({super.key});
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
return Scaffold(
appBar: AppBar(title: const Text('Playlisten')),
body: Column(
children: [
StreamBuilder<List<Song>>(
stream: db.watchFavorites(),
builder: (context, snapshot) {
final count = snapshot.data?.length ?? 0;
return ListTile(
leading: const Icon(Icons.favorite, color: MeloTheme.red),
title: const Text('Favoriten'),
subtitle: Text('$count Songs'),
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => const FavoritesListScreen()),
),
);
},
),
const Divider(height: 1),
Expanded(
child: StreamBuilder<List<Playlist>>(
stream: db.watchPlaylists(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(
child: Text('Fehler: ${snapshot.error}',
style: const TextStyle(color: MeloTheme.text2)),
);
}
final playlists = snapshot.data ?? const [];
if (playlists.isEmpty) {
return const _Empty();
}
return ListView.builder(
itemCount: playlists.length,
itemBuilder: (context, i) => _PlaylistTile(playlist: playlists[i]),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
tooltip: 'Neue Playlist',
onPressed: () => showDialog<String?>(
context: context,
builder: (_) => const CreatePlaylistDialog(),
),
child: const Icon(Icons.add),
),
);
}
}
class _PlaylistTile extends StatelessWidget {
const _PlaylistTile({required this.playlist});
final Playlist playlist;
Future<void> _confirmDelete(BuildContext context) async {
final confirmed = await showDialog<bool>(
context: context,
builder: (ctx) => AlertDialog(
title: const Text('Playlist löschen?'),
content: Text('„${playlist.name}“ wird dauerhaft gelöscht.'),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx, false),
child: const Text('Abbrechen'),
),
TextButton(
onPressed: () => Navigator.pop(ctx, true),
child: const Text('Löschen'),
),
],
),
);
if (confirmed == true && context.mounted) {
await context.read<PlaylistService>().deletePlaylist(playlist.id);
}
}
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
return StreamBuilder<List<Song>>(
stream: db.watchPlaylistSongs(playlist.id),
builder: (context, snapshot) {
final count = snapshot.data?.length ?? 0;
return ListTile(
leading: const Icon(Icons.playlist_play),
title: Text(playlist.name),
subtitle: Text('$count Songs'),
trailing: IconButton(
tooltip: 'Playlist löschen',
icon: const Icon(Icons.delete_outline),
onPressed: () => _confirmDelete(context),
),
onLongPress: () => _confirmDelete(context),
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => PlaylistDetailScreen(playlist: playlist)),
),
);
},
);
}
}
class _Empty extends StatelessWidget {
const _Empty();
@override
Widget build(BuildContext context) {
return const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.playlist_play, size: 64, color: Colors.white24),
SizedBox(height: 12),
Text('Noch keine Playlisten', style: TextStyle(color: MeloTheme.text2)),
SizedBox(height: 8),
Text('Tippe auf + um eine Playlist zu erstellen',
style: TextStyle(color: MeloTheme.text3, fontSize: 12)),
],
),
);
}
}
/// Gepushte Ansicht der favorisierten Songs.
class FavoritesListScreen extends StatelessWidget {
const FavoritesListScreen({super.key});
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
return Scaffold(
appBar: AppBar(title: const Text('Favoriten')),
body: StreamBuilder<List<Song>>(
stream: db.watchFavorites(),
builder: (context, snapshot) {
final songs = snapshot.data ?? const [];
if (songs.isEmpty) {
return const Center(
child: Text('Noch keine Favoriten', style: TextStyle(color: MeloTheme.text2)),
);
}
return SongList(songs);
},
),
);
}
}