Add reconnect and animations to connection button

assets/translations/strings_en.i18n.json

@@ -33,6 +33,7 @@
             "connecting": "Connecting",
             "disconnecting": "Disconnecting",
             "connected": "Connected",
+            "reconnect": "Reconnect",
             "experimentalNotice": "Experimental Features In Use",
             "experimentalNoticeMsg": "You've enabled some experimental features which might affect connection quality and cause unexpected errors. You can always change or reset these options from Config options page.",
             "disableExperimentalNotice": "Don't show again"

lib/features/config_option/notifier/config_option_notifier.dart

@@ -24,7 +24,7 @@ class ConfigOptionNotifier extends _$ConfigOptionNotifier with AppLogger {
         if (next case AsyncData(:final value) when next != previous) {
           if (_lastUpdate == null ||
               DateTime.now().difference(_lastUpdate!) >
-                  const Duration(seconds: 3)) {
+                  const Duration(milliseconds: 100)) {
             _lastUpdate = DateTime.now();
             state = AsyncData(value != serviceSingboxOptions);
           }

lib/features/home/widget/connection_button.dart

@@ -5,9 +5,11 @@ import 'package:hiddify/core/localization/translations.dart';
 import 'package:hiddify/core/model/failures.dart';
 import 'package:hiddify/core/theme/theme_extensions.dart';
 import 'package:hiddify/features/config_option/data/config_option_repository.dart';
+import 'package:hiddify/features/config_option/notifier/config_option_notifier.dart';
 import 'package:hiddify/features/connection/model/connection_status.dart';
 import 'package:hiddify/features/connection/notifier/connection_notifier.dart';
 import 'package:hiddify/features/connection/widget/experimental_feature_notice.dart';
+import 'package:hiddify/features/profile/notifier/active_profile_notifier.dart';
 import 'package:hiddify/gen/assets.gen.dart';
 import 'package:hiddify/utils/alerts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -20,6 +22,8 @@ class ConnectionButton extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final t = ref.watch(translationsProvider);
     final connectionStatus = ref.watch(connectionNotifierProvider);
+    final requiresReconnect =
+        ref.watch(configOptionNotifierProvider).valueOrNull;
 
     ref.listen(
       connectionNotifierProvider,
@@ -37,55 +41,58 @@ class ConnectionButton extends HookConsumerWidget {
 
     final buttonTheme = Theme.of(context).extension<ConnectionButtonTheme>()!;
 
-    switch (connectionStatus) {
+    Future<bool> showExperimentalNotice() async {
-      case AsyncData(value: final status):
+      final hasExperimental = ref.read(ConfigOptions.hasExperimentalFeatures);
-        final Color connectionLogoColor = status.isConnected
+      final canShowNotice = !ref.read(disableExperimentalFeatureNoticeProvider);
-            ? buttonTheme.connectedColor!
+      if (hasExperimental && canShowNotice && context.mounted) {
-            : buttonTheme.idleColor!;
+        return await const ExperimentalFeatureNoticeDialog().show(context) ??
+            true;
+      }
+      return true;
+    }
 
-        return _ConnectionButton(
+    return _ConnectionButton(
-          onTap: () async {
+      onTap: switch (connectionStatus) {
-            var canConnect = true;
+        AsyncData(value: Disconnected()) || AsyncError() => () async {
-            if (status case Disconnected()) {
+            if (await showExperimentalNotice()) {
-              final hasExperimental =
+              return await ref
-                  ref.read(ConfigOptions.hasExperimentalFeatures);
-              final canShowNotice =
-                  !ref.read(disableExperimentalFeatureNoticeProvider);
-
-              if (hasExperimental && canShowNotice && context.mounted) {
-                canConnect = await const ExperimentalFeatureNoticeDialog()
-                        .show(context) ??
-                    true;
-              }
-            }
-
-            if (canConnect) {
-              await ref
                   .read(connectionNotifierProvider.notifier)
                   .toggleConnection();
             }
           },
-          enabled: !status.isSwitching,
+        AsyncData(value: Connected()) => () async {
-          label: status.present(t),
+            if (requiresReconnect == true && await showExperimentalNotice()) {
-          buttonColor: connectionLogoColor,
+              return await ref
-        );
+                  .read(connectionNotifierProvider.notifier)
-      case AsyncError():
+                  .reconnect(await ref.read(activeProfileProvider.future));
-        return _ConnectionButton(
+            }
-          onTap: () =>
+            return await ref
-              ref.read(connectionNotifierProvider.notifier).toggleConnection(),
+                .read(connectionNotifierProvider.notifier)
-          enabled: true,
+                .toggleConnection();
-          label: const Disconnected().present(t),
+          },
-          buttonColor: buttonTheme.idleColor!,
+        _ => () {},
-        );
+      },
-      default:
+      enabled: switch (connectionStatus) {
-        // HACK
+        AsyncData(value: Connected()) ||
-        return _ConnectionButton(
+        AsyncData(value: Disconnected()) ||
-          onTap: () {},
+        AsyncError() =>
-          enabled: false,
+          true,
-          label: "",
+        _ => false,
-          buttonColor: Colors.red,
+      },
-        );
+      label: switch (connectionStatus) {
-    }
+        AsyncData(value: Connected()) when requiresReconnect == true =>
+          t.home.connection.reconnect,
+        AsyncData(value: final status) => status.present(t),
+        _ => "",
+      },
+      buttonColor: switch (connectionStatus) {
+        AsyncData(value: Connected()) when requiresReconnect == true =>
+          Colors.teal,
+        AsyncData(value: Connected()) => buttonTheme.connectedColor!,
+        AsyncData(value: _) => buttonTheme.idleColor!,
+        _ => Colors.red,
+      },
+    );
   }
 }
 
@@ -132,11 +139,17 @@ class _ConnectionButton extends StatelessWidget {
                 onTap: onTap,
                 child: Padding(
                   padding: const EdgeInsets.all(36),
-                  child: Assets.images.logo.svg(
+                  child: TweenAnimationBuilder(
-                    colorFilter: ColorFilter.mode(
+                    tween: ColorTween(end: buttonColor),
-                      buttonColor,
+                    duration: const Duration(milliseconds: 250),
-                      BlendMode.srcIn,
+                    builder: (context, value, child) {
-                    ),
+                      return Assets.images.logo.svg(
+                        colorFilter: ColorFilter.mode(
+                          value!,
+                          BlendMode.srcIn,
+                        ),
+                      );
+                    },
                   ),
                 ),
               ),
@@ -147,9 +160,25 @@ class _ConnectionButton extends StatelessWidget {
         ),
         const Gap(16),
         ExcludeSemantics(
-          child: Text(
+          child: AnimatedSwitcher(
-            label,
+            duration: const Duration(milliseconds: 250),
-            style: Theme.of(context).textTheme.titleMedium,
+            transitionBuilder: (child, animation) {
+              return SlideTransition(
+                position: Tween<Offset>(
+                  begin: const Offset(0.0, -0.2),
+                  end: Offset.zero,
+                ).animate(animation),
+                child: FadeTransition(
+                  opacity: animation,
+                  child: child,
+                ),
+              );
+            },
+            child: Text(
+              label,
+              key: ValueKey<String>(label),
+              style: Theme.of(context).textTheme.titleMedium,
+            ),
           ),
         ),
       ],