💄 Better playlist tabs

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(
+      body: Column(
-        onPressed: () async {
+        children: [
-          final nameController = TextEditingController();
+          ListTile(
-          final name = await showDialog<String>(
+            leading: const Icon(Icons.add),
-            context: context,
+            trailing: const Icon(Icons.chevron_right).padding(right: 8),
-            builder: (context) => AlertDialog(
+            title: Text('Create One'),
-              title: const Text('New Playlist'),
+            subtitle: Text('Add a new playlist'),
-              content: TextField(
+            onTap: () async {
-                controller: nameController,
+              final nameController = TextEditingController();
-                decoration: const InputDecoration(labelText: 'Playlist Name'),
+              final name = await showDialog<String>(
-                autofocus: true,
+                context: context,
-              ),
+                builder: (context) => AlertDialog(
-              actions: [
+                  title: const Text('New Playlist'),
-                TextButton(
+                  content: TextField(
-                  onPressed: () => Navigator.pop(context),
+                    controller: nameController,
-                  child: const Text('Cancel'),
+                    decoration: const InputDecoration(
-                ),
+                      labelText: 'Playlist Name',
-                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<List<Playlist>>(
-        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),
                     ),
-                  );
+                    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<List<Playlist>>(
+              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),
+                          ),
+                        );
+                      },
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+        ],
       ),
     );
   }