kasy-cli 1.34.0 → 1.35.0

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

@@ -1,3 +1,4 @@
+import 'package:bart/bart/bart_model.dart';
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -82,6 +83,10 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
             label: 'Subpage Actions',
             builder: _buildAppBarSubpageActionsVariant,
           ),
+          ComponentPreviewVariant(
+            label: 'Menu opens sidebar',
+            builder: _buildAppBarMenuVariant,
+          ),
         ],
       );
     case 'Web Header':
@@ -705,6 +710,96 @@ class _SidebarPreview extends StatelessWidget {
   }
 }
 
+/// A [KasySidebar] wired to the live Home configuration (real pages) with
+/// highlight-only navigation, so the showcase mirrors the actual app. Shared by
+/// the sidebar previews and the app-bar drawer demo.
+class _DemoSidebar extends StatefulWidget {
+  const _DemoSidebar({this.isDrawer = false});
+
+  final bool isDrawer;
+
+  @override
+  State<_DemoSidebar> createState() => _DemoSidebarState();
+}
+
+class _DemoSidebarState extends State<_DemoSidebar> {
+  final ValueNotifier<int> _current = ValueNotifier<int>(0);
+
+  // The same four tabs the live app wires into the sidebar (Home / Support /
+  // Notifications / Settings); pages are stubs since this is a visual demo.
+  late final List<BartMenuRoute> _routes = <BartMenuRoute>[
+    BartMenuRoute.bottomBar(
+        label: 'Home', icon: KasyIcons.home, path: 'home', pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Support',
+        icon: KasyIcons.help,
+        path: 'support',
+        pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Notifications',
+        icon: KasyIcons.notification,
+        path: 'notifications',
+        pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Settings',
+        icon: KasyIcons.settings,
+        path: 'settings',
+        pageBuilder: _stub),
+  ];
+
+  static Widget _stub(BuildContext _, BuildContext _, RouteSettings? _) =>
+      const SizedBox.shrink();
+
+  @override
+  void dispose() {
+    _current.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return KasySidebar(
+      routes: _routes,
+      currentItem: _current,
+      onTapItem: (i) => _current.value = i, // highlight only
+      isDrawer: widget.isDrawer,
+    );
+  }
+}
+
+/// Slides [child] in as a full-height drawer from the left ([fromEnd] = right),
+/// over a dim barrier — the mobile navigation-drawer pattern.
+void _openSidebarDrawer(
+  BuildContext context, {
+  required bool fromEnd,
+  required Widget child,
+}) {
+  showGeneralDialog<void>(
+    context: context,
+    barrierDismissible: true,
+    barrierLabel: 'Dismiss',
+    barrierColor: Colors.black.withValues(alpha: 0.42),
+    transitionDuration: const Duration(milliseconds: 290),
+    pageBuilder: (ctx, anim, secAnim) => Align(
+      alignment: fromEnd ? Alignment.centerRight : Alignment.centerLeft,
+      child: SizedBox(height: double.infinity, child: child),
+    ),
+    transitionBuilder: (ctx, anim, secAnim, c) {
+      final curved = CurvedAnimation(parent: anim, curve: Curves.easeOutCubic);
+      return SlideTransition(
+        position: Tween<Offset>(
+          begin: Offset(fromEnd ? 1.0 : -1.0, 0),
+          end: Offset.zero,
+        ).animate(curved),
+        child: FadeTransition(
+          opacity: Tween<double>(begin: 0.85, end: 1.0).animate(curved),
+          child: c,
+        ),
+      );
+    },
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
 // Tabs — interactive demos
@@ -1781,6 +1876,13 @@ Widget _buildAppBarSubpageActionsVariant(BuildContext context) {
   return const _AppBarPreview(variant: KasyAppBarStyle.subpageActions);
 }
 
+Widget _buildAppBarMenuVariant(BuildContext context) {
+  return const _AppBarPreview(
+    variant: KasyAppBarStyle.rootTab,
+    withMenu: true,
+  );
+}
+
 Widget _buildWebHeaderDefaultVariant(BuildContext context) {
   return const _WebHeaderPreview();
 }
@@ -3340,7 +3442,6 @@ class _ToastVariantsPreview extends StatelessWidget {
             title: 'Join a team',
             message:
                 'You have been invited to join the team!',
-            icon: _logoChip(context),
           ),
         ),
         const SizedBox(height: KasySpacing.sm),
@@ -3413,16 +3514,6 @@ class _ToastVariantsPreview extends StatelessWidget {
       ),
     );
   }
-
-  Widget _logoChip(BuildContext context) => Container(
-        width: 26,
-        height: 26,
-        decoration: BoxDecoration(
-          color: context.colors.onSurface,
-          borderRadius: BorderRadius.circular(KasyRadius.xs),
-        ),
-        child: Icon(KasyIcons.widgets, size: 15, color: context.colors.surface),
-      );
 }
 
 // — Toast: static cards preview (all 5 tones, close buttons functional) —
@@ -3437,29 +3528,16 @@ class _ToastStaticPreview extends StatefulWidget {
 class _ToastStaticPreviewState extends State<_ToastStaticPreview> {
   final Set<int> _dismissed = {};
 
-  Widget _logoChip() => Builder(
-        builder: (ctx) => Container(
-          width: 26,
-          height: 26,
-          decoration: BoxDecoration(
-            color: ctx.colors.onSurface,
-            borderRadius: BorderRadius.circular(KasyRadius.xs),
-          ),
-          child:
-              Icon(KasyIcons.widgets, size: 15, color: ctx.colors.surface),
-        ),
-      );
-
   @override
   Widget build(BuildContext context) {
     final items = <(int, KasyToast)>[
       (
         0,
+        // Default (neutral) tone renders the app brand logo automatically.
         KasyToast(
           title: 'Join a team',
           message:
               'You have been invited to join the team!',
-          icon: _logoChip(),
           onClose: () => setState(() => _dismissed.add(0)),
         ),
       ),
@@ -3901,7 +3979,11 @@ class _DesktopMockContent extends StatelessWidget {
 class _AppBarPreview extends StatelessWidget {
   final KasyAppBarStyle variant;
 
-  const _AppBarPreview({required this.variant});
+  /// Shows a hamburger leading that opens a [KasySidebar] drawer from the left —
+  /// the mobile "menu opens navigation" pattern.
+  final bool withMenu;
+
+  const _AppBarPreview({required this.variant, this.withMenu = false});
 
   @override
   Widget build(BuildContext context) {
@@ -3913,6 +3995,20 @@ class _AppBarPreview extends StatelessWidget {
       tooltip: 'More',
       onPressed: () {},
     );
+    final Widget? leading = withMenu
+        ? KasyChromeOrbIconButton(
+            icon: KasyIcons.menu,
+            iconSize: 20,
+            foregroundColor: context.colors.onSurface,
+            fillColor: kasyChromeOrbFillColor(context),
+            tooltip: 'Menu',
+            onPressed: () => _openSidebarDrawer(
+              context,
+              fromEnd: false,
+              child: const _DemoSidebar(isDrawer: true),
+            ),
+          )
+        : null;
     final KasyColors c = context.colors;
     // KasyAppBar hides itself at desktop width; the preview must always show it,
     // so pin a phone-sized MediaQuery just for the bar's own width check.
@@ -3941,9 +4037,10 @@ class _AppBarPreview extends StatelessWidget {
                   right: 0,
                   child: KasyAppBar(
                     useSafeArea: false,
-                    title: 'Preview',
+                    title: withMenu ? 'Home' : 'Preview',
                     style: variant,
                     onBack: () {},
+                    leading: leading,
                     trailing: variant == KasyAppBarStyle.subpageActions
                         ? trailing
                         : null,
@@ -7625,15 +7722,15 @@ class _RealCardContent extends StatelessWidget {
                     children: [
                       Text(
                         'Alex Johnson',
-                        style: TextStyle(
-                          fontSize: 14,
-                          fontWeight: FontWeight.w600,
+                        style: context.kasyTextTheme.cardTitle.copyWith(
                           color: c.onSurface,
                         ),
                       ),
                       Text(
                         '@alexjohnson · 2h ago',
-                        style: TextStyle(fontSize: 12, color: c.muted),
+                        style: context.kasyTextTheme.cardSubtitle.copyWith(
+                          color: c.muted,
+                        ),
                       ),
                     ],
                   ),
@@ -7682,8 +7779,7 @@ class _RealCardContent extends StatelessWidget {
               'Golden hour light made every single step worth it.',
               maxLines: 3,
               overflow: TextOverflow.ellipsis,
-              style: TextStyle(
-                fontSize: 13,
+              style: context.textTheme.bodySmall?.copyWith(
                 color: c.onSurface,
                 height: 1.5,
               ),
@@ -7748,9 +7844,7 @@ class _SkeletonControls extends StatelessWidget {
             // Label
             Text(
               'Animation',
-              style: TextStyle(
-                fontSize: 12,
-                fontWeight: FontWeight.w600,
+              style: context.kasyTextTheme.sectionLabel.copyWith(
                 color: c.muted,
                 letterSpacing: 0.4,
               ),
@@ -7815,7 +7909,9 @@ class _SkeletonControls extends StatelessWidget {
                       ),
                       Text(
                         'Toggle skeleton loading state',
-                        style: TextStyle(fontSize: 11, color: c.muted),
+                        style: context.kasyTextTheme.caption.copyWith(
+                          color: c.muted,
+                        ),
                       ),
                     ],
                   ),
@@ -7965,15 +8061,15 @@ class _SkeletonListPreviewState extends State<_SkeletonListPreview> {
                         children: [
                           Text(
                             item.title,
-                            style: TextStyle(
-                              fontSize: 14,
-                              fontWeight: FontWeight.w600,
+                            style: context.kasyTextTheme.rowTitle.copyWith(
                               color: c.onSurface,
                             ),
                           ),
                           Text(
                             item.subtitle,
-                            style: TextStyle(fontSize: 12, color: c.muted),
+                            style: context.kasyTextTheme.cardSubtitle.copyWith(
+                              color: c.muted,
+                            ),
                           ),
                         ],
                       ),
@@ -8118,8 +8214,7 @@ class _SkeletonTextPreviewState extends State<_SkeletonTextPreview> {
   Widget _buildRealText(BuildContext context) {
     return Text(
       _kParagraph,
-      style: TextStyle(
-        fontSize: 16,
+      style: context.textTheme.bodyLarge?.copyWith(
         height: 1.6,
         color: context.colors.onSurface,
       ),
@@ -8224,9 +8319,7 @@ class _SkeletonProfilePreviewState extends State<_SkeletonProfilePreview> {
         // Name
         Text(
           'Alex Johnson',
-          style: TextStyle(
-            fontSize: 20,
-            fontWeight: FontWeight.w700,
+          style: context.textTheme.headlineSmall?.copyWith(
             color: c.onSurface,
           ),
         ),
@@ -8234,14 +8327,19 @@ class _SkeletonProfilePreviewState extends State<_SkeletonProfilePreview> {
         // Handle
         Text(
           '@alexjohnson',
-          style: TextStyle(fontSize: 13, color: c.muted),
+          style: context.kasyTextTheme.cardSubtitle.copyWith(
+            color: c.muted,
+          ),
         ),
         const SizedBox(height: KasySpacing.smd),
         // Bio
         Text(
           'Product designer & outdoor enthusiast. Building tools that help people do more with less.',
           textAlign: TextAlign.center,
-          style: TextStyle(fontSize: 13, color: c.onSurface, height: 1.5),
+          style: context.textTheme.bodySmall?.copyWith(
+            color: c.onSurface,
+            height: 1.5,
+          ),
         ),
         const SizedBox(height: KasySpacing.md),
         // Stats row
@@ -8295,15 +8393,15 @@ class _StatCell extends StatelessWidget {
         children: [
           Text(
             value,
-            style: TextStyle(
-              fontSize: 17,
-              fontWeight: FontWeight.w700,
+            style: context.textTheme.titleMedium?.copyWith(
               color: c.onSurface,
             ),
           ),
           Text(
             label,
-            style: TextStyle(fontSize: 11, color: c.muted),
+            style: context.kasyTextTheme.caption.copyWith(
+              color: c.muted,
+            ),
           ),
         ],
       ),
@@ -8529,9 +8627,7 @@ class _SkeletonGridPreviewState extends State<_SkeletonGridPreview> {
                   children: [
                     Text(
                       item.title,
-                      style: TextStyle(
-                        fontSize: 13,
-                        fontWeight: FontWeight.w600,
+                      style: context.kasyTextTheme.cardTitle.copyWith(
                         color: c.onSurface,
                       ),
                       maxLines: 1,
@@ -8540,7 +8636,9 @@ class _SkeletonGridPreviewState extends State<_SkeletonGridPreview> {
                     const SizedBox(height: 2),
                     Text(
                       item.subtitle,
-                      style: TextStyle(fontSize: 11, color: c.muted),
+                      style: context.kasyTextTheme.cardSubtitle.copyWith(
+                        color: c.muted,
+                      ),
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                     ),

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

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/states/components/maybe_ask_rating.dart';
+import 'package:kasy_kit/core/states/components/maybe_show_update_available.dart';
 import 'package:kasy_kit/core/states/components/maybe_show_update_bottom_sheet.dart';
 import 'package:kasy_kit/core/states/components/maybeshow_component.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -21,6 +22,9 @@ class HomePage extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return ConditionalWidgetsEvents(
       eventWidgets: [
+        // A required/optional store update pre-empts every other start-up
+        // prompt — if the user is behind, fix that before anything else.
+        MaybeShowUpdateAvailable(),
         MaybeAskForReview(),
         MaybeAskForRating(),
         MaybeShowPremiumPage(),

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

@@ -64,10 +64,13 @@ class _ReminderForm extends ConsumerWidget {
       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(
-            KasySpacing.pageHorizontalGutter,
+            0,
             KasySpacing.belowChromeContentGap,
-            KasySpacing.pageHorizontalGutter,
+            0,
             KasySpacing.xl,
           ),
           child: Column(
@@ -174,7 +177,9 @@ class _FieldLabel extends StatelessWidget {
   Widget build(BuildContext context) {
     return Text(
       label,
-      style: KasyTextTheme.sectionLabel.copyWith(color: context.colors.muted),
+      style: context.kasyTextTheme.sectionLabel.copyWith(
+        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/notifications_page.dart

@@ -259,7 +259,9 @@ class _GroupLabel extends StatelessWidget {
         label.toUpperCase(),
         // Design-system section-eyebrow role (same as Settings' section labels),
         // instead of a bespoke 11/w700 style.
-        style: KasyTextTheme.sectionLabel.copyWith(color: context.colors.muted),
+        style: context.kasyTextTheme.sectionLabel.copyWith(
+          color: context.colors.muted,
+        ),
       ),
     );
   }

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

@@ -59,7 +59,9 @@ class NotificationTile extends StatelessWidget {
     date: date,
     title: title,
     description: description,
-    titleColor: context.colors.onSurface,
+    // Unread notifications carry the brand primary on the title so they read
+    // as the active, attention-worthy item (the read variant stays muted).
+    titleColor: context.colors.primary,
     descriptionColor: context.colors.onSurface,
     dateColor: context.colors.muted,
     onTap: onTap,
@@ -82,7 +84,10 @@ class NotificationTile extends StatelessWidget {
     date: date,
     title: title,
     description: description,
-    titleColor: context.colors.onSurface.withValues(alpha: 0.55),
+    // Read notifications keep a full-strength, bold title (it just loses the
+    // primary colour and the unread dot); only the description is muted, so the
+    // title still reads as bold instead of washed out.
+    titleColor: context.colors.onSurface,
     descriptionColor: context.colors.onSurface.withValues(alpha: 0.45),
     dateColor: context.colors.muted,
     onTap: onTap,
@@ -134,7 +139,7 @@ class NotificationTile extends StatelessWidget {
                       title,
                       style: context.textTheme.titleSmall?.copyWith(
                         color: titleColor,
-                        fontWeight: FontWeight.w700,
+                        fontWeight: FontWeight.w600,
                       ),
                       overflow: TextOverflow.ellipsis,
                       maxLines: 1,

package/templates/firebase/lib/features/onboarding/providers/onboarding_model.dart

@@ -1,15 +1,26 @@
+import 'package:kasy_kit/features/onboarding/models/user_info.dart';
+
 class OnboardingState {
   DateTime? reminder;
 
+  /// Answers collected before the anonymous account exists. The account is now
+  /// created lazily at the end of onboarding (the loader screen), so the
+  /// question screens have no user id to write to yet — we buffer the answers
+  /// here and flush them once the account is created.
+  final List<UserInfoDetail> pendingUserInfo;
+
   OnboardingState({
     this.reminder,
+    this.pendingUserInfo = const [],
   });
 
   OnboardingState copyWith({
     DateTime? reminder,
+    List<UserInfoDetail>? pendingUserInfo,
   }) {
     return OnboardingState(
       reminder: reminder ?? this.reminder,
+      pendingUserInfo: pendingUserInfo ?? this.pendingUserInfo,
     );
   }
 }

package/templates/firebase/lib/features/onboarding/providers/onboarding_provider.dart

@@ -31,8 +31,18 @@ class OnboardingNotifier extends _$OnboardingNotifier {
 
   Future<void> onAnsweredQuestion(UserInfoDetail value) async {
     final userId = ref.read(userStateNotifierProvider).user.idOrNull;
-    if (userId == null) return; // Guest: no account yet, skip Firestore write
-    await ref.read(userInfosRepositoryProvider).save(userId, value);
+    if (userId != null) {
+      // Account already exists (e.g. a returning guest re-onboarding): save now.
+      await ref.read(userInfosRepositoryProvider).save(userId, value);
+      return;
+    }
+    // No account yet — it's created at the end of onboarding. Buffer the answer
+    // (replacing any previous answer of the same kind) so it isn't lost; it's
+    // flushed in [onOnboardingCompleted] once the account exists.
+    final others = state.pendingUserInfo
+        .where((info) => info.runtimeType != value.runtimeType)
+        .toList();
+    state = state.copyWith(pendingUserInfo: [...others, value]);
   }
 
   Future<void> setupNotifications() async {
@@ -66,7 +76,24 @@ class OnboardingNotifier extends _$OnboardingNotifier {
   Future<void> onOnboardingCompleted() async {
     final userStateNotifier = ref.read(userStateNotifierProvider.notifier);
 
-    await userStateNotifier.onOnboarded();
+    // This is the "preparing everything for you" moment (the loader screen):
+    // the only place the anonymous guest account gets created. Doing it here —
+    // instead of eagerly on app start — means a fresh anonymous account is born
+    // only when the user actually commits to using the app.
+    await userStateNotifier.continueAsGuest();
+
+    // Now that the account exists, flush the answers collected during the
+    // questions (gender, age, …) that had nowhere to go before.
+    final userId = ref.read(userStateNotifierProvider).user.idOrNull;
+    final pending = state.pendingUserInfo;
+    if (userId != null && pending.isNotEmpty) {
+      final repository = ref.read(userInfosRepositoryProvider);
+      for (final info in pending) {
+        await repository.save(userId, info);
+      }
+      state = state.copyWith(pendingUserInfo: const []);
+    }
+
     await userStateNotifier.refresh();
   }
 

package/templates/firebase/lib/features/onboarding/ui/components/onboarding_loader.dart

@@ -20,10 +20,19 @@ class _OnboardingJournalLoaderState extends ConsumerState<OnboardingLoader> {
   @override
   void initState() {
     super.initState();
-    Future.delayed(const Duration(milliseconds: 3500), () async {
-      await ref.onboardingNotifier.onOnboardingCompleted();
-      widget.onCompleted();
-    });
+    _prepare();
+  }
+
+  Future<void> _prepare() async {
+    // Run the real work (which now lazily creates the guest account) while the
+    // loader animation plays, so its network latency is hidden under the
+    // minimum display time instead of being added on top of it.
+    await Future.wait([
+      ref.onboardingNotifier.onOnboardingCompleted(),
+      Future<void>.delayed(const Duration(milliseconds: 3500)),
+    ]);
+    if (!mounted) return;
+    widget.onCompleted();
   }
 
   @override