💄 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,8 +13,14 @@ class PlaylistsTab extends HookConsumerWidget {
     final repo = ref.watch(playlistRepositoryProvider.notifier);
 
     return Scaffold(
-      floatingActionButton: FloatingActionButton(
+      body: Column(
-        onPressed: () async {
+        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<String>(
                 context: context,
@@ -21,7 +28,9 @@ class PlaylistsTab extends HookConsumerWidget {
                   title: const Text('New Playlist'),
                   content: TextField(
                     controller: nameController,
-                decoration: const InputDecoration(labelText: 'Playlist Name'),
+                    decoration: const InputDecoration(
+                      labelText: 'Playlist Name',
+                    ),
                     autofocus: true,
                   ),
                   actions: [
@@ -30,7 +39,8 @@ class PlaylistsTab extends HookConsumerWidget {
                       child: const Text('Cancel'),
                     ),
                     TextButton(
-                  onPressed: () => Navigator.pop(context, nameController.text),
+                      onPressed: () =>
+                          Navigator.pop(context, nameController.text),
                       child: const Text('Create'),
                     ),
                   ],
@@ -40,9 +50,10 @@ class PlaylistsTab extends HookConsumerWidget {
                 await repo.createPlaylist(name);
               }
             },
-        child: const Icon(Icons.add),
           ),
-      body: StreamBuilder<List<Playlist>>(
+          const Divider(height: 1),
+          Expanded(
+            child: StreamBuilder<List<Playlist>>(
               stream: repo.watchAllPlaylists(),
               builder: (context, snapshot) {
                 if (!snapshot.hasData) {
@@ -82,6 +93,9 @@ class PlaylistsTab extends HookConsumerWidget {
                 );
               },
             ),
+          ),
+        ],
+      ),
     );
   }
 }