feat: add ConnectionStatusButton to show status on LevelSelection

lib/screens/level_selection.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:permission_handler/permission_handler.dart';
+import 'package:sense_the_rhythm/widgets/connection_status_button.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:sense_the_rhythm/utils/esense_input.dart';
 import 'package:sense_the_rhythm/utils/simfile.dart';
@@ -94,18 +95,16 @@ class _LevelSelectionState extends State<LevelSelection> {
       appBar: AppBar(
         title: const Text('Sense the Rhythm'),
         actions: [
-          IconButton(
-              onPressed: () => showDialog(
-                    context: context,
-                    builder: (BuildContext context) {
-                      return ESenseConnectDialog(
-                          deviceStatus: ESenseInput.instance.deviceStatus,
-                          connect: (String name) {
-                            ESenseInput.instance.connectToESense(name);
-                          });
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: ValueListenableBuilder(
+              valueListenable: ESenseInput.instance.deviceStatus,
+              builder:
+                  (BuildContext context, String deviceStatus, Widget? child) {
+                return ConnectionStatusButton(deviceStatus);
               },
             ),
-              icon: const Icon(Icons.bluetooth))
+          )
         ],
       ),
       body: Builder(builder: (context) {

lib/widgets/connection_status_button.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:sense_the_rhythm/utils/esense_input.dart';
+import 'package:sense_the_rhythm/widgets/esense_connect_dialog.dart';
+
+class ConnectionStatusButton extends StatelessWidget {
+  final String deviceStatus;
+  const ConnectionStatusButton(
+    this.deviceStatus, {
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FilledButton.icon(
+        style: ButtonStyle(
+            backgroundColor: WidgetStateProperty.all(
+                ESenseInput.instance.connected ? Colors.green : Colors.grey),
+            padding:
+                WidgetStateProperty.all(EdgeInsets.symmetric(horizontal: 8.0))),
+        onPressed: () => showDialog(
+              context: context,
+              builder: (BuildContext context) {
+                return ESenseConnectDialog(
+                    deviceStatus: ESenseInput.instance.deviceStatus,
+                    connect: (String name) {
+                      ESenseInput.instance.connectToESense(name);
+                    });
+              },
+            ),
+        label: Text(deviceStatus),
+        iconAlignment: IconAlignment.end,
+        icon: Icon(ESenseInput.instance.connected
+            ? Icons.bluetooth_connected
+            : Icons.bluetooth));
+  }
+}