kasy-cli 1.31.14 → 1.34.0

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

@@ -1,6 +1,6 @@
-import 'package:better_skeleton/better_skeleton.dart';
 import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
+import 'package:kasy_kit/components/kasy_skeleton.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.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
@@ -72,7 +75,6 @@ class NotificationTile extends StatefulWidget {
     Key? key,
   }) => NotificationTile(
     key: key,
-    bgOpacity: 0,
     titleOpacity: .6,
     icon: imageUrl != null
         ? TileNotificationImage(url: imageUrl)
@@ -111,124 +113,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,
+    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.w700,
+                      ),
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
                     ),
-                    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,
-                    ),
-                    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 +213,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 +241,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,54 +251,58 @@ class TileNotificationIcon extends StatelessWidget {
       ),
       child: Icon(
         active ? KasyIcons.notificationActive : KasyIcons.notification,
-        size: 20,
+        size: KasyIconSize.sm,
         color: color,
       ),
     );
   }
 }
 
-/// A skeleton for the [NotificationTile] widget.
-class NotificationSkeletonTile extends StatefulWidget {
+/// Skeleton placeholder for [NotificationTile], built from the design-system
+/// [KasySkeleton] bones so the loading shimmer matches the kit everywhere and
+/// mirrors the real tile's layout (leading badge + title / body / date lines).
+class NotificationSkeletonTile extends StatelessWidget {
   const NotificationSkeletonTile({super.key});
 
-  @override
-  State<NotificationSkeletonTile> createState() =>
-      _NotificationSkeletonTileState();
-}
-
-class _NotificationSkeletonTileState extends State<NotificationSkeletonTile>
-    with SingleTickerProviderStateMixin {
-  late final AnimationController animationController;
-
-  @override
-  void initState() {
-    super.initState();
-    animationController = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 1000),
-    )..repeat();
-  }
-
-  @override
-  void deactivate() {
-    animationController.dispose();
-    super.deactivate();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(top: KasySpacing.sm),
-      child: AnimatedSkeleton(
-        listenable: animationController,
-        child: Container(
-          height: 80,
-          decoration: BoxDecoration(
-            color: context.colors.primary.withValues(alpha: .1),
-            borderRadius: KasyRadius.smBorderRadius,
+    return const Padding(
+      padding: EdgeInsets.only(top: KasySpacing.sm),
+      child: KasySkeletonGroup(
+        child: Padding(
+          padding: EdgeInsets.symmetric(
+            horizontal: KasySpacing.md,
+            vertical: KasySpacing.smd,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              KasySkeleton(
+                width: 36,
+                height: 36,
+                borderRadius: BorderRadius.all(Radius.circular(10)),
+              ),
+              SizedBox(width: KasySpacing.sm),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    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),
+                  ],
+                ),
+              ),
+            ],
           ),
-          padding: const EdgeInsets.all(KasySpacing.md),
         ),
       ),
     );

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

@@ -76,7 +76,7 @@ class PermissionRequestView extends StatelessWidget {
               child: Center(
                 child:
                     illustration ??
-                    KasyBrandBadge(icon: icon, size: 76, glyphSize: 36),
+                    KasyBrandBadge(icon: icon, size: 76, glyphSize: KasyIconSize.display),
               ),
             ),
             const SizedBox(height: KasySpacing.xl),

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

@@ -102,7 +102,7 @@ class _PulsingOrb extends StatelessWidget {
           ),
         ],
       ),
-      child: Icon(KasyIcons.flash, color: colors.onPrimary, size: 34),
+      child: Icon(KasyIcons.flash, color: colors.onPrimary, size: KasyIconSize.display),
     )
         .animate(onPlay: (c) => c.repeat(reverse: true))
         .scaleXY(

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_module_mockups.dart

@@ -283,7 +283,7 @@ class _PlanRow extends StatelessWidget {
               ),
             ),
             child: selected
-                ? Icon(KasyIcons.check, size: 12, color: colors.onPrimary)
+                ? Icon(KasyIcons.check, size: KasyIconSize.xxs, color: colors.onPrimary)
                 : null,
           ),
           const SizedBox(width: KasySpacing.smd),
@@ -421,7 +421,7 @@ class _FakeField extends StatelessWidget {
       ),
       child: Row(
         children: [
-          Icon(icon, size: 16, color: colors.muted),
+          Icon(icon, size: KasyIconSize.sm, color: colors.muted),
           const SizedBox(width: KasySpacing.sm),
           Text(
             hint,
@@ -452,7 +452,7 @@ class _SocialChip extends StatelessWidget {
         borderRadius: KasyRadius.mdBorderRadius,
         border: Border.all(color: colors.outline),
       ),
-      child: Icon(icon, size: 18, color: colors.onSurface),
+      child: Icon(icon, size: KasyIconSize.md, color: colors.onSurface),
     );
   }
 }

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
                 ),
               ),
             ),
@@ -391,7 +392,7 @@ class RoundRadioBox extends StatelessWidget {
                 opacity: iconOpacity,
                 child: Transform.scale(
                   scale: iconSize,
-                  child: Icon(icon, color: context.colors.onPrimary, size: 15),
+                  child: Icon(icon, color: context.colors.onPrimary, size: KasyIconSize.sm),
                 ),
               )
             : const SizedBox.shrink(),