feat: add DimmingAppBar component and refactor DimmingScreen layout

oldrev · oldrev · commit 4c45fc91f426 · 2026-03-06T00:02:06.000+08:00
diff --git a/client/lib/devices/borneo/lyfi/views/dimming_screen.dart b/client/lib/devices/borneo/lyfi/views/dimming_screen.dart
@@ -1,3 +1,4 @@
+import 'package:borneo_common/io/net/rssi.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gettext/flutter_gettext/context_ext.dart';
@@ -14,6 +15,66 @@ import 'editor/schedule_editor_view.dart';
 import 'editor/sun_editor_view.dart';
 // screen_top_rounded_container is used inside slider lists
 
+class DimmingAppBar extends StatelessWidget {
+  final VoidCallback? onBack;
+  const DimmingAppBar({super.key, this.onBack});
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverAppBar(
+      pinned: false,
+      floating: false,
+      snap: false,
+      foregroundColor: Theme.of(context).colorScheme.onSurface,
+      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+      centerTitle: true,
+      leading: Selector<LyfiViewModel, bool>(
+        selector: (context, vm) => vm.isBusy,
+        builder: (context, isBusy, child) =>
+            IconButton(icon: const Icon(Icons.arrow_back), onPressed: isBusy ? null : onBack),
+      ),
+      title: Selector<LyfiViewModel, ({LyfiMode mode, bool canSwitch})>(
+        selector: (context, vm) => (
+          mode: vm.mode,
+          canSwitch: vm.isOnline && !vm.isSuspectedOffline && vm.isOn && vm.state == LyfiState.dimming,
+        ),
+        builder: (context, data, _) {
+          return SegmentedButton<LyfiMode>(
+            showSelectedIcon: false,
+            selected: <LyfiMode>{data.mode},
+            segments: [
+              ButtonSegment<LyfiMode>(value: LyfiMode.manual, icon: const Icon(Icons.bar_chart_outlined, size: 20)),
+              ButtonSegment<LyfiMode>(value: LyfiMode.scheduled, icon: const Icon(Icons.alarm_outlined, size: 20)),
+              ButtonSegment<LyfiMode>(value: LyfiMode.sun, icon: const Icon(Icons.wb_sunny_outlined, size: 20)),
+            ],
+            onSelectionChanged: data.canSwitch
+                ? (Set<LyfiMode> newSelection) {
+                    if (data.mode != newSelection.single) {
+                      context.read<LyfiViewModel>().switchMode(newSelection.single);
+                    }
+                  }
+                : null,
+          );
+        },
+      ),
+      actions: [
+        Selector<LyfiViewModel, RssiLevel?>(
+          selector: (_, vm) => vm.rssiLevel,
+          builder: (context, rssi, _) => Center(
+            child: switch (rssi) {
+              null => Icon(Icons.wifi_off, size: 24, color: Theme.of(context).colorScheme.error),
+              RssiLevel.strong => const Icon(Icons.wifi_rounded, size: 24),
+              RssiLevel.medium => const Icon(Icons.wifi_2_bar_rounded, size: 24),
+              RssiLevel.weak => const Icon(Icons.wifi_1_bar_rounded, size: 24),
+            },
+          ),
+        ),
+        const SizedBox(width: 16),
+      ],
+    );
+  }
+}
+
 class DimmingScreen extends StatelessWidget {
   static const routeName = '/lyfi/dimming';
   const DimmingScreen({super.key});
@@ -35,13 +96,14 @@ class DimmingScreen extends StatelessWidget {
       child: Scaffold(
         body: Stack(
           children: [
-            // keep the sliver headers but disable scrolling entirely; this mirrors
-            // the pattern used by the details screen and ensures the UI is fixed
-            // in place instead of being scrollable.
-            NestedScrollView(
+            // CustomScrollView with NeverScrollableScrollPhysics keeps the
+            // header slivers pinned while the body itself cannot scroll.
+            // The SingleChildScrollView inside each editor view handles local
+            // scrolling for just the slider-list area.
+            CustomScrollView(
               physics: const NeverScrollableScrollPhysics(),
-              headerSliverBuilder: (context, innerBoxIsScrolled) => [
-                LyfiAppBar(
+              slivers: [
+                DimmingAppBar(
                   onBack: () async {
                     final vm = context.read<LyfiViewModel>();
                     if (!vm.isLocked && !vm.isSuspectedOffline) {
@@ -54,8 +116,8 @@ class DimmingScreen extends StatelessWidget {
                 ),
                 const LyfiBusyIndicatorSliver(),
                 const LyfiStatusBannersSliver(),
+                const SliverFillRemaining(hasScrollBody: true, child: DimmingView()),
               ],
-              body: DimmingView(),
             ),
             const _ConnectionGuardOverlay(),
           ],
@@ -65,72 +127,12 @@ class DimmingScreen extends StatelessWidget {
   }
 }
 
-class DimmingHeroPanel extends StatelessWidget {
-  const DimmingHeroPanel({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Material(
-      color: Theme.of(context).scaffoldBackgroundColor,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.end,
-        children: [
-          Selector<LyfiViewModel, ({LyfiMode mode, bool canSwitch})>(
-            selector: (context, vm) => (
-              mode: vm.mode,
-              canSwitch: vm.isOnline && !vm.isSuspectedOffline && vm.isOn && vm.state == LyfiState.dimming,
-            ),
-            builder: (context, vm, _) {
-              return SegmentedButton<LyfiMode>(
-                showSelectedIcon: false,
-                selected: <LyfiMode>{vm.mode},
-                segments: [
-                  ButtonSegment<LyfiMode>(
-                    value: LyfiMode.manual,
-                    label: Text(context.translate('MANU')),
-                    icon: const Icon(Icons.bar_chart_outlined, size: 16),
-                  ),
-                  ButtonSegment<LyfiMode>(
-                    value: LyfiMode.scheduled,
-                    label: Text(context.translate('SCHED')),
-                    icon: const Icon(Icons.alarm_outlined, size: 16),
-                  ),
-                  ButtonSegment<LyfiMode>(
-                    value: LyfiMode.sun,
-                    label: Text(context.translate('SUN')),
-                    icon: const Icon(Icons.wb_sunny_outlined, size: 16),
-                  ),
-                ],
-                onSelectionChanged: vm.canSwitch
-                    ? (Set<LyfiMode> newSelection) {
-                        if (vm.mode != newSelection.single) {
-                          context.read<LyfiViewModel>().switchMode(newSelection.single);
-                        }
-                      }
-                    : null,
-              );
-            },
-          ),
-        ],
-      ),
-    );
-  }
-}
-
 class DimmingView extends StatelessWidget {
   const DimmingView({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      spacing: 8,
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: [
-        const DimmingHeroPanel(),
-        Expanded(child: const EditorHost()),
-      ],
-    );
+    return const EditorHost();
   }
 }
 
diff --git a/client/lib/devices/borneo/lyfi/views/moon_screen.dart b/client/lib/devices/borneo/lyfi/views/moon_screen.dart
@@ -65,24 +65,30 @@ class MoonScreen extends StatelessWidget {
               } else if (snapshot.hasError) {
                 return Center(child: Text('Error: ${snapshot.error}'));
               } else {
-                return Column(
-                  mainAxisSize: MainAxisSize.max,
-                  children: [
-                    AspectRatio(
-                      aspectRatio: 1.5,
-                      child: Consumer<MoonViewModel>(builder: (context, vm, _) => buildGraph(context, vm)),
-                    ),
-                    const SizedBox(height: 24),
-                    Expanded(
-                      child: Consumer<MoonViewModel>(
-                        builder: (context, vm, _) => ScreenTopRoundedContainer(
-                          color: Theme.of(context).colorScheme.surfaceContainer,
-                          padding: EdgeInsets.fromLTRB(0, 24, 0, 24),
-                          child: BrightnessSliderList(vm.editor, disabled: !vm.enabled || !vm.canEdit),
+                return LayoutBuilder(
+                  builder: (context, constraints) {
+                    return Column(
+                      spacing: 8,
+                      mainAxisSize: MainAxisSize.max,
+                      children: [
+                        SizedBox(
+                          height: 180,
+                          child: Consumer<MoonViewModel>(builder: (context, vm, _) => buildGraph(context, vm)),
                         ),
-                      ),
-                    ),
-                  ],
+                        Expanded(
+                          child: Consumer<MoonViewModel>(
+                            builder: (context, vm, _) => ScreenTopRoundedContainer(
+                              color: Theme.of(context).colorScheme.surfaceContainer,
+                              padding: EdgeInsets.fromLTRB(0, 24, 0, 24),
+                              child: SingleChildScrollView(
+                                child: BrightnessSliderList(vm.editor, disabled: !vm.enabled || !vm.canEdit),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
+                    );
+                  },
                 );
               }
             },
diff --git a/client/lib/devices/borneo/lyfi/views/settings_screen.dart b/client/lib/devices/borneo/lyfi/views/settings_screen.dart
@@ -353,7 +353,6 @@ class SettingsScreen extends StatelessWidget {
       return;
     }
 
-    final deviceID = vm.deviceID;
     await vm.networkReset();
 
     if (context.mounted) {
diff --git a/client/lib/features/devices/view_models/device_discovery_view_model.dart b/client/lib/features/devices/view_models/device_discovery_view_model.dart
@@ -321,24 +321,6 @@ class DeviceDiscoveryViewModel extends AbstractScreenViewModel {
     }
   }
 
-  /// Attempts to resolve a set of BLE names using [IBleProvisioner.fetchDeviceInfo].
-  ///
-  /// Each result is stored in [_resolvedDeviceNames] and triggers a UI refresh.
-  Future<void> _resolveDeviceNames(List<String> names) async {
-    for (var name in names) {
-      if (_scanCancelToken.isCancelled) return;
-      try {
-        final info = await _bleProvisioner.fetchDeviceInfo(deviceName: name, cancelToken: _scanCancelToken);
-        if (info.name.isNotEmpty) {
-          _resolvedDeviceNames[name] = info.name;
-          _updateDiscoverableList();
-        }
-      } catch (e, st) {
-        _logger.w('Failed to resolve name for $name', error: e, stackTrace: st);
-      }
-    }
-  }
-
   Future<void> addNewDevice(SupportedDeviceDescriptor deviceInfo) async {
     await _deviceManager.addNewDevice(deviceInfo, groupID: null);
   }
diff --git a/client/lib/shared/widgets/app_bar_apply_button.dart b/client/lib/shared/widgets/app_bar_apply_button.dart
@@ -14,28 +14,25 @@ class AppBarApplyButton extends StatelessWidget {
   /// Callback when pressed.
   final VoidCallback? onPressed;
 
-  /// Whether the button is enabled.
-  final bool enabled;
-
   /// Custom text style (optional).
   final TextStyle? labelStyle;
 
-  const AppBarApplyButton({super.key, this.onPressed, this.enabled = true, this.labelStyle, this.label, this.icon})
+  const AppBarApplyButton({super.key, this.onPressed, this.labelStyle, this.label, this.icon})
     : assert(label != null || icon != null, 'label or icon must be provided');
 
   bool get _isIOS => Platform.isIOS || Platform.isMacOS;
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final color = enabled
+    final color = onPressed != null
         ? (_isIOS ? CupertinoColors.systemBlue : theme.colorScheme.primary)
         : (_isIOS ? CupertinoColors.inactiveGray : theme.disabledColor);
 
     if (label == null && icon != null) {
       return IconButton(
         icon: Icon(icon, color: color),
-        onPressed: enabled ? onPressed : null,
+        onPressed: onPressed,
       );
     }
 
@@ -59,13 +56,13 @@ class AppBarApplyButton extends StatelessWidget {
     if (_isIOS) {
       return CupertinoButton(
         padding: const EdgeInsets.symmetric(horizontal: 16),
-        onPressed: enabled ? onPressed : null,
+        onPressed: onPressed,
         child: Text(label!, style: textStyle),
       );
     }
 
     return TextButton(
-      onPressed: enabled ? onPressed : null,
+      onPressed: onPressed,
       child: Text(label!.toUpperCase(), style: textStyle),
     );
   }
@@ -78,7 +75,7 @@ class AppBarApplyButton extends StatelessWidget {
     if (_isIOS) {
       return CupertinoButton(
         padding: const EdgeInsets.symmetric(horizontal: 12),
-        onPressed: enabled ? onPressed : null,
+        onPressed: onPressed,
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -91,7 +88,7 @@ class AppBarApplyButton extends StatelessWidget {
     }
 
     return TextButton.icon(
-      onPressed: enabled ? onPressed : null,
+      onPressed: onPressed,
       icon: Icon(icon, color: color, size: 18),
       label: Text(label!.toUpperCase(), style: textStyle),
     );
diff --git a/client/lib/shared/widgets/generic_bottom_sheet_picker.dart b/client/lib/shared/widgets/generic_bottom_sheet_picker.dart
@@ -1,8 +1,5 @@
 import 'package:borneo_app/shared/widgets/screen_top_rounded_container.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-
-import '../../core/models/platform_device_info.dart';
 
 /// An entry used by [GenericBottomSheetPicker].
 ///
@@ -85,14 +82,6 @@ class GenericBottomSheetPicker<T> extends StatelessWidget {
         ? selectedValue
         : (entries.isNotEmpty ? entries.first.value : null);
 
-    // Clip the contents so any scrolling glow or background does not
-    // overflow the rounded corners of the sheet.  The radius is pulled from
-    // the shared [PlatformDeviceInfo] provider so we match the actual device
-    // corners; if for whatever reason the provider isn't available we fall
-    // back to the previous hardcoded value.
-    final info = Provider.of<PlatformDeviceInfo?>(context, listen: false);
-    final double corner = info?.screenCornerRadius.topLeft ?? 16.0;
-
     return ScreenTopRoundedContainer(
       child: Column(
         mainAxisSize: MainAxisSize.min,

Original file line number	Diff line number	Diff line change
`@@ -353,7 +353,6 @@ class SettingsScreen extends StatelessWidget {`
`353`	`353`	`return;`
`354`	`354`	`}`
`355`	`355`
`356`		`- final deviceID = vm.deviceID;`
`357`	`356`	`await vm.networkReset();`
`358`	`357`
`359`	`358`	`if (context.mounted) {`