diff --git a/lib/ui/tabs/playlists_tab.dart b/lib/ui/tabs/playlists_tab.dart index 69a44cc..6a9bb13 100644 --- a/lib/ui/tabs/playlists_tab.dart +++ b/lib/ui/tabs/playlists_tab.dart @@ -3,6 +3,7 @@ import 'package:groovybox/data/db.dart'; import 'package:groovybox/data/playlist_repository.dart'; import 'package:groovybox/ui/screens/playlist_detail_screen.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:styled_widget/styled_widget.dart'; class PlaylistsTab extends HookConsumerWidget { const PlaylistsTab({super.key}); @@ -12,75 +13,88 @@ class PlaylistsTab extends HookConsumerWidget { final repo = ref.watch(playlistRepositoryProvider.notifier); return Scaffold( - floatingActionButton: FloatingActionButton( - onPressed: () async { - final nameController = TextEditingController(); - final name = await showDialog( - context: context, - builder: (context) => AlertDialog( - title: const Text('New Playlist'), - content: TextField( - controller: nameController, - decoration: const InputDecoration(labelText: 'Playlist Name'), - autofocus: true, - ), - actions: [ - TextButton( - onPressed: () => Navigator.pop(context), - child: const Text('Cancel'), - ), - TextButton( - onPressed: () => Navigator.pop(context, nameController.text), - child: const Text('Create'), - ), - ], - ), - ); - if (name != null && name.isNotEmpty) { - await repo.createPlaylist(name); - } - }, - child: const Icon(Icons.add), - ), - body: StreamBuilder>( - stream: repo.watchAllPlaylists(), - builder: (context, snapshot) { - if (!snapshot.hasData) { - return const Center(child: CircularProgressIndicator()); - } - final playlists = snapshot.data!; - - if (playlists.isEmpty) { - return const Center(child: Text('No playlists yet')); - } - - return ListView.builder( - itemCount: playlists.length, - itemBuilder: (context, index) { - final playlist = playlists[index]; - return ListTile( - leading: const Icon(Icons.queue_music), - title: Text(playlist.name), - subtitle: Text( - '${playlist.createdAt.day}/${playlist.createdAt.month}/${playlist.createdAt.year}', - ), - trailing: IconButton( - icon: const Icon(Icons.delete), - onPressed: () => repo.deletePlaylist(playlist.id), - ), - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - PlaylistDetailScreen(playlist: playlist), + body: Column( + children: [ + ListTile( + leading: const Icon(Icons.add), + trailing: const Icon(Icons.chevron_right).padding(right: 8), + title: Text('Create One'), + subtitle: Text('Add a new playlist'), + onTap: () async { + final nameController = TextEditingController(); + final name = await showDialog( + context: context, + builder: (context) => AlertDialog( + title: const Text('New Playlist'), + content: TextField( + controller: nameController, + decoration: const InputDecoration( + labelText: 'Playlist Name', ), - ); - }, + autofocus: true, + ), + actions: [ + TextButton( + onPressed: () => Navigator.pop(context), + child: const Text('Cancel'), + ), + TextButton( + onPressed: () => + Navigator.pop(context, nameController.text), + child: const Text('Create'), + ), + ], + ), ); + if (name != null && name.isNotEmpty) { + await repo.createPlaylist(name); + } }, - ); - }, + ), + const Divider(height: 1), + Expanded( + child: StreamBuilder>( + stream: repo.watchAllPlaylists(), + builder: (context, snapshot) { + if (!snapshot.hasData) { + return const Center(child: CircularProgressIndicator()); + } + final playlists = snapshot.data!; + + if (playlists.isEmpty) { + return const Center(child: Text('No playlists yet')); + } + + return ListView.builder( + itemCount: playlists.length, + itemBuilder: (context, index) { + final playlist = playlists[index]; + return ListTile( + leading: const Icon(Icons.queue_music), + title: Text(playlist.name), + subtitle: Text( + '${playlist.createdAt.day}/${playlist.createdAt.month}/${playlist.createdAt.year}', + ), + trailing: IconButton( + icon: const Icon(Icons.delete), + onPressed: () => repo.deletePlaylist(playlist.id), + ), + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + PlaylistDetailScreen(playlist: playlist), + ), + ); + }, + ); + }, + ); + }, + ), + ), + ], ), ); }