kasy-cli 1.21.8 → 1.22.0

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

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Accent tone for [KasyStatusTag], resolved against the current theme.
+enum KasyStatusTagTone { success, neutral, primary, warning, danger }
+
+/// Compact, content-sized status pill: a soft-tinted rounded badge with an
+/// optional leading dot and a colored label. Built for table cells, list rows
+/// and detail headers where you want a quiet status indicator (active/inactive,
+/// paid/free, visible/hidden, …) — not a loud solid badge.
+///
+/// It sizes to its content. Inside a tight parent (e.g. a table column wrapped
+/// in [Expanded]) wrap it in an [Align] so it doesn't stretch:
+///
+/// ```dart
+/// Expanded(
+///   child: Align(
+///     alignment: Alignment.centerLeft,
+///     child: KasyStatusTag(label: 'Active', tone: KasyStatusTagTone.success),
+///   ),
+/// )
+/// ```
+class KasyStatusTag extends StatelessWidget {
+  /// The text shown in the pill.
+  final String label;
+
+  /// Semantic tone (maps to theme colors). Ignored when [color] is set.
+  final KasyStatusTagTone tone;
+
+  /// Overrides the tone's accent color (used for both the dot and the label).
+  final Color? color;
+
+  /// Whether to show the small leading status dot.
+  final bool showDot;
+
+  const KasyStatusTag({
+    super.key,
+    required this.label,
+    this.tone = KasyStatusTagTone.neutral,
+    this.color,
+    this.showDot = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Color accent = color ?? _toneColor(context, tone);
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+      decoration: BoxDecoration(
+        color: accent.withValues(alpha: context.isDark ? 0.16 : 0.1),
+        borderRadius: BorderRadius.circular(KasyRadius.full),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (showDot) ...[
+            Container(
+              width: 6,
+              height: 6,
+              decoration: BoxDecoration(color: accent, shape: BoxShape.circle),
+            ),
+            const SizedBox(width: 6),
+          ],
+          Flexible(
+            child: Text(
+              label,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: context.textTheme.labelSmall?.copyWith(
+                color: accent,
+                fontWeight: FontWeight.w600,
+                fontSize: 11.5,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _toneColor(BuildContext context, KasyStatusTagTone tone) {
+    final c = context.colors;
+    return switch (tone) {
+      KasyStatusTagTone.success => c.success,
+      KasyStatusTagTone.neutral => c.muted,
+      KasyStatusTagTone.primary => c.primary,
+      KasyStatusTagTone.warning => c.warning,
+      KasyStatusTagTone.danger => c.error,
+    };
+  }
+}

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

@@ -152,9 +152,7 @@ class _KasyTextAreaState extends State<KasyTextArea> {
     final bool isApplePlatform =
         platform == TargetPlatform.iOS || platform == TargetPlatform.macOS;
     final double focusedBorderWidth = isApplePlatform ? 1.7 : 1.4;
-    final Color focusedBorderColor = isApplePlatform
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusedBorderColor = context.colors.primary;
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;

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

@@ -67,8 +67,9 @@ class KasyTextField extends StatefulWidget {
   /// on secondary/embedded/web). Pass an empty list to render no shadow.
   final List<BoxShadow>? boxShadow;
 
-  /// When true (default), the field shows the design-system blue focus border
-  /// while focused. Set to false to keep the resting border in every state —
+  /// When true (default), the field shows the theme primary-colored focus
+  /// border while focused. Set to false to keep the resting border in every
+  /// state —
   /// useful for read-only triggers or compact contexts where the focus
   /// affordance would feel noisy.
   final bool focusBorder;
@@ -331,9 +332,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final bool isApplePlatform =
         platform == TargetPlatform.iOS || platform == TargetPlatform.macOS;
     final double focusedBorderWidth = isApplePlatform ? 1.7 : 1.4;
-    final Color focusedBorderColor = isApplePlatform
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusedBorderColor = context.colors.primary;
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;
@@ -538,7 +537,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
       decoration: decoration,
       enableInteractiveSelection: widget.enableInteractiveSelection,
     );
-    // TESTE: sombra desabilitada para investigar diferença visual com DatePicker
+    // TEST: shadow disabled to investigate the visual difference with DatePicker
     final List<BoxShadow>? effectiveBoxShadow = widget.boxShadow ??
         (shouldShowShadow ? <BoxShadow>[resolvedShadow] : null);
     final Widget decoratedField = DecoratedBox(

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

@@ -142,9 +142,7 @@ class _KasyTextFieldOTPState extends State<KasyTextFieldOTP> {
     final bool isApple =
         Theme.of(context).platform == TargetPlatform.iOS ||
         Theme.of(context).platform == TargetPlatform.macOS;
-    final Color focusColor = isApple
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusColor = context.colors.primary;
     final double focusBorderWidth = isApple ? 1.7 : 1.4;
     final Color errorColor = context.colors.error;
 

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

@@ -501,8 +501,8 @@ class _KasyToastLayerState extends State<_KasyToastLayer>
         final int fromFront = visible.indexOf(item);
         final bool isFront = fromFront == 0;
 
-        // Para top: usa altura medida para que o peek seja sempre _peekOffset px.
-        // Para bottom: offset negativo fixo já garante peek consistente.
+        // For top: use the measured height so the peek is always _peekOffset px.
+        // For bottom: a fixed negative offset already guarantees a consistent peek.
         double yOffset;
         if (isTop && frontHeight != null) {
           final double cardH = _heights[item] ?? frontHeight;

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

@@ -0,0 +1,209 @@
+/// Application top header for the **web desktop breakpoint** (viewport ≥ 1024px).
+///
+/// This is the *application* chrome (global search, quick-create, notifications,
+/// profile) — distinct from [KasyAppBar], which is *page* chrome (title / back /
+/// theme) used on phone and tablet. On desktop the sidebar handles navigation,
+/// so this header carries global actions instead of a title or back button.
+///
+/// Composed entirely from existing kit widgets: a [KasyTextField] search box
+/// (fixed 220px), a ghost [KasyButton.iconOnly] for notifications, a neutral
+/// pill [KasyButton] for create, and a gradient [KasyAvatar].
+///
+/// Barrel: [components.dart].
+library;
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_text_field.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Total header height (matches the design: 36px content band + 16px top/bottom).
+const double kasyWebHeaderHeight = 68;
+
+/// Fixed width of the leading search field (matches the design).
+const double kasyWebHeaderSearchWidth = 220;
+
+/// Desktop application header. Place it at the top of the content area (to the
+/// right of the sidebar) on viewports ≥ 1024px.
+class KasyWebHeader extends StatelessWidget {
+  /// Controller for the search field. Optional — omit for a display-only header.
+  final TextEditingController? searchController;
+
+  /// Placeholder shown in the search field.
+  final String searchHint;
+
+  /// Called as the user types in the search field.
+  final ValueChanged<String>? onSearchChanged;
+
+  /// Called when the search field is submitted (Enter).
+  final ValueChanged<String>? onSearchSubmitted;
+
+  /// Notifications (bell) action. When null the bell is disabled.
+  final VoidCallback? onNotifications;
+
+  /// Shows the unread dot on the notifications bell.
+  final bool showNotificationBadge;
+
+  /// Primary quick-create action. When null the button is disabled.
+  final VoidCallback? onCreate;
+
+  /// Label for the create button.
+  final String createLabel;
+
+  /// Gradient used for the profile avatar fallback (when [avatar] is null).
+  final KasyAvatarGradientData avatarGradient;
+
+  /// Custom avatar widget — pass the signed-in user's avatar (e.g.
+  /// `KasyUserAvatar`) to show their real photo. When null (and [showAvatar] is
+  /// true), a gradient-fill avatar is shown instead.
+  final Widget? avatar;
+
+  /// Whether the profile avatar is shown at all. Set false for a header that
+  /// carries no account chip (e.g. when the sidebar already owns the profile).
+  final bool showAvatar;
+
+  /// Profile avatar tap (open menu / profile). When null the avatar is inert.
+  final VoidCallback? onAvatarTap;
+
+  /// Theme toggle. When set, a sun/moon ghost button is shown before the bell
+  /// (on desktop the web header replaces the app bar's theme toggle).
+  final VoidCallback? onToggleTheme;
+
+  const KasyWebHeader({
+    super.key,
+    this.searchController,
+    this.searchHint = 'Search...',
+    this.onSearchChanged,
+    this.onSearchSubmitted,
+    this.onNotifications,
+    this.showNotificationBadge = false,
+    this.onCreate,
+    this.createLabel = 'Create',
+    this.avatarGradient = KasyAvatarGradients.orange,
+    this.avatar,
+    this.showAvatar = true,
+    this.onAvatarTap,
+    this.onToggleTheme,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        // Matches KasySidebar exactly: surface fill + the same `border` hairline
+        // used by the sidebar's vertical edge line, at the same 0.5px width — so
+        // the header's bottom border and the sidebar's top divider read as one
+        // continuous line across the whole chrome in light and dark.
+        color: c.surface,
+        border: Border(
+          bottom: BorderSide(color: c.border, width: 0.5),
+        ),
+      ),
+      // minHeight (not a fixed height) keeps the band at 68 while letting the
+      // search field size naturally, so it never overflows the toolbar row.
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: kasyWebHeaderHeight),
+        child: Padding(
+          // Design gutters: 20px horizontal; vertical breathes around the field.
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          child: Row(
+            children: [
+              SizedBox(
+                width: kasyWebHeaderSearchWidth,
+                child: _buildSearch(context),
+              ),
+              const Spacer(),
+              if (onToggleTheme != null) ...[
+                _buildThemeToggle(context),
+                const SizedBox(width: KasySpacing.md),
+              ],
+              _buildNotifications(context),
+              const SizedBox(width: KasySpacing.md),
+              KasyButton(
+                label: createLabel,
+                variant: KasyButtonVariant.neutral,
+                size: KasyButtonSize.small,
+                onPressed: onCreate,
+              ),
+              if (showAvatar) ...[
+                const SizedBox(width: KasySpacing.md),
+                avatar ??
+                    KasyAvatar.gradientFill(
+                      size: KasyAvatarSize.small,
+                      diameter: 36,
+                      gradient: avatarGradient,
+                      showShadow: false,
+                      onTap: onAvatarTap,
+                    ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildSearch(BuildContext context) {
+    return KasyTextField(
+      controller: searchController,
+      hint: searchHint,
+      onChanged: onSearchChanged,
+      onSubmitted: onSearchSubmitted,
+      prefix: Icon(
+        KasyIcons.search,
+        size: 17,
+        color: context.colors.muted,
+      ),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    );
+  }
+
+  Widget _buildThemeToggle(BuildContext context) {
+    final bool isDark = Theme.of(context).brightness == Brightness.dark;
+    return KasyButton.iconOnly(
+      icon: isDark ? KasyIcons.lightMode : KasyIcons.darkMode,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: 18,
+      onPressed: onToggleTheme,
+      semanticLabel: isDark ? 'Light mode' : 'Dark mode',
+    );
+  }
+
+  Widget _buildNotifications(BuildContext context) {
+    final KasyColors c = context.colors;
+    final Widget bell = KasyButton.iconOnly(
+      icon: KasyIcons.notification,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: 18,
+      onPressed: onNotifications,
+      semanticLabel: 'Notifications',
+    );
+    if (!showNotificationBadge) return bell;
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        bell,
+        Positioned(
+          top: 8,
+          right: 8,
+          child: Container(
+            width: 8,
+            height: 8,
+            decoration: BoxDecoration(
+              color: c.error,
+              shape: BoxShape.circle,
+              border: Border.all(color: c.background, width: 1.5),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

package/templates/firebase/lib/core/ads/ads_provider.dart

@@ -1,7 +1,7 @@
 // ignore_for_file: unused_element, unused_element_parameter
 
 import 'package:kasy_kit/core/ads/ads_state.dart';
-import 'package:kasy_kit/environnements.dart';
+import 'package:kasy_kit/environments.dart';
 import 'package:logger/logger.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:universal_io/io.dart';

package/templates/firebase/lib/core/bottom_menu/bottom_menu.dart

@@ -2,11 +2,17 @@ import 'package:bart/bart.dart' as bart;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:kasy_kit/components/kasy_sidebar_pro.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_sidebar.dart';
 import 'package:kasy_kit/core/bottom_menu/bottom_router.dart';
 import 'package:kasy_kit/core/bottom_menu/kasy_bottom_bar_factory.dart';
+import 'package:kasy_kit/core/data/models/user.dart';
+import 'package:kasy_kit/core/states/logout_action.dart';
+import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
+import 'package:kasy_kit/features/settings/ui/widgets/kasy_user_avatar.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
 
 /// Bottom navigation host powered by Bart (https://pub.dev/packages/bart).
 ///
@@ -27,6 +33,9 @@ class BottomMenu extends StatelessWidget {
     );
     final scaffoldOptions = bart.ScaffoldOptions(
       backgroundColor: context.colors.background,
+      // Let tab content scroll behind the floating bar; the page-level scrolls
+      // reserve the bar's height via the bottom inset Scaffold injects here.
+      extendBody: true,
     );
 
     return AnnotatedRegion<SystemUiOverlayStyle>(
@@ -42,7 +51,7 @@ class BottomMenu extends StatelessWidget {
           showBottomBarOnStart: showBottomBarOnStart,
           scaffoldOptions: scaffoldOptions,
         ),
-        // medium (768–1024 px): KasySidebarPro auto-collapses at this width
+        // medium (768–1024 px): KasySidebar auto-collapses at this width
         medium: bart.BartScaffold(
           routesBuilder: subRoutes,
           bottomBar: kasyPaddedSurfaceBottomBar(),
@@ -50,7 +59,29 @@ class BottomMenu extends StatelessWidget {
           showBottomBarOnStart: showBottomBarOnStart,
           scaffoldOptions: scaffoldOptions,
           sideBarOptions: bart.CustomSideBarOptions(
-            sideBarBuilder: (routes, onTap, current) => const KasySidebarPro(),
+            sideBarBuilder: (routes, onTap, current) => Consumer(
+              builder: (context, ref, _) {
+                final User user = ref.watch(userStateNotifierProvider).user;
+                final (String name, String email) = switch (user) {
+                  final AuthenticatedUserData u => (
+                    (u.name?.isNotEmpty ?? false)
+                        ? u.name!
+                        : u.email.split('@').first,
+                    u.email,
+                  ),
+                  _ => (context.t.settings.my_account, ''),
+                };
+                return KasySidebar(
+                  routes: routes,
+                  onTapItem: onTap,
+                  currentItem: current,
+                  onLogout: () => confirmLogout(context, ref),
+                  profileName: name,
+                  profileEmail: email,
+                  profileAvatar: const KasyUserAvatar(),
+                );
+              },
+            ),
           ),
         ),
         // large (1024 px+): full expanded sidebar
@@ -61,7 +92,29 @@ class BottomMenu extends StatelessWidget {
           showBottomBarOnStart: showBottomBarOnStart,
           scaffoldOptions: scaffoldOptions,
           sideBarOptions: bart.CustomSideBarOptions(
-            sideBarBuilder: (routes, onTap, current) => const KasySidebarPro(),
+            sideBarBuilder: (routes, onTap, current) => Consumer(
+              builder: (context, ref, _) {
+                final User user = ref.watch(userStateNotifierProvider).user;
+                final (String name, String email) = switch (user) {
+                  final AuthenticatedUserData u => (
+                    (u.name?.isNotEmpty ?? false)
+                        ? u.name!
+                        : u.email.split('@').first,
+                    u.email,
+                  ),
+                  _ => (context.t.settings.my_account, ''),
+                };
+                return KasySidebar(
+                  routes: routes,
+                  onTapItem: onTap,
+                  currentItem: current,
+                  onLogout: () => confirmLogout(context, ref),
+                  profileName: name,
+                  profileEmail: email,
+                  profileAvatar: const KasyUserAvatar(),
+                );
+              },
+            ),
           ),
         ),
       ),

package/templates/firebase/lib/core/bottom_menu/bottom_router.dart

@@ -1,11 +1,12 @@
 import 'package:bart/bart.dart';
 import 'package:flutter/material.dart';
-import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/core/bottom_menu/notification_bottom_item.dart';
+import 'package:kasy_kit/core/bottom_menu/web_content_wrapper.dart';
+import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/navigation/kasy_navigation_config.dart';
 import 'package:kasy_kit/core/navigation/kasy_route_transition.dart';
-import 'package:kasy_kit/core/rating/widgets/rate_banner.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/ai_chat/ai_chat_page.dart';
 import 'package:kasy_kit/features/home/home_page.dart';
 import 'package:kasy_kit/features/notifications/ui/notifications_page.dart';
 import 'package:kasy_kit/features/settings/settings_page.dart';
@@ -21,23 +22,27 @@ List<BartMenuRoute> subRoutes() {
       label: t.navigation.home,
       icon: KasyIcons.home,
       path: 'home',
-      pageBuilder: (_, _, settings) => const HomePage(),
-      transitionDuration: bottomBarTransitionDuration,
-      transitionsBuilder: bottomBarTransition,
-    ),
-    BartMenuRoute.bottomBar(
-      label: t.navigation.wishlist,
-      icon: KasyIcons.favorite,
-      path: 'wishlist',
-      pageBuilder: (_, _, settings) => const WishlistPage(),
+      pageBuilder: (_, _, settings) =>
+          const WebContentWrapper(child: HomePage()),
       transitionDuration: bottomBarTransitionDuration,
       transitionsBuilder: bottomBarTransition,
     ),
+    if (withAiChat)
+      BartMenuRoute.bottomBar(
+        label: t.navigation.support,
+        icon: KasyIcons.help,
+        path: 'support',
+        pageBuilder: (_, _, settings) =>
+            const WebContentWrapper(child: AiChatPage(isRootTab: true)),
+        transitionDuration: bottomBarTransitionDuration,
+        transitionsBuilder: bottomBarTransition,
+      ),
     BartMenuRoute.bottomBarBuilder(
       label: t.navigation.notifications,
       builder: (_, isActive) => const BottomItemNotification(),
       path: 'notifications',
-      pageBuilder: (_, _, settings) => NotificationsPage(),
+      pageBuilder: (_, _, settings) =>
+          WebContentWrapper(child: NotificationsPage()),
       transitionDuration: bottomBarTransitionDuration,
       transitionsBuilder: bottomBarTransition,
     ),
@@ -45,91 +50,14 @@ List<BartMenuRoute> subRoutes() {
       label: t.navigation.settings,
       icon: KasyIcons.settings,
       path: 'settings',
-      pageBuilder: (_, _, settings) => const SettingsPage(),
+      pageBuilder: (_, _, settings) =>
+          const WebContentWrapper(child: SettingsPage()),
       transitionDuration: bottomBarTransitionDuration,
       transitionsBuilder: bottomBarTransition,
     ),
   ];
 }
 
-/// Placeholder page for the wishlist tab.
-/// Replace this with your own implementation.
-class WishlistPage extends StatelessWidget {
-  const WishlistPage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: context.colors.background,
-      body: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          KasyAppBar(
-            title: context.t.navigation.wishlist,
-            style: KasyAppBarStyle.rootTab,
-          ),
-          Expanded(
-            child: Padding(
-              padding: EdgeInsets.fromLTRB(
-                KasySpacing.pageHorizontalGutter,
-                KasySpacing.belowChromeContentGap,
-                KasySpacing.pageHorizontalGutter,
-                MediaQuery.paddingOf(context).bottom +
-                    KasySpacing.pageVerticalGutter,
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  const RateBanner(forceInDebug: true),
-                  Expanded(
-                    child: Center(
-                      child: Column(
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          Container(
-                            width: 80,
-                            height: 80,
-                            decoration: BoxDecoration(
-                              color: context.colors.primary.withValues(
-                                alpha: 0.12,
-                              ),
-                              shape: BoxShape.circle,
-                            ),
-                            child: Icon(
-                              KasyIcons.favoriteOutline,
-                              size: 40,
-                              color: context.colors.primary,
-                            ),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          Text(
-                            context.t.wishlist.empty_title,
-                            style: context.textTheme.titleLarge?.copyWith(
-                              color: context.colors.muted,
-                            ),
-                          ),
-                          const SizedBox(height: KasySpacing.sm),
-                          Text(
-                            context.t.wishlist.empty_subtitle,
-                            style: context.textTheme.bodyLarge?.copyWith(
-                              color: context.colors.muted,
-                            ),
-                            textAlign: TextAlign.center,
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
 Widget bottomBarTransition(
   BuildContext context,
   Animation<double> animation,