Fix iOS UI

oldrev · oldrev · commit 09b87ee0a440 · 2026-03-08T18:38:57.000+08:00
diff --git a/client/.vscode/launch.json b/client/.vscode/launch.json
@@ -9,14 +9,20 @@
             "request": "launch",
             "type": "dart",
             "program": "${workspaceFolder}/lib/main.dart",
-            "flutterMode": "debug"
+            "flutterMode": "debug",
+            "args": [
+                "--no-pub"
+            ]
         },
         {
             "name": "app (profile mode)",
             "request": "launch",
             "type": "dart",
             "program": "${workspaceFolder}/lib/main.dart",
-            "flutterMode": "profile"
+            "flutterMode": "profile",
+            "args": [
+                "--no-pub"
+            ]
         },
         {
             "name": "app (release mode)",
diff --git a/client/lib/devices/borneo/lyfi/views/dimming_screen.dart b/client/lib/devices/borneo/lyfi/views/dimming_screen.dart
@@ -156,7 +156,7 @@ class EditorHost extends StatelessWidget {
         );
         break;
       case EditorStatus.ready:
-        child = SafeArea(top: false, left: false, right: false, child: _buildEditor(state));
+        child = _buildEditor(state);
         break;
       case EditorStatus.idle:
         child = const SizedBox.shrink(key: ValueKey('editor-idle'));
diff --git a/client/lib/devices/borneo/lyfi/views/easy_setup_screen.dart b/client/lib/devices/borneo/lyfi/views/easy_setup_screen.dart
@@ -232,8 +232,14 @@ class EasySetupScreen extends StatelessWidget {
             return ScreenTopRoundedContainer(
               padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
               color: Theme.of(context).colorScheme.surfaceContainer,
-              child: SingleChildScrollView(
-                child: BrightnessSliderList(tempEditor, disabled: !canEdit, padding: EdgeInsets.fromLTRB(0, 24, 0, 16)),
+              child: SafeArea(
+                child: SingleChildScrollView(
+                  child: BrightnessSliderList(
+                    tempEditor,
+                    disabled: !canEdit,
+                    padding: EdgeInsets.fromLTRB(0, 24, 0, 16),
+                  ),
+                ),
               ),
             );
           },
diff --git a/client/lib/devices/borneo/lyfi/views/editor/manual_editor_view.dart b/client/lib/devices/borneo/lyfi/views/editor/manual_editor_view.dart
@@ -124,17 +124,15 @@ class ManualEditorView extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider.value(
       value: viewModel,
-      builder: (context, child) => Expanded(
-        child: Column(
-          spacing: 24,
-          children: [
-            Padding(
-              padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
-              child: SizedBox(height: 150, child: buildGraph(context)),
-            ),
-            Expanded(child: buildSliders(context)),
-          ],
-        ),
+      builder: (context, child) => Column(
+        spacing: 24,
+        children: [
+          SizedBox(
+            height: 150,
+            child: Padding(padding: const EdgeInsets.fromLTRB(16, 16, 16, 0), child: buildGraph(context)),
+          ),
+          Expanded(child: buildSliders(context)),
+        ],
       ),
     );
   }
diff --git a/client/lib/devices/borneo/lyfi/views/editor/schedule_editor_view.dart b/client/lib/devices/borneo/lyfi/views/editor/schedule_editor_view.dart
@@ -2,7 +2,6 @@ import 'package:borneo_app/devices/borneo/lyfi/view_models/constants.dart';
 import 'package:borneo_app/devices/borneo/lyfi/views/easy_setup_screen.dart';
 import 'package:borneo_app/core/infrastructure/duration.dart';
 import 'package:borneo_app/core/infrastructure/time_of_day.dart';
-import 'package:borneo_app/shared/widgets/screen_top_rounded_container.dart';
 import 'package:borneo_common/duration_ext.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
@@ -85,14 +84,13 @@ class ScheduleEditorView extends StatelessWidget {
       value: viewModel,
       builder: (context, child) {
         return Column(
-          spacing: 16,
           children: [
             // The chart
-            Container(
-              color: Theme.of(context).scaffoldBackgroundColor,
-              padding: EdgeInsets.fromLTRB(8, 24, 8, 0),
-              child: AspectRatio(
-                aspectRatio: 2.75,
+            SizedBox(
+              height: 150,
+              child: Container(
+                color: Theme.of(context).scaffoldBackgroundColor,
+                padding: EdgeInsets.fromLTRB(8, 24, 8, 0),
                 child: Consumer<ScheduleEditorViewModel>(
                   builder: (context, vm, child) {
                     const minSpanSeconds = 3 * 3600.0;
@@ -140,6 +138,7 @@ class ScheduleEditorView extends StatelessWidget {
               ),
             ),
 
+            const SizedBox(height: 16),
             // Controls
             Expanded(
               child: Selector<ScheduleEditorViewModel, bool>(
@@ -156,87 +155,99 @@ class ScheduleEditorView extends StatelessWidget {
 
             // Bottom buttons
             Consumer<ScheduleEditorViewModel>(
-              builder: (context, vm, child) => ScreenTopRoundedContainer(
-                color: Theme.of(context).colorScheme.surfaceContainer,
-                padding: const EdgeInsets.fromLTRB(8, 24, 8, 8),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
-                    // Easy Setup
-                    _BottomActionButton(
-                      icon: Icons.auto_fix_high_outlined,
-                      label: context.translate('Easy'),
-                      color: Theme.of(context).colorScheme.primary,
-                      onPressed: () async {
-                        await vm.easySetupEnter();
-                        if (context.mounted) {
-                          final route = MaterialPageRoute(builder: (context) => EasySetupScreen(vm));
-                          final applied = await Navigator.push(context, route);
-                          if (applied == true) {
-                            await vm.easySetupFinish();
-                            // stay on the Dimming screen (do not pop the parent route)
-                          }
-                        }
-                      },
-                    ),
-                    // Add
-                    _BottomActionButton(
-                      icon: Icons.add_outlined,
-                      label: context.translate('Add'),
-                      color: vm.canAddInstant ? Theme.of(context).colorScheme.primary : Theme.of(context).disabledColor,
-                      onPressed: vm.canAddInstant
-                          ? () async {
-                              final initialTime =
-                                  (vm.currentEntry?.instant ?? Duration(hours: 6, minutes: 30)) +
-                                  ScheduleEditorViewModel.defaultInstantSpan;
-                              final safeInitialTime = Duration(
-                                hours: initialTime.inHours % 24,
-                                minutes: initialTime.inMinutes % 60,
-                              );
-                              final selectedTime = await showNewInstantDialog(context, safeInitialTime.toTimeOfDay());
-                              if (selectedTime != null) {
-                                vm.addInstant(selectedTime);
+              builder: (context, vm, child) => SafeArea(
+                top: false,
+                child: Card(
+                  margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
+                  elevation: 1,
+                  color: Theme.of(context).colorScheme.surfaceContainer,
+                  child: Padding(
+                    padding: EdgeInsetsGeometry.fromLTRB(8, 16, 8, 16),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        // Easy Setup
+                        _BottomActionButton(
+                          icon: Icons.auto_fix_high_outlined,
+                          label: context.translate('Easy'),
+                          color: Theme.of(context).colorScheme.primary,
+                          onPressed: () async {
+                            await vm.easySetupEnter();
+                            if (context.mounted) {
+                              final route = MaterialPageRoute(builder: (context) => EasySetupScreen(vm));
+                              final applied = await Navigator.push(context, route);
+                              if (applied == true) {
+                                await vm.easySetupFinish();
+                                // stay on the Dimming screen (do not pop the parent route)
                               }
                             }
-                          : null,
-                    ),
-                    // Remove
-                    _BottomActionButton(
-                      icon: Icons.remove,
-                      label: context.translate('Remove'),
-                      color: vm.canRemoveCurrentInstant
-                          ? Theme.of(context).colorScheme.secondary
-                          : Theme.of(context).disabledColor,
-                      onPressed: vm.canRemoveCurrentInstant ? vm.removeCurrentInstant : null,
+                          },
+                        ),
+                        // Add
+                        _BottomActionButton(
+                          icon: Icons.add_outlined,
+                          label: context.translate('Add'),
+                          color: vm.canAddInstant
+                              ? Theme.of(context).colorScheme.primary
+                              : Theme.of(context).disabledColor,
+                          onPressed: vm.canAddInstant
+                              ? () async {
+                                  final initialTime =
+                                      (vm.currentEntry?.instant ?? Duration(hours: 6, minutes: 30)) +
+                                      ScheduleEditorViewModel.defaultInstantSpan;
+                                  final safeInitialTime = Duration(
+                                    hours: initialTime.inHours % 24,
+                                    minutes: initialTime.inMinutes % 60,
+                                  );
+                                  final selectedTime = await showNewInstantDialog(
+                                    context,
+                                    safeInitialTime.toTimeOfDay(),
+                                  );
+                                  if (selectedTime != null) {
+                                    vm.addInstant(selectedTime);
+                                  }
+                                }
+                              : null,
+                        ),
+                        // Remove
+                        _BottomActionButton(
+                          icon: Icons.remove,
+                          label: context.translate('Remove'),
+                          color: vm.canRemoveCurrentInstant
+                              ? Theme.of(context).colorScheme.secondary
+                              : Theme.of(context).disabledColor,
+                          onPressed: vm.canRemoveCurrentInstant ? vm.removeCurrentInstant : null,
+                        ),
+                        // Clear
+                        _BottomActionButton(
+                          icon: Icons.clear,
+                          label: context.translate('Clear'),
+                          color: vm.canClearInstants
+                              ? Theme.of(context).colorScheme.error
+                              : Theme.of(context).disabledColor,
+                          onPressed: vm.canClearInstants ? () => _confirmClearEntries(context, vm) : null,
+                        ),
+                        // Prev
+                        _BottomActionButton(
+                          icon: Icons.skip_previous_outlined,
+                          label: context.translate('Prev'),
+                          color: vm.canPrevInstant
+                              ? Theme.of(context).colorScheme.primary
+                              : Theme.of(context).disabledColor,
+                          onPressed: vm.canPrevInstant ? vm.prevInstant : null,
+                        ),
+                        // Next
+                        _BottomActionButton(
+                          icon: Icons.skip_next_outlined,
+                          label: context.translate('Next'),
+                          color: vm.canNextInstant
+                              ? Theme.of(context).colorScheme.primary
+                              : Theme.of(context).disabledColor,
+                          onPressed: vm.canNextInstant ? vm.nextInstant : null,
+                        ),
+                      ],
                     ),
-                    // Clear
-                    _BottomActionButton(
-                      icon: Icons.clear,
-                      label: context.translate('Clear'),
-                      color: vm.canClearInstants
-                          ? Theme.of(context).colorScheme.error
-                          : Theme.of(context).disabledColor,
-                      onPressed: vm.canClearInstants ? () => _confirmClearEntries(context, vm) : null,
-                    ),
-                    // Prev
-                    _BottomActionButton(
-                      icon: Icons.skip_previous_outlined,
-                      label: context.translate('Prev'),
-                      color: vm.canPrevInstant
-                          ? Theme.of(context).colorScheme.primary
-                          : Theme.of(context).disabledColor,
-                      onPressed: vm.canPrevInstant ? vm.prevInstant : null,
-                    ),
-                    // Next
-                    _BottomActionButton(
-                      icon: Icons.skip_next_outlined,
-                      label: context.translate('Next'),
-                      color: vm.canNextInstant
-                          ? Theme.of(context).colorScheme.primary
-                          : Theme.of(context).disabledColor,
-                      onPressed: vm.canNextInstant ? vm.nextInstant : null,
-                    ),
-                  ],
+                  ),
                 ),
               ),
             ),
@@ -309,6 +320,7 @@ class _BottomActionButton extends StatelessWidget {
     final Color sysDisabled = theme.colorScheme.onSurface.withValues(alpha: 0.38);
     final Color borderColor = isEnabled ? color : sysDisabled;
     final Color iconColor = isEnabled ? color : sysDisabled;
+    final Color iconBgColor = isEnabled ? theme.colorScheme.surfaceBright : Colors.transparent;
     final Color labelColor = isEnabled ? Theme.of(context).colorScheme.onSurface : sysDisabled;
     final TextStyle? labelStyle = theme.textTheme.labelSmall?.copyWith(color: labelColor);
     return Expanded(
@@ -326,7 +338,7 @@ class _BottomActionButton extends StatelessWidget {
                   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                   side: BorderSide(color: borderColor, width: 1.5),
                   foregroundColor: iconColor,
-                  backgroundColor: Colors.transparent,
+                  backgroundColor: iconBgColor,
                   padding: EdgeInsets.zero,
                   shadowColor: Colors.transparent,
                   disabledForegroundColor: sysDisabled,
diff --git a/client/lib/devices/borneo/lyfi/views/editor/sun_editor_view.dart b/client/lib/devices/borneo/lyfi/views/editor/sun_editor_view.dart
@@ -18,12 +18,15 @@ class SunEditorView extends StatelessWidget {
         if (vm.isInitialized) {
           return Selector<SunEditorViewModel, bool>(
             selector: (_, editor) => editor.canChangeColor,
-            builder: (_, canChangeColor, _) => SingleChildScrollView(
-              child: BrightnessSliderList(context.read<SunEditorViewModel>(), disabled: !canChangeColor),
+            builder: (_, canChangeColor, _) => SafeArea(
+              top: false,
+              child: SingleChildScrollView(
+                child: BrightnessSliderList(context.read<SunEditorViewModel>(), disabled: !canChangeColor),
+              ),
             ),
           );
         } else {
-          return Container();
+          return const SizedBox.shrink();
         }
       },
     );
@@ -57,8 +60,8 @@ class SunEditorView extends StatelessWidget {
           Container(
             color: Theme.of(context).scaffoldBackgroundColor,
             padding: const EdgeInsets.all(0),
-            child: AspectRatio(
-              aspectRatio: 2.75,
+            child: SizedBox(
+              height: 150,
               child: Consumer<SunEditorViewModel>(builder: (conterxt, vm, _) => buildGraph(context)),
             ),
           ),
diff --git a/client/lib/devices/borneo/lyfi/views/moon_screen.dart b/client/lib/devices/borneo/lyfi/views/moon_screen.dart
@@ -85,9 +85,11 @@ class MoonScreen extends StatelessWidget {
                             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),
+                                padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
+                                child: SafeArea(
+                                  child: SingleChildScrollView(
+                                    child: BrightnessSliderList(vm.editor, disabled: !vm.enabled || !vm.canEdit),
+                                  ),
                                 ),
                               ),
                             ),
diff --git a/client/lib/shared/widgets/generic_bottom_sheet_picker.dart b/client/lib/shared/widgets/generic_bottom_sheet_picker.dart
diff --git a/client/lib/shared/widgets/screen_top_rounded_container.dart b/client/lib/shared/widgets/screen_top_rounded_container.dart
