kasy-cli 1.38.0 → 1.39.0

package/templates/firebase/functions/src/notifications/triggers.ts

@@ -61,10 +61,14 @@ export const onNotificationCreated = onDocumentCreated(
           ? { imageUrl: notificationEntity.image_url }
           : undefined,
       };
-      const userDevices = await userDevicesRepository.getDevices([userId]);
+      const allDevices = await userDevicesRepository.getDevices([userId]);
+      // Skip installs without a push token (notifications not enabled yet): no
+      // point sending, and — crucially — an empty token fails as "invalid" which
+      // would delete the install in the cleanup below.
+      const userDevices = allDevices.filter((userDevice) => !!userDevice.token);
       const tokens = userDevices.map((userDevice) => userDevice.token);
       if (tokens.length === 0) {
-        logger.info(`No device found for user ${userId}`);
+        logger.info(`No device with a push token for user ${userId}`);
         return;
       }
       const notificationApi = NotificationsApi.create();

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

@@ -19,6 +19,7 @@ export 'kasy_checkbox.dart';
 export 'kasy_chip.dart';
 export 'kasy_date_picker.dart';
 export 'kasy_dialog.dart';
+export 'kasy_drop_down.dart';
 export 'kasy_image_viewer.dart';
 export 'kasy_otp_verification_bottom_sheet.dart';
 export 'kasy_screen.dart';
@@ -31,4 +32,3 @@ export 'kasy_text_area.dart';
 export 'kasy_text_field.dart';
 export 'kasy_text_field_otp.dart';
 export 'kasy_toast.dart';
-export 'kasy_web_header.dart';

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

@@ -19,6 +19,11 @@
 /// [KasyAppBarStyle.subpageSimple] (back only), [KasyAppBarStyle.subpageActions]
 /// (custom [trailing]).
 ///
+/// **Desktop:** [KasyAppBar.application] renders the application chrome (search,
+/// quick-create, notifications, profile) for viewports ≥ 1024px — the responsive
+/// other half of the same component (formerly a separate web header). The shell
+/// places it above content; the page bar then hides on desktop.
+///
 /// Barrel: [components.dart].
 
 library;
@@ -26,8 +31,13 @@ library;
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart' show SystemUiOverlayStyle;
+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/chrome/app_bar_config.dart';
+import 'package:kasy_kit/core/chrome/app_bar_scope.dart';
 import 'package:kasy_kit/core/chrome/chrome_visibility.dart';
-import 'package:kasy_kit/core/chrome/web_header_scope.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
@@ -35,14 +45,22 @@ import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 /// Inner toolbar band height (orbit hit targets, title baseline).
 const double kasyAppBarToolbarRowHeight = 44;
 
-/// Effective toolbar band height. [KasyAppBar] serves phone and tablet only — on
-/// desktop the richer web header takes over — so the band keeps a single
-/// compact height across every viewport where the app bar appears.
+/// Effective toolbar band height. The page chrome serves phone and tablet — on
+/// desktop [KasyAppBar.application] takes over — so the band keeps a single
+/// compact height across every viewport where the page bar appears.
 double kasyAppBarToolbarRowHeightOf(BuildContext context) =>
     kasyAppBarToolbarRowHeight;
 
 const double kasyAppBarTitleFontScale = 0.92;
 
+/// Height of the desktop application bar band ([KasyAppBar.application]): 36px
+/// content + 16px top/bottom. minHeight, not fixed, so the search field never
+/// overflows the row.
+const double kasyAppBarApplicationHeight = 68;
+
+/// Fixed width of the search field in the desktop application bar.
+const double kasyAppBarApplicationSearchWidth = 220;
+
 /// Tight vertical padding inside the frost, above/below [kasyAppBarToolbarRowHeight].
 const double kasyAppBarChromePaddingTop = KasySpacing.xs;
 const double kasyAppBarChromePaddingBottom = KasySpacing.sm;
@@ -57,11 +75,11 @@ enum KasyAppBarScrollTreatment { overlay, intrinsicScroll }
 
 /// Vertical inset for scroll/viewport when using [KasyAppBarScrollTreatment.overlay].
 double kasyAppBarBodyTopOverlap(BuildContext context) {
-  // On desktop the app bar hides only inside the web-header scope (the shell), so
-  // no overlap there. Outside it (a full-screen pushed route) the bar is visible,
-  // so reserve its height like on phone/tablet.
+  // On desktop the page bar hides only inside the application-bar scope (the
+  // shell), so no overlap there. Outside it (a full-screen pushed route) the bar
+  // is visible, so reserve its height like on phone/tablet.
   if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint &&
-      KasyWebHeaderScope.of(context)) {
+      KasyAppBarScope.of(context)) {
     return 0;
   }
   return MediaQuery.paddingOf(context).top +
@@ -259,6 +277,10 @@ enum KasyAppBarStyle {
   rootTab,
 }
 
+/// Internal: which chrome a [KasyAppBar] renders — the phone/tablet page bar or
+/// the desktop application bar ([KasyAppBar.application]).
+enum _KasyAppBarVariant { page, application }
+
 /// Implements the frosted toolbar; usage patterns described in this file header.
 class KasyAppBar extends StatelessWidget {
   final String title;
@@ -297,6 +319,65 @@ class KasyAppBar extends StatelessWidget {
   /// appears where the bar was.
   final bool hideOnScroll;
 
+  // --- Application chrome (desktop, via [KasyAppBar.application]) ---
+  // These carry the desktop header (search, quick-create, notifications,
+  // profile). They are inert in the default (page) constructor.
+
+  /// 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. Ignored when [notifications] is provided.
+  final VoidCallback? onNotifications;
+
+  /// Shows the unread dot on the bell. Ignored when [notifications] is provided.
+  final bool showNotificationBadge;
+
+  /// Custom notifications control — replaces the built-in bell with a data-aware
+  /// widget so the bar itself stays presentational.
+  final Widget? notifications;
+
+  /// Primary quick-create action. When null the button is disabled.
+  final VoidCallback? onCreate;
+
+  /// Label for the create button.
+  final String createLabel;
+
+  /// Gradient for the profile avatar fallback (when [avatar] is null).
+  final KasyAvatarGradientData avatarGradient;
+
+  /// Custom avatar widget (e.g. the signed-in user's photo). When null and
+  /// [showAvatar] is true, a gradient-fill avatar is shown.
+  final Widget? avatar;
+
+  /// Whether the profile avatar is shown (false when the sidebar owns it).
+  final bool showAvatar;
+
+  /// Profile avatar tap (open menu / profile).
+  final VoidCallback? onAvatarTap;
+
+  /// Theme toggle for the application bar (sun/moon ghost button before the bell).
+  final VoidCallback? onToggleTheme;
+
+  /// Whether the search field is shown (application bar).
+  final bool showSearch;
+
+  /// Whether the notifications control is shown (application bar).
+  final bool showNotifications;
+
+  /// Whether the quick-create button is shown (application bar).
+  final bool showCreate;
+
+  final _KasyAppBarVariant _variant;
+
   const KasyAppBar({
     super.key,
     required this.title,
@@ -309,16 +390,107 @@ class KasyAppBar extends StatelessWidget {
     this.toolbarHeight,
     this.topInset,
     this.hideOnScroll = false,
-  });
+  })  : _variant = _KasyAppBarVariant.page,
+        searchController = null,
+        searchHint = 'Search...',
+        onSearchChanged = null,
+        onSearchSubmitted = null,
+        onNotifications = null,
+        showNotificationBadge = false,
+        notifications = null,
+        onCreate = null,
+        createLabel = 'Create',
+        avatarGradient = KasyAvatarGradients.orange,
+        avatar = null,
+        showAvatar = true,
+        onAvatarTap = null,
+        onToggleTheme = null,
+        showSearch = true,
+        showNotifications = true,
+        showCreate = true;
+
+  /// Desktop application chrome (viewport ≥ 1024px): global search, quick-create,
+  /// notifications and profile, sitting to the right of the sidebar. The
+  /// responsive counterpart of the phone/tablet page chrome (the default
+  /// constructor) — same component, the other half. The shell places this above
+  /// content inside a [KasyAppBarScope]; the page bar then hides on desktop.
+  const KasyAppBar.application({
+    super.key,
+    this.searchController,
+    this.searchHint = 'Search...',
+    this.onSearchChanged,
+    this.onSearchSubmitted,
+    this.onNotifications,
+    this.showNotificationBadge = false,
+    this.notifications,
+    this.onCreate,
+    this.createLabel = 'Create',
+    this.avatarGradient = KasyAvatarGradients.orange,
+    this.avatar,
+    this.showAvatar = true,
+    this.onAvatarTap,
+    this.onToggleTheme,
+    this.showSearch = true,
+    this.showNotifications = true,
+    this.showCreate = true,
+  })  : _variant = _KasyAppBarVariant.application,
+        title = '',
+        style = KasyAppBarStyle.rootTab,
+        onBack = null,
+        trailing = null,
+        leading = null,
+        useSafeArea = true,
+        onThemeToggle = null,
+        toolbarHeight = null,
+        topInset = null,
+        hideOnScroll = false;
+
+  /// Builds the desktop application bar from a [KasyAppBarConfig] — the bridge
+  /// the shell uses to render whatever a screen published. Theme/search/create/
+  /// notifications appear per the config's `showX` flags.
+  factory KasyAppBar.fromConfig(KasyAppBarConfig config, {Key? key}) {
+    return KasyAppBar.application(
+      key: key,
+      showSearch: config.showSearch,
+      searchController: config.searchController,
+      searchHint: config.searchHint,
+      onSearchChanged: config.onSearchChanged,
+      onSearchSubmitted: config.onSearchSubmitted,
+      onToggleTheme: config.showThemeToggle ? config.onToggleTheme : null,
+      showNotifications: config.showNotifications,
+      notifications: config.notifications,
+      onNotifications: config.onNotifications,
+      showNotificationBadge: config.showNotificationBadge,
+      showCreate: config.showCreate,
+      createLabel: config.createLabel,
+      onCreate: config.onCreate,
+      showAvatar: config.showAvatar,
+      avatar: config.avatar,
+      avatarGradient: config.avatarGradient ?? KasyAvatarGradients.orange,
+      onAvatarTap: config.onAvatarTap,
+    );
+  }
+
+  /// True for the desktop application bar ([KasyAppBar.application]); false for
+  /// the phone/tablet page bar. Lets tests assert which chrome is mounted without
+  /// reaching for a private type.
+  bool get isApplication => _variant == _KasyAppBarVariant.application;
 
   @override
   Widget build(BuildContext context) {
-    // On desktop the web header owns the top chrome, so the page app bar hides —
-    // but ONLY when there actually is a web header above (i.e. inside the shell's
-    // KasyWebHeaderScope). A full-screen route pushed over the shell has no web
-    // header, so the bar stays visible and its back button is never lost.
+    return switch (_variant) {
+      _KasyAppBarVariant.application => _buildApplicationChrome(context),
+      _KasyAppBarVariant.page => _buildPageChrome(context),
+    };
+  }
+
+  Widget _buildPageChrome(BuildContext context) {
+    // On desktop the application bar owns the top chrome, so the page bar hides —
+    // but ONLY when there actually is one above (i.e. inside the shell's
+    // KasyAppBarScope). A full-screen route pushed over the shell has none, so
+    // the bar stays visible and its back button is never lost.
     if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint &&
-        KasyWebHeaderScope.of(context)) {
+        KasyAppBarScope.of(context)) {
       return const SizedBox.shrink();
     }
     final Color orbFg = context.colors.onSurface;
@@ -482,6 +654,134 @@ class KasyAppBar extends StatelessWidget {
         );
     }
   }
+
+  /// Desktop application chrome: search + theme + notifications + create + avatar,
+  /// matching [KasySidebar]'s surface fill and hairline border so the two read as
+  /// one continuous chrome across the top of the shell.
+  Widget _buildApplicationChrome(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    // Trailing controls, each added with a leading gap so spacing never doubles
+    // up when an element is hidden (e.g. no create button → no stray gap).
+    final List<Widget> trailing = <Widget>[];
+    void addTrailing(Widget w) {
+      if (trailing.isNotEmpty) {
+        trailing.add(const SizedBox(width: KasySpacing.md));
+      }
+      trailing.add(w);
+    }
+
+    if (onToggleTheme != null) addTrailing(_buildApplicationThemeToggle(context));
+    if (showNotifications) {
+      addTrailing(notifications ?? _buildApplicationNotifications(context));
+    }
+    if (showCreate) {
+      addTrailing(KasyButton(
+        label: createLabel,
+        variant: KasyButtonVariant.neutral,
+        size: KasyButtonSize.small,
+        onPressed: onCreate,
+      ));
+    }
+    if (showAvatar) {
+      addTrailing(avatar ??
+          KasyAvatar.gradientFill(
+            size: KasyAvatarSize.small,
+            diameter: 36,
+            gradient: avatarGradient,
+            showShadow: false,
+            onTap: onAvatarTap,
+          ));
+    }
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.surface,
+        border: Border(
+          bottom: BorderSide(color: c.border, width: 0.5),
+        ),
+      ),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: kasyAppBarApplicationHeight),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          child: Row(
+            children: [
+              if (showSearch)
+                SizedBox(
+                  width: kasyAppBarApplicationSearchWidth,
+                  child: _buildApplicationSearch(context),
+                ),
+              const Spacer(),
+              ...trailing,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildApplicationSearch(BuildContext context) {
+    return KasyTextField(
+      variant: KasyTextFieldVariant.flat,
+      controller: searchController,
+      hint: searchHint,
+      onChanged: onSearchChanged,
+      onSubmitted: onSearchSubmitted,
+      prefix: Icon(
+        KasyIcons.search,
+        size: KasyIconSize.md,
+        color: context.colors.muted,
+      ),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    );
+  }
+
+  Widget _buildApplicationThemeToggle(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: KasyIconSize.md,
+      onPressed: onToggleTheme,
+      semanticLabel: isDark ? 'Light mode' : 'Dark mode',
+    );
+  }
+
+  Widget _buildApplicationNotifications(BuildContext context) {
+    final KasyColors c = context.colors;
+    final Widget bell = KasyButton.iconOnly(
+      icon: KasyIcons.notification,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: KasyIconSize.md,
+      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),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
 }
 
 /// Full-screen scaffold: frosted [KasyAppBar] pinned over scroll content.

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

@@ -119,6 +119,10 @@ class KasyCard extends StatelessWidget {
         onPressed: onTap!,
         semanticLabel: semanticLabel ?? 'Card',
         clipBorderRadius: resolvedRadius,
+        // Subtle overlay → a hover highlight on web (pointer) and a soft press
+        // flash everywhere. A tappable card is an actionable control, so it
+        // should feel interactive on hover like any web control.
+        pressOverlayColor: c.onSurface.withValues(alpha: dark ? 0.06 : 0.04),
         // A tappable card is an actionable control, so make it a keyboard
         // tab-stop with the standard focus ring (matches buttons/links).
         focusable: true,