From 1dc47d1991910d95b4472ed3e415adb0d46a6617 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Fri, 16 Jan 2026 21:49:22 +0100
Subject: Display MQTT connection status

The user otherwise cannot trust the state of the contacts because the
app could just be disconnected from the broker.
---
 lib/ui.dart | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

(limited to 'lib/ui.dart')

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);
+      },
+    );
+  }
+}
-- 
cgit v1.2.3-70-g09d2