Respect the custom order of playlists and favorites

lib/extensions/playable_list.dart

@@ -14,7 +14,13 @@ extension PlayableListExtension on List<Playable> {
   }
 
   List<Playable> $sort(PlayableSortConfig config) {
-    return this
+    // 'position' keeps the order the server returned (e.g. a playlist's own
+    // order defined on the web), reversible via the sort direction.
+    if (config.field == 'position') {
+      return config.order == SortOrder.asc ? [...this] : reversed.toList();
+    }
+
+    return [...this]
       ..sort((a, b) => config.order == SortOrder.asc
           ? a.valueToCompare(config).compareTo(b.valueToCompare(config))
           : b.valueToCompare(config).compareTo(a.valueToCompare(config)));

lib/ui/screens/playlist_details.dart

@@ -57,7 +57,7 @@ class _PlaylistDetailsScreen extends State<PlaylistDetailsScreen> {
     final playlist = ModalRoute.of(context)!.settings.arguments as Playlist;
     var sortConfig = AppState.get(
       'playlist.sort',
-      PlayableSortConfig(field: 'title', order: SortOrder.asc),
+      PlayableSortConfig(field: 'position', order: SortOrder.asc),
     )!;
 
     return Scaffold(
@@ -98,7 +98,7 @@ class _PlaylistDetailsScreen extends State<PlaylistDetailsScreen> {
                     backgroundImage: _buildBackgroundImage(playlist, playables),
                     actions: [
                       SortButton(
-                        fields: ['title', 'artist_name', 'created_at'],
+                        fields: ['position', 'title', 'artist_name', 'created_at'],
                         currentField: sortConfig.field,
                         currentOrder: sortConfig.order,
                         onMenuItemSelected: (_sortConfig) {

lib/ui/widgets/playable_list_sort_button.dart

@@ -12,6 +12,7 @@ class SortButton extends StatelessWidget {
   SortOrder currentOrder;
 
   static const sortFields = {
+    'position': 'Custom order',
     'track': 'Track number',
     'disc': 'Disc number',
     'title': 'Title',

test/extensions/playable_list_test.dart

@@ -0,0 +1,44 @@
+import 'package:app/enums.dart';
+import 'package:app/extensions/extensions.dart';
+import 'package:app/models/models.dart';
+import 'package:app/values/values.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  late Song a, b, c;
+
+  setUp(() {
+    a = Song.fake(title: 'A');
+    b = Song.fake(title: 'B');
+    c = Song.fake(title: 'C');
+  });
+
+  // Deliberately not alphabetical — mimics a playlist's custom order.
+  List<Playable> customOrder() => <Playable>[c, a, b];
+
+  PlayableSortConfig config(String field, SortOrder order) =>
+      PlayableSortConfig(field: field, order: order);
+
+  group('\$sort', () {
+    test('position keeps the server-provided order', () {
+      final sorted = customOrder().$sort(config('position', SortOrder.asc));
+      expect(sorted, [c, a, b]);
+    });
+
+    test('position descending reverses the server-provided order', () {
+      final sorted = customOrder().$sort(config('position', SortOrder.desc));
+      expect(sorted, [b, a, c]);
+    });
+
+    test('other fields still sort', () {
+      final sorted = customOrder().$sort(config('title', SortOrder.asc));
+      expect(sorted.map((playable) => (playable as Song).title), ['A', 'B', 'C']);
+    });
+
+    test('does not mutate the original list', () {
+      final original = customOrder();
+      original.$sort(config('title', SortOrder.asc));
+      expect(original, [c, a, b]);
+    });
+  });
+}