kasy-cli 1.37.1 → 1.38.0

package/templates/firebase/lib/core/widgets/responsive_layout.dart

@@ -179,6 +179,14 @@ class _DeviceSizeBuilderState extends State<DeviceSizeBuilder>
 /// The maximum width for large devices.
 const kMaxLargeLayoutWidth = 650.0;
 
+/// Canonical max width for a single-column internal screen's content (notifications,
+/// settings detail, reminder, ...). On desktop the content is centered within this
+/// width instead of stretching edge-to-edge, so lists/cards never read too wide.
+///
+/// This is the one knob for "contained internal content" — prefer it over bespoke
+/// per-screen `maxWidth` literals so every internal page lines up to the same ruler.
+const double kKasyContentMaxWidth = 600.0;
+
 /// A widget that constrains its child to a maximum width on large devices.
 /// It uses the [LayoutBuilder] widget to get the current device width
 /// and constrains the child to the maximum width on large devices.

package/templates/firebase/lib/features/home/home_components_page.dart

@@ -28,8 +28,22 @@ class HomeComponentsPage extends StatelessWidget {
             title: 'Components',
             onBack: () => Navigator.maybePop(context),
           ),
-          Expanded(
-            child: Padding(
+          const Expanded(child: HomeComponentsCatalog()),
+        ],
+      ),
+    );
+  }
+}
+
+/// The UI-kit catalog list on its own (no app bar / scaffold), so it can be the
+/// body of [HomeComponentsPage] AND a section inside the admin console (which
+/// supplies its own chrome). Fills the space it is given.
+class HomeComponentsCatalog extends StatelessWidget {
+  const HomeComponentsCatalog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
               padding: EdgeInsets.fromLTRB(
                 KasySpacing.pageHorizontalGutter,
                 KasySpacing.belowChromeContentGap,
@@ -158,10 +172,6 @@ class HomeComponentsPage extends StatelessWidget {
                   ),
                 ),
               ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 }

package/templates/firebase/lib/features/local_reminders/ui/reminder_page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/components/kasy_card.dart';
 import 'package:kasy_kit/components/kasy_chip.dart';
 import 'package:kasy_kit/components/kasy_date_picker.dart';
@@ -126,6 +127,12 @@ class _ReminderForm extends ConsumerWidget {
                   _FieldLabel(tr.dateLabel),
                   const SizedBox(height: KasySpacing.sm),
                   KasyDatePicker(
+                    // Anchored popover on phones/tablets (the original feel),
+                    // centered dialog on desktop. The call site picks by width
+                    // via kasySheetUsesDialog so each presentation stays pure.
+                    presentation: kasySheetUsesDialog(context)
+                        ? KasyDatePickerPresentation.dialog
+                        : KasyDatePickerPresentation.popover,
                     value: state.date,
                     minDate: DateTime.now(),
                     onChanged: (picked) {

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.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';
@@ -8,10 +9,8 @@ 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>(
+  showKasyBottomSheet<void>(
     context: context,
-    useRootNavigator: true,
-    backgroundColor: Colors.transparent,
     isScrollControlled: true,
     builder: (_) => const _NotificationSettingsSheet(),
   );
@@ -73,14 +72,18 @@ class _NotificationSettingsSheetState
     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,
-      ),
+    final bool floating = kasySheetIsFloating(context);
+
+    final Widget card = Container(
+      margin: floating
+          ? EdgeInsets.zero
+          : 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,
@@ -91,8 +94,9 @@ class _NotificationSettingsSheetState
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          // drag handle
-          Padding(
+          // drag handle (bottom-sheet form only)
+          if (!floating)
+            Padding(
             padding: const EdgeInsets.only(top: KasySpacing.smd),
             child: Container(
               width: 36,
@@ -165,5 +169,11 @@ class _NotificationSettingsSheetState
         ],
       ),
     );
+
+    if (!floating) return card;
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 420),
+      child: card,
+    );
   }
 }

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

@@ -5,6 +5,7 @@ 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';
@@ -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(

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 [KasyWebHeader] 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/settings/settings_page.dart

@@ -15,6 +15,7 @@ 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/kasy_hover.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/authentication/repositories/authentication_repository.dart';
 import 'package:kasy_kit/features/authentication/repositories/exceptions/authentication_exceptions.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
@@ -580,6 +581,8 @@ class _SettingsDesktopView extends ConsumerStatefulWidget {
 class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
   _DesktopSection _selected = _DesktopSection.account;
 
+  void _select(_DesktopSection s) => setState(() => _selected = s);
+
   List<_DesktopSection> get _sections => <_DesktopSection>[
         _DesktopSection.account,
         _DesktopSection.preferences,
@@ -593,47 +596,57 @@ class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
     final List<_DesktopSection> sections = _sections;
     if (!sections.contains(_selected)) _selected = sections.first;
 
+    final Widget pane = _DesktopDetail(
+      section: _selected,
+      userId: widget.userId,
+      name: widget.name,
+      editableName: widget.editableName,
+      email: widget.email,
+      isAuthenticated: widget.isAuthenticated,
+      isPhone: widget.isPhone,
+    );
+
+    const double navWidth = 248;
+    const double gap = KasySpacing.xxl;
+    const double groupWidth = navWidth + gap + kKasyContentMaxWidth;
+
     return Center(
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 1080),
-        child: Padding(
-          padding: const EdgeInsets.only(
-            top: KasySpacing.lg,
-            bottom: KasySpacing.xxl,
-          ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SizedBox(
-                width: 248,
-                child: _DesktopNav(
-                  sections: sections,
-                  selected: _selected,
-                  name: widget.name,
-                  email: widget.email,
-                  onSelect: (s) => setState(() => _selected = s),
-                ),
-              ),
-              const SizedBox(width: KasySpacing.xxl),
-              Expanded(
-                child: Align(
-                  alignment: Alignment.topLeft,
-                  child: ConstrainedBox(
-                    constraints: const BoxConstraints(maxWidth: 600),
-                    child: _DesktopDetail(
-                      section: _selected,
-                      userId: widget.userId,
-                      name: widget.name,
-                      editableName: widget.editableName,
-                      email: widget.email,
-                      isAuthenticated: widget.isAuthenticated,
-                      isPhone: widget.isPhone,
-                    ),
+      child: Padding(
+        padding: const EdgeInsets.only(
+          top: KasySpacing.lg,
+          bottom: KasySpacing.xxl,
+        ),
+        // Center the nav + detail as ONE unit so the whitespace is equal on
+        // both sides (Linear/Notion settings), instead of pinning the nav left
+        // and leaving the right empty. Settings are forms, so the detail keeps
+        // a comfortable reading width rather than stretching wide. On tight
+        // desktop widths the detail fills the remaining space so it never
+        // overflows.
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            final bool fits = constraints.maxWidth >= groupWidth;
+            return Row(
+              mainAxisSize: fits ? MainAxisSize.min : MainAxisSize.max,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SizedBox(
+                  width: navWidth,
+                  child: _DesktopNav(
+                    sections: sections,
+                    selected: _selected,
+                    name: widget.name,
+                    email: widget.email,
+                    onSelect: _select,
                   ),
                 ),
-              ),
-            ],
-          ),
+                const SizedBox(width: gap),
+                if (fits)
+                  SizedBox(width: kKasyContentMaxWidth, child: pane)
+                else
+                  Expanded(child: pane),
+              ],
+            );
+          },
         ),
       ),
     );