kasy-cli 1.16.0 → 1.18.0

package/templates/firebase/lib/components/kasy_tabs.dart

@@ -33,7 +33,7 @@ enum KasyTabsVariant {
 
 /// Sizing mode for [KasyTabs].
 enum KasyTabsMode {
-  /// Wraps content (intrinsic width tabs).
+  /// Wraps content (intrinsic width tabs). Scrolls horizontally if needed.
   hug,
 
   /// Each tab stretches to fill the available width equally.
@@ -99,6 +99,10 @@ class _KasyTabsState extends State<KasyTabs> {
   // One GlobalKey per tab to measure position/size after layout.
   late List<GlobalKey> _keys;
 
+  // Key for the inner indicator Stack — used as the coordinate reference
+  // for measurements, ensuring correctness even when wrapped in a ScrollView.
+  final GlobalKey _stackKey = GlobalKey();
+
   // Indicator geometry (left offset, width) resolved from measured keys.
   double _indicatorLeft = 0;
   double _indicatorWidth = 0;
@@ -140,8 +144,10 @@ class _KasyTabsState extends State<KasyTabs> {
       widget.items.length - 1,
     );
 
+    // Measure relative to the inner Stack, not the outermost widget.
+    // This stays correct even when the component is inside a ScrollView.
     final RenderBox? containerBox =
-        context.findRenderObject() as RenderBox?;
+        _stackKey.currentContext?.findRenderObject() as RenderBox?;
     if (containerBox == null) return;
 
     final GlobalKey key = _keys[clampedIndex];
@@ -166,6 +172,22 @@ class _KasyTabsState extends State<KasyTabs> {
         _measured = true;
       });
     }
+
+    // In hug mode, scroll the selected tab into view (handles overflow).
+    if (widget.mode == KasyTabsMode.hug) {
+      _ensureSelectedVisible(clampedIndex);
+    }
+  }
+
+  /// Scrolls the [SingleChildScrollView] so the selected tab is fully visible.
+  void _ensureSelectedVisible(int index) {
+    final BuildContext? ctx = _keys[index].currentContext;
+    if (ctx == null) return;
+    Scrollable.ensureVisible(
+      ctx,
+      duration: const Duration(milliseconds: 250),
+      curve: Curves.easeInOut,
+    );
   }
 
   @override
@@ -182,25 +204,31 @@ class _KasyTabsState extends State<KasyTabs> {
   Widget _buildPrimary(BuildContext context) {
     final KasyColors c = context.colors;
     final bool isDark = context.isDark;
+    final bool isFill = widget.mode == KasyTabsMode.fill;
 
-    return DecoratedBox(
+    final Widget inner = DecoratedBox(
       decoration: BoxDecoration(
         color: c.avatarFallbackFill,
         borderRadius: BorderRadius.circular(KasyRadius.full),
       ),
       child: Padding(
-        padding: const EdgeInsets.all(4),
+        // 8px horizontal, 4px vertical — per Figma spec.
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
         child: Stack(
+          key: _stackKey,
+          // Allow pill to extend 4px beyond each tab edge (Figma: inset 0 -4px).
+          clipBehavior: Clip.none,
           children: [
             // Animated pill background.
             if (_measured)
               AnimatedPositioned(
                 duration: const Duration(milliseconds: 250),
                 curve: Curves.easeInOut,
-                left: _indicatorLeft,
+                // Extends 4px on each side beyond the measured tab.
+                left: _indicatorLeft - 4,
                 top: 0,
                 bottom: 0,
-                width: _indicatorWidth,
+                width: _indicatorWidth + 8,
                 child: DecoratedBox(
                   decoration: BoxDecoration(
                     color: c.surface,
@@ -208,50 +236,63 @@ class _KasyTabsState extends State<KasyTabs> {
                     boxShadow: [
                       BoxShadow(
                         color: Colors.black.withValues(
-                          alpha: isDark ? 0.18 : 0.08,
+                          alpha: isDark ? 0.14 : 0.06,
                         ),
                         blurRadius: 8,
                         offset: const Offset(0, 2),
                       ),
-                      BoxShadow(
-                        color: Colors.black.withValues(
-                          alpha: isDark ? 0.10 : 0.04,
-                        ),
-                        spreadRadius: 1,
-                      ),
                     ],
                   ),
                 ),
               ),
             // Tab labels (on top of the pill).
             Row(
-              mainAxisSize: widget.mode == KasyTabsMode.fill
-                  ? MainAxisSize.max
-                  : MainAxisSize.min,
-              children: List.generate(widget.items.length, (i) {
-                final KasyTabItem item = widget.items[i];
-                final bool selected = i == widget.selectedIndex;
-                return _PrimaryTab(
-                  key: _keys[i],
-                  item: item,
-                  selected: selected,
-                  expand: widget.mode == KasyTabsMode.fill,
-                  onTap: item.enabled ? () => widget.onTabSelected(i) : null,
-                );
-              }),
+              mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
+              children: [
+                for (int i = 0; i < widget.items.length; i++) ...[
+                  // 2px gap between adjacent tabs — per Figma spec.
+                  if (i > 0) const SizedBox(width: 2),
+                  _PrimaryTab(
+                    key: _keys[i],
+                    item: widget.items[i],
+                    selected: i == widget.selectedIndex,
+                    expand: isFill,
+                    onTap: widget.items[i].enabled
+                        ? () => widget.onTabSelected(i)
+                        : null,
+                  ),
+                ],
+              ],
             ),
           ],
         ),
       ),
     );
+
+    // In hug mode, the component must size to its content — NOT stretch to
+    // parent width. SingleChildScrollView gives unconstrained horizontal
+    // space to its child, so the DecoratedBox → Stack → Row(min) chain
+    // naturally measures at intrinsic width. It also handles overflow
+    // gracefully (scrollable) when many long tab labels are used.
+    if (!isFill) {
+      return SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        physics: const ClampingScrollPhysics(),
+        child: inner,
+      );
+    }
+
+    return inner;
   }
 
   // ── Secondary (underline indicator) ───────────────────────────────────────
 
   Widget _buildSecondary(BuildContext context) {
     final KasyColors c = context.colors;
+    final bool isFill = widget.mode == KasyTabsMode.fill;
 
-    return Stack(
+    final Widget inner = Stack(
+      key: _stackKey,
       clipBehavior: Clip.none,
       children: [
         // Full-width bottom divider.
@@ -284,9 +325,7 @@ class _KasyTabsState extends State<KasyTabs> {
           ),
         // Tab labels.
         Row(
-          mainAxisSize: widget.mode == KasyTabsMode.fill
-              ? MainAxisSize.max
-              : MainAxisSize.min,
+          mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
           children: List.generate(widget.items.length, (i) {
             final KasyTabItem item = widget.items[i];
             final bool selected = i == widget.selectedIndex;
@@ -294,13 +333,24 @@ class _KasyTabsState extends State<KasyTabs> {
               key: _keys[i],
               item: item,
               selected: selected,
-              expand: widget.mode == KasyTabsMode.fill,
+              expand: isFill,
               onTap: item.enabled ? () => widget.onTabSelected(i) : null,
             );
           }),
         ),
       ],
     );
+
+    // Same as primary: hug mode sizes to content via ScrollView.
+    if (!isFill) {
+      return SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        physics: const ClampingScrollPhysics(),
+        child: inner,
+      );
+    }
+
+    return inner;
   }
 }
 
@@ -325,39 +375,66 @@ class _PrimaryTab extends StatelessWidget {
   Widget _tabContent(BuildContext context) {
     final KasyColors c = context.colors;
     final bool disabled = !item.enabled;
+    // Fill mode with icons uses a vertical (Column) layout per Figma spec:
+    // icon stacked above label, 12px all-sides padding, 12px font size.
+    final bool verticalLayout = expand && item.icon != null;
+
+    final Widget iconWidget = item.icon != null
+        ? Opacity(
+            opacity: disabled ? 0.4 : 1.0,
+            child: Icon(
+              item.icon,
+              size: 16,
+              color: selected ? c.onSurface : c.muted,
+            ),
+          )
+        : const SizedBox.shrink();
+
+    final Widget labelWidget = Opacity(
+      opacity: disabled ? 0.4 : 1.0,
+      child: Text(
+        item.label,
+        textAlign: TextAlign.center,
+        // Use labelLarge as defined in the Kasy theme (14px/w600).
+        // No fontWeight override — the theme token is the source of truth.
+        style: context.textTheme.labelLarge?.copyWith(
+          color: selected ? c.onSurface : c.muted,
+          // Fill+icon layout uses 12px (text-xs) — per Figma spec.
+          fontSize: verticalLayout ? 12 : null,
+        ),
+      ),
+    );
 
     return GestureDetector(
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            if (item.icon != null) ...[
-              Opacity(
-                opacity: disabled ? 0.4 : 1.0,
-                child: Icon(
-                  item.icon,
-                  size: 16,
-                  color: selected ? c.onSurface : c.muted,
-                ),
-              ),
-              const SizedBox(width: 6),
-            ],
-            Opacity(
-              opacity: disabled ? 0.4 : 1.0,
-              child: Text(
-                item.label,
-                style: context.textTheme.labelLarge?.copyWith(
-                  color: selected ? c.onSurface : c.muted,
-                  fontWeight: selected ? FontWeight.w500 : FontWeight.w400,
-                ),
+        padding: verticalLayout
+            // Fill+icon: 12px all sides — per Figma spec.
+            ? const EdgeInsets.all(12)
+            // Default: 6px vertical, 12px horizontal — per Figma spec.
+            : const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
+        child: verticalLayout
+            ? Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  iconWidget,
+                  const SizedBox(height: 6),
+                  labelWidget,
+                ],
+              )
+            : Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  if (item.icon != null) ...[
+                    iconWidget,
+                    const SizedBox(width: 6),
+                  ],
+                  labelWidget,
+                ],
               ),
-            ),
-          ],
-        ),
       ),
     );
   }
@@ -391,7 +468,14 @@ class _SecondaryTab extends StatelessWidget {
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        // top:4 bottom:6 horizontal:12 — per Figma spec.
+        // Extra bottom padding visually balances the 2px underline indicator.
+        padding: const EdgeInsets.only(
+          top: 4,
+          bottom: 6,
+          left: 12,
+          right: 12,
+        ),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.center,
@@ -411,9 +495,9 @@ class _SecondaryTab extends StatelessWidget {
               opacity: disabled ? 0.4 : 1.0,
               child: Text(
                 item.label,
+                // Use labelLarge as defined in the Kasy theme (14px/w600).
                 style: context.textTheme.labelLarge?.copyWith(
                   color: selected ? c.onSurface : c.muted,
-                  fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
                 ),
               ),
             ),

package/templates/firebase/lib/core/home_widgets/home_widget_mywidget_service.dart

@@ -1,7 +1,3 @@
-import 'dart:async';
-import 'dart:io' show Platform;
-
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:home_widget/home_widget.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_service.dart';
@@ -38,12 +34,6 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
   /// Snapshot of the user fields the widget reads. Used to skip the update
   /// when an unrelated field changes (e.g. lastUpdateDate refresh).
   (String?, String?, String?, bool) _widgetSignature(User user) {
-    final isPro = switch (user) {
-      AuthenticatedUserData(:final subscription) ||
-      AnonymousUserData(:final subscription) =>
-        subscription?.isActive ?? false,
-      _ => false,
-    };
     final name = switch (user) {
       AuthenticatedUserData(:final name) => name,
       _ => null,
@@ -52,21 +42,41 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
       AuthenticatedUserData(:final email) => email,
       _ => null,
     };
-    return (user.idOrNull, name, email, isPro);
+    return (user.idOrNull, name, email, _cachedIsPro(user));
   }
 
   @override
-  Future<void> update() => updateForLocale(LocaleSettings.currentLocale);
-
-  /// Same as [update] but renders against an explicit locale. Use this
-  /// from the language picker so the widget never falls one step behind:
-  /// `LocaleSettings.setLocale` propagates to `currentLocale` over a
-  /// frame boundary, and an [update] call scheduled at the same time
-  /// can race with it. Passing the locale removes the race.
-  Future<void> updateForLocale(AppLocale locale) async {
+  Future<void> update() => _renderForLocale(
+        LocaleSettings.currentLocale,
+        refreshSubscription: true,
+      );
+
+  /// Same as [update] but renders against an explicit locale and skips the
+  /// RevenueCat refresh. Two reasons:
+  ///  1. `LocaleSettings.setLocale` propagates to `currentLocale` over a
+  ///     frame boundary, and an [update] call scheduled at the same time
+  ///     can race with it — passing the locale removes the race.
+  ///  2. The network call inside [_resolveIsPro] adds up to 2s of latency
+  ///     before the new strings reach SharedPreferences, which is what made
+  ///     the widget look "one step behind" after switching language.
+  Future<void> updateForLocale(AppLocale locale) =>
+      _renderForLocale(locale, refreshSubscription: false);
+
+  Future<void> _renderForLocale(
+    AppLocale locale, {
+    required bool refreshSubscription,
+  }) async {
     final logger = Logger();
     logger.i('🔄 Updating MyWidget Home Widget (${locale.languageCode})');
     final user = ref.read(userStateNotifierProvider).user;
+
+    // Slang lazy-loads non-base locales: AppLocale.pt.translations falls back
+    // silently to the base locale (en) if the bundle isn't in the translation
+    // map yet. The async loadLocale() can't be used here as a safety net
+    // because it short-circuits ("already loading") when setLocale() is in
+    // flight in parallel — leaving us reading translations that aren't loaded
+    // yet. loadLocaleSync forces the bundle into the map right now, no race.
+    LocaleSettings.instance.loadLocaleSync(locale);
     final t = locale.translations;
 
     // "Logged out" = no user id at all (post-logout in authRequired mode, or
@@ -86,7 +96,8 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
       _ => null,
     };
 
-    final isPro = !isLoggedOut && await _resolveIsPro(user);
+    final isPro = !isLoggedOut &&
+        (refreshSubscription ? await _resolveIsPro(user) : _cachedIsPro(user));
 
     final greeting = _greeting(t);
     final title = isLoggedOut
@@ -100,6 +111,7 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
         ? ''
         : (isPro ? t.home_widget.plan_pro : t.home_widget.plan_free);
     final quote = t.home_widget.quote;
+    final quoteAuthor = t.home_widget.quote_author;
 
     logger.d(
       'Widget payload → greeting: "$greeting", title: "$title", '
@@ -112,21 +124,24 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
       'planText': planText,
       'isPro': isPro.toString(),
       'quote': quote,
+      'quoteAuthor': quoteAuthor,
     });
   }
 
+  bool _cachedIsPro(User user) => switch (user) {
+        AuthenticatedUserData(:final subscription) ||
+        AnonymousUserData(:final subscription) =>
+          subscription?.isActive ?? false,
+        _ => false,
+      };
+
   /// Returns true if the user has an active subscription.
   /// Queries the SubscriptionRepository directly so the widget reflects the
   /// most recent state — including the RevenueCat fallback when the backend
   /// webhook is delayed. Falls back to the in-memory user.subscription if the
   /// fresh fetch fails (no network, RC not initialised, etc.).
   Future<bool> _resolveIsPro(User user) async {
-    final cached = switch (user) {
-      AuthenticatedUserData(:final subscription) ||
-      AnonymousUserData(:final subscription) =>
-        subscription?.isActive ?? false,
-      _ => false,
-    };
+    final cached = _cachedIsPro(user);
     final userId = user.idOrNull;
     if (userId == null) return cached;
     try {
@@ -151,21 +166,10 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
     await HomeWidget.saveWidgetData<String>('planText', data['planText'] ?? '');
     await HomeWidget.saveWidgetData<String>('isPro', data['isPro'] ?? 'false');
     await HomeWidget.saveWidgetData<String>('quote', data['quote'] ?? '');
-
-    // On Android, saveWidgetData writes via SharedPreferences.apply() which
-    // is asynchronous. Glance's HomeWidgetGlanceStateDefinition reads from
-    // the same prefs, but a tight saveWidgetData→updateWidget sequence can
-    // race the apply() flush — Glance recomposes with the previous values
-    // (most visible right after a locale change). Fire two updates spaced
-    // out by 400ms each so even slow devices catch the new state.
-    if (!kIsWeb && Platform.isAndroid) {
-      await Future<void>.delayed(const Duration(milliseconds: 400));
-      await HomeWidget.updateWidget(
-        name: _androidWidgetName,
-        iOSName: _iosWidgetName,
-      );
-      await Future<void>.delayed(const Duration(milliseconds: 400));
-    }
+    await HomeWidget.saveWidgetData<String>(
+      'quoteAuthor',
+      data['quoteAuthor'] ?? '',
+    );
 
     await HomeWidget.updateWidget(
       name: _androidWidgetName,
@@ -173,18 +177,6 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
     );
   }
 
-  Future<Map<String, dynamic>> getWidgetData() async {
-    return {
-      'greeting': await HomeWidget.getWidgetData<String>('greeting'),
-      'title': await HomeWidget.getWidgetData<String>('title'),
-      'planText': await HomeWidget.getWidgetData<String>('planText'),
-      'isPro': await HomeWidget.getWidgetData<String>(
-        'isPro',
-        defaultValue: 'false',
-      ),
-    };
-  }
-
   /// Time-of-day greeting in the app language (matches what the user sees
   /// inside the app, not the device language).
   static String _greeting(Translations t) {