kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/core/web_device_preview/web_device_preview.dart

@@ -6,12 +6,15 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector.dart';
+import 'package:kasy_kit/core/icons/kasy_icons.dart';
+import 'package:kasy_kit/core/theme/providers/theme_provider.dart';
+import 'package:kasy_kit/core/web_device_preview/png_clipboard.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-import 'package:universal_html/html.dart' as html;
 
 // Suffixed `_v2` because the default flipped from OFF to ON. Values saved under
 // the old key were written while the default was OFF, so we ignore them and
@@ -25,8 +28,43 @@ const String _bgDarkPrefKey = 'web_device_preview_bg_dark';
 const String _landscapePrefKey = 'web_device_preview_landscape';
 const String _textScalePrefKey = 'web_device_preview_text_scale';
 
-final ValueNotifier<bool> webDevicePreviewEnabledNotifier =
-    ValueNotifier<bool>(false);
+final ValueNotifier<bool> webDevicePreviewEnabledNotifier = ValueNotifier<bool>(
+  false,
+);
+
+/// True only once the device frame is actually ON SCREEN (not the instant the
+/// toggle flips — the frame takes a moment to build). The web viewport scale
+/// reads THIS, not [webDevicePreviewEnabledNotifier], so the scale drops to
+/// native 1.0 only when the frame is up — otherwise the toggle would flash a
+/// big, unframed, unscaled app while the frame builds.
+final ValueNotifier<bool> webDevicePreviewActiveNotifier = ValueNotifier<bool>(
+  false,
+);
+
+// Kit primary/accent (HeroUI blue). The chrome lives above the MaterialApp, so
+// it can't read context.colors — mirror the design-system value here. Used to
+// highlight active toggles so it's obvious at a glance what's turned on.
+const Color _kAccent = Color(0xFF0485F7);
+
+// ROADMAP: secondary controls (locale, landscape orientation, text-scale) are
+// hidden for now — they'll move to a dedicated vertical toolbar later, while the
+// main horizontal pill stays for quick access. Return true to bring them back
+// inline. (A function, not a const, so the guarded widgets aren't dead code.)
+bool _showSecondaryTools() => false;
+
+// Inter — the kit's typeface. Centralizes the chrome's text styling so every
+// label shares the design-system font.
+TextStyle _chromeText({
+  required double size,
+  required FontWeight weight,
+  required Color color,
+  double spacing = 0,
+}) => GoogleFonts.inter(
+  fontSize: size,
+  fontWeight: weight,
+  color: color,
+  letterSpacing: spacing,
+);
 
 /// Keyboard shortcut for toggling the web device preview chrome, formatted
 /// for the current platform. Key names stay in English regardless of the
@@ -61,20 +99,6 @@ final List<DeviceInfo> _iPadDevices = [
   Devices.ios.iPadPro13InchesM4,
 ];
 
-// Compact labels so the pill stays narrow regardless of how many devices we add.
-String _shortName(String name) => switch (name) {
-      'iPhone SE' => 'SE',
-      'iPhone 16' => '16',
-      'iPhone 16 Pro' => '16 Pro',
-      'iPad' => 'iPad',
-      'iPad Pro 11" (M4)' => '11"',
-      'iPad Pro 13" (M4)' => '13"',
-      'Samsung Galaxy A50' => 'A50',
-      'Google Pixel 9' => 'Pixel 9',
-      'Samsung Galaxy S25' => 'S25',
-      _ => name,
-    };
-
 class WebDevicePreview extends StatefulWidget {
   const WebDevicePreview({super.key, required this.child});
 
@@ -92,14 +116,18 @@ class WebDevicePreview extends StatefulWidget {
 class _WebDevicePreviewState extends State<WebDevicePreview>
     with WidgetsBindingObserver {
   int _platform = 0; // 0 = iOS, 1 = Android, 2 = iPad
-  int _iosIndex = 1;     // default: iPhone 16
+  int _iosIndex = 1; // default: iPhone 16
   int _androidIndex = 1; // default: Google Pixel 9
   int _iPadIndex = 0;
   bool _controlsVisible = false;
   Timer? _controlsTimer;
+  String? _toast;
+  bool _toastIsError = false;
+  Timer? _toastTimer;
 
-  final ValueNotifier<DeviceInfo> _deviceNotifier =
-      ValueNotifier<DeviceInfo>(_iosDevices[1]); // iPhone 16
+  final ValueNotifier<DeviceInfo> _deviceNotifier = ValueNotifier<DeviceInfo>(
+    _iosDevices[1],
+  ); // iPhone 16
   final ValueNotifier<bool> _frameVisibleNotifier = ValueNotifier<bool>(true);
   final ValueNotifier<bool> _bgDarkNotifier = ValueNotifier<bool>(false);
   final ValueNotifier<bool> _landscapeNotifier = ValueNotifier<bool>(false);
@@ -110,16 +138,16 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
   static const _textScaleSteps = [1.0, 1.3, 1.5];
 
   List<DeviceInfo> get _devices => switch (_platform) {
-        1 => _androidDevices,
-        2 => _iPadDevices,
-        _ => _iosDevices,
-      };
+    1 => _androidDevices,
+    2 => _iPadDevices,
+    _ => _iosDevices,
+  };
 
   int get _currentIndex => switch (_platform) {
-        1 => _androidIndex,
-        2 => _iPadIndex,
-        _ => _iosIndex,
-      };
+    1 => _androidIndex,
+    2 => _iPadIndex,
+    _ => _iosIndex,
+  };
 
   DeviceInfo get _currentDevice => _devices[_currentIndex];
 
@@ -132,6 +160,7 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
     );
     webDevicePreviewEnabledNotifier.addListener(_onEnabledChanged);
     _bgDarkNotifier.addListener(_onBgChanged);
+    devInspectorToastNotifier.addListener(_onInspectorToast);
     HardwareKeyboard.instance.addHandler(_handleKeyEvent);
     unawaited(_bootstrap());
   }
@@ -174,6 +203,7 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
     HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
     webDevicePreviewEnabledNotifier.removeListener(_onEnabledChanged);
     _bgDarkNotifier.removeListener(_onBgChanged);
+    devInspectorToastNotifier.removeListener(_onInspectorToast);
     _deviceNotifier.dispose();
     _frameVisibleNotifier.dispose();
     _bgDarkNotifier.dispose();
@@ -181,9 +211,31 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
     _textScaleNotifier.dispose();
     _localeNotifier.dispose();
     _controlsTimer?.cancel();
+    _toastTimer?.cancel();
     super.dispose();
   }
 
+  /// Transient confirmation pill shown in the chrome (e.g. "Image copied").
+  void _showToast(String message, {bool isError = false}) {
+    _toastTimer?.cancel();
+    setState(() {
+      _toast = message;
+      _toastIsError = isError;
+    });
+    _toastTimer = Timer(const Duration(milliseconds: 2200), () {
+      if (mounted) setState(() => _toast = null);
+    });
+  }
+
+  /// The DevInspector hands its "copied" message here so it renders in the same
+  /// spot and size as the chrome's own toasts (instead of inside the device).
+  void _onInspectorToast() {
+    final msg = devInspectorToastNotifier.value;
+    if (msg == null) return;
+    devInspectorToastNotifier.value = null;
+    if (mounted) _showToast(msg.message, isError: msg.isError);
+  }
+
   void _onEnabledChanged() {
     // Our chrome already surfaces inspector state via the pill, so suppress
     // the DevInspector's in-app status pill while the preview is on.
@@ -198,14 +250,55 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
         if (mounted) setState(() => _controlsVisible = true);
       });
       setState(() {}); // rebuild DevicePreview with enabled: true
+      // [webDevicePreviewActiveNotifier] flips to true only once the frame is
+      // actually built — see [_buildFramedContent] — so the web scale stays put
+      // until then (no big-unframed-app flash during the build).
     } else {
       _controlsTimer?.cancel();
+      // Leaving the frame: restore the web scale immediately.
+      webDevicePreviewActiveNotifier.value = false;
       setState(() => _controlsVisible = false);
     }
   }
 
   void _onBgChanged() => setState(() {});
 
+  /// Builds the app content placed INSIDE the device frame. DevicePreview calls
+  /// this as it brings the framed environment up, so it doubles as the "frame is
+  /// on screen now" signal: after this paints we flip
+  /// [webDevicePreviewActiveNotifier], which is what lets the web viewport scale
+  /// drop to native 1.0 — and only then, so the toggle never shows a flash of
+  /// big, unframed, unscaled app while the frame is still building.
+  Widget _buildFramedContent(BuildContext context) {
+    if (webDevicePreviewEnabledNotifier.value &&
+        !webDevicePreviewActiveNotifier.value) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted && webDevicePreviewEnabledNotifier.value) {
+          webDevicePreviewActiveNotifier.value = true;
+        }
+      });
+    }
+    return ListenableBuilder(
+      listenable: _textScaleNotifier,
+      builder: (ctx, _) => MediaQuery(
+        data: MediaQuery.of(ctx).copyWith(
+          textScaler: TextScaler.linear(_textScaleNotifier.value),
+          // DevicePreview hard-codes platformBrightness to light inside the
+          // simulated frame, which breaks MaterialApp's ThemeMode.system.
+          // Forward the real host brightness so "system" tracks the OS.
+          platformBrightness:
+              WidgetsBinding.instance.platformDispatcher.platformBrightness,
+        ),
+        child: _DeviceSwitchBridge(
+          deviceNotifier: _deviceNotifier,
+          frameVisibleNotifier: _frameVisibleNotifier,
+          landscapeNotifier: _landscapeNotifier,
+          child: widget.child,
+        ),
+      ),
+    );
+  }
+
   Future<void> _bootstrap() async {
     final prefs = await SharedPreferences.getInstance();
 
@@ -283,9 +376,16 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
   }
 
   void _setPlatform(int p) {
-    setState(() => _platform = p);
+    setState(() {
+      _platform = p;
+      // Choosing a platform always lands on its first device:
+      // iPad → plain iPad, Android → Samsung Galaxy A50.
+      if (p == 1) _androidIndex = 0;
+      if (p == 2) _iPadIndex = 0;
+    });
     _deviceNotifier.value = _currentDevice;
     unawaited(_savePlatform());
+    if (p == 1 || p == 2) unawaited(_saveDeviceIndices());
   }
 
   void _toggleFrame() {
@@ -301,10 +401,6 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
     devInspectorActiveNotifier.value = !devInspectorActiveNotifier.value;
   }
 
-  void _copyInspection() {
-    devInspectorCopyTriggerNotifier.value = true;
-  }
-
   void _toggleLandscape() {
     _landscapeNotifier.value = !_landscapeNotifier.value;
     unawaited(_saveLandscape());
@@ -330,44 +426,34 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
   }
 
   Future<void> _takeScreenshot() async {
-    final boundary = _screenshotKey.currentContext?.findRenderObject()
-        as RenderRepaintBoundary?;
+    final boundary =
+        _screenshotKey.currentContext?.findRenderObject()
+            as RenderRepaintBoundary?;
     if (boundary == null) return;
     final dpr =
-        WidgetsBinding.instance.platformDispatcher.implicitView?.devicePixelRatio
-        ?? 2.0;
+        WidgetsBinding
+            .instance
+            .platformDispatcher
+            .implicitView
+            ?.devicePixelRatio ??
+        2.0;
     final image = await boundary.toImage(pixelRatio: dpr);
     final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
     if (byteData == null) return;
     final bytes = byteData.buffer.asUint8List();
-    final blob = html.Blob([bytes], 'image/png');
-    final url = html.Url.createObjectUrlFromBlob(blob);
-    html.AnchorElement(href: url)
-      ..setAttribute(
-        'download',
-        'preview_${DateTime.now().millisecondsSinceEpoch}.png',
-      )
-      ..click();
-    html.Url.revokeObjectUrl(url);
-  }
-
-  void _prev() {
-    setState(() {
-      switch (_platform) {
-        case 1:
-          _androidIndex =
-              (_androidIndex - 1 + _androidDevices.length) %
-              _androidDevices.length;
-        case 2:
-          _iPadIndex =
-              (_iPadIndex - 1 + _iPadDevices.length) % _iPadDevices.length;
-        default:
-          _iosIndex =
-              (_iosIndex - 1 + _iosDevices.length) % _iosDevices.length;
-      }
-    });
-    _deviceNotifier.value = _currentDevice;
-    unawaited(_saveDeviceIndices());
+    // Copy the PNG to the clipboard (with a download fallback). The web-only
+    // implementation lives behind a conditional import (png_clipboard.dart) so
+    // this file stays VM/native-compilable and never breaks `flutter test`.
+    final result = await copyOrDownloadPng(bytes);
+    if (!mounted) return;
+    switch (result) {
+      case PngExportResult.copied:
+        _showToast(t.webDevicePreview.imageCopied);
+      case PngExportResult.downloaded:
+        _showToast(t.webDevicePreview.imageDownloaded);
+      case PngExportResult.unavailable:
+        break;
+    }
   }
 
   void _next() {
@@ -389,102 +475,139 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
   Widget build(BuildContext context) {
     final enabled = webDevicePreviewEnabledNotifier.value;
 
+    // App theme (light/dark) lives in ThemeProvider, which sits ABOVE this
+    // widget — reading it here rebuilds the toolbar when the theme flips.
+    final AppTheme appTheme = ThemeProvider.of(context);
+    final bool appDark = appTheme.effectiveMode == ThemeMode.dark;
+
     // ThemeData.light() in Flutter 3.x M3 uses a lavender-tinted surface.
     // Passing backgroundColor directly avoids that and gives us an exact color.
-    final canvasColor =
-        _bgDarkNotifier.value ? const Color(0xFF1C1C1E) : Colors.white;
+    final canvasColor = _bgDarkNotifier.value
+        ? const Color(0xFF1C1C1E)
+        : Colors.white;
 
     final preview = DevicePreview(
       enabled: enabled,
       isToolbarVisible: false,
       backgroundColor: canvasColor,
+      // Reserve room at the top so the floating toolbar never sits on the device.
+      // DevicePreview fills the whole viewport, so this is the single source of
+      // background — there is no second surface that could create a seam.
+      padding: enabled
+          ? const EdgeInsets.only(top: 56, left: 20, right: 20, bottom: 20)
+          : null,
       storage: DevicePreviewStorage.none(),
       defaultDevice: _currentDevice,
       devices: [..._iosDevices, ..._androidDevices, ..._iPadDevices],
-      builder: (context) => ListenableBuilder(
-        listenable: _textScaleNotifier,
-        builder: (ctx, _) => MediaQuery(
-          data: MediaQuery.of(ctx).copyWith(
-            textScaler: TextScaler.linear(_textScaleNotifier.value),
-            // DevicePreview hard-codes platformBrightness to light inside the
-            // simulated frame, which breaks MaterialApp's ThemeMode.system.
-            // Forward the real host brightness so "system" tracks the OS.
-            platformBrightness: WidgetsBinding
-                .instance.platformDispatcher.platformBrightness,
-          ),
-          child: _DeviceSwitchBridge(
-            deviceNotifier: _deviceNotifier,
-            frameVisibleNotifier: _frameVisibleNotifier,
-            landscapeNotifier: _landscapeNotifier,
-            child: widget.child,
-          ),
-        ),
-      ),
+      builder: _buildFramedContent,
     );
 
     if (!enabled) return preview;
 
     return TapRegionSurface(
       child: Directionality(
-      textDirection: TextDirection.ltr,
-      child: Stack(
-        fit: StackFit.expand,
-        children: [
-          RepaintBoundary(key: _screenshotKey, child: preview),
-          // Inspector highlight drawn ABOVE the device frame so widgets that
-          // hug the edges of the simulated viewport (AppBar, bottom nav, …)
-          // still get a complete border instead of being clipped by the chrome.
-          const Positioned.fill(
-            child: IgnorePointer(
-              child: _DevInspectorExternalHighlight(),
+        textDirection: TextDirection.ltr,
+        child: Stack(
+          children: [
+            // DevicePreview paints the entire viewport (single background, no
+            // seam). The device frame is pushed below the toolbar by the top
+            // padding above, so the toolbar never overlaps it.
+            RepaintBoundary(key: _screenshotKey, child: preview),
+            // Inspector highlight drawn ABOVE the device frame so widgets that
+            // hug the viewport edges (AppBar, bottom nav, …) keep a full border.
+            const Positioned.fill(
+              child: IgnorePointer(child: _DevInspectorExternalHighlight()),
             ),
-          ),
-          Positioned(
-            top: 24,
-            right: 24,
-            child: AnimatedOpacity(
-              opacity: _controlsVisible ? 1.0 : 0.0,
-              duration: const Duration(milliseconds: 400),
+            // Floating toolbar — overlaid at the top, centered. Opening its
+            // dropdowns never pushes or resizes the device (they overlay).
+            Positioned(
+              top: 12,
+              left: 0,
+              right: 0,
+              child: AnimatedOpacity(
+                opacity: _controlsVisible ? 1.0 : 0.0,
+                duration: const Duration(milliseconds: 400),
+                child: IgnorePointer(
+                  ignoring: !_controlsVisible,
+                  child: Center(
+                    child: ListenableBuilder(
+                      listenable: Listenable.merge([
+                        _frameVisibleNotifier,
+                        _bgDarkNotifier,
+                        _landscapeNotifier,
+                        _textScaleNotifier,
+                        _localeNotifier,
+                        devInspectorActiveNotifier,
+                      ]),
+                      builder: (context, child) => _PreviewControls(
+                        platform: _platform,
+                        deviceName: _currentDevice.name,
+                        dark: _bgDarkNotifier.value,
+                        appDark: appDark,
+                        onToggleAppTheme: appTheme.toggle,
+                        frameVisible: _frameVisibleNotifier.value,
+                        isLandscape: _landscapeNotifier.value,
+                        textScale: _textScaleNotifier.value,
+                        currentLocale: _localeNotifier.value,
+                        inspectorEnabled: devInspectorActiveNotifier.value,
+                        onPlatformChanged: _setPlatform,
+                        onNext: _next,
+                        onToggleFrame: _toggleFrame,
+                        onToggleLandscape: _toggleLandscape,
+                        onCycleTextScale: _cycleTextScale,
+                        onCycleLocale: _cycleLocale,
+                        onToggleInspector: _toggleInspector,
+                        onScreenshot: () => unawaited(_takeScreenshot()),
+                        onClose: () => unawaited(_close()),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            // Theme toggle — standalone sun/moon button pinned to the
+            // bottom-right corner, independent of the toolbar.
+            Positioned(
+              bottom: 10,
+              right: 10,
+              child: AnimatedOpacity(
+                opacity: _controlsVisible ? 1.0 : 0.0,
+                duration: const Duration(milliseconds: 400),
+                child: IgnorePointer(
+                  ignoring: !_controlsVisible,
+                  child: ListenableBuilder(
+                    listenable: _bgDarkNotifier,
+                    builder: (context, child) => _ThemeCornerButton(
+                      dark: _bgDarkNotifier.value,
+                      onTap: _toggleBg,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            // Transient confirmation toast (e.g. screenshot copied).
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 24,
               child: IgnorePointer(
-                ignoring: !_controlsVisible,
-                child: ListenableBuilder(
-                  listenable: Listenable.merge([
-                    _frameVisibleNotifier,
-                    _bgDarkNotifier,
-                    _landscapeNotifier,
-                    _textScaleNotifier,
-                    _localeNotifier,
-                    devInspectorActiveNotifier,
-                  ]),
-                  builder: (context, child) => _PreviewControls(
-                    platform: _platform,
-                    deviceName: _shortName(_currentDevice.name),
-                    frameVisible: _frameVisibleNotifier.value,
-                    bgDark: _bgDarkNotifier.value,
-                    isLandscape: _landscapeNotifier.value,
-                    textScale: _textScaleNotifier.value,
-                    currentLocale: _localeNotifier.value,
-                    inspectorEnabled: devInspectorActiveNotifier.value,
-                    onPlatformChanged: _setPlatform,
-                    onPrev: _prev,
-                    onNext: _next,
-                    onToggleFrame: _toggleFrame,
-                    onToggleBg: _toggleBg,
-                    onToggleLandscape: _toggleLandscape,
-                    onCycleTextScale: _cycleTextScale,
-                    onCycleLocale: _cycleLocale,
-                    onToggleInspector: _toggleInspector,
-                    onCopyInspection: _copyInspection,
-                    onScreenshot: () => unawaited(_takeScreenshot()),
-                    onClose: () => unawaited(_close()),
+                child: Center(
+                  child: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    child: _toast == null
+                        ? const SizedBox.shrink()
+                        : _Toast(
+                            key: ValueKey(_toast),
+                            message: _toast!,
+                            isError: _toastIsError,
+                          ),
                   ),
                 ),
               ),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
-    ),
     );
   }
 }
@@ -607,44 +730,45 @@ class _PreviewControls extends StatefulWidget {
   const _PreviewControls({
     required this.platform,
     required this.deviceName,
+    required this.dark,
+    required this.appDark,
+    required this.onToggleAppTheme,
     required this.frameVisible,
-    required this.bgDark,
     required this.isLandscape,
     required this.textScale,
     required this.currentLocale,
     required this.inspectorEnabled,
     required this.onPlatformChanged,
-    required this.onPrev,
     required this.onNext,
     required this.onToggleFrame,
-    required this.onToggleBg,
     required this.onToggleLandscape,
     required this.onCycleTextScale,
     required this.onCycleLocale,
     required this.onToggleInspector,
-    required this.onCopyInspection,
     required this.onScreenshot,
     required this.onClose,
   });
 
   final int platform;
   final String deviceName;
+  final bool dark;
+
+  /// App theme (light/dark) state + toggle — flips the real app ThemeMode.
+  final bool appDark;
+  final VoidCallback onToggleAppTheme;
+
   final bool frameVisible;
-  final bool bgDark;
   final bool isLandscape;
   final double textScale;
   final AppLocale currentLocale;
   final bool inspectorEnabled;
   final ValueChanged<int> onPlatformChanged;
-  final VoidCallback onPrev;
   final VoidCallback onNext;
   final VoidCallback onToggleFrame;
-  final VoidCallback onToggleBg;
   final VoidCallback onToggleLandscape;
   final VoidCallback onCycleTextScale;
   final VoidCallback onCycleLocale;
   final VoidCallback onToggleInspector;
-  final VoidCallback onCopyInspection;
   final VoidCallback onScreenshot;
   final VoidCallback onClose;
 
@@ -654,137 +778,60 @@ class _PreviewControls extends StatefulWidget {
 
 class _PreviewControlsState extends State<_PreviewControls> {
   bool _menuOpen = false;
-  bool _toolsMenuOpen = false;
-  bool _minimized = true;
   bool _platformBtnHovered = false;
-  bool _toolsBtnHovered = false;
-  bool _shadowVisible = true;
-  Timer? _shadowTimer;
+  bool _deviceBtnHovered = false;
 
   static const _platformLabels = ['iOS', 'Android', 'iPad'];
 
-  static const _pillDecoration = BoxDecoration(
-    color: Color(0xFF2C2C2E),
-    borderRadius: BorderRadius.all(Radius.circular(24)),
+  // Color scheme adapts to the preview theme: dark pill (white content) in dark
+  // mode, white pill (dark content) in light mode.
+  Color get _pillColor => widget.dark ? const Color(0xFF2C2C2E) : Colors.white;
+  Color get _menuColor => widget.dark ? const Color(0xFF3A3A3C) : Colors.white;
+  // Foreground (text/icons) base — alphas are derived from this.
+  Color get _fg => widget.dark ? Colors.white : const Color(0xFF1C1C1E);
+
+  BoxDecoration get _pillDecoration => BoxDecoration(
+    color: _pillColor,
+    borderRadius: const BorderRadius.all(Radius.circular(24)),
   );
 
+  // Tight, low-spread shadow: enough to lift the pill off the canvas without
+  // casting a wide smudge below it that reads as a horizontal "division" line.
   static const _pillShadow = [
-    BoxShadow(
-      color: Color(0x73000000),
-      blurRadius: 20,
-      offset: Offset(0, 6),
-    ),
+    BoxShadow(color: Color(0x33000000), blurRadius: 8, offset: Offset(0, 2)),
   ];
 
   static String _textScaleLabel(double scale) => switch (scale) {
-        1.0 => '1×',
-        1.3 => '1.3×',
-        _ => '1.5×',
-      };
-
-  void _toggleMenu() => setState(() {
-        _menuOpen = !_menuOpen;
-        if (_menuOpen) _toolsMenuOpen = false;
-      });
+    1.0 => '1×',
+    1.3 => '1.3×',
+    _ => '1.5×',
+  };
 
-  void _toggleToolsMenu() => setState(() {
-        _toolsMenuOpen = !_toolsMenuOpen;
-        if (_toolsMenuOpen) _menuOpen = false;
-      });
+  void _toggleMenu() => setState(() => _menuOpen = !_menuOpen);
 
   void _selectPlatform(int i) {
     widget.onPlatformChanged(i);
-    setState(() {
-      _menuOpen = false;
-      _toolsMenuOpen = false;
-    });
-  }
-
-  @override
-  void dispose() {
-    _shadowTimer?.cancel();
-    super.dispose();
-  }
-
-  void _hideShadowDuringAnimation() {
-    _shadowTimer?.cancel();
-    setState(() => _shadowVisible = false);
-    _shadowTimer = Timer(const Duration(milliseconds: 140), () {
-      if (mounted) setState(() => _shadowVisible = true);
-    });
-  }
-
-  void _minimize() {
-    setState(() {
-      _minimized = true;
-      _menuOpen = false;
-      _toolsMenuOpen = false;
-    });
-    _hideShadowDuringAnimation();
-  }
-
-  void _maximize() {
-    setState(() => _minimized = false);
-    _hideShadowDuringAnimation();
+    setState(() => _menuOpen = false);
   }
 
   @override
   Widget build(BuildContext context) {
     return TapRegion(
       onTapOutside: (_) {
-        if (_menuOpen || _toolsMenuOpen) {
-          setState(() {
-            _menuOpen = false;
-            _toolsMenuOpen = false;
-          });
-        }
+        if (_menuOpen) setState(() => _menuOpen = false);
       },
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children: [
-          AnimatedOpacity(
-            opacity: _shadowVisible ? 1.0 : 0.0,
-            duration: const Duration(milliseconds: 80),
-            child: DecoratedBox(
-              decoration: const BoxDecoration(
-                borderRadius: BorderRadius.all(Radius.circular(24)),
-                boxShadow: _pillShadow,
-              ),
-              child: AnimatedSize(
-                duration: const Duration(milliseconds: 140),
-                curve: Curves.easeInOutCubic,
-                alignment: Alignment.centerRight,
-                child: _minimized ? _buildMinimizedPill() : _buildPill(),
-              ),
+          DecoratedBox(
+            decoration: const BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(24)),
+              boxShadow: _pillShadow,
             ),
+            child: _buildPill(),
           ),
-          if (_menuOpen && !_minimized) _buildMenu(),
-          if (_toolsMenuOpen && !_minimized) _buildToolsMenu(),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildMinimizedPill() {
-    return Container(
-      height: 40,
-      padding: const EdgeInsets.symmetric(horizontal: 4),
-      decoration: _pillDecoration,
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          _IconBtn(
-            icon: Icons.unfold_more_rounded,
-            onTap: _maximize,
-          ),
-          _VerticalDivider(),
-          _IconBtn(
-            icon: Icons.close_rounded,
-            onTap: widget.onClose,
-            color: Colors.white54,
-          ),
-          const SizedBox(width: 2),
+          if (_menuOpen) _buildMenu(),
         ],
       ),
     );
@@ -792,7 +839,7 @@ class _PreviewControlsState extends State<_PreviewControls> {
 
   Widget _buildPill() {
     return Container(
-      height: 40,
+      height: 34,
       padding: const EdgeInsets.symmetric(horizontal: 4),
       decoration: _pillDecoration,
       child: Row(
@@ -804,131 +851,144 @@ class _PreviewControlsState extends State<_PreviewControls> {
             onExit: (_) => setState(() => _platformBtnHovered = false),
             cursor: SystemMouseCursors.click,
             child: GestureDetector(
-            onTap: _toggleMenu,
-            child: AnimatedContainer(
-              duration: const Duration(milliseconds: 160),
-              margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
-              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-              decoration: BoxDecoration(
-                color: Colors.white.withValues(
-                  alpha: _menuOpen ? 0.22 : (_platformBtnHovered ? 0.20 : 0.14),
-                ),
-                borderRadius: BorderRadius.circular(20),
-              ),
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Text(
-                    _platformLabels[widget.platform],
-                    style: const TextStyle(
-                      color: Colors.white,
-                      fontSize: 12,
-                      fontWeight: FontWeight.w600,
-                    ),
-                  ),
-                  const SizedBox(width: 2),
-                  AnimatedRotation(
-                    turns: _menuOpen ? 0.5 : 0,
-                    duration: const Duration(milliseconds: 160),
-                    child: const Icon(
-                      Icons.keyboard_arrow_down_rounded,
-                      color: Colors.white70,
-                      size: 13,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            ),
-          ),
-          _VerticalDivider(),
-          _IconBtn(icon: Icons.chevron_left_rounded, onTap: widget.onPrev),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8),
-            child: Text(
-              widget.deviceName,
-              style: const TextStyle(
-                color: Colors.white,
-                fontSize: 12,
-                fontWeight: FontWeight.w500,
-                letterSpacing: -0.2,
-              ),
-            ),
-          ),
-          _IconBtn(icon: Icons.chevron_right_rounded, onTap: widget.onNext),
-          // Locale chip
-          _VerticalDivider(),
-          _PillChip(
-            label: widget.currentLocale.languageCode.toUpperCase(),
-            onTap: widget.onCycleLocale,
-          ),
-          // Tools dropdown
-          _VerticalDivider(),
-          MouseRegion(
-            onEnter: (_) => setState(() => _toolsBtnHovered = true),
-            onExit: (_) => setState(() => _toolsBtnHovered = false),
-            cursor: SystemMouseCursors.click,
-            child: GestureDetector(
-              onTap: _toggleToolsMenu,
+              onTap: _toggleMenu,
               child: AnimatedContainer(
                 duration: const Duration(milliseconds: 160),
                 margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
-                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 10,
+                  vertical: 5,
+                ),
                 decoration: BoxDecoration(
-                  color: Colors.white.withValues(
-                    alpha: _toolsMenuOpen ? 0.22 : (_toolsBtnHovered ? 0.20 : 0.14),
+                  // No resting fill — it just alternates platforms. Subtle fill
+                  // only while open or hovered.
+                  color: _fg.withValues(
+                    alpha: _menuOpen
+                        ? 0.16
+                        : (_platformBtnHovered ? 0.12 : 0.0),
                   ),
                   borderRadius: BorderRadius.circular(20),
                 ),
                 child: Row(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    const Text(
-                      'Tools',
-                      style: TextStyle(
-                        color: Colors.white,
-                        fontSize: 12,
-                        fontWeight: FontWeight.w600,
+                    Text(
+                      _platformLabels[widget.platform],
+                      style: _chromeText(
+                        size: 12,
+                        weight: FontWeight.w600,
+                        color: _fg,
                       ),
                     ),
                     const SizedBox(width: 2),
                     AnimatedRotation(
-                      turns: _toolsMenuOpen ? 0.5 : 0,
+                      turns: _menuOpen ? 0.5 : 0,
                       duration: const Duration(milliseconds: 160),
-                      child: const Icon(
-                        Icons.keyboard_arrow_down_rounded,
-                        color: Colors.white70,
-                        size: 13,
-                      ),
+                      child: Icon(KasyIcons.chevronDown, color: _fg, size: 13),
                     ),
                   ],
                 ),
               ),
             ),
           ),
-          // Inspector group
-          _VerticalDivider(),
+          _VerticalDivider(base: _fg),
+          // Tapping the name cycles to the next device — no side chevrons, saves
+          // space (same pattern as the locale cycler).
+          MouseRegion(
+            onEnter: (_) => setState(() => _deviceBtnHovered = true),
+            onExit: (_) => setState(() => _deviceBtnHovered = false),
+            cursor: SystemMouseCursors.click,
+            child: GestureDetector(
+              onTap: widget.onNext,
+              child: AnimatedContainer(
+                duration: const Duration(milliseconds: 160),
+                margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
+                decoration: BoxDecoration(
+                  color: _fg.withValues(alpha: _deviceBtnHovered ? 0.12 : 0.0),
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Text(
+                  widget.deviceName,
+                  style: _chromeText(
+                    size: 12,
+                    weight: FontWeight.w500,
+                    color: _fg,
+                    spacing: -0.2,
+                  ),
+                ),
+              ),
+            ),
+          ),
+          // Locale chip — hidden for now (see ROADMAP: moves to vertical bar).
+          if (_showSecondaryTools()) ...[
+            _VerticalDivider(base: _fg),
+            _PillChip(
+              label: widget.currentLocale.languageCode.toUpperCase(),
+              onTap: widget.onCycleLocale,
+              base: _fg,
+            ),
+          ],
+          // Tools, all inline (no dropdown).
+          _VerticalDivider(base: _fg),
+          // Frame is a mode switch (with / without device frame), not an on/off
+          // toggle — the icon itself flips, so no accent highlight.
           _IconBtn(
-            icon: Icons.touch_app_rounded,
-            onTap: widget.onToggleInspector,
-            color: widget.inspectorEnabled ? Colors.white : Colors.white30,
+            icon: widget.frameVisible
+                ? KasyIcons.deviceFrame
+                : KasyIcons.deviceFrameOff,
+            onTap: widget.onToggleFrame,
+            base: _fg,
+            color: _fg,
           ),
-          if (widget.inspectorEnabled)
+          // App theme switch (light/dark of the app inside the device). Mode
+          // switch like frame — the sun/moon icon flips, so no accent fill.
+          _IconBtn(
+            icon: widget.appDark ? KasyIcons.darkMode : KasyIcons.lightMode,
+            onTap: widget.onToggleAppTheme,
+            base: _fg,
+            color: _fg,
+          ),
+          // Orientation + text-scale hidden for now (see ROADMAP flag).
+          if (_showSecondaryTools()) ...[
             _IconBtn(
-              icon: Icons.content_copy_rounded,
-              onTap: widget.onCopyInspection,
+              icon: widget.isLandscape
+                  ? KasyIcons.landscape
+                  : KasyIcons.portrait,
+              onTap: widget.onToggleLandscape,
+              base: _fg,
+              active: widget.isLandscape,
+              color: _fg,
             ),
-          // Utilities: minimize · close
-          _VerticalDivider(),
+            _PillChip(
+              label: _textScaleLabel(widget.textScale),
+              onTap: widget.onCycleTextScale,
+              base: _fg,
+              active: widget.textScale != 1.0,
+            ),
+          ],
           _IconBtn(
-            icon: Icons.unfold_less_rounded,
-            onTap: _minimize,
-            color: Colors.white30,
+            icon: KasyIcons.cameraAlt,
+            onTap: widget.onScreenshot,
+            base: _fg,
+            color: _fg,
+          ),
+          // Inspector group
+          _VerticalDivider(base: _fg),
+          _IconBtn(
+            icon: KasyIcons.inspector,
+            onTap: widget.onToggleInspector,
+            base: _fg,
+            active: widget.inspectorEnabled,
+            color: _fg,
           ),
+          // Close
+          _VerticalDivider(base: _fg),
           _IconBtn(
-            icon: Icons.close_rounded,
+            icon: KasyIcons.close,
             onTap: widget.onClose,
-            color: Colors.white54,
+            base: _fg,
+            color: _fg,
           ),
           const SizedBox(width: 2),
         ],
@@ -941,11 +1001,11 @@ class _PreviewControlsState extends State<_PreviewControls> {
       margin: const EdgeInsets.only(top: 6),
       padding: const EdgeInsets.symmetric(vertical: 4),
       decoration: BoxDecoration(
-        color: const Color(0xFF3A3A3C),
+        color: _menuColor,
         borderRadius: BorderRadius.circular(12),
         boxShadow: [
           BoxShadow(
-            color: Colors.black.withValues(alpha: 0.4),
+            color: Colors.black.withValues(alpha: widget.dark ? 0.4 : 0.18),
             blurRadius: 16,
             offset: const Offset(0, 4),
           ),
@@ -960,6 +1020,7 @@ class _PreviewControlsState extends State<_PreviewControls> {
             return _DropdownItem(
               label: _platformLabels[i],
               selected: selected,
+              base: _fg,
               onTap: () => _selectPlatform(i),
             );
           }),
@@ -967,72 +1028,6 @@ class _PreviewControlsState extends State<_PreviewControls> {
       ),
     );
   }
-
-  Widget _buildToolsMenu() {
-    return Container(
-      margin: const EdgeInsets.only(top: 6),
-      padding: const EdgeInsets.symmetric(vertical: 4),
-      decoration: BoxDecoration(
-        color: const Color(0xFF3A3A3C),
-        borderRadius: BorderRadius.circular(12),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black.withValues(alpha: 0.4),
-            blurRadius: 16,
-            offset: const Offset(0, 4),
-          ),
-        ],
-      ),
-      child: IntrinsicWidth(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            _ToolsItem(
-              icon: widget.frameVisible
-                  ? Icons.smartphone_rounded
-                  : Icons.crop_free_rounded,
-              label: t.webDevicePreview.frame,
-              checked: widget.frameVisible,
-              onTap: widget.onToggleFrame,
-            ),
-            _ToolsItem(
-              icon: Icons.contrast_rounded,
-              label: t.webDevicePreview.darkBackground,
-              checked: widget.bgDark,
-              onTap: widget.onToggleBg,
-            ),
-            _ToolsItem(
-              icon: widget.isLandscape
-                  ? Icons.stay_current_landscape_rounded
-                  : Icons.stay_current_portrait_rounded,
-              label: t.webDevicePreview.landscape,
-              checked: widget.isLandscape,
-              onTap: widget.onToggleLandscape,
-            ),
-            _ToolsItem(
-              icon: Icons.text_fields_rounded,
-              label: t.webDevicePreview.textScale,
-              trailingLabel: _textScaleLabel(widget.textScale),
-              onTap: widget.onCycleTextScale,
-            ),
-            Divider(
-              height: 1,
-              color: Colors.white.withValues(alpha: 0.10),
-            ),
-            _ToolsItem(
-              icon: Icons.photo_camera_rounded,
-              label: t.webDevicePreview.screenshot,
-              onTap: () {
-                setState(() => _toolsMenuOpen = false);
-                widget.onScreenshot();
-              },
-            ),
-          ],
-        ),
-      ),
-    );
-  }
 }
 
 class _DropdownItem extends StatefulWidget {
@@ -1040,11 +1035,13 @@ class _DropdownItem extends StatefulWidget {
     required this.label,
     required this.selected,
     required this.onTap,
+    this.base = Colors.white,
   });
 
   final String label;
   final bool selected;
   final VoidCallback onTap;
+  final Color base;
 
   @override
   State<_DropdownItem> createState() => _DropdownItemState();
@@ -1065,15 +1062,16 @@ class _DropdownItemState extends State<_DropdownItem> {
           duration: const Duration(milliseconds: 120),
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
           color: _hovered
-              ? Colors.white.withValues(alpha: 0.10)
+              ? widget.base.withValues(alpha: 0.10)
               : Colors.transparent,
           child: Text(
             widget.label,
-            style: TextStyle(
-              color: widget.selected ? Colors.white : Colors.white54,
-              fontWeight:
-                  widget.selected ? FontWeight.w600 : FontWeight.w400,
-              fontSize: 13,
+            style: _chromeText(
+              size: 13,
+              weight: widget.selected ? FontWeight.w600 : FontWeight.w400,
+              color: widget.selected
+                  ? widget.base
+                  : widget.base.withValues(alpha: 0.5),
             ),
           ),
         ),
@@ -1086,10 +1084,16 @@ class _PillChip extends StatefulWidget {
   const _PillChip({
     required this.label,
     required this.onTap,
+    this.base = Colors.white,
+    this.active = false,
   });
 
   final String label;
   final VoidCallback onTap;
+  final Color base;
+
+  /// When true the chip reads as "non-default" (accent tint + accent text).
+  final bool active;
 
   @override
   State<_PillChip> createState() => _PillChipState();
@@ -1100,6 +1104,14 @@ class _PillChipState extends State<_PillChip> {
 
   @override
   Widget build(BuildContext context) {
+    final bool on = widget.active;
+    final Color textColor = on ? Colors.white : widget.base;
+    // No resting fill — it just cycles a value. Solid accent when active,
+    // subtle fill only on hover otherwise.
+    final Color bg = on
+        ? (_hovered ? _kAccent.withValues(alpha: 0.85) : _kAccent)
+        : (_hovered ? widget.base.withValues(alpha: 0.14) : Colors.transparent);
+
     return MouseRegion(
       onEnter: (_) => setState(() => _hovered = true),
       onExit: (_) => setState(() => _hovered = false),
@@ -1111,16 +1123,16 @@ class _PillChipState extends State<_PillChip> {
           margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
           padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
           decoration: BoxDecoration(
-            color: Colors.white.withValues(alpha: _hovered ? 0.22 : 0.14),
+            color: bg,
             borderRadius: BorderRadius.circular(20),
           ),
           child: Text(
             widget.label,
-            style: const TextStyle(
-              color: Colors.white,
-              fontSize: 11,
-              fontWeight: FontWeight.w600,
-              letterSpacing: 0.3,
+            style: _chromeText(
+              size: 11,
+              weight: FontWeight.w600,
+              color: textColor,
+              spacing: 0.3,
             ),
           ),
         ),
@@ -1129,75 +1141,111 @@ class _PillChipState extends State<_PillChip> {
   }
 }
 
-class _ToolsItem extends StatefulWidget {
-  const _ToolsItem({
-    required this.icon,
-    required this.label,
-    required this.onTap,
-    this.checked,
-    this.trailingLabel,
-  });
+/// Small confirmation pill shown briefly in the chrome (e.g. after a screenshot
+/// is copied). Dark, frosted, centered near the bottom.
+class _Toast extends StatelessWidget {
+  const _Toast({super.key, required this.message, this.isError = false});
 
-  final IconData icon;
-  final String label;
+  final String message;
+  final bool isError;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: const Color(0xF02C2C2E),
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: const [
+          BoxShadow(color: Color(0x40000000), blurRadius: 12, offset: Offset(0, 3)),
+        ],
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 9),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              isError ? KasyIcons.error : KasyIcons.checkCircle,
+              color: isError
+                  ? const Color(0xFFFF453A)
+                  : const Color(0xFF34C759),
+              size: 15,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              message,
+              style: _chromeText(
+                size: 12,
+                weight: FontWeight.w500,
+                color: Colors.white,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Standalone sun/moon theme toggle pinned to the top-right corner. Switches
+/// the preview canvas between light (sun) and dark (moon).
+class _ThemeCornerButton extends StatefulWidget {
+  const _ThemeCornerButton({required this.dark, required this.onTap});
+
+  final bool dark;
   final VoidCallback onTap;
-  final bool? checked;
-  final String? trailingLabel;
 
   @override
-  State<_ToolsItem> createState() => _ToolsItemState();
+  State<_ThemeCornerButton> createState() => _ThemeCornerButtonState();
 }
 
-class _ToolsItemState extends State<_ToolsItem> {
+class _ThemeCornerButtonState extends State<_ThemeCornerButton> {
   bool _hovered = false;
 
   @override
   Widget build(BuildContext context) {
+    // Light mode (sun): white fill, dark icon. Dark mode (moon): dark fill,
+    // white icon. Both keep a subtle drop shadow to lift the button.
+    final Color fill = widget.dark ? const Color(0xFF2C2C2E) : Colors.white;
+    final Color iconColor = widget.dark
+        ? Colors.white
+        : const Color(0xFF1C1C1E);
+    final Color hoverOverlay = widget.dark
+        ? Colors.white.withValues(alpha: 0.12)
+        : Colors.black.withValues(alpha: 0.08);
+
     return MouseRegion(
       onEnter: (_) => setState(() => _hovered = true),
       onExit: (_) => setState(() => _hovered = false),
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
         onTap: widget.onTap,
-        child: AnimatedContainer(
-          duration: const Duration(milliseconds: 120),
-          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 9),
-          color: _hovered
-              ? Colors.white.withValues(alpha: 0.10)
-              : Colors.transparent,
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Icon(widget.icon, color: Colors.white60, size: 14),
-              const SizedBox(width: 10),
-              Text(
-                widget.label,
-                style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 13,
-                  fontWeight: FontWeight.w400,
-                ),
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: fill,
+            boxShadow: const [
+              BoxShadow(
+                color: Color(0x40000000),
+                blurRadius: 10,
+                offset: Offset(0, 3),
               ),
-              const SizedBox(width: 16),
-              if (widget.trailingLabel != null)
-                Text(
-                  widget.trailingLabel!,
-                  style: const TextStyle(
-                    color: Colors.white38,
-                    fontSize: 12,
-                    fontWeight: FontWeight.w500,
-                  ),
-                )
-              else
-                Icon(
-                  Icons.check_rounded,
-                  size: 14,
-                  color: (widget.checked ?? false)
-                      ? Colors.white
-                      : Colors.transparent,
-                ),
             ],
           ),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 120),
+            width: 28,
+            height: 28,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: _hovered ? hoverOverlay : Colors.transparent,
+            ),
+            child: Icon(
+              widget.dark ? KasyIcons.darkMode : KasyIcons.lightMode,
+              color: iconColor,
+              size: 15,
+            ),
+          ),
         ),
       ),
     );
@@ -1205,13 +1253,17 @@ class _ToolsItemState extends State<_ToolsItem> {
 }
 
 class _VerticalDivider extends StatelessWidget {
+  const _VerticalDivider({this.base = Colors.white});
+
+  final Color base;
+
   @override
   Widget build(BuildContext context) {
     return Container(
       width: 1,
       height: 18,
       margin: const EdgeInsets.symmetric(horizontal: 4),
-      color: Colors.white.withValues(alpha: 0.12),
+      color: base.withValues(alpha: 0.12),
     );
   }
 }
@@ -1221,11 +1273,17 @@ class _IconBtn extends StatefulWidget {
     required this.icon,
     required this.onTap,
     this.color = Colors.white60,
+    this.base = Colors.white,
+    this.active = false,
   });
 
   final IconData icon;
   final VoidCallback onTap;
   final Color color;
+  final Color base;
+
+  /// When true the button reads as "on": accent-tinted fill + accent icon.
+  final bool active;
 
   @override
   State<_IconBtn> createState() => _IconBtnState();
@@ -1236,6 +1294,14 @@ class _IconBtnState extends State<_IconBtn> {
 
   @override
   Widget build(BuildContext context) {
+    final bool on = widget.active;
+    // Active: solid accent fill + white icon (filled-button contrast). Inactive:
+    // solid foreground icon (no muted grays), background only on hover.
+    final Color iconColor = on ? Colors.white : widget.color;
+    final Color bg = on
+        ? (_hovered ? _kAccent.withValues(alpha: 0.85) : _kAccent)
+        : (_hovered ? widget.base.withValues(alpha: 0.12) : Colors.transparent);
+
     return MouseRegion(
       onEnter: (_) => setState(() => _hovered = true),
       onExit: (_) => setState(() => _hovered = false),
@@ -1244,14 +1310,12 @@ class _IconBtnState extends State<_IconBtn> {
         onTap: widget.onTap,
         child: AnimatedContainer(
           duration: const Duration(milliseconds: 120),
-          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
+          padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
           decoration: BoxDecoration(
-            color: _hovered
-                ? Colors.white.withValues(alpha: 0.12)
-                : Colors.transparent,
+            color: bg,
             borderRadius: BorderRadius.circular(8),
           ),
-          child: Icon(widget.icon, color: widget.color, size: 16),
+          child: Icon(widget.icon, color: iconColor, size: 15),
         ),
       ),
     );