fix(ui): theme toggle is now actually reactive

The toggle changed _mode and called setState on StudioAppState,
but the sidebar that hosts the toggle button never rebuilt:
StudioApp returns `MaterialApp(home: const StudioShell())`, and
the const child's element doesn't get a didUpdateWidget on
parent rebuild. So the toggle's icon would only flip on the
next health-poll tick (up to 5s later) when the sidebar's own
setState fired for an unrelated reason.

Switch to a ValueNotifier-based pattern:
- StudioAppState exposes `modeNotifier` (ValueNotifier<...>)
  instead of a getter.
- StudioApp wraps MaterialApp in a ValueListenableBuilder
  bound to the notifier so themeMode flips immediately.
- _ThemeToggle is itself a ValueListenableBuilder against the
  same notifier — its icon and onPressed always reflect the
  current value without depending on parent rebuild timing.

Bumps fai_studio 0.7.2 -> 0.7.3.

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>

lib/main.dart

@@ -19,7 +19,7 @@ import 'widgets/widgets.dart';
 /// Studio's own build version. Bump on every UI commit so the
 /// running app self-identifies — visible in the sidebar header
 /// and quick-glance proof that you're seeing the current build.
-const String kStudioVersion = '0.7.2';
+const String kStudioVersion = '0.7.3';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -45,23 +45,32 @@ class StudioApp extends StatefulWidget {
 }
 
 class StudioAppState extends State<StudioApp> {
-  late ThemeModeValue _mode;
-
-  ThemeModeValue get mode => _mode;
+  /// Exposed so any descendant can listen via
+  /// `ValueListenableBuilder` and rebuild instantly when the
+  /// theme flips. setState alone wouldn't propagate through
+  /// `MaterialApp(home: const StudioShell())` because the
+  /// const child's element doesn't get a `didUpdateWidget`.
+  late final ValueNotifier<ThemeModeValue> modeNotifier;
 
   Future<void> setMode(ThemeModeValue m) async {
-    setState(() => _mode = m);
+    modeNotifier.value = m;
     await HubService.instance.saveThemeMode(m);
   }
 
   @override
   void initState() {
     super.initState();
-    _mode = widget.initialThemeMode;
+    modeNotifier = ValueNotifier(widget.initialThemeMode);
   }
 
-  ThemeMode _flutterMode() {
-    switch (_mode) {
+  @override
+  void dispose() {
+    modeNotifier.dispose();
+    super.dispose();
+  }
+
+  ThemeMode _flutterMode(ThemeModeValue v) {
+    switch (v) {
       case ThemeModeValue.system:
         return ThemeMode.system;
       case ThemeModeValue.light:
@@ -73,13 +82,16 @@ class StudioAppState extends State<StudioApp> {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'F∆I Studio',
-      debugShowCheckedModeBanner: false,
-      theme: FaiTheme.light(),
-      darkTheme: FaiTheme.dark(),
-      themeMode: _flutterMode(),
-      home: const StudioShell(),
+    return ValueListenableBuilder<ThemeModeValue>(
+      valueListenable: modeNotifier,
+      builder: (_, mode, _) => MaterialApp(
+        title: 'F∆I Studio',
+        debugShowCheckedModeBanner: false,
+        theme: FaiTheme.light(),
+        darkTheme: FaiTheme.dark(),
+        themeMode: _flutterMode(mode),
+        home: const StudioShell(),
+      ),
     );
   }
 }
@@ -436,28 +448,33 @@ class _ThemeToggle extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final app = StudioApp.of(context);
-    final mode = app?.mode ?? ThemeModeValue.system;
-    final icon = switch (mode) {
-      ThemeModeValue.system => Icons.brightness_auto_outlined,
-      ThemeModeValue.light => Icons.light_mode_outlined,
-      ThemeModeValue.dark => Icons.dark_mode_outlined,
-    };
-    final tooltip = switch (mode) {
-      ThemeModeValue.system => 'theme: follow system',
-      ThemeModeValue.light => 'theme: light',
-      ThemeModeValue.dark => 'theme: dark',
-    };
-    return IconButton(
-      icon: Icon(icon, size: 16),
-      tooltip: tooltip,
-      visualDensity: VisualDensity.compact,
-      onPressed: () {
-        final next = switch (mode) {
-          ThemeModeValue.system => ThemeModeValue.light,
-          ThemeModeValue.light => ThemeModeValue.dark,
-          ThemeModeValue.dark => ThemeModeValue.system,
+    if (app == null) return const SizedBox.shrink();
+    return ValueListenableBuilder<ThemeModeValue>(
+      valueListenable: app.modeNotifier,
+      builder: (_, mode, _) {
+        final icon = switch (mode) {
+          ThemeModeValue.system => Icons.brightness_auto_outlined,
+          ThemeModeValue.light => Icons.light_mode_outlined,
+          ThemeModeValue.dark => Icons.dark_mode_outlined,
         };
-        app?.setMode(next);
+        final tooltip = switch (mode) {
+          ThemeModeValue.system => 'theme: follow system',
+          ThemeModeValue.light => 'theme: light',
+          ThemeModeValue.dark => 'theme: dark',
+        };
+        return IconButton(
+          icon: Icon(icon, size: 16),
+          tooltip: tooltip,
+          visualDensity: VisualDensity.compact,
+          onPressed: () {
+            final next = switch (mode) {
+              ThemeModeValue.system => ThemeModeValue.light,
+              ThemeModeValue.light => ThemeModeValue.dark,
+              ThemeModeValue.dark => ThemeModeValue.system,
+            };
+            app.setMode(next);
+          },
+        );
       },
     );
   }