add a playlist

lib/main.dart

@@ -82,12 +82,13 @@ class MyApp extends StatelessWidget {
   }
 }
 
+const spotifyWidgetColor = Color(0xFF121212);
 final spotifyThemeData = ThemeData(
   primarySwatch: Colors.green,
   brightness: Brightness.dark,
-  scaffoldBackgroundColor: const Color(0xFF121212),
+  scaffoldBackgroundColor: spotifyWidgetColor,
   appBarTheme: const AppBarTheme(
-    backgroundColor: Color(0xFF121212),
+    backgroundColor: spotifyWidgetColor,
     elevation: 0,
     iconTheme: IconThemeData(color: Colors.white),
     titleTextStyle: TextStyle(
@@ -101,6 +102,18 @@ final spotifyThemeData = ThemeData(
       borderRadius: BorderRadius.circular(25),
     ),
   ),
+  expansionTileTheme: ExpansionTileThemeData(
+    backgroundColor: spotifyWidgetColor,
+    collapsedBackgroundColor: spotifyWidgetColor,
+    textColor: Colors.white,
+    collapsedTextColor: Colors.white,
+    iconColor: Colors.white,
+    collapsedIconColor: Colors.white,
+    // shape: RoundedRectangleBorder(
+    //   borderRadius: BorderRadius.circular(4),
+    //   // side: BorderSide(color: Colors.white24),
+    // ),
+  ),
   textTheme: TextTheme(
     titleLarge:
         const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
@@ -109,7 +122,7 @@ final spotifyThemeData = ThemeData(
     labelMedium: TextStyle(color: Colors.grey[400]),
   ),
   inputDecorationTheme: InputDecorationTheme(
-    fillColor: const Color(0xFF212121),
+    fillColor: spotifyWidgetColor,
     filled: true,
     border: OutlineInputBorder(
       borderRadius: BorderRadius.circular(4),
@@ -138,18 +151,10 @@ final spotifyThemeData = ThemeData(
     ),
   ),
   listTileTheme: const ListTileThemeData(
-    tileColor: Color(0xFF212121),
+    tileColor: Color(0xFF121212),
     textColor: Colors.white,
     iconColor: Colors.white54,
   ),
-  expansionTileTheme: const ExpansionTileThemeData(
-    backgroundColor: Color(0xFF212121),
-    collapsedBackgroundColor: Color(0xFF212121),
-    textColor: Colors.white,
-    collapsedTextColor: Colors.white,
-    iconColor: Colors.white,
-    collapsedIconColor: Colors.white,
-  ),
   switchTheme: SwitchThemeData(
     thumbColor: MaterialStateProperty.all(Colors.white),
     trackColor: MaterialStateProperty.all(Colors.green),

lib/screens/home_screen.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotkin_flutter/app_core.dart';
 import '../widgets/info_button.dart';
+import '../widgets/playlist_image_icon.dart';
 import '../widgets/spotify_button.dart';
 
 class HomeScreen extends StatefulWidget {
@@ -28,6 +29,7 @@ class _HomeScreenState extends State<HomeScreen> {
   final SpotifyService spotifyService = getIt<SpotifyService>();
   bool _isExpanded = false;
   Key _expansionTileKey = UniqueKey();
+  final widgetPadding = 3.0;
 
   // bool _isResettingTargetPlaylist = false;
 
@@ -82,7 +84,7 @@ class _HomeScreenState extends State<HomeScreen> {
         print(results[0]['result'].runtimeType);
         final result = results[0]['result'] as String;
         print('Error processing jobs: $result');
-        if (result.startsWith("Status 401")) {
+        if (result.startsWith("Status widgetPadding01")) {
           print('Token expired, authenticate again...');
           spotifyService.initiateSpotifyLogin();
           return;
@@ -134,7 +136,11 @@ class _HomeScreenState extends State<HomeScreen> {
   }
 
   Widget _buildRecipeCard(Job job, int index) {
-    return Card(
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).scaffoldBackgroundColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
       child: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
@@ -165,32 +171,64 @@ class _HomeScreenState extends State<HomeScreen> {
       appBar: AppBar(
         title: const Text('Spotkin'),
         automaticallyImplyLeading: false,
-        actions: const [InfoButton()],
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.settings),
+            onPressed: () {
+              Navigator.push(
+                context,
+                MaterialPageRoute(
+                  builder: (context) => SettingsScreen(
+                    jobs: jobs,
+                    updateJob: updateJob,
+                  ),
+                ),
+              );
+            },
+          ),
+        ],
       ),
       body: SingleChildScrollView(
         child: Padding(
-          padding: const EdgeInsets.all(16),
+          padding: EdgeInsets.symmetric(vertical: widgetPadding),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Column(
                 children: [
-                  ExpansionTile(
-                    key: _expansionTileKey,
-                    title: PlaylistTitle(context, targetPlaylist),
-                    leading: PlaylistImageIcon(playlist: targetPlaylist),
-                    subtitle: playlistSubtitle(targetPlaylist, context),
-                    initiallyExpanded: _isExpanded,
-                    onExpansionChanged: (expanded) {
-                      setState(() {
-                        _isExpanded = expanded;
-                      });
-                    },
-                    children: [
-                      buildTargetPlaylistSelectionOptions(),
-                    ],
+                  Material(
+                    // color: Theme.of(context).cardColor,
+                    elevation: 1,
+                    borderRadius: BorderRadius.circular(12.0),
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.circular(12.0),
+                      child: ExpansionTile(
+                        key: _expansionTileKey,
+                        title: Column(children: [
+                          PlaylistImageIcon(
+                            playlist: targetPlaylist,
+                            size: 120,
+                          ),
+                          const SizedBox(height: 10),
+                          PlaylistTitle(context, targetPlaylist),
+                          const SizedBox(height: 5),
+                          playlistSubtitle(targetPlaylist, context)
+                        ]),
+                        // leading: ,
+                        // subtitle: ,
+                        initiallyExpanded: _isExpanded,
+                        onExpansionChanged: (expanded) {
+                          setState(() {
+                            _isExpanded = expanded;
+                          });
+                        },
+                        children: [
+                          buildTargetPlaylistSelectionOptions(),
+                        ],
+                      ),
+                    ),
                   ),
-                  const SizedBox(height: 20),
+                  SizedBox(height: widgetPadding),
                   ...jobs.asMap().entries.map((entry) {
                     return _buildRecipeCard(entry.value, entry.key);
                   }),

lib/widgets/bottom_sheets/search_bottom_sheet.dart

@@ -6,12 +6,14 @@ class SearchBottomSheet extends StatefulWidget {
   final Function(dynamic) onItemSelected;
   final List<SearchType>? searchTypes;
   final bool userPlaylistsOnly;
+  final String? title;
 
   const SearchBottomSheet({
     Key? key,
     required this.onItemSelected,
     this.searchTypes,
     this.userPlaylistsOnly = false,
+    this.title,
   })  : assert(
           !(userPlaylistsOnly && (searchTypes != null)),
           'searchTypes should not be provided when userPlaylistsOnly is true',
@@ -170,10 +172,17 @@ class _SearchBottomSheetState extends State<SearchBottomSheet> {
     );
   }
 
+  String title = 'Search';
+
   @override
   Widget build(BuildContext context) {
+    if (widget.title != null) {
+      title = widget.title!;
+    } else if (widget.userPlaylistsOnly) {
+      title = 'Your Playlists';
+    }
     return CustomBottomSheet(
-      title: Text(widget.userPlaylistsOnly ? 'Your Playlists' : 'Search'),
+      title: Text(title),
       content: [
         if (!widget.userPlaylistsOnly)
           Padding(

lib/widgets/playlist_image_icon.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotkin_flutter/app_core.dart';
+
+class PlaylistImageIcon extends StatelessWidget {
+  const PlaylistImageIcon({super.key, required this.playlist, this.size = 56});
+
+  final PlaylistSimple playlist;
+  final double? size;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: Colors.grey[800],
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Utils.getPlaylistImageOrIcon(playlist),
+    );
+  }
+}

lib/widgets/playlist_widgets.dart

@@ -17,7 +17,8 @@ class PlaylistNameField extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return playlistName != null
-        ? Text(playlistName!, style: TextStyle(fontWeight: FontWeight.bold))
+        ? Text(playlistName!,
+            style: const TextStyle(fontWeight: FontWeight.bold))
         : TextFormField(
             controller: playlistController,
             decoration: const InputDecoration(
@@ -34,6 +35,8 @@ Widget playlistSubtitle(PlaylistSimple playlist, BuildContext context) {
       ? Text(
           'Playlist • ${playlist.owner!.displayName}',
           style: Theme.of(context).textTheme.labelMedium,
+          overflow: TextOverflow.ellipsis,
+          maxLines: 1,
         )
       : const SizedBox();
 }
@@ -43,5 +46,6 @@ Text PlaylistTitle(BuildContext context, PlaylistSimple playlist) {
     playlist.name ?? 'Unknown Playlist',
     style: Theme.of(context).textTheme.titleMedium,
     overflow: TextOverflow.ellipsis,
+    maxLines: 1,
   );
 }