card shadow showing in the background of titlebar & searchbar fix

Create/Remove playlist support
Add/Remove Track to playlist(s) support
Favorite/Un-favorite from any PlaylistView's TrackTile support

lib/components/Album/AlbumView.dart

@@ -67,6 +67,13 @@ class AlbumView extends HookConsumerWidget {
                               future: spotify.me.isSavedAlbums([album.id!]),
                               builder: (context, snapshot) {
                                 final isSaved = snapshot.data?.first == true;
+                                if (!snapshot.hasData && !snapshot.hasError) {
+                                  return const SizedBox(
+                                    height: 25,
+                                    width: 25,
+                                    child: CircularProgressIndicator.adaptive(),
+                                  );
+                                }
                                 return HeartButton(
                                   isLiked: isSaved,
                                   onPressed: () {

lib/components/Artist/ArtistProfile.dart

@@ -8,7 +8,7 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
-import 'package:spotube/components/Shared/TracksTableView.dart';
+import 'package:spotube/components/Shared/TrackTile.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/readable-number.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';

lib/components/Home/Home.dart

@@ -169,25 +169,27 @@ class Home extends HookConsumerWidget {
       };
     }, [localStorage]);
 
-    final titleBarContents = Row(
+    final titleBarContents = Container(
-      children: [
+        color: Theme.of(context).backgroundColor,
-        Expanded(
+        child: Row(
-            child: Row(
           children: [
-            Container(
+            Expanded(
-              constraints: BoxConstraints(
+                child: Row(
-                maxWidth: titleBarDragMaxWidth.toDouble(),
+              children: [
-              ),
+                Container(
-              color: Theme.of(context).navigationRailTheme.backgroundColor,
+                  constraints: BoxConstraints(
-              child: MoveWindow(),
+                    maxWidth: titleBarDragMaxWidth.toDouble(),
-            ),
+                  ),
-            Expanded(child: MoveWindow()),
+                  color: Theme.of(context).navigationRailTheme.backgroundColor,
-            if (!Platform.isMacOS && !Platform.isAndroid && !Platform.isIOS)
+                  child: MoveWindow(),
-              const TitleBarActionButtons(),
+                ),
+                Expanded(child: MoveWindow()),
+                if (!Platform.isMacOS && !Platform.isAndroid && !Platform.isIOS)
+                  const TitleBarActionButtons(),
+              ],
+            ))
           ],
-        ))
+        ));
-      ],
-    );
 
     return SafeArea(
       child: Scaffold(

lib/components/Playlist/PlaylistView.dart

@@ -1,3 +1,4 @@
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/Shared/HeartButton.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
@@ -45,6 +46,12 @@ class PlaylistView extends HookConsumerWidget {
     final isPlaylistPlaying = playback.currentPlaylist?.id != null &&
         playback.currentPlaylist?.id == playlist.id;
     final update = useForceUpdate();
+    final getMe = useMemoized(() => spotify.me.get(), []);
+    final meSnapshot = useFuture<User>(getMe);
+
+    Future<List<bool>> isFollowing(User me) {
+      return spotify.playlists.followedBy(playlist.id!, [me.id!]);
+    }
 
     return SafeArea(
       child: Scaffold(
@@ -64,17 +71,27 @@ class PlaylistView extends HookConsumerWidget {
                         // nav back
                         const BackButton(),
                         // heart playlist
-                        if (auth.isLoggedIn)
+                        if (auth.isLoggedIn && meSnapshot.hasData)
                           FutureBuilder<List<bool>>(
-                              future: spotify.me.get().then(
+                              future: isFollowing(meSnapshot.data!),
-                                    (me) => spotify.playlists
-                                        .followedBy(playlist.id!, [me.id!]),
-                                  ),
                               builder: (context, snapshot) {
                                 final isFollowing =
                                     snapshot.data?.first ?? false;
+
+                                if (!snapshot.hasData && !snapshot.hasError) {
+                                  return const SizedBox(
+                                    height: 25,
+                                    width: 25,
+                                    child: CircularProgressIndicator.adaptive(),
+                                  );
+                                }
                                 return HeartButton(
                                   isLiked: isFollowing,
+                                  icon: playlist.owner?.id != null &&
+                                          meSnapshot.data?.id ==
+                                              playlist.owner?.id
+                                      ? Icons.delete_outline_rounded
+                                      : null,
                                   onPressed: () async {
                                     try {
                                       isFollowing
@@ -124,6 +141,9 @@ class PlaylistView extends HookConsumerWidget {
                                 tracks,
                                 currentTrack: currentTrack,
                               ),
+                              playlistId: playlist.id,
+                              userPlaylist: playlist.owner?.id != null &&
+                                  playlist.owner!.id == meSnapshot.data?.id,
                             ),
                 ],
               );

lib/components/Search/Search.dart

@@ -6,7 +6,7 @@ import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
 import 'package:spotube/components/Shared/AnonymousFallback.dart';
-import 'package:spotube/components/Shared/TracksTableView.dart';
+import 'package:spotube/components/Shared/TrackTile.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/simple-album-to-album.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
@@ -22,8 +22,8 @@ class Search extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final SpotifyApi spotify = ref.watch(spotifyProvider);
     final Auth auth = ref.watch(authProvider);
-    var controller = useTextEditingController();
+    final controller = useTextEditingController();
-    var searchTerm = useState("");
+    final searchTerm = useState("");
     final albumController = useScrollController();
     final playlistController = useScrollController();
     final artistController = useScrollController();
@@ -34,188 +34,191 @@ class Search extends HookConsumerWidget {
     }
 
     return Expanded(
-      child: Column(
+      child: Container(
-        children: [
+        color: Theme.of(context).backgroundColor,
-          Padding(
+        child: Column(
-            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+          children: [
-            child: Row(
+            Padding(
-              children: [
+              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-                Expanded(
+              child: Row(
-                  child: TextField(
+                children: [
-                    decoration: const InputDecoration(hintText: "Search..."),
+                  Expanded(
-                    controller: controller,
+                    child: TextField(
-                    onSubmitted: (value) {
+                      decoration: const InputDecoration(hintText: "Search..."),
+                      controller: controller,
+                      onSubmitted: (value) {
+                        searchTerm.value = controller.value.text;
+                      },
+                    ),
+                  ),
+                  const SizedBox(width: 5),
+                  MaterialButton(
+                    elevation: 3,
+                    splashColor: Theme.of(context).primaryColor,
+                    padding: const EdgeInsets.symmetric(vertical: 21),
+                    color: Theme.of(context).primaryColor,
+                    textColor: Colors.white,
+                    child: const Icon(Icons.search_rounded),
+                    onPressed: () {
                       searchTerm.value = controller.value.text;
                     },
                   ),
-                ),
+                ],
-                const SizedBox(width: 5),
+              ),
-                MaterialButton(
-                  elevation: 3,
-                  splashColor: Theme.of(context).primaryColor,
-                  padding: const EdgeInsets.symmetric(vertical: 21),
-                  color: Theme.of(context).primaryColor,
-                  textColor: Colors.white,
-                  child: const Icon(Icons.search_rounded),
-                  onPressed: () {
-                    searchTerm.value = controller.value.text;
-                  },
-                ),
-              ],
             ),
-          ),
+            FutureBuilder<List<Page>>(
-          FutureBuilder<List<Page>>(
+              future: searchTerm.value.isNotEmpty
-            future: searchTerm.value.isNotEmpty
+                  ? spotify.search.get(searchTerm.value).first(10)
-                ? spotify.search.get(searchTerm.value).first(10)
+                  : null,
-                : null,
+              builder: (context, snapshot) {
-            builder: (context, snapshot) {
+                if (!snapshot.hasData && searchTerm.value.isNotEmpty) {
-              if (!snapshot.hasData && searchTerm.value.isNotEmpty) {
+                  return const Center(
-                return const Center(
+                    child: CircularProgressIndicator.adaptive(),
-                  child: CircularProgressIndicator.adaptive(),
+                  );
-                );
+                } else if (!snapshot.hasData && searchTerm.value.isEmpty) {
-              } else if (!snapshot.hasData && searchTerm.value.isEmpty) {
+                  return Container();
-                return Container();
+                }
-              }
+                Playback playback = ref.watch(playbackProvider);
-              Playback playback = ref.watch(playbackProvider);
+                List<AlbumSimple> albums = [];
-              List<AlbumSimple> albums = [];
+                List<Artist> artists = [];
-              List<Artist> artists = [];
+                List<Track> tracks = [];
-              List<Track> tracks = [];
+                List<PlaylistSimple> playlists = [];
-              List<PlaylistSimple> playlists = [];
+                for (MapEntry<int, Page> page
-              for (MapEntry<int, Page> page
+                    in snapshot.data?.asMap().entries ?? []) {
-                  in snapshot.data?.asMap().entries ?? []) {
+                  for (var item in page.value.items ?? []) {
-                for (var item in page.value.items ?? []) {
+                    if (item is AlbumSimple) {
-                  if (item is AlbumSimple) {
+                      albums.add(item);
-                    albums.add(item);
+                    } else if (item is PlaylistSimple) {
-                  } else if (item is PlaylistSimple) {
+                      playlists.add(item);
-                    playlists.add(item);
+                    } else if (item is Artist) {
-                  } else if (item is Artist) {
+                      artists.add(item);
-                    artists.add(item);
+                    } else if (item is Track) {
-                  } else if (item is Track) {
+                      tracks.add(item);
-                    tracks.add(item);
+                    }
                   }
                 }
-              }
+                return Expanded(
-              return Expanded(
+                  child: SingleChildScrollView(
-                child: SingleChildScrollView(
+                    child: Padding(
-                  child: Padding(
+                      padding: const EdgeInsets.symmetric(
-                    padding:
+                          vertical: 8, horizontal: 20),
-                        const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
+                      child: Column(
-                    child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
-                      children: [
+                          if (tracks.isNotEmpty)
-                        if (tracks.isNotEmpty)
+                            Text(
-                          Text(
+                              "Songs",
-                            "Songs",
+                              style: Theme.of(context).textTheme.headline5,
-                            style: Theme.of(context).textTheme.headline5,
+                            ),
-                          ),
+                          ...tracks.asMap().entries.map((track) {
-                        ...tracks.asMap().entries.map((track) {
+                            String duration =
-                          String duration =
+                                "${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
-                              "${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
+                            return TrackTile(
-                          return TrackTile(
+                              playback,
-                            playback,
+                              track: track,
-                            track: track,
+                              duration: duration,
-                            duration: duration,
+                              thumbnailUrl:
-                            thumbnailUrl:
+                                  imageToUrlString(track.value.album?.images),
-                                imageToUrlString(track.value.album?.images),
+                              onTrackPlayButtonPressed: (currentTrack) async {
-                            onTrackPlayButtonPressed: (currentTrack) async {
+                                var isPlaylistPlaying =
-                              var isPlaylistPlaying =
+                                    playback.currentPlaylist?.id != null &&
-                                  playback.currentPlaylist?.id != null &&
+                                        playback.currentPlaylist?.id ==
-                                      playback.currentPlaylist?.id ==
+                                            currentTrack.id;
-                                          currentTrack.id;
+                                if (!isPlaylistPlaying) {
-                              if (!isPlaylistPlaying) {
+                                  playback.setCurrentPlaylist = CurrentPlaylist(
-                                playback.setCurrentPlaylist = CurrentPlaylist(
+                                    tracks: [currentTrack],
-                                  tracks: [currentTrack],
+                                    id: currentTrack.id!,
-                                  id: currentTrack.id!,
+                                    name: currentTrack.name!,
-                                  name: currentTrack.name!,
+                                    thumbnail: imageToUrlString(
-                                  thumbnail: imageToUrlString(
+                                        currentTrack.album?.images),
-                                      currentTrack.album?.images),
+                                  );
-                                );
+                                  playback.setCurrentTrack = currentTrack;
-                                playback.setCurrentTrack = currentTrack;
+                                } else if (isPlaylistPlaying &&
-                              } else if (isPlaylistPlaying &&
+                                    currentTrack.id != null &&
-                                  currentTrack.id != null &&
+                                    currentTrack.id !=
-                                  currentTrack.id !=
+                                        playback.currentTrack?.id) {
-                                      playback.currentTrack?.id) {
+                                  playback.setCurrentTrack = currentTrack;
-                                playback.setCurrentTrack = currentTrack;
+                                }
-                              }
+                                await playback.startPlaying();
-                              await playback.startPlaying();
+                              },
-                            },
+                            );
-                          );
+                          }),
-                        }),
+                          if (albums.isNotEmpty)
-                        if (albums.isNotEmpty)
+                            Text(
-                          Text(
+                              "Albums",
-                            "Albums",
+                              style: Theme.of(context).textTheme.headline5,
-                            style: Theme.of(context).textTheme.headline5,
+                            ),
-                          ),
+                          const SizedBox(height: 10),
-                        const SizedBox(height: 10),
+                          Scrollbar(
-                        Scrollbar(
-                          controller: albumController,
-                          child: SingleChildScrollView(
-                            scrollDirection: Axis.horizontal,
                             controller: albumController,
-                            child: Row(
+                            child: SingleChildScrollView(
-                              children: albums.map((album) {
+                              scrollDirection: Axis.horizontal,
-                                return AlbumCard(simpleAlbumToAlbum(album));
+                              controller: albumController,
-                              }).toList(),
+                              child: Row(
+                                children: albums.map((album) {
+                                  return AlbumCard(simpleAlbumToAlbum(album));
+                                }).toList(),
+                              ),
                             ),
                           ),
-                        ),
+                          const SizedBox(height: 20),
-                        const SizedBox(height: 20),
+                          if (artists.isNotEmpty)
-                        if (artists.isNotEmpty)
+                            Text(
-                          Text(
+                              "Artists",
-                            "Artists",
+                              style: Theme.of(context).textTheme.headline5,
-                            style: Theme.of(context).textTheme.headline5,
+                            ),
-                          ),
+                          const SizedBox(height: 10),
-                        const SizedBox(height: 10),
+                          Scrollbar(
-                        Scrollbar(
-                          controller: artistController,
-                          child: SingleChildScrollView(
-                            scrollDirection: Axis.horizontal,
                             controller: artistController,
-                            child: Row(
+                            child: SingleChildScrollView(
-                              children: artists
+                              scrollDirection: Axis.horizontal,
-                                  .map(
+                              controller: artistController,
-                                    (artist) => Container(
+                              child: Row(
-                                      margin: const EdgeInsets.symmetric(
+                                children: artists
-                                          horizontal: 15),
+                                    .map(
-                                      child: ArtistCard(artist),
+                                      (artist) => Container(
-                                    ),
+                                        margin: const EdgeInsets.symmetric(
-                                  )
+                                            horizontal: 15),
-                                  .toList(),
+                                        child: ArtistCard(artist),
+                                      ),
+                                    )
+                                    .toList(),
+                              ),
                             ),
                           ),
-                        ),
+                          const SizedBox(height: 20),
-                        const SizedBox(height: 20),
+                          if (playlists.isNotEmpty)
-                        if (playlists.isNotEmpty)
+                            Text(
-                          Text(
+                              "Playlists",
-                            "Playlists",
+                              style: Theme.of(context).textTheme.headline5,
-                            style: Theme.of(context).textTheme.headline5,
+                            ),
-                          ),
+                          const SizedBox(height: 10),
-                        const SizedBox(height: 10),
+                          Scrollbar(
-                        Scrollbar(
+                            scrollbarOrientation: breakpoint > Breakpoints.md
-                          scrollbarOrientation: breakpoint > Breakpoints.md
+                                ? ScrollbarOrientation.bottom
-                              ? ScrollbarOrientation.bottom
+                                : ScrollbarOrientation.top,
-                              : ScrollbarOrientation.top,
-                          controller: playlistController,
-                          child: SingleChildScrollView(
-                            scrollDirection: Axis.horizontal,
                             controller: playlistController,
-                            child: Row(
+                            child: SingleChildScrollView(
-                              children: playlists
+                              scrollDirection: Axis.horizontal,
-                                  .map(
+                              controller: playlistController,
-                                    (playlist) => PlaylistCard(playlist),
+                              child: Row(
-                                  )
+                                children: playlists
-                                  .toList(),
+                                    .map(
+                                      (playlist) => PlaylistCard(playlist),
+                                    )
+                                    .toList(),
+                              ),
                             ),
                           ),
-                        ),
+                        ],
-                      ],
+                      ),
                     ),
                   ),
-                ),
+                );
-              );
+              },
-            },
+            )
-          )
+          ],
-        ],
+        ),
       ),
     );
   }

lib/components/Shared/HeartButton.dart

@@ -3,9 +3,11 @@ import 'package:flutter/material.dart';
 class HeartButton extends StatelessWidget {
   final bool isLiked;
   final void Function() onPressed;
+  final IconData? icon;
   const HeartButton({
     required this.isLiked,
     required this.onPressed,
+    this.icon,
     Key? key,
   }) : super(key: key);
 
@@ -13,7 +15,10 @@ class HeartButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return IconButton(
       icon: Icon(
-        !isLiked ? Icons.favorite_outline_rounded : Icons.favorite_rounded,
+        icon ??
+            (!isLiked
+                ? Icons.favorite_outline_rounded
+                : Icons.favorite_rounded),
         color: isLiked ? Colors.green : null,
       ),
       onPressed: onPressed,

lib/components/Shared/PageWindowTitleBar.dart

@@ -70,17 +70,20 @@ class PageWindowTitleBar extends StatelessWidget
       );
     }
     return WindowTitleBarBox(
-      child: Row(
+      child: Container(
-        children: [
+        color: Theme.of(context).backgroundColor,
-          if (Platform.isMacOS)
+        child: Row(
-            SizedBox(
+          children: [
-              width: MediaQuery.of(context).size.width * 0.045,
+            if (Platform.isMacOS)
-            ),
+              SizedBox(
-          if (leading != null) leading!,
+                width: MediaQuery.of(context).size.width * 0.045,
-          Expanded(child: MoveWindow(child: Center(child: center))),
+              ),
-          if (!Platform.isMacOS && !Platform.isIOS && !Platform.isAndroid)
+            if (leading != null) leading!,
-            const TitleBarActionButtons()
+            Expanded(child: MoveWindow(child: Center(child: center))),
-        ],
+            if (!Platform.isMacOS && !Platform.isIOS && !Platform.isAndroid)
+              const TitleBarActionButtons()
+          ],
+        ),
       ),
     );
   }

lib/components/Shared/TrackTile.dart

@@ -0,0 +1,276 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Shared/LinkText.dart';
+import 'package:spotube/helpers/artists-to-clickable-artists.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
+import 'package:spotube/hooks/useForceUpdate.dart';
+import 'package:spotube/models/Logger.dart';
+import 'package:spotube/provider/Auth.dart';
+import 'package:spotube/provider/Playback.dart';
+import 'package:spotube/provider/SpotifyDI.dart';
+
+class TrackTile extends HookConsumerWidget {
+  final Playback playback;
+  final MapEntry<int, Track> track;
+  final String duration;
+  final String? thumbnailUrl;
+  final void Function(Track currentTrack)? onTrackPlayButtonPressed;
+  final logger = getLogger(TrackTile);
+  final bool userPlaylist;
+  // null playlistId indicates its not inside a playlist
+  final String? playlistId;
+  TrackTile(
+    this.playback, {
+    required this.track,
+    required this.duration,
+    this.playlistId,
+    this.userPlaylist = false,
+    this.thumbnailUrl,
+    this.onTrackPlayButtonPressed,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final breakpoint = useBreakpoints();
+    final auth = ref.watch(authProvider);
+    final spotify = ref.watch(spotifyProvider);
+    final update = useForceUpdate();
+
+    final actionFavorite = useCallback((bool isLiked) async {
+      try {
+        isLiked
+            ? await spotify.tracks.me.removeOne(track.value.id!)
+            : await spotify.tracks.me.saveOne(track.value.id!);
+      } catch (e, stack) {
+        logger.e("FavoriteButton.onPressed", e, stack);
+      } finally {
+        update();
+      }
+    }, [track.value.id, spotify]);
+
+    final actionRemoveFromPlaylist = useCallback(() async {
+      if (playlistId == null) return;
+      return await spotify.playlists.removeTrack(track.value.uri!, playlistId!);
+    }, [playlistId, spotify, track.value.uri]);
+
+    actionAddToPlaylist() async {
+      showDialog(
+          context: context,
+          builder: (context) {
+            return FutureBuilder<Iterable<PlaylistSimple>>(
+                future: spotify.playlists.me.all().then((playlists) async {
+                  final me = await spotify.me.get();
+                  return playlists.where((playlist) =>
+                      playlist.owner?.id != null &&
+                      playlist.owner!.id == me.id);
+                }),
+                builder: (context, snapshot) {
+                  return HookBuilder(builder: (context) {
+                    final playlistsCheck = useState(<String, bool>{});
+                    return AlertDialog(
+                      title: Text(
+                          "Add `${track.value.name}` to following Playlists"),
+                      titleTextStyle:
+                          Theme.of(context).textTheme.bodyText1?.copyWith(
+                                fontSize: 18,
+                                fontWeight: FontWeight.bold,
+                              ),
+                      actions: [
+                        TextButton(
+                          child: const Text("Cancel"),
+                          onPressed: () => Navigator.pop(context),
+                        ),
+                        ElevatedButton(
+                          child: const Text("Add"),
+                          onPressed: () async {
+                            final selectedPlaylists = playlistsCheck
+                                .value.entries
+                                .where((entry) => entry.value)
+                                .map((entry) => entry.key);
+
+                            await Future.wait(
+                              selectedPlaylists.map(
+                                (playlistId) => spotify.playlists
+                                    .addTrack(track.value.uri!, playlistId),
+                              ),
+                            ).then((_) => Navigator.pop(context));
+                          },
+                        )
+                      ],
+                      content: SizedBox(
+                        height: 300,
+                        width: 300,
+                        child: !snapshot.hasData
+                            ? const Center(
+                                child: CircularProgressIndicator.adaptive())
+                            : ListView.builder(
+                                shrinkWrap: true,
+                                itemCount: snapshot.data!.length,
+                                itemBuilder: (context, index) {
+                                  final playlist =
+                                      snapshot.data!.elementAt(index);
+                                  return CheckboxListTile(
+                                    title: Text(playlist.name!),
+                                    controlAffinity:
+                                        ListTileControlAffinity.leading,
+                                    value: playlistsCheck.value[playlist.id] ??
+                                        false,
+                                    onChanged: (val) {
+                                      playlistsCheck.value = {
+                                        ...playlistsCheck.value,
+                                        playlist.id!: val == true
+                                      };
+                                    },
+                                  );
+                                },
+                              ),
+                      ),
+                    );
+                  });
+                });
+          });
+    }
+
+    return Row(
+      children: [
+        SizedBox(
+          height: 20,
+          width: 25,
+          child: Text(
+            (track.key + 1).toString(),
+            textAlign: TextAlign.center,
+          ),
+        ),
+        if (thumbnailUrl != null)
+          Padding(
+            padding: EdgeInsets.symmetric(
+              horizontal: breakpoint.isMoreThan(Breakpoints.md) ? 8.0 : 0,
+              vertical: 8.0,
+            ),
+            child: ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(5)),
+              child: CachedNetworkImage(
+                placeholder: (context, url) {
+                  return Container(
+                    height: 40,
+                    width: 40,
+                    color: Colors.green[300],
+                  );
+                },
+                imageUrl: thumbnailUrl!,
+                maxHeightDiskCache: 40,
+                maxWidthDiskCache: 40,
+              ),
+            ),
+          ),
+        IconButton(
+          icon: Icon(
+            playback.currentTrack?.id != null &&
+                    playback.currentTrack?.id == track.value.id
+                ? Icons.pause_circle_rounded
+                : Icons.play_circle_rounded,
+            color: Theme.of(context).primaryColor,
+          ),
+          onPressed: () => onTrackPlayButtonPressed?.call(
+            track.value,
+          ),
+        ),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                track.value.name ?? "",
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: breakpoint.isSm ? 14 : 17,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+              artistsToClickableArtists(track.value.artists ?? [],
+                  textStyle: TextStyle(
+                      fontSize:
+                          breakpoint.isLessThan(Breakpoints.lg) ? 12 : 14)),
+            ],
+          ),
+        ),
+        if (breakpoint.isMoreThan(Breakpoints.md))
+          Expanded(
+            child: LinkText(
+              track.value.album!.name!,
+              "/album/${track.value.album?.id}",
+              extra: track.value.album,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        if (!breakpoint.isSm) ...[
+          const SizedBox(width: 10),
+          Text(duration),
+        ],
+        const SizedBox(width: 10),
+        if (auth.isLoggedIn)
+          FutureBuilder<bool>(
+              future: spotify.tracks.me.containsOne(track.value.id!),
+              builder: (context, snapshot) {
+                return PopupMenuButton(
+                  icon: const Icon(Icons.more_horiz_rounded),
+                  itemBuilder: (context) {
+                    return [
+                      PopupMenuItem(
+                        child: Row(
+                          children: const [
+                            Icon(Icons.add_box_rounded),
+                            SizedBox(width: 10),
+                            Text("Add to Playlist"),
+                          ],
+                        ),
+                        value: "add-playlist",
+                      ),
+                      if (userPlaylist)
+                        PopupMenuItem(
+                          child: Row(
+                            children: const [
+                              Icon(Icons.remove_circle_outline_rounded),
+                              SizedBox(width: 10),
+                              Text("Remove from Playlist"),
+                            ],
+                          ),
+                          value: "remove-playlist",
+                        ),
+                      PopupMenuItem(
+                        child: Row(
+                          children: [
+                            Icon(snapshot.data == true
+                                ? Icons.favorite_rounded
+                                : Icons.favorite_border_rounded),
+                            const SizedBox(width: 10),
+                            const Text("Favorite")
+                          ],
+                        ),
+                        value: "favorite",
+                      )
+                    ];
+                  },
+                  onSelected: (value) {
+                    switch (value) {
+                      case "favorite":
+                        actionFavorite(snapshot.data == true);
+                        break;
+                      case "add-playlist":
+                        actionAddToPlaylist();
+                        break;
+                      case "remove-playlist":
+                        actionRemoveFromPlaylist();
+                        break;
+                    }
+                  },
+                );
+              })
+      ],
+    );
+  }
+}

lib/components/Shared/TracksTableView.dart

@@ -1,24 +1,24 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/Shared/LinkText.dart';
+import 'package:spotube/components/Shared/TrackTile.dart';
-import 'package:spotube/helpers/artists-to-clickable-artists.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
-import 'package:spotube/hooks/useForceUpdate.dart';
-import 'package:spotube/models/Logger.dart';
-import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/Playback.dart';
-import 'package:spotube/provider/SpotifyDI.dart';
 
 class TracksTableView extends HookConsumerWidget {
   final void Function(Track currentTrack)? onTrackPlayButtonPressed;
   final List<Track> tracks;
-  const TracksTableView(this.tracks, {Key? key, this.onTrackPlayButtonPressed})
+  final bool userPlaylist;
-      : super(key: key);
+  final String? playlistId;
+  const TracksTableView(
+    this.tracks, {
+    Key? key,
+    this.onTrackPlayButtonPressed,
+    this.userPlaylist = false,
+    this.playlistId,
+  }) : super(key: key);
 
   @override
   Widget build(context, ref) {
@@ -85,9 +85,11 @@ class TracksTableView extends HookConsumerWidget {
                   "${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
               return TrackTile(
                 playback,
+                playlistId: playlistId,
                 track: track,
                 duration: duration,
                 thumbnailUrl: thumbnailUrl,
+                userPlaylist: userPlaylist,
                 onTrackPlayButtonPressed: onTrackPlayButtonPressed,
               );
             }).toList()
@@ -97,242 +99,3 @@ class TracksTableView extends HookConsumerWidget {
     );
   }
 }
-
-class TrackTile extends HookConsumerWidget {
-  final Playback playback;
-  final MapEntry<int, Track> track;
-  final String duration;
-  final String? thumbnailUrl;
-  final void Function(Track currentTrack)? onTrackPlayButtonPressed;
-  final logger = getLogger(TrackTile);
-  TrackTile(
-    this.playback, {
-    required this.track,
-    required this.duration,
-    this.thumbnailUrl,
-    this.onTrackPlayButtonPressed,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context, ref) {
-    final breakpoint = useBreakpoints();
-    final auth = ref.watch(authProvider);
-    final spotify = ref.watch(spotifyProvider);
-    final update = useForceUpdate();
-
-    final actionFavorite = useCallback((bool isLiked) async {
-      try {
-        isLiked
-            ? await spotify.tracks.me.removeOne(track.value.id!)
-            : await spotify.tracks.me.saveOne(track.value.id!);
-      } catch (e, stack) {
-        logger.e("FavoriteButton.onPressed", e, stack);
-      } finally {
-        update();
-      }
-    }, [track.value.id, spotify]);
-
-    actionPlaylist() async {
-      showDialog(
-          context: context,
-          builder: (context) {
-            return FutureBuilder<Iterable<PlaylistSimple>>(
-                future: spotify.playlists.me.all().then((playlists) async {
-                  final me = await spotify.me.get();
-                  return playlists.where((playlist) =>
-                      playlist.owner?.id != null &&
-                      playlist.owner!.id == me.id);
-                }),
-                builder: (context, snapshot) {
-                  return HookBuilder(builder: (context) {
-                    final playlistsCheck = useState(<String, bool>{});
-                    return AlertDialog(
-                      title: Text(
-                          "Add `${track.value.name}` to following Playlists"),
-                      titleTextStyle:
-                          Theme.of(context).textTheme.bodyText1?.copyWith(
-                                fontSize: 18,
-                                fontWeight: FontWeight.bold,
-                              ),
-                      actions: [
-                        TextButton(
-                          child: const Text("Cancel"),
-                          onPressed: () => Navigator.pop(context),
-                        ),
-                        ElevatedButton(
-                          child: const Text("Add"),
-                          onPressed: () async {
-                            final selectedPlaylists = playlistsCheck
-                                .value.entries
-                                .where((entry) => entry.value)
-                                .map((entry) => entry.key);
-
-                            await Future.wait(
-                              selectedPlaylists.map(
-                                (playlistId) => spotify.playlists
-                                    .addTrack(track.value.uri!, playlistId),
-                              ),
-                            ).then((_) => Navigator.pop(context));
-                          },
-                        )
-                      ],
-                      content: SizedBox(
-                        height: 300,
-                        width: 300,
-                        child: !snapshot.hasData
-                            ? const Center(
-                                child: CircularProgressIndicator.adaptive())
-                            : ListView.builder(
-                                shrinkWrap: true,
-                                itemCount: snapshot.data!.length,
-                                itemBuilder: (context, index) {
-                                  final playlist =
-                                      snapshot.data!.elementAt(index);
-                                  return CheckboxListTile(
-                                    title: Text(playlist.name!),
-                                    controlAffinity:
-                                        ListTileControlAffinity.leading,
-                                    value: playlistsCheck.value[playlist.id] ??
-                                        false,
-                                    onChanged: (val) {
-                                      playlistsCheck.value = {
-                                        ...playlistsCheck.value,
-                                        playlist.id!: val == true
-                                      };
-                                    },
-                                  );
-                                },
-                              ),
-                      ),
-                    );
-                  });
-                });
-          });
-    }
-
-    return Row(
-      children: [
-        SizedBox(
-          height: 20,
-          width: 25,
-          child: Text(
-            (track.key + 1).toString(),
-            textAlign: TextAlign.center,
-          ),
-        ),
-        if (thumbnailUrl != null)
-          Padding(
-            padding: EdgeInsets.symmetric(
-              horizontal: breakpoint.isMoreThan(Breakpoints.md) ? 8.0 : 0,
-              vertical: 8.0,
-            ),
-            child: ClipRRect(
-              borderRadius: const BorderRadius.all(Radius.circular(5)),
-              child: CachedNetworkImage(
-                placeholder: (context, url) {
-                  return Container(
-                    height: 40,
-                    width: 40,
-                    color: Colors.green[300],
-                  );
-                },
-                imageUrl: thumbnailUrl!,
-                maxHeightDiskCache: 40,
-                maxWidthDiskCache: 40,
-              ),
-            ),
-          ),
-        IconButton(
-          icon: Icon(
-            playback.currentTrack?.id != null &&
-                    playback.currentTrack?.id == track.value.id
-                ? Icons.pause_circle_rounded
-                : Icons.play_circle_rounded,
-            color: Theme.of(context).primaryColor,
-          ),
-          onPressed: () => onTrackPlayButtonPressed?.call(
-            track.value,
-          ),
-        ),
-        Expanded(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(
-                track.value.name ?? "",
-                style: TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: breakpoint.isSm ? 14 : 17,
-                ),
-                overflow: TextOverflow.ellipsis,
-              ),
-              artistsToClickableArtists(track.value.artists ?? [],
-                  textStyle: TextStyle(
-                      fontSize:
-                          breakpoint.isLessThan(Breakpoints.lg) ? 12 : 14)),
-            ],
-          ),
-        ),
-        if (breakpoint.isMoreThan(Breakpoints.md))
-          Expanded(
-            child: LinkText(
-              track.value.album!.name!,
-              "/album/${track.value.album?.id}",
-              extra: track.value.album,
-              overflow: TextOverflow.ellipsis,
-            ),
-          ),
-        if (!breakpoint.isSm) ...[
-          const SizedBox(width: 10),
-          Text(duration),
-        ],
-        const SizedBox(width: 10),
-        if (auth.isLoggedIn)
-          FutureBuilder<bool>(
-              future: spotify.tracks.me.containsOne(track.value.id!),
-              builder: (context, snapshot) {
-                return PopupMenuButton(
-                  icon: const Icon(Icons.more_horiz_rounded),
-                  itemBuilder: (context) {
-                    return [
-                      PopupMenuItem(
-                        child: Row(
-                          children: const [
-                            Icon(Icons.add_box_rounded),
-                            SizedBox(width: 10),
-                            Text("Add to Playlist"),
-                          ],
-                        ),
-                        value: "playlist",
-                      ),
-                      PopupMenuItem(
-                        child: Row(
-                          children: [
-                            Icon(snapshot.data == true
-                                ? Icons.favorite_rounded
-                                : Icons.favorite_border_rounded),
-                            const SizedBox(width: 10),
-                            const Text("Favorite")
-                          ],
-                        ),
-                        value: "favorite",
-                      )
-                    ];
-                  },
-                  onSelected: (value) {
-                    switch (value) {
-                      case "favorite":
-                        actionFavorite(snapshot.data == true);
-                        break;
-                      case "playlist":
-                        actionPlaylist();
-                        break;
-                    }
-                  },
-                );
-              })
-      ],
-    );
-  }
-}

lib/main.dart

@@ -119,6 +119,7 @@ class MyApp extends HookConsumerWidget {
         scaffoldBackgroundColor: Colors.blueGrey[900],
         dialogBackgroundColor: Colors.blueGrey[800],
         shadowColor: Colors.black26,
+        popupMenuTheme: PopupMenuThemeData(color: Colors.blueGrey[800]),
         buttonTheme: const ButtonThemeData(
           buttonColor: Colors.green,
         ),