kasy-cli 1.31.8 → 1.31.10

package/templates/firebase/lib/core/chrome/chrome_visibility.dart

@@ -0,0 +1,119 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
+
+/// Single source of truth for how much of the app's "chrome" — the top
+/// [KasyAppBar] and the bottom navigation bar — is revealed while the user
+/// scrolls. `1` = fully shown, `0` = fully hidden; both bars interpolate on
+/// this value so they slide away and come back together.
+///
+/// Behaviour (mobile only — tablet/desktop use the sidebar, which never hides):
+/// - Scrolling DOWN collapses the chrome glued to the gesture: a fast flick
+///   hides it fast, a slow drag hides it gradually.
+/// - Scrolling UP slowly keeps it hidden; only a fast fling up brings it back.
+/// - Reaching the top always brings it back.
+///
+/// Exposed as a global singleton (same pattern as `activeTabRouteNotifier` /
+/// `kasyContentFocusTarget`) because both the app bar component and the bottom
+/// bar factory need the same value without threading it through every page.
+class KasyChromeVisibility {
+  KasyChromeVisibility._();
+
+  static final KasyChromeVisibility instance = KasyChromeVisibility._();
+
+  /// `1` = chrome fully visible, `0` = fully hidden.
+  final ValueNotifier<double> reveal = ValueNotifier<double>(1);
+
+  bool _enabled = true;
+
+  /// Whether the "hide on scroll" feature is on. Off → the chrome stays pinned.
+  bool get enabled => _enabled;
+  set enabled(bool value) {
+    _enabled = value;
+    if (!value) reveal.value = 1; // pin the chrome back when turned off
+  }
+
+  /// Distance (logical px) over which the chrome fully collapses while scrolling
+  /// down. Small, so it feels glued to the gesture.
+  static const double _collapseDistance = 90;
+
+  /// An upward scroll delta at least this large in a single update counts as a
+  /// fast fling up and snaps the chrome back into view, even mid-page.
+  static const double _flingUpThreshold = 14;
+
+  /// Within this many px of the top, the chrome is always fully shown.
+  static const double _topThreshold = 6;
+
+  /// Bring the chrome fully back. Call on tab changes so a new screen never
+  /// starts with hidden chrome.
+  void resetShown() => reveal.value = 1;
+
+  /// Feed every vertical scroll update here (from a [NotificationListener] in
+  /// the shell). Updates [reveal] in place.
+  void handleScrollUpdate(ScrollUpdateNotification notification) {
+    if (!_enabled) return;
+    if (notification.metrics.axis != Axis.vertical) return;
+    final double delta = notification.scrollDelta ?? 0;
+    final double pixels = notification.metrics.pixels;
+
+    if (pixels <= _topThreshold) {
+      reveal.value = 1; // at the top → always shown
+      return;
+    }
+    if (delta > 0) {
+      // Scrolling down: collapse proportionally — fast scroll (big delta) hides
+      // fast, slow scroll hides gradually. Glued to the gesture.
+      reveal.value = (reveal.value - delta / _collapseDistance).clamp(0.0, 1.0);
+    } else if (delta < 0 && -delta >= _flingUpThreshold) {
+      // Scrolling up: a slow drag keeps it hidden; only a fast fling reveals.
+      reveal.value = 1;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Configuration — edit these to change the experience your app ships with.
+// ---------------------------------------------------------------------------
+
+/// Whether the Settings screen shows the "hide bars when scrolling" toggle to
+/// the END USER.
+///
+/// - `true`  → the toggle appears in Settings → Preferences and the user
+///   decides; its initial value is [kHideChromeOnScrollDefault].
+/// - `false` → the toggle is hidden and the behaviour is LOCKED to
+///   [kHideChromeOnScrollDefault] (the user cannot change it).
+const bool kShowHideChromeOnScrollSetting = true;
+
+/// The default behaviour: `true` = the app bar and bottom menu hide while
+/// scrolling down (and come back on scroll up / at the top); `false` = they
+/// stay fixed. Used as the toggle's initial value when shown, and as the locked
+/// value when [kShowHideChromeOnScrollSetting] is `false`.
+const bool kHideChromeOnScrollDefault = true;
+
+/// Persisted on/off for the hide-on-scroll behaviour. Wires the effective value
+/// into [KasyChromeVisibility] so the bars react immediately.
+final hideChromeOnScrollProvider =
+    NotifierProvider<HideChromeOnScrollNotifier, bool>(
+  HideChromeOnScrollNotifier.new,
+);
+
+class HideChromeOnScrollNotifier extends Notifier<bool> {
+  @override
+  bool build() {
+    // When the user toggle is hidden, the behaviour is locked to the default
+    // and any previously saved preference is ignored.
+    final bool enabled = kShowHideChromeOnScrollSetting
+        ? (ref.read(sharedPreferencesProvider).getHideChromeOnScroll() ??
+            kHideChromeOnScrollDefault)
+        : kHideChromeOnScrollDefault;
+    KasyChromeVisibility.instance.enabled = enabled;
+    return enabled;
+  }
+
+  Future<void> toggle() async {
+    final bool next = !state;
+    state = next;
+    KasyChromeVisibility.instance.enabled = next;
+    await ref.read(sharedPreferencesProvider).setHideChromeOnScroll(next);
+  }
+}

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

@@ -52,6 +52,18 @@ class SharedPreferencesBuilder implements OnStartService {
     return prefs.getBool('haptic_feedback_enabled') ?? true;
   }
 
+  /// Whether the top app bar and bottom menu hide while scrolling down and come
+  /// back on scroll up / at the top. Defaults to on.
+  Future<void> setHideChromeOnScroll(bool enabled) async {
+    await prefs.setBool('hide_chrome_on_scroll', enabled);
+  }
+
+  /// Null when the user has never set it — the caller applies the configured
+  /// default ([kHideChromeOnScrollDefault]).
+  bool? getHideChromeOnScroll() {
+    return prefs.getBool('hide_chrome_on_scroll');
+  }
+
   Future<void> setBiometricEnabled(bool enabled) async {
     await prefs.setBool('biometric_enabled', enabled);
   }

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

@@ -533,7 +533,9 @@ class _DeviceSwitchBridgeState extends State<_DeviceSwitchBridge> {
   void _onFrameVisibleChanged() {
     if (!mounted) return;
     final store = Provider.of<DevicePreviewStore>(context, listen: false);
-    if (store.data.isFrameVisible != widget.frameVisibleNotifier.value) {
+    final data = _readData(store);
+    if (data == null) return;
+    if (data.isFrameVisible != widget.frameVisibleNotifier.value) {
       store.toggleFrame();
     }
   }
@@ -543,11 +545,31 @@ class _DeviceSwitchBridgeState extends State<_DeviceSwitchBridge> {
   void _syncOrientation() {
     if (!mounted) return;
     final store = Provider.of<DevicePreviewStore>(context, listen: false);
+    final data = _readData(store);
+    if (data == null) {
+      // DevicePreview initializes asynchronously (it loads saved preferences), so
+      // on the first web frame the store can still be uninitialized and reading
+      // store.data throws "Not initialized". Retry next frame instead of surfacing
+      // a scary (and harmless) exception in the console.
+      WidgetsBinding.instance.addPostFrameCallback((_) => _syncOrientation());
+      return;
+    }
     final target = widget.landscapeNotifier.value
         ? Orientation.landscape
         : Orientation.portrait;
-    if (store.data.orientation != target) {
-      store.data = store.data.copyWith(orientation: target);
+    if (data.orientation != target) {
+      store.data = data.copyWith(orientation: target);
+    }
+  }
+
+  /// [DevicePreviewStore.data] throws while the store is still finishing its async
+  /// initialization. Returns null instead of throwing so callers can skip or retry
+  /// cleanly (see _syncOrientation).
+  DevicePreviewData? _readData(DevicePreviewStore store) {
+    try {
+      return store.data;
+    } catch (_) {
+      return null;
     }
   }
 

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

@@ -4,10 +4,18 @@ import 'package:flutter/widgets.dart';
 /// Global render scale applied to the app on web.
 ///
 /// Flutter web tends to render ~10% larger than equivalent HTML apps at the
-/// browser's 100% zoom, so the whole UI feels oversized on desktop. `0.9` brings
-/// it to the proportion the design targets (i.e. what 90% zoom looked like)
-/// without the user having to touch the browser zoom.
-const double kWebViewportScale = 0.9;
+/// browser's 100% zoom, so the whole UI feels oversized on desktop. `0.95`
+/// brings it to the proportion the design targets (i.e. what 95% zoom looked
+/// like) without the user having to touch the browser zoom.
+const double kWebViewportScale = 0.95;
+
+/// Minimum real viewport width (logical px) at which the web scale kicks in.
+///
+/// The "oversized" problem only shows up on tablet/desktop layouts. On mobile
+/// web (a narrow browser) the app should render at its natural size — exactly
+/// like the native iOS/Android build, which never scales. Tied to the tablet
+/// breakpoint so the rule stays in sync with the rest of the responsive system.
+const double kWebViewportScaleMinWidth = 768; // DeviceType.medium.breakpoint
 
 /// Renders [child] uniformly scaled by [scale] on web (no-op elsewhere).
 ///
@@ -33,6 +41,9 @@ class WebViewportScale extends StatelessWidget {
   Widget build(BuildContext context) {
     if (!kIsWeb || scale == 1.0) return child;
     final MediaQueryData mq = MediaQuery.of(context);
+    // Mobile web (narrow browser) renders at its natural size, just like the
+    // native build. The scale only applies from the tablet breakpoint up.
+    if (mq.size.width < kWebViewportScaleMinWidth) return child;
     final Size logicalSize = Size(
       mq.size.width / scale,
       mq.size.height / scale,

package/templates/firebase/lib/features/home/home_feed.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_card.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -43,6 +44,14 @@ const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryDat
       '1525966222134-fcfa99b8ae77',
       '1484704849700-f032a568e944',
       '1542219550-37153d387c27',
+      '1634986666676-ec8fd927c23d',
+      '1633899306328-c5e70574aaa2',
+      '1634017839464-5c339ebe3cb4',
+      '1618005182384-a83a8bd57fbe',
+      '1635776062127-d379bfcba9f8',
+      '1618556450994-a6a128ef0d9d',
+      '1644143379190-08a5f055de1d',
+      '1617791160505-6f00504e3519',
     ],
   ),
   HomeCategory.background: _CategoryData(
@@ -62,6 +71,14 @@ const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryDat
       '1454496522488-7a8e488e8606',
       '1439066615861-d1af74d74000',
       '1470071459604-3b5ec3a7fe05',
+      '1502691876148-a84978e59af8',
+      '1574169208507-84376144848b',
+      '1518837695005-2083093ee35b',
+      '1534796636912-3b95b3ab5986',
+      '1508614999368-9260051292e5',
+      '1554189097-ffe88e998a2b',
+      '1557683316-973673baf926',
+      '1557682224-5b8590cd9ec5',
     ],
   ),
   HomeCategory.animated: _CategoryData(
@@ -81,6 +98,14 @@ const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryDat
       '1579546929518-9e396f3cc809',
       '1614851099175-e5b30eb6f696',
       '1557672172-298e090bd0f1',
+      '1469474968028-56623f02e42e',
+      '1472214103451-9374bd1c798e',
+      '1447752875215-b2761acb3c5d',
+      '1426604966848-d7adac402bff',
+      '1554189097-ffe88e998a2b',
+      '1508614999368-9260051292e5',
+      '1557683316-973673baf926',
+      '1557682224-5b8590cd9ec5',
     ],
   ),
   HomeCategory.icons3d: _CategoryData(
@@ -100,6 +125,14 @@ const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryDat
       '1620207418302-439b387441b0',
       '1604079628040-94301bb21b91',
       '1557682250-33bd709cbe85',
+      '1556228720-195a672e8a03',
+      '1542291026-7eec264c27ff',
+      '1522338242992-e1a54906a8da',
+      '1572635196237-14b3f281503f',
+      '1526170375885-4d8ecf77b99f',
+      '1560769629-975ec94e6a86',
+      '1525966222134-fcfa99b8ae77',
+      '1542219550-37153d387c27',
     ],
   ),
   HomeCategory.gradients: _CategoryData(
@@ -119,6 +152,14 @@ const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryDat
       '1508614999368-9260051292e5',
       '1554189097-ffe88e998a2b',
       '1620641788421-7a1c342ea42e',
+      '1518837695005-2083093ee35b',
+      '1534796636912-3b95b3ab5986',
+      '1462331940025-496dfbfc7564',
+      '1559827260-dc66d52bef19',
+      '1541701494587-cb58502866ab',
+      '1574169208507-84376144848b',
+      '1502691876148-a84978e59af8',
+      '1469474968028-56623f02e42e',
     ],
   ),
 };
@@ -173,7 +214,12 @@ class _HomeFeedState extends State<HomeFeed> {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
-          const SizedBox(height: KasySpacing.belowChromeContentGap),
+          // App bar inset lives INSIDE the scroll so it scrolls away and the
+          // feed slides under the frosted bar (overlay pattern).
+          SizedBox(
+            height: kasyAppBarBodyTopOverlap(context) +
+                KasySpacing.belowChromeContentGap,
+          ),
           _FilterRow(selected: _selected, onSelect: _select),
           const SizedBox(height: KasySpacing.lg),
           Padding(
@@ -207,10 +253,18 @@ class _FilterRow extends StatelessWidget {
   Widget build(BuildContext context) {
     const List<HomeCategory> all = HomeCategory.values;
 
-    // Smaller, denser cards on phones; full size on tablet/desktop.
-    final bool isMobile = MediaQuery.sizeOf(context).width < 768;
-    final double thumbSize = isMobile ? 56 : 79;
-    final double cardWidth = isMobile ? 232 : 302;
+    // Cards scale fluidly with the screen width instead of snapping at a single
+    // breakpoint: smallest/densest on phones, growing smoothly to full size by
+    // the time we reach a desktop-width viewport.
+    const double minWidth = 360; // small phone
+    const double maxWidth = 1024; // desktop — cards at full size from here up
+    final double screenWidth = MediaQuery.sizeOf(context).width;
+    final double t = ((screenWidth - minWidth) / (maxWidth - minWidth)).clamp(
+      0.0,
+      1.0,
+    );
+    final double thumbSize = 44 + (79 - 44) * t;
+    final double cardWidth = 196 + (302 - 196) * t;
     final double cardHeight = thumbSize + KasySpacing.md * 2;
 
     return SizedBox(

package/templates/firebase/lib/features/home/home_image_grid.dart

@@ -71,7 +71,8 @@ class _ImageSkeleton extends StatelessWidget {
 
 /// Pinterest-style masonry feed. Tile heights vary by a repeating ratio set and
 /// tiles are balanced across columns by running height. Column count is
-/// responsive: 2 on phones, 3 on tablets, 4 on desktop.
+/// responsive: 2 on phones, 3 on tablets, 4 on desktop and up to 8 on very
+/// wide displays.
 class HomeImageGrid extends StatelessWidget {
   const HomeImageGrid({super.key, required this.photos});
 
@@ -91,10 +92,22 @@ class HomeImageGrid extends StatelessWidget {
     1.4,
   ];
 
+  /// Target tile width. Columns are derived from the available width so the
+  /// grid stays dense on big desktops without ever letting tiles get too
+  /// narrow — naturally stepping 5 → 4 → 3 → 2 as the screen shrinks.
+  static const double _targetTileWidth = 300;
+
+  /// Hard floor/ceiling on column count: never fewer than 2 (the mobile feel)
+  /// and never more than 8 (lets big desktops fit 6–8 columns while still
+  /// capping density so tiles don't get tiny on huge monitors).
+  static const int _minColumns = 2;
+  static const int _maxColumns = 8;
+
   int _columnsFor(double width) {
-    if (width >= 1024) return 4;
-    if (width >= 600) return 3;
-    return 2;
+    final int columns = (width / _targetTileWidth).ceil();
+    if (columns < _minColumns) return _minColumns;
+    if (columns > _maxColumns) return _maxColumns;
+    return columns;
   }
 
   @override
@@ -140,6 +153,10 @@ class HomeImageGrid extends StatelessWidget {
   }
 }
 
+/// Diameter of the circular "like" button — shared so the caption text can
+/// reserve exactly enough room to sit beside it without overlapping.
+const double _likeButtonSize = 36;
+
 class _PhotoTile extends StatefulWidget {
   final HomePhoto photo;
   final double aspectRatio;
@@ -178,71 +195,83 @@ class _PhotoTileState extends State<_PhotoTile> {
         child: Stack(
           fit: StackFit.expand,
           children: <Widget>[
-            // Tapping the photo opens the full-screen viewer; the Hero gives a
-            // smooth zoom into and out of it.
+            // Photo. The Hero gives the smooth zoom into and out of the viewer.
             Positioned.fill(
-              child: KasyFocusRing(
-                onActivate: _openViewer,
-                borderRadius: BorderRadius.circular(KasyRadius.xl),
-                child: GestureDetector(
-                  onTap: _openViewer,
-                  behavior: HitTestBehavior.opaque,
-                  child: Hero(
-                    tag: photo.id,
-                    child: KasyNetworkImage(url: photo.url),
-                  ),
-                ),
+              child: Hero(
+                tag: photo.id,
+                child: KasyNetworkImage(url: photo.url),
               ),
             ),
 
             // Smooth caption scrim — keeps text legible over any photo, in
-            // both light and dark themes.
+            // both light and dark themes. Decorative only: never eats taps.
             const Positioned(
               left: 0,
               right: 0,
               bottom: 0,
-              child: _CaptionScrim(),
+              child: IgnorePointer(child: _CaptionScrim()),
             ),
 
+            // Caption text — decorative only. The right padding reserves room
+            // for the like button so the text never runs underneath it.
             Positioned(
               left: 0,
               right: 0,
               bottom: 0,
-              child: Padding(
-                padding: const EdgeInsets.all(KasySpacing.md),
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.end,
-                  children: <Widget>[
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        mainAxisSize: MainAxisSize.min,
-                        children: <Widget>[
-                          Text(
-                            photo.author,
-                            maxLines: 1,
-                            overflow: TextOverflow.ellipsis,
-                            style: context.textTheme.titleSmall?.copyWith(
-                              color: context.colors.onSurface,
-                            ),
-                          ),
-                          Text(
-                            photo.ago,
-                            maxLines: 1,
-                            overflow: TextOverflow.ellipsis,
-                            style: context.textTheme.bodySmall?.copyWith(
-                              color: context.colors.muted,
-                            ),
-                          ),
-                        ],
+              child: IgnorePointer(
+                child: Padding(
+                  padding: const EdgeInsets.fromLTRB(
+                    KasySpacing.md,
+                    KasySpacing.md,
+                    KasySpacing.md + _likeButtonSize + KasySpacing.sm,
+                    KasySpacing.md,
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[
+                      Text(
+                        photo.author,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.titleSmall?.copyWith(
+                          color: context.colors.onSurface,
+                        ),
+                      ),
+                      Text(
+                        photo.ago,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodySmall?.copyWith(
+                          color: context.colors.muted,
+                        ),
                       ),
-                    ),
-                    const SizedBox(width: KasySpacing.sm),
-                    _LikeButton(liked: _liked, onTap: _toggleLike),
-                  ],
+                    ],
+                  ),
                 ),
               ),
             ),
+
+            // Full-tile tap target sits ABOVE the scrim and caption so tapping
+            // anywhere on the tile (gradient included) opens the viewer.
+            Positioned.fill(
+              child: KasyFocusRing(
+                onActivate: _openViewer,
+                borderRadius: BorderRadius.circular(KasyRadius.xl),
+                child: GestureDetector(
+                  onTap: _openViewer,
+                  behavior: HitTestBehavior.opaque,
+                ),
+              ),
+            ),
+
+            // Like button — kept on top of the tap target so it still wins
+            // taps within its own area.
+            Positioned(
+              right: KasySpacing.md,
+              bottom: KasySpacing.md,
+              child: _LikeButton(liked: _liked, onTap: _toggleLike),
+            ),
           ],
         ),
       ),
@@ -354,8 +383,8 @@ class _LikeButtonState extends State<_LikeButton>
           child: BackdropFilter(
             filter: ui.ImageFilter.blur(sigmaX: 8, sigmaY: 8),
             child: Container(
-              width: 36,
-              height: 36,
+              width: _likeButtonSize,
+              height: _likeButtonSize,
               alignment: Alignment.center,
               decoration: BoxDecoration(
                 color: context.colors.surface.withValues(

package/templates/firebase/lib/features/home/home_page.dart

@@ -31,14 +31,11 @@ class HomePage extends ConsumerWidget {
         color: context.colors.background,
         child: Stack(
           children: [
-            Positioned.fill(
-              child: Padding(
-                padding: EdgeInsets.only(
-                  top: kasyAppBarBodyTopOverlap(context),
-                ),
-                child: const HomeFeed(),
-              ),
-            ),
+            // True overlay: the feed fills the whole height and scrolls UNDER
+            // the frosted app bar (the bar's top inset lives inside the feed's
+            // scroll, so it scrolls away). This way, when the bar hides on
+            // scroll, content already fills the top — no empty app-bar band.
+            const Positioned.fill(child: HomeFeed()),
             Positioned(
               top: 0,
               left: 0,
@@ -46,6 +43,7 @@ class HomePage extends ConsumerWidget {
               child: KasyAppBar(
                 title: t.home.dashboard.brand,
                 style: KasyAppBarStyle.rootTab,
+                hideOnScroll: true,
                 onThemeToggle: () {
                   KasyHaptics.light(context);
                   ThemeProvider.of(context).toggle();

package/templates/firebase/lib/features/notifications/ui/notifications_page.dart

@@ -105,6 +105,7 @@ class _NotificationsPageState extends ConsumerState<NotificationsPage> {
     return KasyOverlayScaffold(
       title: t.notifications.title,
       appBarStyle: KasyAppBarStyle.rootTab,
+      hideAppBarOnScroll: true,
       scrollController: _scrollController,
       trailing: Builder(
         builder: (ctx) => Row(

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/chrome/chrome_visibility.dart';
 import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/haptics/haptic_feedback_notifier.dart';
@@ -41,6 +42,7 @@ class SettingsPage extends ConsumerWidget {
     return KasyOverlayScaffold(
       title: tr.title,
       appBarStyle: KasyAppBarStyle.rootTab,
+      hideAppBarOnScroll: true,
       trailing: Builder(
         builder: (ctx) => KasyChromeOrbIconButton(
           icon: KasyIcons.logout,
@@ -118,6 +120,10 @@ class SettingsPage extends ConsumerWidget {
             const SettingsDivider(),
             const HapticFeedbackSwitcher(),
             const SettingsDivider(),
+            if (kShowHideChromeOnScrollSetting) ...[
+              const HideChromeOnScrollSwitcher(),
+              const SettingsDivider(),
+            ],
             const LanguageSwitcher(),
             if (withLocalReminders) ...[
               const SettingsDivider(),
@@ -641,6 +647,10 @@ class _DesktopDetail extends ConsumerWidget {
                 const SettingsDivider(),
                 const HapticFeedbackSwitcher(),
                 const SettingsDivider(),
+                if (kShowHideChromeOnScrollSetting) ...[
+                  const HideChromeOnScrollSwitcher(),
+                  const SettingsDivider(),
+                ],
                 const LanguageSwitcher(),
                 if (withLocalReminders) ...[
                   const SettingsDivider(),
@@ -953,6 +963,22 @@ class HapticFeedbackSwitcher extends ConsumerWidget {
   }
 }
 
+class HideChromeOnScrollSwitcher extends ConsumerWidget {
+  const HideChromeOnScrollSwitcher({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isEnabled = ref.watch(hideChromeOnScrollProvider);
+    return SettingsSwitchTile(
+      icon: KasyIcons.eyeOff,
+      title: context.t.settings.hide_chrome_on_scroll_title,
+      value: isEnabled,
+      onChanged: (_) =>
+          ref.read(hideChromeOnScrollProvider.notifier).toggle(),
+    );
+  }
+}
+
 class ThemeSwitcher extends StatelessWidget {
   const ThemeSwitcher({super.key});