Migrate to singbox

lib/features/home/widgets/connection_button.dart

@@ -3,8 +3,11 @@ import 'package:flutter_animate/flutter_animate.dart';
 import 'package:gap/gap.dart';
 import 'package:hiddify/core/core_providers.dart';
 import 'package:hiddify/core/theme/theme.dart';
+import 'package:hiddify/domain/connectivity/connectivity.dart';
+import 'package:hiddify/domain/failures.dart';
 import 'package:hiddify/features/common/connectivity/connectivity_controller.dart';
 import 'package:hiddify/gen/assets.gen.dart';
+import 'package:hiddify/utils/alerts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:recase/recase.dart';
 
@@ -17,12 +20,71 @@ class ConnectionButton extends HookConsumerWidget {
     final t = ref.watch(translationsProvider);
     final connectionStatus = ref.watch(connectivityControllerProvider);
 
-    final Color connectionLogoColor = connectionStatus.isConnected
-        ? ConnectionButtonColor.connected
-        : ConnectionButtonColor.disconnected;
+    ref.listen(
+      connectivityControllerProvider,
+      (_, next) {
+        if (next case AsyncError(:final error)) {
+          CustomToast.error(t.presentError(error)).show(context);
+        }
+        if (next
+            case AsyncData(value: Disconnected(:final connectionFailure?))) {
+          CustomAlertDialog(
+            message: connectionFailure.present(t),
+          ).show(context);
+        }
+      },
+    );
 
-    final bool intractable = !connectionStatus.isSwitching;
+    switch (connectionStatus) {
+      case AsyncData(value: final status):
+        final Color connectionLogoColor = status.isConnected
+            ? ConnectionButtonColor.connected
+            : ConnectionButtonColor.disconnected;
 
+        return _ConnectionButton(
+          onTap: () => ref
+              .read(connectivityControllerProvider.notifier)
+              .toggleConnection(),
+          enabled: !status.isSwitching,
+          label: status.present(t),
+          buttonColor: connectionLogoColor,
+        );
+      case AsyncError():
+        return _ConnectionButton(
+          onTap: () => ref
+              .read(connectivityControllerProvider.notifier)
+              .toggleConnection(),
+          enabled: true,
+          label: const Disconnected().present(t),
+          buttonColor: ConnectionButtonColor.disconnected,
+        );
+      default:
+        // HACK
+        return _ConnectionButton(
+          onTap: () {},
+          enabled: false,
+          label: "",
+          buttonColor: Colors.red,
+        );
+    }
+  }
+}
+
+class _ConnectionButton extends StatelessWidget {
+  const _ConnectionButton({
+    required this.onTap,
+    required this.enabled,
+    required this.label,
+    required this.buttonColor,
+  });
+
+  final VoidCallback onTap;
+  final bool enabled;
+  final String label;
+  final Color buttonColor;
+
+  @override
+  Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -33,7 +95,7 @@ class ConnectionButton extends HookConsumerWidget {
             boxShadow: [
               BoxShadow(
                 blurRadius: 16,
-                color: connectionLogoColor.withOpacity(0.5),
+                color: buttonColor.withOpacity(0.5),
               ),
             ],
           ),
@@ -43,26 +105,24 @@ class ConnectionButton extends HookConsumerWidget {
             shape: const CircleBorder(),
             color: Colors.white,
             child: InkWell(
-              onTap: () async {
-                await ref
-                    .read(connectivityControllerProvider.notifier)
-                    .toggleConnection();
-              },
+              onTap: onTap,
               child: Padding(
                 padding: const EdgeInsets.all(36),
                 child: Assets.images.logo.svg(
                   colorFilter: ColorFilter.mode(
-                    connectionLogoColor,
+                    buttonColor,
                     BlendMode.srcIn,
                   ),
                 ),
               ),
             ),
-          ).animate(target: intractable ? 0 : 1).blurXY(end: 1),
-        ).animate(target: intractable ? 0 : 1).scaleXY(end: .88),
+          ).animate(target: enabled ? 0 : 1).blurXY(end: 1),
+        )
+            .animate(target: enabled ? 0 : 1)
+            .scaleXY(end: .88, curve: Curves.easeIn),
         const Gap(16),
         Text(
-          connectionStatus.present(t).sentenceCase,
+          label.sentenceCase,
           style: Theme.of(context).textTheme.bodyLarge,
         ),
       ],