kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/features/notifications/api/device_api.dart

@@ -114,9 +114,17 @@ class FirebaseDeviceApi implements DeviceApi {
           await Future.delayed(const Duration(seconds: 1));
         }
       }
-      final token = await _messaging.getToken();
-      if (token == null) {
-        throw ApiError(code: 0, message: 'FCM token is null — check Firebase setup and notification permissions');
+      // Register the installation even without a push token. On iOS the FCM
+      // token stays null until the user grants notification permission (and
+      // getToken can even throw before APNS is ready). We still create the
+      // device row — so the welcome notification fires and the install is
+      // tracked — and the token fills in later via onTokenRefresh once push is
+      // enabled.
+      String token = '';
+      try {
+        token = await _messaging.getToken() ?? '';
+      } catch (_) {
+        token = '';
       }
       final os = Platform.isAndroid
           ? OperatingSystem.android //

package/templates/firebase/lib/features/notifications/ui/notifications_page.dart

@@ -5,14 +5,15 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
     as app;
 import 'package:kasy_kit/features/notifications/providers/models/notification_list.dart';
 import 'package:kasy_kit/features/notifications/providers/notifications_provider.dart';
-import 'package:kasy_kit/features/notifications/ui/components/notification_settings_sheet.dart';
 import 'package:kasy_kit/features/notifications/ui/components/notification_tile.dart';
 import 'package:kasy_kit/features/notifications/ui/widgets/empty_notifications.dart';
 import 'package:kasy_kit/features/notifications/ui/widgets/notification_tile.dart';
+import 'package:kasy_kit/features/notifications/ui/widgets/push_permission_banner.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
 class NotificationsPage extends ConsumerStatefulWidget {
@@ -105,6 +106,8 @@ class _NotificationsPageState extends ConsumerState<NotificationsPage> {
     return KasyOverlayScaffold(
       title: t.notifications.title,
       appBarStyle: KasyAppBarStyle.rootTab,
+      // Contain + center the list on desktop so cards never stretch edge-to-edge.
+      maxContentWidth: kKasyContentMaxWidth,
       hideAppBarOnScroll: true,
       scrollController: _scrollController,
       trailing: Builder(
@@ -121,12 +124,17 @@ class _NotificationsPageState extends ConsumerState<NotificationsPage> {
                 tooltip: t.notifications.delete_all,
               ),
             if (hasAny) const SizedBox(width: KasySpacing.xs),
+            // Light/dark theme toggle, matching the other root-tab screens.
             KasyChromeOrbIconButton(
-              icon: KasyIcons.moreVert,
+              icon: Theme.of(ctx).brightness == Brightness.dark
+                  ? KasyIcons.lightMode
+                  : KasyIcons.darkMode,
               iconSize: 18,
               foregroundColor: ctx.colors.onSurface,
-              onPressed: () => showNotificationSettingsSheet(ctx),
-              tooltip: 'Opções',
+              onPressed: () => ThemeProvider.of(ctx).toggle(),
+              tooltip: Theme.of(ctx).brightness == Brightness.dark
+                  ? 'Light mode'
+                  : 'Dark mode',
             ),
           ],
         ),
@@ -136,6 +144,13 @@ class _NotificationsPageState extends ConsumerState<NotificationsPage> {
         requestReadAll();
       },
       slivers: [
+        // Native-only push nudge. Self-hides on web and once granted, and the
+        // first time it appears in the "never asked" state it fires the native
+        // OS prompt automatically. Sits above the list so it shows even when the
+        // welcome notification already fills the screen.
+        const SliverToBoxAdapter(
+          child: PushPermissionBanner(autoRequest: true),
+        ),
         notificationsState.when(
           loading: () => SliverList(
             delegate: SliverChildBuilderDelegate(

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

@@ -1,40 +1,16 @@
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/features/notifications/providers/models/notification.dart';
-import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
-class EmptyNotifications extends ConsumerStatefulWidget {
+/// Empty state for the notifications list: just the illustration and copy.
+///
+/// The "enable push" call-to-action lives in [PushPermissionBanner] at the top
+/// of the screen now, so it shows whether or not the list is empty (the welcome
+/// notification used to hide the empty-state button). Keeping it in one place
+/// avoids a duplicate CTA.
+class EmptyNotifications extends StatelessWidget {
   const EmptyNotifications({super.key});
 
-  @override
-  ConsumerState<EmptyNotifications> createState() => _EmptyNotificationsState();
-}
-
-class _EmptyNotificationsState extends ConsumerState<EmptyNotifications> {
-  late Future<NotificationPermission> _permissionFuture;
-
-  @override
-  void initState() {
-    super.initState();
-    _permissionFuture = _loadPermission();
-  }
-
-  Future<NotificationPermission> _loadPermission() {
-    return ref.read(notificationRepositoryProvider).getPermissionStatus();
-  }
-
-  Future<void> _onAskPressed(NotificationPermission permission) async {
-    await permission.maybeAsk();
-    if (!mounted) return;
-    setState(() {
-      _permissionFuture = _loadPermission();
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     final tr = context.t.notifications;
@@ -74,31 +50,6 @@ class _EmptyNotificationsState extends ConsumerState<EmptyNotifications> {
               color: context.colors.muted,
             ),
           ),
-          const SizedBox(height: KasySpacing.xl),
-          FutureBuilder<NotificationPermission>(
-            future: _permissionFuture,
-            builder: (context, snapshot) {
-              final permission = snapshot.data;
-              if (permission == null) return const SizedBox.shrink();
-              // Web has no usable notification-permission prompt (askPermission is a
-              // no-op on web and permission_handler has no web support), so the CTA
-              // would be a dead button. Show the empty state without it.
-              if (kIsWeb) return const SizedBox.shrink();
-              if (permission is NotificationPermissionGranted) {
-                return const SizedBox.shrink();
-              }
-              final isLocked =
-                  permission is NotificationPermissionPermanentlyDenied;
-              return KasyButton(
-                label: isLocked ? tr.empty_cta_open_settings : tr.empty_cta,
-                variant: KasyButtonVariant.soft,
-                icon: isLocked
-                    ? KasyIcons.settings
-                    : KasyIcons.notificationAdd,
-                onPressed: () => _onAskPressed(permission),
-              );
-            },
-          ),
           const SizedBox(height: KasySpacing.xxxl),
         ],
       ),

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

@@ -137,7 +137,7 @@ class NotificationTile extends StatelessWidget {
                   Expanded(
                     child: Text(
                       title,
-                      style: context.textTheme.titleSmall?.copyWith(
+                      style: context.kasyTextTheme.listRowTitle.copyWith(
                         color: titleColor,
                         fontWeight: FontWeight.w600,
                       ),
@@ -211,11 +211,11 @@ class TileNotificationImage extends StatelessWidget {
   Widget build(BuildContext context) {
     return KasyFocusRing(
       onActivate: () => _openFullscreen(context),
-      borderRadius: BorderRadius.circular(8),
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
       child: GestureDetector(
         onTap: () => _openFullscreen(context),
         child: ClipRRect(
-          borderRadius: BorderRadius.circular(8),
+          borderRadius: BorderRadius.circular(KasyRadius.sm),
           child: Image.network(
             url,
             width: 36,
@@ -252,7 +252,7 @@ class TileNotificationIcon extends StatelessWidget {
         color: active
             ? context.colors.primary.withValues(alpha: 0.12)
             : context.colors.onSurface.withValues(alpha: 0.06),
-        borderRadius: BorderRadius.circular(10),
+        borderRadius: BorderRadius.circular(KasyRadius.md),
       ),
       child: Icon(
         active ? KasyIcons.notificationActive : KasyIcons.notification,
@@ -285,7 +285,7 @@ class NotificationSkeletonTile extends StatelessWidget {
               KasySkeleton(
                 width: 36,
                 height: 36,
-                borderRadius: BorderRadius.all(Radius.circular(10)),
+                borderRadius: BorderRadius.all(Radius.circular(KasyRadius.md)),
               ),
               SizedBox(width: KasySpacing.sm),
               Expanded(

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

@@ -0,0 +1,163 @@
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/notifications/providers/models/notification.dart';
+import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// Inline call-to-action that nudges the user to turn on push notifications.
+///
+/// Push is native-only: on web this renders nothing (permission_handler has no
+/// web support and there is no native prompt). It also renders nothing once
+/// permission is granted, so it self-hides the moment it's no longer needed.
+///
+/// States while not granted (native only):
+///  - never asked / denied (Android can re-ask) → "Enable notifications",
+///    which fires the native OS prompt directly (no custom pre-dialog: the OS
+///    already shows its own localized prompt).
+///  - permanently denied (iOS after a refusal) → "Open settings", since the OS
+///    won't show the native prompt again and the only way back is the system
+///    settings of the app.
+///
+/// When [autoRequest] is true, the first time it mounts in the "never asked"
+/// state it fires the native prompt automatically — once per install, guarded
+/// by a shared-preferences flag. Used on the notifications screen so simply
+/// arriving there surfaces the native prompt.
+class PushPermissionBanner extends ConsumerStatefulWidget {
+  const PushPermissionBanner({super.key, this.autoRequest = false});
+
+  /// Auto-fire the native prompt once when first shown in the "never asked"
+  /// state. Leave false to require an explicit tap on the CTA.
+  final bool autoRequest;
+
+  @override
+  ConsumerState<PushPermissionBanner> createState() =>
+      _PushPermissionBannerState();
+}
+
+class _PushPermissionBannerState extends ConsumerState<PushPermissionBanner>
+    with WidgetsBindingObserver {
+  NotificationPermission? _permission;
+  bool _busy = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    _init();
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    // Returning from the OS settings: re-check so the banner self-hides if the
+    // user just enabled notifications, or comes back if they disabled them —
+    // without the user having to tap anything.
+    if (state == AppLifecycleState.resumed && !kIsWeb) {
+      _reload();
+    }
+  }
+
+  Future<void> _init() async {
+    // Push is native-only — nothing to do (and nothing to render) on web.
+    if (kIsWeb) return;
+    final permission =
+        await ref.read(notificationRepositoryProvider).getPermissionStatus();
+    if (!mounted) return;
+
+    if (widget.autoRequest && permission is NotificationPermissionWaiting) {
+      final prefs = ref.read(sharedPreferencesProvider);
+      if (!prefs.getPushAutoRequested()) {
+        await prefs.setPushAutoRequested(true);
+        await permission.maybeAsk();
+        await _reload();
+        return;
+      }
+    }
+    setState(() => _permission = permission);
+  }
+
+  Future<void> _reload() async {
+    final permission =
+        await ref.read(notificationRepositoryProvider).getPermissionStatus();
+    if (mounted) setState(() => _permission = permission);
+  }
+
+  Future<void> _onPressed() async {
+    if (_busy || _permission == null) return;
+    setState(() => _busy = true);
+    await _permission!.maybeAsk();
+    await _reload();
+    if (mounted) setState(() => _busy = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Native-only, and only while permission is still missing.
+    if (kIsWeb) return const SizedBox.shrink();
+    final permission = _permission;
+    if (permission == null || permission is NotificationPermissionGranted) {
+      return const SizedBox.shrink();
+    }
+
+    final tr = context.t.notifications;
+    final bool locked = permission is NotificationPermissionPermanentlyDenied;
+
+    // Discreet single-row nudge: small muted bell + one line of copy + a compact
+    // neutral button. Intentionally low-key so it doesn't compete with the list.
+    return Padding(
+      padding: const EdgeInsets.only(bottom: KasySpacing.smd),
+      child: Container(
+        padding: const EdgeInsets.fromLTRB(
+          KasySpacing.md,
+          KasySpacing.sm,
+          KasySpacing.sm,
+          KasySpacing.sm,
+        ),
+        decoration: BoxDecoration(
+          color: context.colors.surface,
+          borderRadius: KasyRadius.mdBorderRadius,
+          border: Border.all(
+            color: context.colors.outline.withValues(alpha: 0.4),
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(
+              KasyIcons.notification,
+              size: KasyIconSize.rowLeading,
+              color: context.colors.muted,
+            ),
+            const SizedBox(width: KasySpacing.sm),
+            Expanded(
+              child: Text(
+                locked ? tr.push_subtitle_disabled : tr.push_subtitle_waiting,
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: context.colors.onSurface.withValues(alpha: 0.75),
+                ),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            const SizedBox(width: KasySpacing.sm),
+            KasyButton(
+              label: locked ? tr.empty_cta_open_settings : tr.empty_cta,
+              variant: KasyButtonVariant.outline,
+              size: KasyButtonSize.small,
+              isLoading: _busy,
+              onPressed: _busy ? null : _onPressed,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,262 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
+import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
+    as app;
+import 'package:kasy_kit/features/notifications/providers/notifications_provider.dart';
+import 'package:kasy_kit/features/notifications/providers/unread_notifications_count_provider.dart';
+import 'package:kasy_kit/features/notifications/ui/widgets/notification_tile.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// Desktop web header bell that opens a recent-notifications dropdown anchored
+/// below it (Gmail / GitHub pattern). The full list still lives at
+/// `/notifications` — the panel's "See all" link goes there.
+///
+/// Owns its own overlay (OverlayPortal + LayerLink, the same popover technique
+/// as [KasySidebar]), so [KasyAppBar.application] stays a pure presentational
+/// component and the data wiring lives here.
+class WebNotificationsBell extends ConsumerStatefulWidget {
+  const WebNotificationsBell({super.key});
+
+  @override
+  ConsumerState<WebNotificationsBell> createState() =>
+      _WebNotificationsBellState();
+}
+
+class _WebNotificationsBellState extends ConsumerState<WebNotificationsBell> {
+  /// Max number of recent notifications shown in the panel before "See all".
+  static const int _maxPreview = 5;
+
+  /// Width of the dropdown panel.
+  static const double _panelWidth = 380;
+
+  final OverlayPortalController _controller = OverlayPortalController();
+  final LayerLink _link = LayerLink();
+
+  void _toggle() {
+    if (_controller.isShowing) {
+      _controller.hide();
+    } else {
+      _controller.show();
+    }
+  }
+
+  void _openFull() {
+    _controller.hide();
+    context.go('/notifications');
+  }
+
+  void _onTap(app.Notification notification) {
+    _controller.hide();
+    ref.read(notificationsProvider.notifier).onTapNotification(notification);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final int unread = ref.watch(unreadNotificationsCountProvider).value ?? 0;
+    return OverlayPortal(
+      controller: _controller,
+      overlayChildBuilder: _buildPanel,
+      child: CompositedTransformTarget(
+        link: _link,
+        child: _bell(context, unread: unread),
+      ),
+    );
+  }
+
+  Widget _bell(BuildContext context, {required int unread}) {
+    final Widget button = KasyButton.iconOnly(
+      icon: KasyIcons.notification,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: KasyIconSize.md,
+      onPressed: _toggle,
+      semanticLabel: 'Notifications',
+    );
+    if (unread == 0) return button;
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        button,
+        Positioned(
+          top: 8,
+          right: 8,
+          child: Container(
+            width: 8,
+            height: 8,
+            decoration: BoxDecoration(
+              color: context.colors.error,
+              shape: BoxShape.circle,
+              border: Border.all(color: context.colors.background, width: 1.5),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildPanel(BuildContext context) {
+    // Full-screen barrier so a click anywhere outside the panel dismisses it.
+    return Stack(
+      children: [
+        Positioned.fill(
+          child: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: _controller.hide,
+          ),
+        ),
+        CompositedTransformFollower(
+          link: _link,
+          showWhenUnlinked: false,
+          targetAnchor: Alignment.bottomRight,
+          followerAnchor: Alignment.topRight,
+          // Small gap below the bell — the icon button already has internal
+          // padding, so 6 reads "attached to the bell" without looking glued.
+          offset: const Offset(0, 6),
+          child: Align(
+            alignment: Alignment.topRight,
+            child: _panelCard(context),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _panelCard(BuildContext context) {
+    final KasyColors c = context.colors;
+    return Material(
+      color: Colors.transparent,
+      child: Container(
+        width: _panelWidth,
+        constraints: const BoxConstraints(maxHeight: 480),
+        decoration: BoxDecoration(
+          color: c.surface,
+          // Same hairline as the sidebar/header chrome: `c.border` at 0.5px, so
+          // the whole web chrome reads as one continuous border weight.
+          border: Border.all(color: c.border, width: 0.5),
+          borderRadius: KasyRadius.lgBorderRadius,
+          // Floating dropdown → the design-system overlay shadow (menus/popovers),
+          // not the inline-card `component` shadow (which is muted on web).
+          boxShadow: KasyShadows.overlay,
+        ),
+        clipBehavior: Clip.antiAlias,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _header(context),
+            Flexible(child: _body(context)),
+            Divider(height: 1, thickness: 1, color: c.border),
+            _footer(context),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _header(BuildContext context) {
+    final int unread = ref.watch(unreadNotificationsCountProvider).value ?? 0;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        KasySpacing.md,
+        KasySpacing.smd,
+        KasySpacing.sm,
+        KasySpacing.smd,
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              t.notifications.title,
+              style: context.textTheme.titleSmall?.copyWith(
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+          if (unread > 0)
+            KasyButton(
+              label: t.notifications.mark_all_read,
+              variant: KasyButtonVariant.ghost,
+              size: KasyButtonSize.small,
+              onPressed: () =>
+                  ref.read(notificationsProvider.notifier).readAll(),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _body(BuildContext context) {
+    final state = ref.watch(notificationsProvider);
+    return state.when(
+      loading: () => Column(
+        mainAxisSize: MainAxisSize.min,
+        children: List<Widget>.generate(
+          3,
+          (_) => const NotificationSkeletonTile(),
+        ),
+      ),
+      error: (_, _) => _message(context, t.notifications.error_fetching),
+      data: (list) {
+        if (list.data.isEmpty) {
+          return _message(context, t.notifications.empty_title);
+        }
+        final items = list.data.take(_maxPreview).toList();
+        return SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              for (int i = 0; i < items.length; i++) ...[
+                if (i > 0)
+                  Divider(height: 1, thickness: 1, color: context.colors.border),
+                KasyHover(
+                  onTap: () => _onTap(items[i]),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: KasySpacing.md,
+                    vertical: KasySpacing.smd,
+                  ),
+                  child: NotificationTile.from(context, items[i]),
+                ),
+              ],
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _message(BuildContext context, String text) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.xl,
+      ),
+      child: Center(
+        child: Text(
+          text,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: context.colors.muted,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _footer(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(KasySpacing.sm),
+      child: SizedBox(
+        width: double.infinity,
+        child: KasyButton(
+          label: t.notifications.see_all,
+          variant: KasyButtonVariant.neutral,
+          size: KasyButtonSize.small,
+          onPressed: _openFull,
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/onboarding/providers/onboarding_model.dart

@@ -9,18 +9,27 @@ class OnboardingState {
   /// here and flush them once the account is created.
   final List<UserInfoDetail> pendingUserInfo;
 
+  /// Preview mode: the flow is being walked from the admin Debug screen just to
+  /// see the screens. Every real side effect (guest account creation, profile
+  /// writes, permission prompts, the onboarded flag) is suppressed and the flow
+  /// returns to Debug instead of Home. See [OnboardingNotifier].
+  final bool preview;
+
   OnboardingState({
     this.reminder,
     this.pendingUserInfo = const [],
+    this.preview = false,
   });
 
   OnboardingState copyWith({
     DateTime? reminder,
     List<UserInfoDetail>? pendingUserInfo,
+    bool? preview,
   }) {
     return OnboardingState(
       reminder: reminder ?? this.reminder,
       pendingUserInfo: pendingUserInfo ?? this.pendingUserInfo,
+      preview: preview ?? this.preview,
     );
   }
 }