Reorder servers

lib/providers/server_provider.dart

@@ -25,6 +25,7 @@ import 'package:bluecherry_client/providers/app_provider_interface.dart';
 import 'package:bluecherry_client/providers/layouts_provider.dart';
 import 'package:bluecherry_client/providers/mobile_view_provider.dart';
 import 'package:bluecherry_client/utils/constants.dart';
+import 'package:bluecherry_client/utils/logging.dart';
 import 'package:bluecherry_client/utils/methods.dart';
 import 'package:bluecherry_client/utils/storage.dart';
 import 'package:bluecherry_client/utils/video_player.dart';
@@ -192,6 +193,16 @@ class ServersProvider extends UnityProvider {
     await save();
   }
 
+  Future<void> reorder(int oldIndex, int newIndex) async {
+    try {
+      final server = servers.removeAt(oldIndex);
+      servers.insert(newIndex, server);
+      await save();
+    } catch (error, stackTrace) {
+      handleError(error, stackTrace, 'Error trying to reorder servers.');
+    }
+  }
+
   @override
   Future<void> save({bool notifyListeners = true}) async {
     await write({

lib/screens/settings/settings_mobile.dart

@@ -32,12 +32,14 @@ import 'package:bluecherry_client/screens/settings/general.dart';
 import 'package:bluecherry_client/screens/settings/server_and_devices.dart';
 import 'package:bluecherry_client/screens/settings/updates_and_help.dart';
 import 'package:bluecherry_client/utils/constants.dart';
+import 'package:bluecherry_client/utils/methods.dart';
 import 'package:bluecherry_client/widgets/drawer_button.dart';
 import 'package:bluecherry_client/widgets/misc.dart';
 import 'package:bluecherry_client/widgets/squared_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
+import 'package:reorderables/reorderables.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 part 'shared/server_tile.dart';

lib/screens/settings/shared/server_tile.dart

@@ -41,11 +41,12 @@ class ServersList extends StatelessWidget {
       if (consts.maxWidth >= kMobileBreakpoint.width) {
         return Padding(
           padding: const EdgeInsetsDirectional.symmetric(horizontal: 12.0),
-          child: Wrap(children: [
-            ...serversProvider.servers.map((server) {
-              return ServerCard(server: server, onRemoveServer: onRemoveServer);
-            }),
-            SizedBox(
+          child: ReorderableWrap(
+            needsLongPressDraggable: isMobile,
+            onReorder: (oldIndex, newIndex) {
+              serversProvider.reorder(oldIndex, newIndex);
+            },
+            footer: SizedBox(
               height: 180,
               width: 180,
               child: Card(
@@ -75,16 +76,40 @@ class ServersList extends StatelessWidget {
                 ),
               ),
             ),
-          ]),
+            children: [
+              ...serversProvider.servers.map((server) {
+                return ServerCard(
+                  key: ValueKey(server.id),
+                  server: server,
+                  onRemoveServer: onRemoveServer,
+                );
+              }),
+            ],
+          ),
         );
       } else {
         return Column(children: [
-          ...serversProvider.servers.map((server) {
-            return ServerTile(
-              server: server,
-              onRemoveServer: onRemoveServer,
-            );
-          }),
+          ReorderableListView.builder(
+            physics: const NeverScrollableScrollPhysics(),
+            shrinkWrap: true,
+            onReorder: (oldIndex, newIndex) {
+              serversProvider.reorder(oldIndex, newIndex);
+            },
+            buildDefaultDragHandles: false,
+            itemCount: serversProvider.servers.length,
+            itemBuilder: (context, index) {
+              final server = serversProvider.servers[index];
+              return ServerTile(
+                key: ValueKey(server.id),
+                server: server,
+                onRemoveServer: onRemoveServer,
+                trailing: ReorderableDragStartListener(
+                  index: index,
+                  child: const Icon(Icons.drag_handle_outlined),
+                ),
+              );
+            },
+          ),
           ListTile(
             leading: CircleAvatar(
               backgroundColor: Colors.transparent,
@@ -158,11 +183,13 @@ class ServersList extends StatelessWidget {
 class ServerTile extends StatelessWidget {
   final Server server;
   final OnRemoveServer onRemoveServer;
+  final Widget? trailing;
 
   const ServerTile({
     super.key,
     required this.server,
     required this.onRemoveServer,
+    this.trailing,
   });
 
   @override
@@ -211,16 +238,25 @@ class ServerTile extends StatelessWidget {
                   if (!server.passedCertificates) loc.certificateNotPassed
                 ].join(' • ')
               : loc.gettingDevices,
-          overflow: TextOverflow.ellipsis,
         ),
-        trailing: SquaredIconButton(
-          icon: Icon(
-            Icons.delete,
-            color: theme.colorScheme.error,
-          ),
-          tooltip: loc.disconnectServer,
-          // splashRadius: 24.0,
-          onPressed: () => onRemoveServer(context, server),
+        trailing: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            SquaredIconButton(
+              icon: Icon(
+                Icons.delete,
+                color: theme.colorScheme.error,
+              ),
+              tooltip: loc.disconnectServer,
+              // splashRadius: 24.0,
+              onPressed: () => onRemoveServer(context, server),
+            ),
+            if (trailing != null)
+              Padding(
+                padding: const EdgeInsetsDirectional.only(start: 8.0),
+                child: trailing!,
+              ),
+          ],
         ),
         onTap: () {
           showEditServer(context, server);
@@ -352,6 +388,13 @@ class ServerCard extends StatelessWidget {
               child: Row(children: [
                 ServerStatusIcon(isLoading: isLoading, server: server),
                 Spacer(),
+                Tooltip(
+                  message: 'Reorder',
+                  child: Icon(
+                    Icons.drag_indicator_outlined,
+                    size: 18.0,
+                  ),
+                ),
                 SquaredIconButton(
                   tooltip: loc.serverOptions,
                   icon: Icon(moreIconData, size: 20.0),