kasy-cli 1.32.0 → 1.35.0

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

@@ -9,8 +9,13 @@ import 'package:kasy_kit/features/notifications/providers/models/notification.da
 typedef OnTapNotification = void Function(app.Notification notification);
 
 /// A tile for the [NotificationsPage] widget.
-class NotificationTile extends StatefulWidget {
-  final double bgOpacity;
+///
+/// Renders only the row content (icon + title / body / date + unread dot). The
+/// card surface (elevated [KasyCard]) and the tap/hover feedback live in
+/// [NotificationTileComponent], so a notification reads exactly like a Settings
+/// card. Unread vs read is signalled by the trailing dot and text strength, not
+/// by a tinted background.
+class NotificationTile extends StatelessWidget {
   final double titleOpacity;
   final Color titleColor;
   final Color descriptionColor;
@@ -24,7 +29,6 @@ class NotificationTile extends StatefulWidget {
 
   const NotificationTile({
     super.key,
-    required this.bgOpacity,
     required this.titleOpacity,
     required this.icon,
     required this.date,
@@ -47,7 +51,6 @@ class NotificationTile extends StatefulWidget {
     Key? key,
   }) => NotificationTile(
     key: key,
-    bgOpacity: .08,
     titleOpacity: 1,
     showUnreadDot: true,
     icon: imageUrl != null
@@ -56,7 +59,9 @@ class NotificationTile extends StatefulWidget {
     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,
@@ -72,7 +77,6 @@ class NotificationTile extends StatefulWidget {
     Key? key,
   }) => NotificationTile(
     key: key,
-    bgOpacity: 0,
     titleOpacity: .6,
     icon: imageUrl != null
         ? TileNotificationImage(url: imageUrl)
@@ -80,7 +84,10 @@ class NotificationTile extends StatefulWidget {
     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,
@@ -111,124 +118,66 @@ class NotificationTile extends StatefulWidget {
           onTap: onTap,
         );
 
-  @override
-  State<NotificationTile> createState() => _NotificationTileState();
-}
-
-class _NotificationTileState extends State<NotificationTile>
-    with SingleTickerProviderStateMixin {
-  late final AnimationController _controller;
-  late Animation<double> _opacityAnimation;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = AnimationController(
-      duration: const Duration(milliseconds: 500),
-      vsync: this,
-    );
-    _opacityAnimation = Tween(
-      begin: 0.0,
-      end: widget.bgOpacity,
-    ).animate(CurvedAnimation(parent: _controller, curve: Curves.decelerate));
-    _controller.forward();
-  }
-
-  @override
-  void didUpdateWidget(covariant NotificationTile oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.bgOpacity != widget.bgOpacity) {
-      _opacityAnimation = Tween(
-        begin: oldWidget.bgOpacity,
-        end: widget.bgOpacity,
-      ).animate(CurvedAnimation(parent: _controller, curve: Curves.ease));
-      _controller.forward(from: 0);
-    }
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return AnimatedBuilder(
-      animation: _controller,
-      builder: (context, child) {
-        return Container(
-          decoration: BoxDecoration(
-            color: context.colors.primary.withValues(
-              alpha: _opacityAnimation.value,
-            ),
-            borderRadius: KasyRadius.smBorderRadius,
-          ),
-          padding: const EdgeInsets.all(KasySpacing.md),
-          child: child,
-        );
-      },
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          widget.icon,
-          const SizedBox(width: KasySpacing.smd),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Flexible(
-                  flex: 0,
-                  child: Text(
-                    widget.title,
-                    style: context.textTheme.labelLarge?.copyWith(
-                      color: widget.titleColor,
-                    ),
-                    overflow: TextOverflow.clip,
-                    maxLines: 2,
-                  ),
-                ),
-                const SizedBox(height: KasySpacing.xs),
-                Flexible(
-                  flex: 0,
-                  child: Text(
-                    widget.description,
-                    style: context.textTheme.bodyMedium?.copyWith(
-                      color: widget.descriptionColor,
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        icon,
+        const SizedBox(width: KasySpacing.sm),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Headline row: bold title on the left, timestamp (and the
+              // unread dot) pinned to the right — the compact, professional
+              // notification layout (Linear / Gmail).
+              Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      title,
+                      style: context.textTheme.titleSmall?.copyWith(
+                        color: titleColor,
+                        fontWeight: FontWeight.w600,
+                      ),
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
                     ),
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 3,
                   ),
-                ),
-                const SizedBox(height: KasySpacing.smd),
-                Flexible(
-                  flex: 0,
-                  child: Text(
-                    Jiffy.parseFromDateTime(widget.date).fromNow(),
+                  const SizedBox(width: KasySpacing.sm),
+                  Text(
+                    Jiffy.parseFromDateTime(date).fromNow(),
                     style: context.textTheme.bodySmall?.copyWith(
-                      color: widget.dateColor,
+                      color: dateColor,
                     ),
                   ),
+                  if (showUnreadDot) ...[
+                    const SizedBox(width: KasySpacing.sm),
+                    Container(
+                      width: 6,
+                      height: 6,
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: context.colors.primary,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+              const SizedBox(height: KasySpacing.xs),
+              Text(
+                description,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: descriptionColor,
                 ),
-              ],
-            ),
-          ),
-          if (widget.showUnreadDot) ...[
-            const SizedBox(width: KasySpacing.sm),
-            Padding(
-              padding: const EdgeInsets.only(top: 3),
-              child: Container(
-                width: 8,
-                height: 8,
-                decoration: BoxDecoration(
-                  shape: BoxShape.circle,
-                  color: context.colors.primary,
-                ),
+                overflow: TextOverflow.ellipsis,
+                maxLines: 2,
               ),
-            ),
-          ],
-        ],
-      ),
+            ],
+          ),
+        ),
+      ],
     );
   }
 }
@@ -269,8 +218,8 @@ class TileNotificationImage extends StatelessWidget {
           borderRadius: BorderRadius.circular(8),
           child: Image.network(
             url,
-            width: 48,
-            height: 48,
+            width: 36,
+            height: 36,
             fit: BoxFit.cover,
             errorBuilder: (context, error, stack) =>
                 const TileNotificationIcon(active: false),
@@ -297,8 +246,8 @@ class TileNotificationIcon extends StatelessWidget {
         ? context.colors.primary
         : context.colors.onSurface.withValues(alpha: 0.35);
     return Container(
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       decoration: BoxDecoration(
         color: active
             ? context.colors.primary.withValues(alpha: 0.12)
@@ -307,7 +256,7 @@ class TileNotificationIcon extends StatelessWidget {
       ),
       child: Icon(
         active ? KasyIcons.notificationActive : KasyIcons.notification,
-        size: KasyIconSize.lg,
+        size: KasyIconSize.sm,
         color: color,
       ),
     );
@@ -326,27 +275,34 @@ class NotificationSkeletonTile extends StatelessWidget {
       padding: EdgeInsets.only(top: KasySpacing.sm),
       child: KasySkeletonGroup(
         child: Padding(
-          padding: EdgeInsets.all(KasySpacing.md),
+          padding: EdgeInsets.symmetric(
+            horizontal: KasySpacing.md,
+            vertical: KasySpacing.smd,
+          ),
           child: Row(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               KasySkeleton(
-                width: 40,
-                height: 40,
+                width: 36,
+                height: 36,
                 borderRadius: BorderRadius.all(Radius.circular(10)),
               ),
-              SizedBox(width: KasySpacing.smd),
+              SizedBox(width: KasySpacing.sm),
               Expanded(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    KasySkeleton(width: 150, height: 13),
+                    Row(
+                      children: [
+                        Expanded(child: KasySkeleton(width: 150, height: 13)),
+                        SizedBox(width: KasySpacing.sm),
+                        KasySkeleton(width: 44, height: 10),
+                      ],
+                    ),
                     SizedBox(height: KasySpacing.sm),
                     KasySkeleton(width: double.infinity, height: 11),
                     SizedBox(height: KasySpacing.xs),
                     KasySkeleton(width: 210, height: 11),
-                    SizedBox(height: KasySpacing.smd),
-                    KasySkeleton(width: 70, height: 10),
                   ],
                 ),
               ),

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

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart

@@ -93,12 +93,11 @@ class OnboardingIllustrationScaffold extends StatelessWidget {
                 child: Text(
                   title,
                   textAlign: TextAlign.start,
+                  // Design-system page-title scale (headlineMedium = 24/w700).
+                  // Previously bumped to 28 with custom tracking, which read as
+                  // oversized next to the rest of the app.
                   style: context.textTheme.headlineMedium?.copyWith(
                     color: colors.onBackground,
-                    fontSize: 28,
-                    fontWeight: FontWeight.w700,
-                    letterSpacing: -0.3,
-                    height: 1.2,
                   ),
                 ),
               ),

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_radio_question.dart

@@ -71,12 +71,10 @@ class _OnboardingRadioQuestionState
             child: Text(
               widget.title,
               textAlign: TextAlign.start,
+              // Design-system page-title scale (headlineMedium = 24/w700),
+              // matching the illustration steps instead of a bespoke 26px size.
               style: context.textTheme.headlineMedium?.copyWith(
                 color: context.colors.onBackground,
-                fontSize: 26,
-                fontWeight: FontWeight.w700,
-                letterSpacing: -0.2,
-                height: 1.2,
               ),
             ),
           ),

package/templates/firebase/lib/features/onboarding/ui/widgets/selectable_row_tile.dart

@@ -283,7 +283,8 @@ class _SelectableRowTileState extends State<SelectableRowTile>
                 padding: const EdgeInsets.only(right: KasySpacing.md),
                 child: Text(
                   widget.emoj!,
-                  style: context.textTheme.titleMedium?.copyWith(fontSize: 28),
+                  style: context.textTheme.titleMedium
+                      ?.copyWith(fontSize: 28), // design-check: ignore — emoji glyph
                 ),
               ),
             ),