Display MQTT connection status

The user otherwise cannot trust the state of the contacts because the
app could just be disconnected from the broker.

1 files changed, 29 insertions, 1 deletions

diff --git a/lib/ui.dart b/lib/ui.dart
index ff8c3a8..38ace9a 100644
--- a/lib/ui.dart
+++ b/lib/ui.dart
@@ -11,7 +11,12 @@ class UI extends StatelessWidget {
     return MaterialApp(
       home: Scaffold(
         appBar: AppBar(title: const Text("Contacts")),
-        body: const ContactList(),
+        body: const Column(
+          children: <Widget>[
+            Expanded(child: ContactList()),
+          ],
+        ),
+        bottomNavigationBar: const ConnectionStatus(),
       ),
     );
   }
@@ -43,3 +48,26 @@ class ContactList extends StatelessWidget {
     );
   }
 }
+
+class ConnectionStatus extends StatelessWidget {
+  const ConnectionStatus({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return  Consumer<AppState>(
+      builder: (BuildContext context, AppState state, Widget? child) {
+        Icon icon;
+        Text text;
+        if (state.brokerConnected) {
+          icon = const Icon(Icons.cloud, color: Colors.green);
+          text = const Text('Connected');
+        } else {
+          icon = const Icon(Icons.cloud_off, color: Colors.red);
+          text = const Text('Disconnected');
+        }
+
+        return ListTile(leading: icon, title: text);
+      },
+    );
+  }
+}