✨ Websocket connection status indicator

assets/translations/en.json

@@ -131,5 +131,7 @@
   "sensitiveContent": "Sensitive Content",
   "sensitiveContentCollapsed": "Sensitive content has been collapsed.",
   "sensitiveContentDescription": "This content has been marked as sensitive, and may not be suitable for all viewers.",
-  "sensitiveContentReveal": "Reveal"
+  "sensitiveContentReveal": "Reveal",
+  "serverConnecting": "Connecting to server...",
+  "serverDisconnected": "Lost connection from server"
 }

assets/translations/zh.json

@@ -131,5 +131,7 @@
   "sensitiveContent": "敏感内容",
   "sensitiveContentCollapsed": "敏感内容已折叠。",
   "sensitiveContentDescription": "此内容已被标记，可能不适合所有人查看。",
-  "sensitiveContentReveal": "显示内容"
+  "sensitiveContentReveal": "显示内容",
+  "serverConnecting": "正在连接服务器…",
+  "serverDisconnected": "已与服务器断开连接"
 }

lib/providers/websocket.dart

@@ -53,6 +53,7 @@ class WebSocketProvider extends ChangeNotifier {
       conn = WebSocketChannel.connect(uri);
       await conn!.ready;
       log('[WebSocket] Connected to server!');
+      isConnected = true;
     } catch (err) {
       if (err is WebSocketChannelException) {
         log('Failed to connect to websocket: ${(err.inner as dynamic).message}');

lib/widgets/connection_indicator.dart

@@ -0,0 +1,55 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/userinfo.dart';
+import 'package:surface/providers/websocket.dart';
+
+class ConnectionIndicator extends StatelessWidget {
+  const ConnectionIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final ws = context.watch<WebSocketProvider>();
+
+    return ListenableBuilder(
+      listenable: ws,
+      builder: (context, _) {
+        final ua = context.read<UserProvider>();
+
+        return Container(
+          padding: EdgeInsets.only(
+            bottom: 8,
+            top: MediaQuery.of(context).padding.top + 8,
+            left: 24,
+            right: 24,
+          ),
+          color: Theme.of(context).colorScheme.secondaryContainer,
+          child: ua.isAuthorized
+              ? Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    if (ws.isBusy)
+                      Text('serverConnecting').tr().textColor(
+                          Theme.of(context).colorScheme.onSecondaryContainer)
+                    else if (!ws.isConnected)
+                      Text('serverDisconnected').tr().textColor(
+                          Theme.of(context).colorScheme.onSecondaryContainer),
+                  ],
+                )
+              : const SizedBox.shrink(),
+        )
+            .height(
+                (ws.isBusy || !ws.isConnected) && ua.isAuthorized
+                    ? MediaQuery.of(context).padding.top + 30
+                    : 0,
+                animate: true)
+            .animate(
+              const Duration(milliseconds: 300),
+              Curves.easeInOut,
+            );
+      },
+    );
+  }
+}

lib/widgets/navigation/app_scaffold.dart

@@ -2,6 +2,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:responsive_framework/responsive_framework.dart';
+import 'package:surface/widgets/connection_indicator.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
@@ -80,7 +81,12 @@ class AppRootScaffold extends StatelessWidget {
 
     return AppBackground(
       child: Scaffold(
-        body: innerWidget,
+        body: Column(
+          children: [
+            ConnectionIndicator(),
+            Expanded(child: innerWidget),
+          ],
+        ),
         drawer: !isExpandDrawer ? AppNavigationDrawer() : null,
       ),
     );