✨ Connection state notifier

lib/screens/channel/channel_chat.dart

@@ -22,6 +22,7 @@ import 'package:solian/widgets/chat/call/chat_call_action.dart';
 import 'package:solian/widgets/chat/chat_message.dart';
 import 'package:solian/widgets/chat/chat_message_action.dart';
 import 'package:solian/widgets/chat/chat_message_input.dart';
+import 'package:solian/widgets/current_state_action.dart';
 
 class ChannelChatScreen extends StatefulWidget {
   final String alias;
@@ -300,6 +301,7 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
         title: Text(title),
         centerTitle: false,
         actions: [
+          const BackgroundStateWidget(),
           Builder(builder: (context) {
             if (_isBusy) return const SizedBox();
             return ChatCallButton(

lib/screens/contact.dart

@@ -12,6 +12,7 @@ import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
 import 'package:solian/widgets/channel/channel_list.dart';
 import 'package:solian/widgets/chat/call/chat_call_indicator.dart';
+import 'package:solian/widgets/current_state_action.dart';
 
 class ContactScreen extends StatefulWidget {
   const ContactScreen({super.key});
@@ -87,6 +88,7 @@ class _ContactScreenState extends State<ContactScreen> {
                   centerTitle: false,
                   titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
                   actions: [
+                    const BackgroundStateWidget(),
                     const NotificationButton(),
                     PopupMenuButton(
                       icon: const Icon(Icons.add_circle),

lib/screens/realms.dart

@@ -9,6 +9,7 @@ import 'package:solian/router.dart';
 import 'package:solian/screens/account/notification.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
+import 'package:solian/widgets/current_state_action.dart';
 
 class RealmListScreen extends StatefulWidget {
   const RealmListScreen({super.key});
@@ -75,6 +76,7 @@ class _RealmListScreenState extends State<RealmListScreen> {
                   centerTitle: false,
                   titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
                   actions: [
+                    const BackgroundStateWidget(),
                     const NotificationButton(),
                     IconButton(
                       icon: const Icon(Icons.add_circle),

lib/screens/social.dart

@@ -8,6 +8,7 @@ import 'package:solian/providers/content/post.dart';
 import 'package:solian/router.dart';
 import 'package:solian/screens/account/notification.dart';
 import 'package:solian/theme.dart';
+import 'package:solian/widgets/current_state_action.dart';
 import 'package:solian/widgets/posts/post_list.dart';
 
 class SocialScreen extends StatefulWidget {
@@ -82,6 +83,7 @@ class _SocialScreenState extends State<SocialScreen> {
                 floating: true,
                 titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
                 actions: [
+                  const BackgroundStateWidget(),
                   const NotificationButton(),
                   SizedBox(
                     width: SolianTheme.isLargeScreen(context) ? 8 : 16,

lib/widgets/current_state_action.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:get/get.dart';
+import 'package:solian/providers/account.dart';
+import 'package:solian/providers/chat.dart';
+
+class BackgroundStateWidget extends StatelessWidget {
+  const BackgroundStateWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final AccountProvider account = Get.find();
+    final ChatProvider chat = Get.find();
+
+    return Obx(() {
+      final disconnected =
+          chat.isConnected.isFalse || account.isConnected.isFalse;
+      final connecting =
+          chat.isConnecting.isTrue || account.isConnecting.isTrue;
+
+      return Row(children: [
+        if (disconnected && !connecting)
+          IconButton(
+            tooltip: [
+              if (account.isConnected.isFalse)
+                'Lost Connection with Passport Server...',
+              if (chat.isConnected.isFalse)
+                'Lost Connection with Messaging Server...',
+            ].join('\n'),
+            icon: const Icon(Icons.wifi_off)
+                .animate(onPlay: (c) => c.repeat())
+                .fadeIn(duration: 500.ms)
+                .then()
+                .fadeOut(duration: 500.ms),
+            onPressed: () {
+              if (account.isConnected.isFalse) account.connect();
+              if (chat.isConnected.isFalse) chat.connect();
+            },
+          ),
+        if (connecting)
+          IconButton(
+            tooltip: [
+              if (account.isConnecting.isTrue)
+                'Waiting Passport Server Response...',
+              if (chat.isConnecting.isTrue)
+                'Waiting Messaging Server Response...',
+            ].join('\n'),
+            icon: const Icon(Icons.sync)
+                .animate(onPlay: (c) => c.repeat())
+                .rotate(duration: 1850.ms, begin: 1, end: 0),
+            onPressed: () {},
+          ),
+      ]);
+    });
+  }
+}