kasy-cli 1.2.1

package/templates/firebase/lib/features/notifications/ui/components/notification_settings_sheet.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.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/providers/notifications_provider.dart';
+import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
+import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+void showNotificationSettingsSheet(BuildContext context) {
+  showModalBottomSheet<void>(
+    context: context,
+    useRootNavigator: true,
+    backgroundColor: Colors.transparent,
+    isScrollControlled: true,
+    builder: (_) => const _NotificationSettingsSheet(),
+  );
+}
+
+class _NotificationSettingsSheet extends ConsumerStatefulWidget {
+  const _NotificationSettingsSheet();
+
+  @override
+  ConsumerState<_NotificationSettingsSheet> createState() =>
+      _NotificationSettingsSheetState();
+}
+
+class _NotificationSettingsSheetState
+    extends ConsumerState<_NotificationSettingsSheet> {
+  NotificationPermission? _permission;
+  bool _toggling = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadPermission();
+  }
+
+  Future<void> _loadPermission() async {
+    final p =
+        await ref.read(notificationRepositoryProvider).getPermissionStatus();
+    if (mounted) setState(() => _permission = p);
+  }
+
+  bool get _isEnabled => _permission is NotificationPermissionGranted;
+
+  String _subtitle(BuildContext context) {
+    final tr = context.t.notifications;
+    return switch (_permission) {
+      NotificationPermissionGranted() => tr.push_subtitle_enabled,
+      NotificationPermissionDenied() => tr.push_subtitle_disabled,
+      _ => tr.push_subtitle_waiting,
+    };
+  }
+
+  Future<void> _onToggle(bool value) async {
+    if (_toggling || _permission == null) return;
+    setState(() => _toggling = true);
+    await _permission!.maybeAsk();
+    await _loadPermission();
+    if (mounted) setState(() => _toggling = false);
+  }
+
+  Future<void> _markAllRead() async {
+    await ref.read(notificationsProvider.notifier).readAll();
+    if (mounted) Navigator.of(context).pop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tr = context.t.notifications;
+    final notificationsState = ref.watch(notificationsProvider);
+    final hasUnread =
+        notificationsState.value?.data.any((n) => !n.seen) ?? false;
+
+    return Container(
+      margin: EdgeInsets.only(
+        left: KasySpacing.sm,
+        right: KasySpacing.sm,
+        bottom: MediaQuery.of(context).viewInsets.bottom +
+            MediaQuery.of(context).padding.bottom +
+            KasySpacing.sm,
+      ),
+      decoration: BoxDecoration(
+        color: context.colors.background,
+        borderRadius: KasyRadius.lgBorderRadius,
+        border: Border.all(
+          color: context.colors.outline.withValues(alpha: 0.5),
+        ),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // drag handle
+          Padding(
+            padding: const EdgeInsets.only(top: KasySpacing.smd),
+            child: Container(
+              width: 36,
+              height: 4,
+              decoration: BoxDecoration(
+                color: context.colors.onSurface.withValues(alpha: 0.14),
+                borderRadius: KasyRadius.fullBorderRadius,
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.fromLTRB(
+              KasySpacing.md,
+              KasySpacing.md,
+              KasySpacing.md,
+              KasySpacing.smd,
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Push toggle row
+                SettingsSwitchTile(
+                  icon: _isEnabled
+                      ? KasyIcons.notificationActive
+                      : KasyIcons.notification,
+                  title: tr.push_title,
+                  value: _isEnabled,
+                  iconBackgroundColor: _isEnabled
+                      ? const Color(0xFFFF6B35)
+                      : const Color(0xFF78909C),
+                  onChanged: _toggling ? (_) {} : _onToggle,
+                ),
+                // subtitle below
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: 32 + KasySpacing.sm,
+                    bottom: KasySpacing.xs,
+                  ),
+                  child: _permission == null
+                      ? SizedBox(
+                          height: 13,
+                          width: 140,
+                          child: LinearProgressIndicator(
+                            borderRadius: BorderRadius.circular(4),
+                            color: context.colors.primary.withValues(alpha: 0.25),
+                            backgroundColor: context.colors.onSurface
+                                .withValues(alpha: 0.06),
+                          ),
+                        )
+                      : Text(
+                          _subtitle(context),
+                          style: context.textTheme.bodySmall?.copyWith(
+                            color: context.colors.muted,
+                          ),
+                        ),
+                ),
+                if (hasUnread) ...[
+                  const SettingsDivider(),
+                  const SizedBox(height: KasySpacing.xs),
+                  SettingsTile(
+                    icon: KasyIcons.checkCircle,
+                    title: tr.mark_all_read,
+                    iconBackgroundColor: context.colors.primary,
+                    onTap: _markAllRead,
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.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/ui/widgets/notification_tile.dart';
+
+class NotificationTileComponent extends StatelessWidget {
+  final app.Notification notification;
+  final OnTapNotification? onTap;
+  final int index;
+
+  const NotificationTileComponent({
+    super.key,
+    required this.notification,
+    required this.index,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Animate(
+      effects: const [
+        FadeEffect(duration: Duration(milliseconds: 200)),
+        MoveEffect(
+          duration: Duration(milliseconds: 200),
+          curve: Curves.easeOutCubic,
+          begin: Offset(0, 12),
+        ),
+      ],
+      delay: index < 6 ? Duration(milliseconds: 60 * index) : Duration.zero,
+      onComplete: (controller) => controller.stop(),
+      child: KasyHover(
+        onTap: () => onTap?.call(notification),
+        borderRadius: KasyRadius.smBorderRadius,
+        margin: const EdgeInsets.only(top: KasySpacing.sm),
+        child: NotificationTile.from(
+          key: ValueKey('notification_${notification.id}'),
+          context,
+          notification,
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/notifications/ui/components/notifications_header.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class NotificationsHeader extends ConsumerWidget {
+  final double? paddingHeight;
+
+  const NotificationsHeader({super.key, this.paddingHeight});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+        KasySpacing.lg,
+        paddingHeight ?? KasySpacing.smd,
+        KasySpacing.lg,
+        KasySpacing.md,
+      ),
+      child: Row(
+        children: [
+          Text(
+            t.navigation.notifications,
+            style: context.textTheme.headlineMedium!.copyWith(
+              color: context.colors.onSurface,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/notifications/ui/components/push_notification_switcher.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.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/features/settings/ui/widgets/settings_tile.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class PushNotificationSwitcher extends ConsumerStatefulWidget {
+  const PushNotificationSwitcher({super.key});
+
+  @override
+  ConsumerState<PushNotificationSwitcher> createState() =>
+      _PushNotificationSwitcherState();
+}
+
+class _PushNotificationSwitcherState
+    extends ConsumerState<PushNotificationSwitcher> {
+  NotificationPermission? _permission;
+  bool _loading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadPermission();
+  }
+
+  Future<void> _loadPermission() async {
+    final p =
+        await ref.read(notificationRepositoryProvider).getPermissionStatus();
+    if (mounted) setState(() => _permission = p);
+  }
+
+  bool get _isEnabled => _permission is NotificationPermissionGranted;
+
+  String _subtitle(BuildContext context) {
+    final tr = context.t.notifications;
+    return switch (_permission) {
+      NotificationPermissionGranted() => tr.push_subtitle_enabled,
+      NotificationPermissionDenied() => tr.push_subtitle_disabled,
+      _ => tr.push_subtitle_waiting,
+    };
+  }
+
+  Future<void> _onChanged(bool value) async {
+    if (_loading || _permission == null) return;
+    setState(() => _loading = true);
+    await _permission!.maybeAsk();
+    await _loadPermission();
+    if (mounted) setState(() => _loading = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tr = context.t.notifications;
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        vertical: KasySpacing.smd,
+        horizontal: KasySpacing.md,
+      ),
+      decoration: BoxDecoration(
+        borderRadius: KasyRadius.smBorderRadius,
+        color: context.colors.surface,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SettingsSwitchTile(
+            icon: _isEnabled
+                ? KasyIcons.notificationActive
+                : KasyIcons.notification,
+            title: tr.push_title,
+            value: _isEnabled,
+            iconBackgroundColor: _isEnabled
+                ? const Color(0xFFFF6B35)
+                : const Color(0xFF78909C),
+            onChanged: _loading ? (_) {} : _onChanged,
+          ),
+          Padding(
+            padding: const EdgeInsets.only(
+              left: 32 + KasySpacing.sm,
+              bottom: KasySpacing.xs,
+            ),
+            child: _permission == null
+                ? SizedBox(
+                    height: 14,
+                    width: 120,
+                    child: LinearProgressIndicator(
+                      borderRadius: BorderRadius.circular(4),
+                      color: context.colors.primary.withValues(alpha: 0.3),
+                      backgroundColor:
+                          context.colors.onSurface.withValues(alpha: 0.06),
+                    ),
+                  )
+                : Text(
+                    _subtitle(context),
+                    style: context.textTheme.bodySmall?.copyWith(
+                      color: context.colors.muted,
+                    ),
+                  ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,202 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/core/theme/theme.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/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/i18n/translations.g.dart';
+
+class NotificationsPage extends ConsumerStatefulWidget {
+  @override
+  ConsumerState<NotificationsPage> createState() => _NotificationsPageState();
+}
+
+class _NotificationsPageState extends ConsumerState<NotificationsPage> {
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScrollChange);
+    requestReadAll();
+  }
+
+  @override
+  void dispose() {
+    _scrollController.removeListener(_onScrollChange);
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onScrollChange() {
+    final direction = _scrollController.position.userScrollDirection;
+    final isScrollingDown = direction == ScrollDirection.reverse;
+    final isTriggered =
+        _scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 100;
+
+    if (isScrollingDown && isTriggered) {
+      ref.read(notificationsProvider.notifier).fetchNextPage();
+    }
+  }
+
+  void requestReadAll() {
+    Future.delayed(const Duration(seconds: 3), () {
+      if (!ref.context.mounted) return;
+      ref.read(notificationsProvider.notifier).readAll();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final notificationsState = ref.watch(notificationsProvider);
+
+    return KasyOverlayScaffold(
+      title: t.notifications.title,
+      appBarStyle: KasyAppBarStyle.rootTab,
+      scrollController: _scrollController,
+      trailing: Builder(
+        builder: (ctx) => KasyChromeOrbIconButton(
+          icon: KasyIcons.moreVert,
+          iconSize: 18,
+          foregroundColor: ctx.colors.onSurface,
+          onPressed: () => showNotificationSettingsSheet(ctx),
+          tooltip: 'Opções',
+        ),
+      ),
+      onRefresh: () async {
+        ref.read(notificationsProvider.notifier).refresh();
+        requestReadAll();
+      },
+      slivers: [
+        notificationsState.when(
+          loading: () => SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => const NotificationSkeletonTile(),
+              childCount: 5,
+            ),
+          ),
+          data: (notificationsList) {
+            if (notificationsList.data.isEmpty) {
+              return const SliverToBoxAdapter(child: EmptyNotifications());
+            }
+            final items = _buildGroupedItems(notificationsList.data);
+            return SliverList(
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  final item = items[index];
+                  return switch (item) {
+                    _HeaderItem(:final label) => _GroupLabel(label: label),
+                    _TileItem(:final notification, :final animationIndex) =>
+                      NotificationTileComponent(
+                        notification: notification,
+                        index: animationIndex,
+                        onTap: (n) => ref
+                            .read(notificationsProvider.notifier)
+                            .onTapNotification(n),
+                      ),
+                  };
+                },
+                childCount: items.length,
+              ),
+            );
+          },
+          error: (err, stacktrace) => SliverToBoxAdapter(
+            child: Center(
+              child: Padding(
+                padding: const EdgeInsets.all(KasySpacing.xl),
+                child: Text(
+                  t.notifications.error_fetching,
+                  style: context.textTheme.bodyMedium!.copyWith(
+                    color: context.colors.error,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  List<_ListItem> _buildGroupedItems(List<app.Notification> notifications) {
+    final now = DateTime.now();
+    final todayStart = DateTime(now.year, now.month, now.day);
+    final yesterdayStart = todayStart.subtract(const Duration(days: 1));
+
+    final today = <app.Notification>[];
+    final yesterday = <app.Notification>[];
+    final older = <app.Notification>[];
+
+    for (final n in notifications) {
+      final day = DateTime(n.createdAt.year, n.createdAt.month, n.createdAt.day);
+      if (!day.isBefore(todayStart)) {
+        today.add(n);
+      } else if (!day.isBefore(yesterdayStart)) {
+        yesterday.add(n);
+      } else {
+        older.add(n);
+      }
+    }
+
+    final items = <_ListItem>[];
+    var animIndex = 0;
+
+    void addGroup(String label, List<app.Notification> group) {
+      if (group.isEmpty) return;
+      items.add(_HeaderItem(label));
+      for (final n in group) {
+        items.add(_TileItem(n, animIndex++));
+      }
+    }
+
+    addGroup(t.notifications.group_today, today);
+    addGroup(t.notifications.group_yesterday, yesterday);
+    addGroup(t.notifications.group_older, older);
+
+    return items;
+  }
+}
+
+sealed class _ListItem {}
+
+class _HeaderItem extends _ListItem {
+  final String label;
+  _HeaderItem(this.label);
+}
+
+class _TileItem extends _ListItem {
+  final app.Notification notification;
+  final int animationIndex;
+  _TileItem(this.notification, this.animationIndex);
+}
+
+class _GroupLabel extends StatelessWidget {
+  final String label;
+  const _GroupLabel({required this.label});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(
+        top: KasySpacing.xl,
+        bottom: KasySpacing.xs,
+      ),
+      child: Text(
+        label.toUpperCase(),
+        style: context.textTheme.labelSmall?.copyWith(
+          fontSize: 11,
+          color: context.colors.muted,
+          letterSpacing: 1.4,
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,84 @@
+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/api/local_notifier.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+typedef FutureCallback = Future<void> Function();
+
+/// A Page to ask the user to accept or refuse a permission before showing the real permission dialog
+/// - ex : ask for notification permission. If the user accept, we show the real permission dialog
+/// On iOS you can't ask more than once for it
+///
+/// TIPS: use this on onboarding to ask for permissions
+/// You can also use the same logic to ask for location permission, camera permission, etc.
+class RequestNotificationPermission extends ConsumerWidget {
+  final FutureCallback? onAccept;
+  final FutureCallback? onRefuse;
+
+  const RequestNotificationPermission({
+    super.key,
+    this.onAccept,
+    this.onRefuse,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final translations = Translations.of(context) //
+        .request_notification_permission;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(KasySpacing.lg, KasySpacing.xl, KasySpacing.lg, 0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Spacer(),
+          Padding(
+            padding: const EdgeInsets.only(bottom: KasySpacing.lg),
+            child: Icon(
+              KasyIcons.notification,
+              size: 40,
+              color: context.colors.primary,
+            ),
+          ),
+          Text(
+            translations.title,
+            textAlign: TextAlign.center,
+            style: context.textTheme.headlineMedium?.copyWith(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          const SizedBox(height: KasySpacing.md),
+          Text(
+            translations.description,
+            textAlign: TextAlign.center,
+            style: context.textTheme.bodyLarge,
+          ),
+          const SizedBox(height: KasySpacing.xl),
+          const Spacer(),
+          KasyButton(
+            label: translations.continue_button,
+            expand: true,
+            onPressed: () {
+              ref.read(notificationsSettingsProvider).askPermission().then(
+                (accepted) => switch (accepted) {
+                  true => onAccept?.call(),
+                  false => onRefuse?.call(),
+                },
+              );
+            },
+          ),
+          const SizedBox(height: KasySpacing.smd),
+          KasyButton(
+            label: translations.skip_button,
+            variant: KasyButtonVariant.soft,
+            expand: true,
+            onPressed: () => onRefuse?.call(),
+          ),
+          const SizedBox(height: KasySpacing.md),
+        ],
+      ),
+    );
+  }
+}