feat(queue): reorder tracks support

lib/collections/spotube_icons.dart

@@ -74,4 +74,5 @@ abstract class SpotubeIcons {
   static const pinOff = Icons.push_pin_outlined;
   static const hoverOn = Icons.back_hand_rounded;
   static const hoverOff = Icons.back_hand_outlined;
+  static const dragHandle = Icons.drag_indicator;
 }

lib/components/player/player_queue.dart

@@ -110,10 +110,14 @@ class PlayerQueue extends HookConsumerWidget {
             ),
             const SizedBox(height: 10),
             Flexible(
-              child: ListView.builder(
+              child: ReorderableListView.builder(
-                  controller: controller,
+                  onReorder: (oldIndex, newIndex) {
+                    playlistNotifier.reorder(oldIndex, newIndex);
+                  },
+                  scrollController: controller,
                   itemCount: tracks.length,
                   shrinkWrap: true,
+                  buildDefaultDragHandles: false,
                   itemBuilder: (context, i) {
                     final track = tracks.toList().asMap().entries.elementAt(i);
                     String duration =
@@ -135,6 +139,12 @@ class PlayerQueue extends HookConsumerWidget {
                             }
                             await playlistNotifier.playTrack(currentTrack);
                           },
+                          leadingActions: [
+                            ReorderableDragStartListener(
+                              index: i,
+                              child: const Icon(SpotubeIcons.dragHandle),
+                            ),
+                          ],
                         ),
                       ),
                     );

lib/components/shared/track_table/track_tile.dart

@@ -41,6 +41,7 @@ class TrackTile extends HookConsumerWidget {
   final void Function(bool?)? onCheckChange;
 
   final List<Widget>? actions;
+  final List<Widget>? leadingActions;
 
   TrackTile(
     this.playlist, {
@@ -56,6 +57,7 @@ class TrackTile extends HookConsumerWidget {
     this.isLocal = false,
     this.onCheckChange,
     this.actions,
+    this.leadingActions,
     Key? key,
   }) : super(key: key);
 
@@ -190,6 +192,7 @@ class TrackTile extends HookConsumerWidget {
         type: MaterialType.transparency,
         child: Row(
           children: [
+            ...?leadingActions,
             if (showCheck && !isBlackListed)
               Checkbox(
                 value: isChecked,
@@ -300,9 +303,9 @@ class TrackTile extends HookConsumerWidget {
               Text(duration),
             ],
             const SizedBox(width: 10),
+            if (!isLocal)
               PopupMenuButton(
                 icon: const Icon(SpotubeIcons.moreHorizontal),
-              elevation: 4,
                 position: PopupMenuPosition.under,
                 tooltip: "More options",
                 itemBuilder: (context) {
@@ -314,7 +317,8 @@ class TrackTile extends HookConsumerWidget {
                           playlistQueueNotifier.add([track.value]);
                           ScaffoldMessenger.of(context).showSnackBar(
                             SnackBar(
-                            content: Text("Added ${track.value.name} to queue"),
+                              content:
+                                  Text("Added ${track.value.name} to queue"),
                             ),
                           );
                         },
@@ -330,8 +334,8 @@ class TrackTile extends HookConsumerWidget {
                           playlistQueueNotifier.remove([track.value]);
                           ScaffoldMessenger.of(context).showSnackBar(
                             SnackBar(
-                            content:
+                              content: Text(
-                                Text("Removed ${track.value.name} from queue"),
+                                  "Removed ${track.value.name} from queue"),
                             ),
                           );
                         },
@@ -373,8 +377,8 @@ class TrackTile extends HookConsumerWidget {
                           removeTrack.mutate(track.value.uri!);
                         },
                         child: ListTile(
-                        leading:
+                          leading: (removeTrack.isMutating ||
-                            (removeTrack.isMutating || !removeTrack.hasData) &&
+                                      !removeTrack.hasData) &&
                                   removingTrack.value == track.value.uri
                               ? const Center(
                                   child: CircularProgressIndicator(),
@@ -383,16 +387,6 @@ class TrackTile extends HookConsumerWidget {
                           title: const Text("Remove from playlist"),
                         ),
                       ),
-                  PopupMenuItem(
-                    padding: EdgeInsets.zero,
-                    onTap: () {
-                      actionShare(track.value);
-                    },
-                    child: const ListTile(
-                      leading: Icon(SpotubeIcons.share),
-                      title: Text("Share"),
-                    ),
-                  ),
                     PopupMenuItem(
                       padding: EdgeInsets.zero,
                       onTap: () {
@@ -409,19 +403,23 @@ class TrackTile extends HookConsumerWidget {
                         }
                       },
                       child: ListTile(
-                      leading: Icon(
+                        leading: const Icon(SpotubeIcons.playlistRemove),
-                        SpotubeIcons.playlistRemove,
+                        iconColor: !isBlackListed ? Colors.red[400] : null,
-                        color: isBlackListed ? Colors.white : Colors.red[400],
+                        textColor: !isBlackListed ? Colors.red[400] : null,
-                      ),
-                      iconColor: isBlackListed ? Colors.red[400] : null,
-                      textColor: isBlackListed ? Colors.red[400] : null,
                         title: Text(
                           "${isBlackListed ? "Remove from" : "Add to"} blacklist",
-                        style: TextStyle(
-                          color: isBlackListed ? Colors.white : Colors.red[400],
                         ),
                       ),
                     ),
+                    PopupMenuItem(
+                      padding: EdgeInsets.zero,
+                      onTap: () {
+                        actionShare(track.value);
+                      },
+                      child: const ListTile(
+                        leading: Icon(SpotubeIcons.share),
+                        title: Text("Share"),
+                      ),
                     )
                   ];
                 },

lib/provider/playlist_queue_provider.dart

@@ -198,6 +198,7 @@ class PlaylistQueueNotifier extends PersistedStateNotifier<PlaylistQueue?> {
 
       // skip all the activeTrack.skipSegments
       if (state?.isLoading != true &&
+          state?.activeTrack is SpotubeTrack &&
           (state?.activeTrack as SpotubeTrack?)?.skipSegments.isNotEmpty ==
               true &&
           preferences.skipSponsorSegments) {
@@ -508,6 +509,17 @@ class PlaylistQueueNotifier extends PersistedStateNotifier<PlaylistQueue?> {
     return trackIds.contains(track.id!);
   }
 
+  void reorder(int oldIndex, int newIndex) {
+    if (!isLoaded) return;
+
+    final tracks = state!.tracks.toList();
+    final track = tracks.removeAt(oldIndex);
+    tracks.insert(newIndex, track);
+    final active =
+        tracks.indexWhere((element) => element.id == state!.activeTrack.id);
+    state = state!.copyWith(tracks: Set.from(tracks), active: active);
+  }
+
   @override
   Future<PlaylistQueue>? fromJson(Map<String, dynamic> json) {
     if (json.isEmpty) return null;

lib/themes/theme.dart

@@ -36,5 +36,10 @@ ThemeData theme(Color seed, Brightness brightness) {
         borderRadius: BorderRadius.circular(15),
       ),
     ),
+    popupMenuTheme: PopupMenuThemeData(
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
+      color: scheme.surface,
+      elevation: 4,
+    ),
   );
 }