✨ Make status indicator work

- Display current state (Connecting, Error, Connected)
- Try to reconnect after disconnect

lib/main.dart

@@ -45,6 +45,7 @@ class GoMixHome extends StatefulWidget {
 
 class _GoMixHomeState extends State<GoMixHome> {
   int currentPageIndex = 0;
+  bool wsConnected = false;
   mixer.MixerState mixerState = mixer.MixerState(inputs: [], outputs: []);
 
   WebSocketChannel? ws;
@@ -57,6 +58,7 @@ class _GoMixHomeState extends State<GoMixHome> {
   void initWs() {
     setState(() {
       connectionError.value = "";
+      wsConnected = false;
     });
 
     var connections = jsonDecode(prefs.getString("connections") ?? "{}")
@@ -65,8 +67,10 @@ class _GoMixHomeState extends State<GoMixHome> {
     var wsUrl = (connections[currentConnection] ?? {"url": ""})["url"];
 
     if (wsUrl == "") {
-      connectionError.value =
+      setState(() {
-          "No GoMix connection available! Please add a connection in the server selector.";
+        connectionError.value =
+            "No GoMix connection available! Please add a connection in the server selector.";
+      });
 
       return;
     }
@@ -75,6 +79,8 @@ class _GoMixHomeState extends State<GoMixHome> {
       Uri.parse(wsUrl),
     );
 
+    ws?.ready.whenComplete(() => wsConnected = true);
+
     // Listen to incoming websocket messages
     ws?.stream.listen((message) {
       final data = jsonDecode(message) as Map<String, dynamic>;
@@ -104,8 +110,16 @@ class _GoMixHomeState extends State<GoMixHome> {
           }
         });
       }
+    }, onDone: () {
+      wsConnected = false;
+      if (connectionError.value != "") return;
+      Future.delayed(const Duration(seconds: 2), () {
+        initWs();
+      });
     }, onError: (err) {
-      connectionError.value = err.toString();
+      setState(() {
+        connectionError.value = err.toString();
+      });
     });
 
     // Request the current port list
@@ -161,12 +175,26 @@ class _GoMixHomeState extends State<GoMixHome> {
             appBar: AppBar(
               title: const Text('go-mix Audio Mixer'),
               centerTitle: true,
-              leading: IconButton(
+              leading: connectionError.value == ""
-                icon: const Icon(Icons.check_circle_outline),
+                  ? (wsConnected
-                color: theme.colorScheme.inversePrimary,
+                      ? IconButton(
-                tooltip: 'Connected',
+                          icon: const Icon(Icons.check_circle_outline),
-                onPressed: () {},
+                          color: Colors.green,
-              ),
+                          tooltip: 'Connected',
+                          onPressed: () {},
+                        )
+                      : IconButton(
+                          icon: const Icon(Icons.change_circle_outlined),
+                          color: Colors.orange,
+                          tooltip: 'Connecting',
+                          onPressed: () {},
+                        ))
+                  : IconButton(
+                      icon: const Icon(Icons.remove_circle_outline_outlined),
+                      color: Colors.red,
+                      tooltip: 'Not connected',
+                      onPressed: () {},
+                    ),
               actions: <Widget>[
                 Padding(
                   padding: const EdgeInsets.all(8),