kasy-cli 1.37.0 → 1.38.0

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

@@ -16,7 +16,10 @@ import 'package:kasy_kit/i18n/translations.g.dart';
 // ─────────────────────────────────────────────────────────────────────────────
 
 // Figma sidebar is 223 wide; we run a touch wider for breathing room.
-const double _kWidthOpen = 248.0;
+/// Open (expanded) width of the rail. Exposed so hosts that present it as a
+/// drawer can size the drawer to match (e.g. the admin console on mobile).
+const double kasySidebarWidth = 248.0;
+const double _kWidthOpen = kasySidebarWidth;
 const double _kWidthCollapsed = 64.0;
 const double _kPadH = 16.0; // px-4
 // Tighter horizontal gutter for the narrow collapsed rail, so a 64px rail keeps
@@ -208,11 +211,68 @@ enum KasySidebarCollapseMode {
   collapsed,
 }
 
+/// One row in the sidebar's generic ([KasySidebar.items]) mode: an icon, a
+/// label and a tap callback. Reuses the exact same row recipe as the app's real
+/// navigation, so a host (e.g. the admin console) can drive the SAME sidebar
+/// with its own screens instead of the Bart-connected app tabs.
+///
+/// When [children] is non-empty the row becomes an expandable group (the same
+/// dropdown recipe as the connected "Income" submenu): tapping the row toggles
+/// the sub-items, and [onTap] is ignored. A leaf row uses [onTap] to navigate
+/// and [selected] to show the active pill.
+class KasySidebarItem {
+  final IconData icon;
+  final String label;
+
+  /// Leaf tap (navigate). Ignored when [children] is non-empty (a group only
+  /// expands/collapses on tap).
+  final VoidCallback? onTap;
+
+  /// Highlights this leaf as the active screen.
+  final bool selected;
+
+  /// Sub-rows. When non-empty this item renders as an expandable group instead
+  /// of a leaf.
+  final List<KasySidebarSubItem> children;
+
+  const KasySidebarItem({
+    required this.icon,
+    required this.label,
+    this.onTap,
+    this.selected = false,
+    this.children = const [],
+  });
+
+  bool get isGroup => children.isNotEmpty;
+}
+
+/// A sub-row under an expandable [KasySidebarItem] group (text-only, like the
+/// connected "Income" submenu). [selected] highlights the active screen.
+class KasySidebarSubItem {
+  final String label;
+  final VoidCallback onTap;
+  final bool selected;
+  const KasySidebarSubItem({
+    required this.label,
+    required this.onTap,
+    this.selected = false,
+  });
+}
+
 /// A SaaS-style sidebar modelled on the HeroUI Figma kit: brand logo + panel
 /// toggle, a workspace selector, a segmented control, a navigable list with an
 /// active pill, and a pinned ⌘K search row. Collapses to an icon rail (with
 /// tooltips and a hover submenu popup) on narrow viewports or via the toggle.
 ///
+/// Three modes, in priority order:
+/// 1. **Generic** — pass [items] (+ [sectionLabel], [footerItems]) to drive the
+///    rail with an arbitrary screen list (leaves and/or expandable groups). Used
+///    by the admin console so it shares this exact component (logo, collapse,
+///    tooltips, profile) instead of a bespoke copy.
+/// 2. **Connected** — pass [routes]/[onTapItem]/[currentItem] for the real app
+///    tabs (Bart navigation).
+/// 3. **Showcase** — the HeroUI demo items (default).
+///
 /// Pass [onSettingsTap] to respond when the user taps Settings.
 class KasySidebar extends StatefulWidget {
   const KasySidebar({
@@ -232,8 +292,23 @@ class KasySidebar extends StatefulWidget {
     this.profileGradient = KasyAvatarGradients.indigo,
     this.onProfileTap,
     this.notificationsUnread = 0,
+    this.items,
+    this.sectionLabel,
+    this.footerItems = const [],
   });
 
+  /// Generic nav rows. When non-null the sidebar runs in generic mode (renders
+  /// these — leaves highlighted by their own [KasySidebarItem.selected], groups
+  /// expandable) instead of connected/showcase.
+  final List<KasySidebarItem>? items;
+
+  /// Optional uppercase section label shown above [items] (e.g. "ADMIN").
+  final String? sectionLabel;
+
+  /// Rows pinned at the bottom of [items] mode (above the profile block), like
+  /// the connected layout's Help/Logout — e.g. a "Back to app" action.
+  final List<KasySidebarItem> footerItems;
+
   /// Unread notification count. When greater than zero, the Notifications nav
   /// item shows an unread dot (mirrors the bottom-bar badge). Purely an unread
   /// indicator — not tied to push (which is native-only).
@@ -254,7 +329,7 @@ class KasySidebar extends StatefulWidget {
   /// gradient-fill avatar ([profileGradient]) is shown instead.
   final Widget? profileAvatar;
 
-  /// Gradient used for the profile avatar when no [profileImage] is given.
+  /// Gradient used for the profile avatar when no [profileAvatar] is given.
   final KasyAvatarGradientData profileGradient;
 
   /// Tap on the profile block (open account menu / profile).
@@ -305,6 +380,11 @@ class _KasySidebarState extends State<KasySidebar> {
 
   bool _incomeExpanded = false;
 
+  // Expanded groups in generic [items] mode, keyed by the group's label (labels
+  // are unique per rail). A group is also shown expanded whenever one of its
+  // children is the active screen (so the open submenu always reflects the URL).
+  final Set<String> _expandedItemGroups = <String>{};
+
   // Showcase state.
   int _showcaseTab = 0; // 0 = Layers, 1 = Assets
   late String _activeItemId;
@@ -399,29 +479,19 @@ class _KasySidebarState extends State<KasySidebar> {
         ? Border(right: BorderSide(color: c.border, width: 0.5))
         : Border(left: BorderSide(color: c.border, width: 0.5));
 
-    // Figma `shadow-surface`: a soft lift in light mode only (dark uses none).
-    final List<BoxShadow> shadow = c.isDark
-        ? const <BoxShadow>[]
-        : const <BoxShadow>[
-            BoxShadow(
-              color: Color(0x14000000),
-              blurRadius: 4,
-              offset: Offset(0, 2),
-            ),
-            BoxShadow(
-              color: Color(0x0F000000),
-              blurRadius: 2,
-              offset: Offset(0, 1),
-            ),
-          ];
-
-    final Widget content = _connected
-        ? ValueListenableBuilder<int>(
-            valueListenable: widget.currentItem!,
-            builder: (_, currentIndex, _) =>
-                _buildConnectedContent(context, c, currentIndex),
-          )
-        : _buildShowcaseContent(context, c);
+    // No drop shadow: the rail separates from the content with the crisp 0.5px
+    // edge hairline only (it also bled at the seam when the content area didn't
+    // overpaint it). The hairline aligns with the web header's bottom border, so
+    // the chrome reads as one clean line — no soft contour around the rail.
+    final Widget content = widget.items != null
+        ? _buildItemsContent(context, c)
+        : _connected
+            ? ValueListenableBuilder<int>(
+                valueListenable: widget.currentItem!,
+                builder: (_, currentIndex, _) =>
+                    _buildConnectedContent(context, c, currentIndex),
+              )
+            : _buildShowcaseContent(context, c);
 
     return Material(
       type: MaterialType.transparency,
@@ -429,7 +499,7 @@ class _KasySidebarState extends State<KasySidebar> {
         duration: const Duration(milliseconds: 220),
         curve: Curves.easeInOut,
         width: _collapsed ? _kWidthCollapsed : _kWidthOpen,
-        decoration: BoxDecoration(color: c.bg, boxShadow: shadow),
+        decoration: BoxDecoration(color: c.bg),
         foregroundDecoration: BoxDecoration(border: edgeBorder),
         clipBehavior: Clip.hardEdge,
         child: content,
@@ -463,7 +533,7 @@ class _KasySidebarState extends State<KasySidebar> {
                     if (!_collapsed) ...[
                       _buildWorkspaceSelector(c),
                       const SizedBox(height: _kHeaderGap),
-                      _buildTabs(c),
+                      _buildTabs(),
                       const SizedBox(height: _kNavGap),
                     ],
                     for (final item in _kShowcaseItems)
@@ -503,6 +573,305 @@ class _KasySidebarState extends State<KasySidebar> {
     );
   }
 
+  // ── Generic layout (host-provided items, e.g. admin console) ────────────────
+
+  /// Same chrome as the connected layout (logo band, dividers, profile block,
+  /// collapse + tooltips) but driven by [KasySidebar.items]/[footerItems], so a
+  /// host reuses this exact component with its own screens.
+  Widget _buildItemsContent(BuildContext context, _SidebarColors c) {
+    final List<KasySidebarItem> items = widget.items!;
+    return SizedBox.expand(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildTopBand(c),
+          _buildDivider(c),
+          Expanded(
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: _railPadH),
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Top gap inside the scroll view so the list scrolls flush
+                    // under the top divider (symmetric with the bottom).
+                    const SizedBox(height: _kDividerGap),
+                    if (!_collapsed && widget.sectionLabel != null) ...[
+                      _buildSectionLabel(widget.sectionLabel!, c),
+                      const SizedBox(height: _kItemGap),
+                    ],
+                    for (final item in items)
+                      if (item.isGroup)
+                        _buildItemsGroup(context, item, c)
+                      else
+                        _buildItemRow(
+                          c,
+                          icon: item.icon,
+                          label: item.label,
+                          isActive: item.selected,
+                          onTap: () => _selectItemsLeaf(item.onTap),
+                        ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          _buildDivider(c),
+          const SizedBox(height: _kFooterGap),
+          Padding(
+            padding: EdgeInsets.fromLTRB(_railPadH, 0, _railPadH, _kPadBottom),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                for (final f in widget.footerItems)
+                  _buildItemRow(
+                    c,
+                    icon: f.icon,
+                    label: f.label,
+                    isActive: false,
+                    onTap: () => _selectItemsLeaf(f.onTap),
+                  ),
+                if (widget.showProfile) _buildProfile(c),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ── Generic expandable group (items mode) ────────────────────────────────
+
+  /// Navigating to a top-level (or footer) row collapses any open submenu group
+  /// — matching the connected Income dropdown, which closes when you move to
+  /// another screen. A group that holds the active screen re-opens on its own
+  /// (via [KasySidebarSubItem.selected]), so this only closes a manually-opened
+  /// one you're navigating away from.
+  void _selectItemsLeaf(VoidCallback? onTap) {
+    if (_expandedItemGroups.isNotEmpty) {
+      setState(() => _expandedItemGroups.clear());
+    }
+    onTap?.call();
+  }
+
+  /// An expandable group row in [items] mode — the same dropdown recipe as the
+  /// connected "Income" submenu, but driven by [KasySidebarItem.children].
+  /// Shown expanded when the user toggled it open OR when one of its children
+  /// is the active screen (so the open submenu always reflects the URL).
+  Widget _buildItemsGroup(
+    BuildContext context,
+    KasySidebarItem item,
+    _SidebarColors c,
+  ) {
+    final bool hasActiveChild = item.children.any((s) => s.selected);
+    final bool expanded =
+        _expandedItemGroups.contains(item.label) || hasActiveChild;
+    final Color iconColor = expanded ? c.textActive : c.textMuted;
+
+    // Collapsed icon rail: the children live in a hover popup (same as Income).
+    if (_collapsed) {
+      String activeLabel = '';
+      for (final s in item.children) {
+        if (s.selected) {
+          activeLabel = s.label;
+          break;
+        }
+      }
+      return Padding(
+        padding: const EdgeInsets.only(bottom: _kItemGap),
+        child: _ProHoverPopupIcon(
+          icon: item.icon,
+          iconBg: hasActiveChild ? c.activeBg : Colors.transparent,
+          iconColor: iconColor,
+          subItems: [for (final s in item.children) s.label],
+          activeSubItem: activeLabel,
+          colors: c,
+          anchoredLeft: widget.side == KasySidebarSide.left,
+          onSubItemTap: (label) {
+            for (final s in item.children) {
+              if (s.label == label) {
+                s.onTap();
+                break;
+              }
+            }
+          },
+        ),
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        KasyHover(
+          borderRadius: BorderRadius.circular(_kItemRadius),
+          hoverColor: c.activeBg,
+          pressColor: c.textActive,
+          focusable: true,
+          focusGapColor: c.bg,
+          onTap: () => setState(() {
+            if (!_expandedItemGroups.remove(item.label)) {
+              _expandedItemGroups.add(item.label);
+            }
+          }),
+          child: Container(
+            constraints: const BoxConstraints(minHeight: _kItemMinH),
+            padding: const EdgeInsets.symmetric(
+              horizontal: _kItemHPad,
+              vertical: _kItemVPad,
+            ),
+            decoration: BoxDecoration(
+              color: hasActiveChild ? c.activeBg : Colors.transparent,
+              borderRadius: BorderRadius.circular(_kItemRadius),
+            ),
+            child: Row(
+              children: [
+                Icon(item.icon, size: _kIconSize, color: iconColor),
+                const SizedBox(width: _kIconGap),
+                Expanded(
+                  child: Text(
+                    item.label,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: context.kasyTextTheme.rowTitle.copyWith(
+                      color: c.textActive,
+                    ),
+                  ),
+                ),
+                AnimatedRotation(
+                  turns: expanded ? 0.5 : 0,
+                  duration: const Duration(milliseconds: 200),
+                  child: Icon(
+                    KasyIcons.chevronDown,
+                    size: _kIconSize,
+                    color: iconColor,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        AnimatedCrossFade(
+          duration: const Duration(milliseconds: 200),
+          crossFadeState:
+              expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+          firstChild: _buildItemsSubTree(item.children, c),
+          secondChild: const SizedBox.shrink(),
+        ),
+        const SizedBox(height: _kItemGap),
+      ],
+    );
+  }
+
+  /// The connector tree under an expanded [items]-mode group (mirrors the
+  /// connected Income tree, but generic over [KasySidebarSubItem]).
+  Widget _buildItemsSubTree(
+    List<KasySidebarSubItem> subItems,
+    _SidebarColors c,
+  ) {
+    final double lineH = _treeLineHeight(subItems.length);
+    return Padding(
+      padding: const EdgeInsets.only(left: _kSubIndent),
+      child: SizedBox(
+        width: 172,
+        child: Stack(
+          clipBehavior: Clip.none,
+          children: [
+            Positioned(
+              left: -_kTreeConnectorW,
+              top: 0,
+              child: Container(
+                width: 1.5,
+                height: lineH,
+                decoration: BoxDecoration(
+                  color: c.divider,
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+            ),
+            Column(
+              children: [
+                for (int i = 0; i < subItems.length; i++)
+                  _buildItemsSubItem(subItems[i], i == subItems.length - 1, c),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildItemsSubItem(
+    KasySidebarSubItem sub,
+    bool isLast,
+    _SidebarColors c,
+  ) {
+    final bool isActive = sub.selected;
+    final Color textColor = isActive ? c.textActive : c.textMuted;
+
+    return Padding(
+      padding: EdgeInsets.only(bottom: isLast ? 0 : _kSubItemGap),
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned(
+            left: -_kTreeConnectorW,
+            top: _kSubItemH / 2 - 4,
+            child: Container(
+              width: _kTreeConnectorW,
+              height: 8,
+              decoration: BoxDecoration(
+                border: Border(
+                  left: BorderSide(color: c.divider, width: 1.5),
+                  bottom: BorderSide(color: c.divider, width: 1.5),
+                ),
+                borderRadius: const BorderRadius.only(
+                  bottomLeft: Radius.circular(8),
+                ),
+              ),
+            ),
+          ),
+          KasyHover(
+            borderRadius: BorderRadius.circular(_kItemRadius),
+            hoverColor: c.activeBg,
+            pressColor: c.textActive,
+            focusable: true,
+            focusGapColor: c.bg,
+            onTap: sub.onTap,
+            child: Container(
+              height: _kSubItemH,
+              padding: const EdgeInsets.symmetric(
+                horizontal: _kItemHPad,
+                vertical: 8,
+              ),
+              // Active sub-item is shown by its LABEL only (bold + active color),
+              // never a filled pill — exactly like the connected Income submenu
+              // on Home. The pill is reserved for top-level screens.
+              decoration: BoxDecoration(
+                color: Colors.transparent,
+                borderRadius: BorderRadius.circular(_kItemRadius),
+              ),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  sub.label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  // Active sub-item: heavier weight (w700) for a clear "you are
+                  // here", no pill / accent — emphasis comes from the bold name.
+                  style: context.textTheme.labelMedium?.copyWith(
+                    fontWeight: isActive ? FontWeight.w700 : FontWeight.w500,
+                    color: textColor,
+                    letterSpacing: -0.24,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
   // ── Connected layout (real navigation) ──────────────────────────────────────
 
   Widget _buildConnectedContent(
@@ -712,7 +1081,7 @@ class _KasySidebarState extends State<KasySidebar> {
   /// The showcase segment is the shared [KasyTabs] component (primary pill,
   /// fill mode) so the sidebar demos the real design-system control rather than
   /// a bespoke copy.
-  Widget _buildTabs(_SidebarColors c) {
+  Widget _buildTabs() {
     return KasyTabs(
       tabs: const ['Layers', 'Assets'],
       selectedIndex: _showcaseTab,

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

@@ -40,12 +40,19 @@ class KasyWebHeader extends StatelessWidget {
   /// Called when the search field is submitted (Enter).
   final ValueChanged<String>? onSearchSubmitted;
 
-  /// Notifications (bell) action. When null the bell is disabled.
+  /// Notifications (bell) action. When null the bell is disabled. Ignored when
+  /// [notifications] is provided.
   final VoidCallback? onNotifications;
 
-  /// Shows the unread dot on the notifications bell.
+  /// Shows the unread dot on the notifications bell. Ignored when
+  /// [notifications] is provided.
   final bool showNotificationBadge;
 
+  /// Custom notifications control. When set, it replaces the built-in bell —
+  /// pass a data-aware widget (e.g. a bell that opens a recent-notifications
+  /// dropdown) so the header itself stays a pure presentational component.
+  final Widget? notifications;
+
   /// Primary quick-create action. When null the button is disabled.
   final VoidCallback? onCreate;
 
@@ -79,6 +86,7 @@ class KasyWebHeader extends StatelessWidget {
     this.onSearchSubmitted,
     this.onNotifications,
     this.showNotificationBadge = false,
+    this.notifications,
     this.onCreate,
     this.createLabel = 'Create',
     this.avatarGradient = KasyAvatarGradients.orange,
@@ -120,7 +128,7 @@ class KasyWebHeader extends StatelessWidget {
                 _buildThemeToggle(context),
                 const SizedBox(width: KasySpacing.md),
               ],
-              _buildNotifications(context),
+              notifications ?? _buildNotifications(context),
               const SizedBox(width: KasySpacing.md),
               KasyButton(
                 label: createLabel,