kasy-cli 1.37.1 → 1.39.0

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

@@ -71,39 +71,35 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
       return const ComponentPreviewDefinition(
         title: 'AppBar',
         variants: [
+          // Phone / tablet — the page chrome (title + back + orbs).
           ComponentPreviewVariant(
-            label: 'Subpage',
+            label: 'Subpage (mobile)',
             builder: _buildAppBarSubpageVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Subpage Simple',
+            label: 'Subpage Simple (mobile)',
             builder: _buildAppBarSubpageSimpleVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Subpage Actions',
+            label: 'Subpage Actions (mobile)',
             builder: _buildAppBarSubpageActionsVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Menu opens sidebar',
+            label: 'Menu opens sidebar (mobile)',
             builder: _buildAppBarMenuVariant,
           ),
-        ],
-      );
-    case 'Web Header':
-      return const ComponentPreviewDefinition(
-        title: 'Web Header',
-        variants: [
+          // Desktop — the application chrome (search + actions + profile).
           ComponentPreviewVariant(
-            label: 'Default',
-            builder: _buildWebHeaderDefaultVariant,
+            label: 'Application (desktop)',
+            builder: _buildAppBarApplicationVariant,
           ),
           ComponentPreviewVariant(
-            label: 'With notification',
-            builder: _buildWebHeaderBadgeVariant,
+            label: 'Application + notification (desktop)',
+            builder: _buildAppBarApplicationBadgeVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Without avatar',
-            builder: _buildWebHeaderNoAvatarVariant,
+            label: 'Application no avatar (desktop)',
+            builder: _buildAppBarApplicationNoAvatarVariant,
           ),
         ],
       );
@@ -309,6 +305,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'DropDown':
+      return const ComponentPreviewDefinition(
+        title: 'DropDown',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Basic',
+            builder: _buildDropDownBasic,
+          ),
+          ComponentPreviewVariant(
+            label: 'With icons & subtitles',
+            builder: _buildDropDownRich,
+          ),
+          ComponentPreviewVariant(
+            label: 'States',
+            builder: _buildDropDownStates,
+          ),
+        ],
+      );
     case 'Badge':
       return const ComponentPreviewDefinition(
         title: 'Badge',
@@ -1928,16 +1942,16 @@ Widget _buildAppBarMenuVariant(BuildContext context) {
   );
 }
 
-Widget _buildWebHeaderDefaultVariant(BuildContext context) {
-  return const _WebHeaderPreview();
+Widget _buildAppBarApplicationVariant(BuildContext context) {
+  return const _ApplicationBarPreview();
 }
 
-Widget _buildWebHeaderBadgeVariant(BuildContext context) {
-  return const _WebHeaderPreview(showBadge: true);
+Widget _buildAppBarApplicationBadgeVariant(BuildContext context) {
+  return const _ApplicationBarPreview(showBadge: true);
 }
 
-Widget _buildWebHeaderNoAvatarVariant(BuildContext context) {
-  return const _WebHeaderPreview(showAvatar: false);
+Widget _buildAppBarApplicationNoAvatarVariant(BuildContext context) {
+  return const _ApplicationBarPreview(showAvatar: false);
 }
 
 Widget _buildButtonSizesVariant(BuildContext context) {
@@ -3866,49 +3880,62 @@ class _AccordionPreviewState extends State<_AccordionPreview> {
   }
 }
 
-/// Presents [KasyWebHeader] inside a desktop browser-window mock (title bar +
-/// faux sidebar + content) so the preview reads as the web/desktop chrome it is.
-class _WebHeaderPreview extends StatelessWidget {
+/// Presents [KasyAppBar.application] inside a desktop browser-window mock (title
+/// bar + faux sidebar + content) so the preview reads as the desktop chrome it
+/// is — the responsive desktop half of [KasyAppBar].
+class _ApplicationBarPreview extends StatelessWidget {
   final bool showBadge;
   final bool showAvatar;
 
-  const _WebHeaderPreview({this.showBadge = false, this.showAvatar = true});
+  const _ApplicationBarPreview({this.showBadge = false, this.showAvatar = true});
+
+  /// Width the mock window is laid out at. The application bar is desktop chrome
+  /// (220px search + actions), so it needs a desktop-class width — we render at
+  /// this width and scale the whole window down to fit the (narrow) preview card.
+  /// Without this, the bar overflows on a phone-sized preview.
+  static const double _mockWindowWidth = 760;
 
   @override
   Widget build(BuildContext context) {
     final KasyColors c = context.colors;
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: c.surface,
-        borderRadius: BorderRadius.circular(KasyRadius.lg),
-        border: Border.all(color: c.onSurface.withValues(alpha: 0.10)),
-        boxShadow: [KasyShadows.component(context)],
-      ),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(KasyRadius.lg),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const _BrowserTopBar(),
-            // The real header, flush — no corner radius of its own.
-            KasyWebHeader(
-              showNotificationBadge: showBadge,
-              showAvatar: showAvatar,
-              onNotifications: () {},
-              onCreate: () {},
-              onAvatarTap: () {},
-            ),
-            const SizedBox(
-              height: 150,
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  _DesktopMockSidebar(),
-                  Expanded(child: _DesktopMockContent()),
-                ],
-              ),
+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      child: SizedBox(
+        width: _mockWindowWidth,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: c.surface,
+            borderRadius: BorderRadius.circular(KasyRadius.lg),
+            border: Border.all(color: c.onSurface.withValues(alpha: 0.10)),
+            boxShadow: [KasyShadows.component(context)],
+          ),
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(KasyRadius.lg),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const _BrowserTopBar(),
+                // The real bar, flush — no corner radius of its own.
+                KasyAppBar.application(
+                  showNotificationBadge: showBadge,
+                  showAvatar: showAvatar,
+                  onNotifications: () {},
+                  onCreate: () {},
+                  onAvatarTap: () {},
+                ),
+                const SizedBox(
+                  height: 150,
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      _DesktopMockSidebar(),
+                      Expanded(child: _DesktopMockContent()),
+                    ],
+                  ),
+                ),
+              ],
             ),
-          ],
+          ),
         ),
       ),
     );
@@ -9447,3 +9474,150 @@ class _DatePickerFieldStatesPreviewState
     );
   }
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DropDown — single-select dropdown (HeroUI "Select")
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<KasyDropDownItem<String>> _kDropDownStates = [
+  KasyDropDownItem(value: 'fl', label: 'Florida'),
+  KasyDropDownItem(value: 'de', label: 'Delaware'),
+  KasyDropDownItem(value: 'tx', label: 'Texas'),
+  KasyDropDownItem(value: 'ca', label: 'California'),
+  KasyDropDownItem(value: 'ny', label: 'New York'),
+  KasyDropDownItem(value: 'wy', label: 'Wyoming'),
+];
+
+Widget _buildDropDownBasic(BuildContext context) => const _DropDownBasicPreview();
+
+class _DropDownBasicPreview extends StatefulWidget {
+  const _DropDownBasicPreview();
+
+  @override
+  State<_DropDownBasicPreview> createState() => _DropDownBasicPreviewState();
+}
+
+class _DropDownBasicPreviewState extends State<_DropDownBasicPreview> {
+  String? _state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDropDown<String>(
+          label: 'State',
+          hint: 'Select one',
+          showRequiredIndicator: true,
+          value: _state,
+          items: _kDropDownStates,
+          onChanged: (v) => setState(() => _state = v),
+        ),
+      ],
+    );
+  }
+}
+
+Widget _buildDropDownRich(BuildContext context) => const _DropDownRichPreview();
+
+class _DropDownRichPreview extends StatefulWidget {
+  const _DropDownRichPreview();
+
+  @override
+  State<_DropDownRichPreview> createState() => _DropDownRichPreviewState();
+}
+
+class _DropDownRichPreviewState extends State<_DropDownRichPreview> {
+  String? _action;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDropDown<String>(
+          label: 'Quick action',
+          hint: 'Pick an action',
+          leadingIcon: KasyIcons.idea,
+          value: _action,
+          items: const [
+            KasyDropDownItem(
+              value: 'new',
+              label: 'New file',
+              icon: KasyIcons.add,
+              subtitle: 'Create a new file',
+            ),
+            KasyDropDownItem(
+              value: 'copy',
+              label: 'Copy link',
+              icon: KasyIcons.copy,
+              subtitle: 'Copy a shareable link',
+            ),
+            KasyDropDownItem(
+              value: 'settings',
+              label: 'Settings',
+              icon: KasyIcons.settings,
+              subtitle: 'Manage file permissions',
+            ),
+          ],
+          onChanged: (v) => setState(() => _action = v),
+        ),
+      ],
+    );
+  }
+}
+
+Widget _buildDropDownStates(BuildContext context) =>
+    const _DropDownStatesPreview();
+
+class _DropDownStatesPreview extends StatefulWidget {
+  const _DropDownStatesPreview();
+
+  @override
+  State<_DropDownStatesPreview> createState() => _DropDownStatesPreviewState();
+}
+
+class _DropDownStatesPreviewState extends State<_DropDownStatesPreview> {
+  String? _invalid;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Pre-selected value.
+        KasyDropDown<String>(
+          label: 'Selected',
+          hint: 'Select one',
+          value: 'ca',
+          items: _kDropDownStates,
+          onChanged: (_) {},
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Invalid + error text.
+        KasyDropDown<String>(
+          label: 'Required',
+          hint: 'Select one',
+          showRequiredIndicator: true,
+          isInvalid: _invalid == null,
+          errorText: _invalid == null ? 'Please choose a state.' : null,
+          value: _invalid,
+          items: _kDropDownStates,
+          onChanged: (v) => setState(() => _invalid = v),
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Disabled trigger.
+        const KasyDropDown<String>(
+          label: 'Disabled',
+          hint: 'Locked',
+          enabled: false,
+          items: _kDropDownStates,
+          onChanged: null,
+        ),
+      ],
+    );
+  }
+}

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

@@ -336,7 +336,7 @@ class _FilterCard extends StatelessWidget {
                   data.title,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: context.textTheme.titleSmall?.copyWith(
+                  style: context.kasyTextTheme.cardTitle.copyWith(
                     color: selected ? c.primary : c.onSurface,
                   ),
                 ),
@@ -345,7 +345,7 @@ class _FilterCard extends StatelessWidget {
                   data.subtitle,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: context.textTheme.bodySmall?.copyWith(
+                  style: context.kasyTextTheme.cardSubtitle.copyWith(
                     color: c.muted,
                   ),
                 ),

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

@@ -234,7 +234,7 @@ class _PhotoTileState extends State<_PhotoTile> {
                         photo.author,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.titleSmall?.copyWith(
+                        style: context.kasyTextTheme.cardTitle.copyWith(
                           color: context.colors.onSurface,
                         ),
                       ),
@@ -242,7 +242,7 @@ class _PhotoTileState extends State<_PhotoTile> {
                         photo.ago,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.bodySmall?.copyWith(
+                        style: context.kasyTextTheme.caption.copyWith(
                           color: context.colors.muted,
                         ),
                       ),
@@ -375,7 +375,7 @@ class _LikeButtonState extends State<_LikeButton>
 
     return KasyFocusRing(
       onActivate: widget.onTap,
-      borderRadius: BorderRadius.circular(999),
+      borderRadius: BorderRadius.circular(KasyRadius.full),
       child: GestureDetector(
         onTap: widget.onTap,
         behavior: HitTestBehavior.opaque,

package/templates/firebase/lib/features/local_reminders/providers/reminder_notifier.dart

@@ -21,7 +21,14 @@ class ReminderNotifier extends _$ReminderNotifier {
 
   Future<void> setType(ReminderType type) async {
     final current = state.requireValue;
-    await _applyAndSave(current.copyWith(type: type));
+    // Leaving "specific date" drops the stored one-off date so it doesn't
+    // linger (and silently come back) if the user returns to that mode later.
+    await _applyAndSave(
+      current.copyWith(
+        type: type,
+        clearDate: type != ReminderType.specificDate,
+      ),
+    );
   }
 
   Future<void> setTime(int hour, int minute) async {

package/templates/firebase/lib/features/local_reminders/ui/reminder_page.dart

@@ -1,11 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/components/kasy_card.dart';
 import 'package:kasy_kit/components/kasy_chip.dart';
 import 'package:kasy_kit/components/kasy_date_picker.dart';
 import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
 import 'package:kasy_kit/features/local_reminders/providers/reminder_notifier.dart';
 import 'package:kasy_kit/features/local_reminders/repositories/reminder_preferences.dart';
@@ -76,14 +79,16 @@ class _ReminderForm extends ConsumerWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
+              // The master toggle reads like a Settings row: a colored icon
+              // badge, the label, and a live one-line summary of when the
+              // reminder fires (or a hint when it's off) as the subtitle.
               KasyCard(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: KasySpacing.md,
-                  vertical: KasySpacing.xs,
-                ),
+                borderRadius: KasyRadius.lgBorderRadius,
                 child: SettingsSwitchTile(
                   icon: KasyIcons.notification,
+                  iconBackgroundColor: context.colors.primary,
                   title: tr.toggleLabel,
+                  subtitle: _scheduleSummary(context, state),
                   value: state.enabled,
                   onChanged: notifier.setEnabled,
                 ),
@@ -92,26 +97,17 @@ class _ReminderForm extends ConsumerWidget {
                 const SizedBox(height: KasySpacing.xl),
                 _FieldLabel(tr.typeLabel),
                 const SizedBox(height: KasySpacing.sm),
-                // Default hug mode scrolls horizontally when the labels don't
-                // fit (long localized strings) instead of overflowing the row.
+                // Fill mode so the three options split the width equally
+                // (a segmented control), instead of hug mode where each tab
+                // only takes its own text width and the spacing looks uneven.
                 KasyTabs(
                   tabs: [tr.daily, tr.weekly, tr.specificDate],
                   selectedIndex: _types.indexOf(state.type),
                   onTabSelected: (i) => notifier.setType(_types[i]),
+                  mode: KasyTabsMode.fill,
                 ),
-                // daily / weekly schedule by a wall-clock time (hour + minute);
-                // specificDate carries its own time inside the chosen date.
-                if (state.type == ReminderType.daily ||
-                    state.type == ReminderType.weekly) ...[
-                  const SizedBox(height: KasySpacing.lg),
-                  _FieldLabel(tr.timeLabel),
-                  const SizedBox(height: KasySpacing.sm),
-                  _TimeTile(
-                    hour: state.hour,
-                    minute: state.minute,
-                    onChanged: (h, m) => notifier.setTime(h, m),
-                  ),
-                ],
+                // Pick the day/date BEFORE the time so the schedule reads in a
+                // natural order (which day → at what time).
                 if (state.type == ReminderType.weekly) ...[
                   const SizedBox(height: KasySpacing.lg),
                   _FieldLabel(tr.dayLabel),
@@ -126,6 +122,12 @@ class _ReminderForm extends ConsumerWidget {
                   _FieldLabel(tr.dateLabel),
                   const SizedBox(height: KasySpacing.sm),
                   KasyDatePicker(
+                    // Anchored popover on phones/tablets (the original feel),
+                    // centered dialog on desktop. The call site picks by width
+                    // via kasySheetUsesDialog so each presentation stays pure.
+                    presentation: kasySheetUsesDialog(context)
+                        ? KasyDatePickerPresentation.dialog
+                        : KasyDatePickerPresentation.popover,
                     value: state.date,
                     minDate: DateTime.now(),
                     onChanged: (picked) {
@@ -142,9 +144,14 @@ class _ReminderForm extends ConsumerWidget {
                       );
                     },
                   ),
-                  const SizedBox(height: KasySpacing.lg),
-                  _FieldLabel(tr.timeLabel),
-                  const SizedBox(height: KasySpacing.sm),
+                ],
+                // Time is shared by every type. daily / weekly schedule by a
+                // wall-clock time (hour + minute); specificDate carries its own
+                // time inside the chosen date.
+                const SizedBox(height: KasySpacing.lg),
+                _FieldLabel(tr.timeLabel),
+                const SizedBox(height: KasySpacing.sm),
+                if (state.type == ReminderType.specificDate)
                   _TimeTile(
                     hour: state.date?.hour ?? 9,
                     minute: state.date?.minute ?? 0,
@@ -155,8 +162,13 @@ class _ReminderForm extends ConsumerWidget {
                         DateTime(base.year, base.month, base.day, h, m),
                       );
                     },
+                  )
+                else
+                  _TimeTile(
+                    hour: state.hour,
+                    minute: state.minute,
+                    onChanged: (h, m) => notifier.setTime(h, m),
                   ),
-                ],
               ],
             ],
           ),
@@ -166,8 +178,43 @@ class _ReminderForm extends ConsumerWidget {
   }
 }
 
+/// Human-readable, one-line description of the active schedule used as the
+/// toggle subtitle. Reads "Every day at 09:00" / "Monday at 09:00" /
+/// "On June 15 at 09:00", and falls back to a hint while the reminder is off
+/// (or asks for a date when a specific-date reminder has none yet).
+String _scheduleSummary(BuildContext context, ReminderState state) {
+  final tr = Translations.of(context).reminderPage;
+  if (!state.enabled) return tr.hint;
+
+  final String locale = Localizations.localeOf(context).toString();
+  String pad(int v) => v.toString().padLeft(2, '0');
+
+  switch (state.type) {
+    case ReminderType.daily:
+      return tr.summaryDaily(time: '${pad(state.hour)}:${pad(state.minute)}');
+    case ReminderType.weekly:
+      // January 2024 starts on a Monday, so day-of-month N maps to weekday N.
+      // DateFormat already cases the weekday per locale (e.g. "Tuesday" vs the
+      // lowercase "terça-feira"), so we use it as-is inside the summary.
+      final String day =
+          DateFormat.EEEE(locale).format(DateTime(2024, 1, state.dayOfWeek));
+      return tr.summaryWeekly(
+        day: day,
+        time: '${pad(state.hour)}:${pad(state.minute)}',
+      );
+    case ReminderType.specificDate:
+      final DateTime? date = state.date;
+      if (date == null) return tr.selectDate;
+      return tr.summaryDate(
+        date: DateFormat.MMMMd(locale).format(date),
+        time: '${pad(date.hour)}:${pad(date.minute)}',
+      );
+  }
+}
+
 /// Quiet group eyebrow above each field — the design-system section label
 /// (small, gently tracked, muted), matching the Settings / sidebar pattern.
+/// The small left inset aligns it with the Settings section labels.
 class _FieldLabel extends StatelessWidget {
   final String label;
 
@@ -175,10 +222,13 @@ class _FieldLabel extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Text(
-      label,
-      style: context.kasyTextTheme.sectionLabel.copyWith(
-        color: context.colors.muted,
+    return Padding(
+      padding: const EdgeInsets.only(left: KasySpacing.xs),
+      child: Text(
+        label,
+        style: context.kasyTextTheme.sectionLabel.copyWith(
+          color: context.colors.muted,
+        ),
       ),
     );
   }
@@ -192,15 +242,21 @@ class _DaySelector extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // 1=Monday ... 7=Sunday (matches DateTime.weekday)
-    final days = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
+    // 1=Monday ... 7=Sunday (matches DateTime.weekday). Short weekday names are
+    // localized via intl, so the chips read correctly in every app language
+    // instead of being hardcoded to one locale.
+    final DateFormat format = DateFormat.E(
+      Localizations.localeOf(context).toString(),
+    );
+    // January 2024 starts on a Monday, so day-of-month N maps to weekday N (1..7).
+    String shortName(int weekday) => format.format(DateTime(2024, 1, weekday));
     return Wrap(
       spacing: KasySpacing.xs,
       runSpacing: KasySpacing.xs,
       children: List.generate(7, (i) {
         final dayIndex = i + 1;
         return KasyChip(
-          label: days[i],
+          label: shortName(dayIndex),
           selected: current == dayIndex,
           onSelected: (_) => onChanged(dayIndex),
         );
@@ -236,35 +292,40 @@ class _TimeTile extends StatelessWidget {
       }
     }
 
+    // Same surface + interaction model as a Settings row: an elevated card,
+    // a colored icon badge, the value, and a trailing chevron. KasyHover gives
+    // the press depth and keyboard focus ring, clipped to the card corners.
     return KasyCard(
-      onTap: pickTime,
-      borderRadius: KasyRadius.mdBorderRadius,
-      padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.md,
-        vertical: KasySpacing.smd,
-      ),
-      child: Row(
-        children: [
-          Icon(
-            KasyIcons.time,
-            size: KasyIconSize.lg,
-            color: context.colors.primary,
-          ),
-          const SizedBox(width: KasySpacing.sm),
-          Text(
-            '${_pad(hour)}:${_pad(minute)}',
-            style: context.textTheme.bodyLarge?.copyWith(
-              color: context.colors.onSurface,
-              fontWeight: FontWeight.w600,
+      borderRadius: KasyRadius.lgBorderRadius,
+      child: KasyHover(
+        onTap: pickTime,
+        focusable: true,
+        borderRadius: KasyRadius.lgBorderRadius,
+        focusGapColor: context.colors.surface,
+        semanticLabel: '${_pad(hour)}:${_pad(minute)}',
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: KasySpacing.smd,
+        ),
+        child: Row(
+          children: [
+            SettingsIconBadge(
+              icon: KasyIcons.time,
+              color: context.colors.primary,
             ),
-          ),
-          const Spacer(),
-          Icon(
-            KasyIcons.arrowForwardIos,
-            size: KasyIconSize.xs,
-            color: context.colors.muted,
-          ),
-        ],
+            const SizedBox(width: KasySpacing.sm),
+            Expanded(
+              child: Text(
+                '${_pad(hour)}:${_pad(minute)}',
+                style: context.kasyTextTheme.listRowTitle.copyWith(
+                  color: context.colors.onSurface,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+            const SettingsListChevron(),
+          ],
+        ),
       ),
     );
   }