kasy-cli 1.32.0 → 1.35.0

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

@@ -1,11 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.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_focus_ring.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';
+import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
 class ReminderPage extends ConsumerWidget {
@@ -44,162 +48,137 @@ class _ReminderForm extends ConsumerWidget {
 
   const _ReminderForm({required this.state});
 
+  // Tab order mirrors the type selector left-to-right.
+  static const List<ReminderType> _types = <ReminderType>[
+    ReminderType.daily,
+    ReminderType.weekly,
+    ReminderType.specificDate,
+  ];
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final tr = Translations.of(context).reminderPage;
     final notifier = ref.read(reminderProvider.notifier);
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        SwitchListTile(
-          title: Text(tr.toggleLabel, style: context.textTheme.bodyLarge),
-          value: state.enabled,
-          onChanged: notifier.setEnabled,
-        ),
-        if (state.enabled) ...[
-          const Divider(),
-          const SizedBox(height: KasySpacing.sm),
-          Text(
-            tr.typeLabel,
-            style: context.textTheme.labelLarge?.copyWith(
-              color: context.colors.muted,
-            ),
-          ),
-          const SizedBox(height: KasySpacing.sm),
-          _TypeSelector(current: state.type, onChanged: notifier.setType),
-          const SizedBox(height: KasySpacing.lg),
-          Text(
-            tr.timeLabel,
-            style: context.textTheme.labelLarge?.copyWith(
-              color: context.colors.muted,
-            ),
-          ),
-          const SizedBox(height: KasySpacing.sm),
-          _TimeTile(
-            hour: state.hour,
-            minute: state.minute,
-            onChanged: (h, m) => notifier.setTime(h, m),
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 600),
+        child: Padding(
+          // Horizontal gutter is already applied by KasyOverlayScaffold; only
+          // add vertical spacing here so the side padding matches the
+          // Notifications screen (a single gutter, not a doubled one).
+          padding: const EdgeInsets.fromLTRB(
+            0,
+            KasySpacing.belowChromeContentGap,
+            0,
+            KasySpacing.xl,
           ),
-          if (state.type == ReminderType.weekly) ...[
-            const SizedBox(height: KasySpacing.lg),
-            Text(
-              tr.dayLabel,
-              style: context.textTheme.labelLarge?.copyWith(
-                color: context.colors.muted,
-              ),
-            ),
-            const SizedBox(height: KasySpacing.sm),
-            _DaySelector(
-              current: state.dayOfWeek,
-              onChanged: notifier.setDayOfWeek,
-            ),
-          ],
-          if (state.type == ReminderType.specificDate) ...[
-            const SizedBox(height: KasySpacing.lg),
-            Text(
-              tr.dateLabel,
-              style: context.textTheme.labelLarge?.copyWith(
-                color: context.colors.muted,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              KasyCard(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: KasySpacing.md,
+                  vertical: KasySpacing.xs,
+                ),
+                child: SettingsSwitchTile(
+                  icon: KasyIcons.notification,
+                  title: tr.toggleLabel,
+                  value: state.enabled,
+                  onChanged: notifier.setEnabled,
+                ),
               ),
-            ),
-            const SizedBox(height: KasySpacing.sm),
-            _DateTile(date: state.date, onChanged: notifier.setDate),
-          ],
-        ],
-      ],
-    );
-  }
-}
-
-class _TypeSelector extends StatelessWidget {
-  final ReminderType current;
-  final ValueChanged<ReminderType> onChanged;
-
-  const _TypeSelector({required this.current, required this.onChanged});
-
-  @override
-  Widget build(BuildContext context) {
-    final tr = Translations.of(context).reminderPage;
-    return SegmentedButton<ReminderType>(
-      segments: [
-        ButtonSegment(value: ReminderType.daily, label: Text(tr.daily)),
-        ButtonSegment(value: ReminderType.weekly, label: Text(tr.weekly)),
-        ButtonSegment(
-          value: ReminderType.specificDate,
-          label: Text(tr.specificDate),
+              if (state.enabled) ...[
+                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.
+                KasyTabs(
+                  tabs: [tr.daily, tr.weekly, tr.specificDate],
+                  selectedIndex: _types.indexOf(state.type),
+                  onTabSelected: (i) => notifier.setType(_types[i]),
+                ),
+                // 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),
+                  ),
+                ],
+                if (state.type == ReminderType.weekly) ...[
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.dayLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  _DaySelector(
+                    current: state.dayOfWeek,
+                    onChanged: notifier.setDayOfWeek,
+                  ),
+                ],
+                if (state.type == ReminderType.specificDate) ...[
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.dateLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  KasyDatePicker(
+                    value: state.date,
+                    minDate: DateTime.now(),
+                    onChanged: (picked) {
+                      // Keep the previously chosen time when the day changes.
+                      final DateTime? base = state.date;
+                      notifier.setDate(
+                        DateTime(
+                          picked.year,
+                          picked.month,
+                          picked.day,
+                          base?.hour ?? 9,
+                          base?.minute ?? 0,
+                        ),
+                      );
+                    },
+                  ),
+                  const SizedBox(height: KasySpacing.lg),
+                  _FieldLabel(tr.timeLabel),
+                  const SizedBox(height: KasySpacing.sm),
+                  _TimeTile(
+                    hour: state.date?.hour ?? 9,
+                    minute: state.date?.minute ?? 0,
+                    onChanged: (h, m) {
+                      // Keep the previously chosen day when the time changes.
+                      final DateTime base = state.date ?? DateTime.now();
+                      notifier.setDate(
+                        DateTime(base.year, base.month, base.day, h, m),
+                      );
+                    },
+                  ),
+                ],
+              ],
+            ],
+          ),
         ),
-      ],
-      selected: {current},
-      onSelectionChanged: (s) => onChanged(s.first),
-      style: ButtonStyle(
-        textStyle: WidgetStateProperty.all(context.textTheme.labelSmall),
       ),
     );
   }
 }
 
-class _TimeTile extends StatelessWidget {
-  final int hour;
-  final int minute;
-  final void Function(int hour, int minute) onChanged;
+/// Quiet group eyebrow above each field — the design-system section label
+/// (small, gently tracked, muted), matching the Settings / sidebar pattern.
+class _FieldLabel extends StatelessWidget {
+  final String label;
 
-  const _TimeTile({
-    required this.hour,
-    required this.minute,
-    required this.onChanged,
-  });
-
-  String _pad(int v) => v.toString().padLeft(2, '0');
+  const _FieldLabel(this.label);
 
   @override
   Widget build(BuildContext context) {
-    Future<void> pickTime() async {
-      final picked = await showTimePicker(
-        context: context,
-        initialTime: TimeOfDay(hour: hour, minute: minute),
-      );
-      if (picked != null) {
-        onChanged(picked.hour, picked.minute);
-      }
-    }
-
-    return KasyFocusRing(
-      onActivate: pickTime,
-      borderRadius: BorderRadius.circular(KasySpacing.sm),
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: pickTime,
-        borderRadius: BorderRadius.circular(KasySpacing.sm),
-        child: Container(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.md,
-            vertical: KasySpacing.smd,
-          ),
-          decoration: BoxDecoration(
-            color: context.colors.surface,
-            borderRadius: BorderRadius.circular(KasySpacing.sm),
-          ),
-          child: Row(
-            children: [
-              Icon(KasyIcons.time, color: context.colors.primary),
-              const SizedBox(width: KasySpacing.sm),
-              Text(
-                '${_pad(hour)}:${_pad(minute)}',
-                style: context.textTheme.headlineMedium?.copyWith(
-                  color: context.colors.onSurface,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-              const Spacer(),
-              Icon(
-                KasyIcons.arrowForwardIos,
-                size: KasyIconSize.xs,
-                color: context.colors.muted,
-              ),
-            ],
-          ),
-        ),
+    return Text(
+      label,
+      style: context.kasyTextTheme.sectionLabel.copyWith(
+        color: context.colors.muted,
       ),
     );
   }
@@ -217,12 +196,12 @@ class _DaySelector extends StatelessWidget {
     final days = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
     return Wrap(
       spacing: KasySpacing.xs,
+      runSpacing: KasySpacing.xs,
       children: List.generate(7, (i) {
         final dayIndex = i + 1;
-        final selected = current == dayIndex;
-        return ChoiceChip(
-          label: Text(days[i]),
-          selected: selected,
+        return KasyChip(
+          label: days[i],
+          selected: current == dayIndex,
           onSelected: (_) => onChanged(dayIndex),
         );
       }),
@@ -230,82 +209,64 @@ class _DaySelector extends StatelessWidget {
   }
 }
 
-class _DateTile extends StatelessWidget {
-  final DateTime? date;
-  final ValueChanged<DateTime> onChanged;
+/// A tappable field that opens the time picker. Built on [KasyCard] so it
+/// inherits the design-system surface, press depth and keyboard focus ring.
+class _TimeTile extends StatelessWidget {
+  final int hour;
+  final int minute;
+  final void Function(int hour, int minute) onChanged;
 
-  const _DateTile({required this.date, required this.onChanged});
+  const _TimeTile({
+    required this.hour,
+    required this.minute,
+    required this.onChanged,
+  });
+
+  String _pad(int v) => v.toString().padLeft(2, '0');
 
   @override
   Widget build(BuildContext context) {
-    final label = date != null
-        ? '${date!.day.toString().padLeft(2, '0')}/${date!.month.toString().padLeft(2, '0')}/${date!.year}  ${date!.hour.toString().padLeft(2, '0')}:${date!.minute.toString().padLeft(2, '0')}'
-        : Translations.of(context).reminderPage.selectDate;
-
-    Future<void> pickDateTime() async {
-      final now = DateTime.now();
-      final pickedDate = await showDatePicker(
-        context: context,
-        initialDate: date ?? now,
-        firstDate: now,
-        lastDate: now.add(const Duration(days: 365)),
-      );
-      if (pickedDate == null || !context.mounted) return;
-      final pickedTime = await showTimePicker(
+    Future<void> pickTime() async {
+      final picked = await showTimePicker(
         context: context,
-        initialTime: TimeOfDay(
-          hour: date?.hour ?? 9,
-          minute: date?.minute ?? 0,
-        ),
-      );
-      if (pickedTime == null) return;
-      onChanged(
-        DateTime(
-          pickedDate.year,
-          pickedDate.month,
-          pickedDate.day,
-          pickedTime.hour,
-          pickedTime.minute,
-        ),
+        initialTime: TimeOfDay(hour: hour, minute: minute),
       );
+      if (picked != null) {
+        onChanged(picked.hour, picked.minute);
+      }
     }
 
-    return KasyFocusRing(
-      onActivate: pickDateTime,
-      borderRadius: BorderRadius.circular(KasySpacing.sm),
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: pickDateTime,
-        borderRadius: BorderRadius.circular(KasySpacing.sm),
-        child: Container(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.md,
-            vertical: KasySpacing.smd,
+    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,
           ),
-          decoration: BoxDecoration(
-            color: context.colors.surface,
-            borderRadius: BorderRadius.circular(KasySpacing.sm),
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            '${_pad(hour)}:${_pad(minute)}',
+            style: context.textTheme.bodyLarge?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w600,
+            ),
           ),
-          child: Row(
-            children: [
-              Icon(KasyIcons.calendar, color: context.colors.primary),
-              const SizedBox(width: KasySpacing.sm),
-              Text(
-                label,
-                style: context.textTheme.bodyLarge?.copyWith(
-                  color: context.colors.onSurface,
-                ),
-              ),
-              const Spacer(),
-              Icon(
-                KasyIcons.arrowForwardIos,
-                size: KasyIconSize.xs,
-                color: context.colors.muted,
-              ),
-            ],
+          const Spacer(),
+          Icon(
+            KasyIcons.arrowForwardIos,
+            size: KasyIconSize.xs,
+            color: context.colors.muted,
           ),
-        ),
+        ],
       ),
     );
   }
 }
+

package/templates/firebase/lib/features/notifications/providers/notifications_provider.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification_list.dart';
+import 'package:kasy_kit/features/notifications/providers/unread_notifications_count_provider.dart';
 import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
 import 'package:logger/logger.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
@@ -62,6 +63,10 @@ class NotificationsNotifier extends _$NotificationsNotifier {
           data: [...updatedNotifications, ...seenNotifications],
         ),
       );
+      // The bottom-bar unread badge reads from a separate, polled source. Nudge
+      // it to re-check now so it drops as soon as we mark these read, instead of
+      // lagging until the next poll cycle.
+      ref.invalidate(unreadNotificationsCountProvider);
     } catch (e) {
       Logger().e("error $e");
     }
@@ -82,6 +87,9 @@ class NotificationsNotifier extends _$NotificationsNotifier {
     );
     try {
       await notificationRepository.delete(userId, notification);
+      // Deleting an unread notification changes the unread count: refresh the
+      // badge source now rather than waiting for its next poll.
+      ref.invalidate(unreadNotificationsCountProvider);
     } catch (e) {
       Logger().e("delete error $e");
       state = AsyncValue.data(previous);
@@ -102,6 +110,8 @@ class NotificationsNotifier extends _$NotificationsNotifier {
       await Future.wait(
         previous.data.map((n) => notificationRepository.delete(userId, n)),
       );
+      // Clearing the list zeroes the unread count: refresh the badge now.
+      ref.invalidate(unreadNotificationsCountProvider);
     } catch (e) {
       Logger().e("deleteAll error $e");
       state = AsyncValue.data(previous);

package/templates/firebase/lib/features/notifications/ui/components/notification_settings_sheet.dart

@@ -121,8 +121,8 @@ class _NotificationSettingsSheetState
                   title: tr.push_title,
                   value: _isEnabled,
                   iconBackgroundColor: _isEnabled
-                      ? const Color(0xFFFF6B35)
-                      : const Color(0xFF78909C),
+                      ? const Color(0xFFFF6B35) // design-check: ignore — category accent
+                      : const Color(0xFF78909C), // design-check: ignore — category accent
                   onChanged: _toggling ? (_) {} : _onToggle,
                 ),
                 // subtitle below

package/templates/firebase/lib/features/notifications/ui/components/notification_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
@@ -31,15 +32,27 @@ class NotificationTileComponent extends StatelessWidget {
       ],
       delay: index < 6 ? Duration(milliseconds: 60 * index) : Duration.zero,
       onComplete: (controller) => controller.stop(),
-      child: KasyHover(
-        onTap: () => onTap?.call(notification),
-        borderRadius: KasyRadius.smBorderRadius,
-        focusable: true,
+      // Card surface (elevated, radius 16, hairline border + soft shadow) to
+      // match the Settings card; the hover/press feedback and keyboard focus
+      // ring live inside on the surface, exactly like a Settings row.
+      child: KasyCard(
         margin: const EdgeInsets.only(top: KasySpacing.sm),
-        child: NotificationTile.from(
-          key: ValueKey('notification_${notification.id}'),
-          context,
-          notification,
+        borderRadius: KasyRadius.lgBorderRadius,
+        padding: EdgeInsets.zero,
+        child: KasyHover(
+          onTap: () => onTap?.call(notification),
+          borderRadius: KasyRadius.lgBorderRadius,
+          focusable: true,
+          focusGapColor: context.colors.surface,
+          padding: const EdgeInsets.symmetric(
+            horizontal: KasySpacing.md,
+            vertical: KasySpacing.smd,
+          ),
+          child: NotificationTile.from(
+            key: ValueKey('notification_${notification.id}'),
+            context,
+            notification,
+          ),
         ),
       ),
     );

package/templates/firebase/lib/features/notifications/ui/components/push_notification_switcher.dart

@@ -72,8 +72,8 @@ class _PushNotificationSwitcherState
             title: tr.push_title,
             value: _isEnabled,
             iconBackgroundColor: _isEnabled
-                ? const Color(0xFFFF6B35)
-                : const Color(0xFF78909C),
+                ? const Color(0xFFFF6B35) // design-check: ignore — category accent
+                : const Color(0xFF78909C), // design-check: ignore — category accent
             onChanged: _loading ? (_) {} : _onChanged,
           ),
           Padding(

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

@@ -257,11 +257,10 @@ class _GroupLabel extends StatelessWidget {
       ),
       child: Text(
         label.toUpperCase(),
-        style: context.textTheme.labelSmall?.copyWith(
-          fontSize: 11,
+        // Design-system section-eyebrow role (same as Settings' section labels),
+        // instead of a bespoke 11/w700 style.
+        style: context.kasyTextTheme.sectionLabel.copyWith(
           color: context.colors.muted,
-          letterSpacing: 1.4,
-          fontWeight: FontWeight.w700,
         ),
       ),
     );