kasy-cli 1.19.3 → 1.20.0

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

@@ -0,0 +1,1148 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/icons/kasy_icons.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Design tokens — from Figma (node 2:1331 / 6:114)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const double _kWidthOpen = 256.0;
+const double _kWidthCollapsed = 92.0;
+const double _kPad = 24.0;
+const double _kItemRadius = 8.0;
+const double _kItemVPad = 10.0;
+const double _kItemHPad = 12.0;
+const double _kItemGap = 8.0;
+const double _kSubItemH = 32.0;
+const double _kSubItemGap = 4.0;
+const double _kSubIndent = 36.0;
+const double _kTreeConnectorW = 13.0;
+const double _kCollapseButtonSize = 28.0;
+
+/// Returns the height of the vertical tree line for [n] sub-items.
+double _treeLineHeight(int n) =>
+    (n * (_kSubItemH + _kSubItemGap) - _kSubItemGap) * 0.8627;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Color palette
+// ─────────────────────────────────────────────────────────────────────────────
+
+enum _SidebarColors {
+  light(
+    bg: Color(0xFFFFFFFF),
+    border: Color(0x1A000000),
+    divider: Color(0xFFF6F6F6),
+    activeBg: Color(0xFFF6F6F6),
+    textMuted: Color(0xFF757575),
+    textActive: Color(0xFF000000),
+    logout: Color(0xFFD55F5A),
+  ),
+  dark(
+    bg: Color(0xFF161A23),
+    border: Color(0x1AFFFFFF),
+    divider: Color(0xFF2D2F39),
+    activeBg: Color(0xFF2D2F39),
+    textMuted: Color(0x80FFFFFF),
+    textActive: Color(0xCCFFFFFF),
+    logout: Color(0xFFCC8889),
+  );
+
+  const _SidebarColors({
+    required this.bg,
+    required this.border,
+    required this.divider,
+    required this.activeBg,
+    required this.textMuted,
+    required this.textActive,
+    required this.logout,
+  });
+
+  final Color bg;
+  final Color border;
+  final Color divider;
+  final Color activeBg;
+  final Color textMuted;
+  final Color textActive;
+  final Color logout;
+
+  /// True when this palette is the dark-mode variant.
+  /// Used by overlay widgets (tooltips, popups) that cannot rely on
+  /// Theme.of(overlayContext) since overlay contexts may not inherit the
+  /// app theme correctly.
+  bool get isDark => identical(this, dark) || bg == dark.bg;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Popup shadow — simplified from 6-layer Figma spec
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<BoxShadow> _kPopupShadow = [
+  BoxShadow(color: Color(0x12000000), blurRadius: 40, offset: Offset(0, 16)),
+  BoxShadow(color: Color(0x0D000000), blurRadius: 17, offset: Offset(0, 8)),
+  BoxShadow(color: Color(0x08000000), blurRadius: 5, offset: Offset(0, 2)),
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Nav item model
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _NavItem {
+  const _NavItem({
+    required this.id,
+    required this.icon,
+    required this.label,
+    this.subItems = const [],
+    this.isLogout = false,
+  });
+
+  final String id;
+  final IconData icon;
+  final String label;
+  final List<String> subItems;
+  final bool isLogout;
+
+  bool get hasSubmenu => subItems.isNotEmpty;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Static nav data (mirrors the Figma)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<_NavItem> _kMainItems = [
+  _NavItem(id: 'dashboard', icon: KasyIcons.home, label: 'Dashboard'),
+  _NavItem(id: 'audience', icon: KasyIcons.person, label: 'Audience'),
+  _NavItem(id: 'posts', icon: KasyIcons.note, label: 'Posts'),
+  _NavItem(id: 'schedules', icon: KasyIcons.calendar, label: 'Schedules'),
+  _NavItem(
+    id: 'income',
+    icon: KasyIcons.book,
+    label: 'Income',
+    subItems: ['Earnings', 'Refunds', 'Declines', 'Payouts'],
+  ),
+];
+
+const _NavItem _kSettingsItem = _NavItem(
+  id: 'settings',
+  icon: KasyIcons.settings,
+  label: 'Settings',
+);
+
+const List<_NavItem> _kBottomItems = [
+  _NavItem(id: 'help', icon: KasyIcons.help, label: 'Help'),
+  _NavItem(
+    id: 'logout',
+    icon: KasyIcons.logout,
+    label: 'Logout Account',
+    isLogout: true,
+  ),
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// KasySidebarPro — public widget
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Which screen edge the sidebar is anchored to.
+///
+/// Controls which corners receive [BorderRadius]: the edge touching the screen
+/// has flat (zero) corners; the opposite edge gets the rounded corners.
+enum KasySidebarProSide { left, right }
+
+/// A pro-style collapsible sidebar with expandable submenu tree, hover popups
+/// in collapsed mode, and full light / dark mode support.
+///
+/// Pass [onSettingsTap] to respond when the user taps Settings.
+/// The sidebar manages its own collapsed state and sub-menu expansion.
+class KasySidebarPro extends StatefulWidget {
+  const KasySidebarPro({
+    super.key,
+    this.onSettingsTap,
+    this.initiallyCollapsed = false,
+    this.side = KasySidebarProSide.left,
+  });
+
+  final VoidCallback? onSettingsTap;
+
+  /// Whether the sidebar starts in the narrow (icon-only) mode.
+  final bool initiallyCollapsed;
+
+  /// The screen edge this sidebar is anchored to.
+  ///
+  /// [KasySidebarProSide.left] → flat left corners, rounded right corners.
+  /// [KasySidebarProSide.right] → flat right corners, rounded left corners.
+  final KasySidebarProSide side;
+
+  @override
+  State<KasySidebarPro> createState() => _KasySidebarProState();
+}
+
+class _KasySidebarProState extends State<KasySidebarPro> {
+  // User's explicit open/close preference (set by tapping the toggle button).
+  late bool _userChoseCollapsed;
+
+  // Computed at the start of build() — true when user chose narrow OR viewport
+  // is below the breakpoint. All submethods read this field directly.
+  bool _collapsed = false;
+
+  bool _incomeExpanded = false;
+  String _activeItemId = 'dashboard';
+  String _activeSubItem = '';
+
+  /// Viewport width below which the sidebar auto-collapses (tablet breakpoint).
+  static const double _kBreakpoint = 1024.0;
+
+  @override
+  void initState() {
+    super.initState();
+    _userChoseCollapsed = widget.initiallyCollapsed;
+  }
+
+  bool _isViewportNarrow(BuildContext context) =>
+      MediaQuery.sizeOf(context).width < _kBreakpoint;
+
+  // ── Color helpers ──────────────────────────────────────────────────────────
+
+  _SidebarColors get _colors =>
+      Theme.of(context).brightness == Brightness.dark
+          ? _SidebarColors.dark
+          : _SidebarColors.light;
+
+  // ── Actions ───────────────────────────────────────────────────────────────
+
+  // Only the user's preference toggles — never the viewport-forced state.
+  void _toggleCollapse() =>
+      setState(() => _userChoseCollapsed = !_userChoseCollapsed);
+
+  void _activateItem(String id) {
+    if (id == 'settings') {
+      widget.onSettingsTap?.call();
+    } else if (id == 'income') {
+      setState(() => _incomeExpanded = !_incomeExpanded);
+    }
+    setState(() {
+      _activeItemId = id;
+      // Leaving Income → clear the active sub-item so it doesn't stay
+      // highlighted when the user is on a completely different page.
+      if (id != 'income') _activeSubItem = '';
+    });
+  }
+
+  void _activateSubItem(String label) => setState(() {
+    _activeSubItem = label;
+    _activeItemId = 'income'; // sub-item belongs to Income → highlight it
+  });
+
+  // ── Build ─────────────────────────────────────────────────────────────────
+
+  @override
+  Widget build(BuildContext context) {
+    // Recompute effective collapsed state every build so viewport changes
+    // are picked up automatically without any extra listener.
+    _collapsed = _userChoseCollapsed || _isViewportNarrow(context);
+
+    final c = _colors;
+
+    final bool anchoredLeft = widget.side == KasySidebarProSide.left;
+    const Radius r = Radius.circular(12);
+    final BorderRadius borderRadius = anchoredLeft
+        ? const BorderRadius.only(topRight: r, bottomRight: r)
+        : const BorderRadius.only(topLeft: r, bottomLeft: r);
+    final Border border = anchoredLeft
+        ? Border(right: BorderSide(color: c.border))
+        : Border(left: BorderSide(color: c.border));
+
+    // The outer AnimatedContainer is extended by half the button width (14px)
+    // on the side where the collapse button protrudes. This makes the button
+    // visually straddle the edge AND stay within parent bounds — Flutter only
+    // delivers hit tests to widgets inside their parent's bounds.
+    //
+    // Layout:                  left-anchored example
+    //   ┌── outer (256+14) ─────────────────────────┐
+    //   │ ┌── sidebar box (256) ──────────┐          │
+    //   │ │   content                     │ [button] │
+    //   │ └───────────────────────────────┘          │
+    //   └────────────────────────────────────────────┘
+    //
+    // The 14px transparent strip on the right holds the outer half of the
+    // button, giving it a full 28×28 hittable area.
+    const double halfBtn = _kCollapseButtonSize / 2; // 14px
+
+    return Material(
+      type: MaterialType.transparency,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 220),
+        curve: Curves.easeInOut,
+        width: (_collapsed ? _kWidthCollapsed : _kWidthOpen) + halfBtn,
+        child: Stack(
+          children: [
+            // Sidebar background + content (leaves halfBtn space for button).
+            Positioned(
+              left: anchoredLeft ? 0 : halfBtn,
+              right: anchoredLeft ? halfBtn : 0,
+              top: 0,
+              bottom: 0,
+              child: ClipRRect(
+                borderRadius: borderRadius,
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    color: c.bg,
+                    border: border,
+                    borderRadius: borderRadius,
+                  ),
+                  child: _buildScrollableContent(context, c),
+                ),
+              ),
+            ),
+            // Collapse button — centered on the sidebar edge, fully within
+            // the outer container so hit tests work correctly.
+            _buildCollapseButton(context, c),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // ── Scrollable content ────────────────────────────────────────────────────
+
+  Widget _buildScrollableContent(BuildContext context, _SidebarColors c) {
+    // Use a Column that fills the sidebar height.
+    // Top section scrolls if content overflows; bottom items (Help + Logout)
+    // stay pinned to the bottom via Spacer in the outer Column.
+    return Positioned.fill(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // ── Scrollable nav area ──────────────────────────────────────────
+          Expanded(
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.fromLTRB(
+                _kPad, _kPad, _kPad, 0,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  _buildProfile(context, c),
+                  const SizedBox(height: _kPad),
+                  _buildDivider(c),
+                  const SizedBox(height: _kPad),
+                  _buildSectionLabel('MAIN', c),
+                  const SizedBox(height: _kItemGap),
+                  ..._kMainItems.map((item) => _buildNavItem(context, item, c)),
+                  const SizedBox(height: _kPad),
+                  _buildDivider(c),
+                  const SizedBox(height: _kPad),
+                  _buildSectionLabel('SETTINGS', c),
+                  const SizedBox(height: _kItemGap),
+                  _buildNavItem(context, _kSettingsItem, c),
+                ],
+              ),
+            ),
+          ),
+          // ── Bottom items pinned ──────────────────────────────────────────
+          Padding(
+            padding: const EdgeInsets.fromLTRB(
+              _kPad, _kItemGap, _kPad, _kPad,
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: _kBottomItems
+                  .map((item) => _buildNavItem(context, item, c))
+                  .toList(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ── Profile ───────────────────────────────────────────────────────────────
+
+  Widget _buildProfile(BuildContext context, _SidebarColors c) {
+    const double avatarSize = 44;
+    final Widget avatar = Container(
+      width: avatarSize,
+      height: avatarSize,
+      decoration: BoxDecoration(
+        color: c.divider,
+        shape: BoxShape.circle,
+      ),
+      child: Icon(KasyIcons.person, size: 20, color: c.textMuted),
+    );
+
+    return Row(
+      children: [
+        avatar,
+        AnimatedSize(
+          duration: const Duration(milliseconds: 220),
+          curve: Curves.easeInOut,
+          child: _collapsed
+              ? const SizedBox.shrink()
+              : Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const SizedBox(width: 12),
+                    Flexible(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Text(
+                            'PRODUCT MANAGER',
+                            style: TextStyle(
+                              fontSize: 10,
+                              fontWeight: FontWeight.w500,
+                              color: c.textMuted,
+                              letterSpacing: 0.4,
+                            ),
+                          ),
+                          const SizedBox(height: 4),
+                          Text(
+                            'Andrew Smith',
+                            style: TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w500,
+                              color: c.textActive,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+        ),
+      ],
+    );
+  }
+
+  // ── Divider ───────────────────────────────────────────────────────────────
+
+  Widget _buildDivider(_SidebarColors c) {
+    return Container(
+      height: 2,
+      decoration: BoxDecoration(
+        color: c.divider,
+        borderRadius: BorderRadius.circular(2),
+      ),
+    );
+  }
+
+  // ── Section label ─────────────────────────────────────────────────────────
+
+  Widget _buildSectionLabel(String label, _SidebarColors c) {
+    final TextStyle style = TextStyle(
+      fontSize: 10,
+      fontWeight: FontWeight.w500,
+      color: c.textMuted,
+      letterSpacing: 0.4,
+    );
+
+    if (_collapsed) {
+      // Centered + clipped so long labels (e.g. SETTINGS) don't overflow.
+      return Center(
+        child: Text(
+          label,
+          style: style,
+          overflow: TextOverflow.clip,
+          softWrap: false,
+          textAlign: TextAlign.center,
+        ),
+      );
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(left: _kItemHPad),
+      child: Text(label, style: style),
+    );
+  }
+
+  // ── Nav item ──────────────────────────────────────────────────────────────
+
+  Widget _buildNavItem(
+    BuildContext context,
+    _NavItem item,
+    _SidebarColors c,
+  ) {
+    if (item.hasSubmenu) {
+      return _buildDropdownItem(context, item, c);
+    }
+
+    final bool isActive = _activeItemId == item.id;
+    // Active bg is explicit; hover bg comes from KasyHover.hoverColor.
+    final Color bg = isActive ? c.activeBg : Colors.transparent;
+    final Color iconColor = item.isLogout
+        ? c.logout
+        : (isActive ? c.textActive : c.textMuted);
+    final Color textColor = item.isLogout ? c.logout : iconColor;
+
+    // Collapsed: icon only, optionally with hover popup for sub-items
+    if (_collapsed) {
+      return _buildCollapsedIcon(context, item, bg, iconColor, c);
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: _kItemGap),
+      child: KasyHover(
+        borderRadius: BorderRadius.circular(_kItemRadius),
+        hoverColor: c.activeBg,
+        pressColor: c.activeBg,
+        onTap: () => _activateItem(item.id),
+        child: Container(
+          padding: const EdgeInsets.symmetric(
+            horizontal: _kItemHPad,
+            vertical: _kItemVPad,
+          ),
+          decoration: BoxDecoration(
+            color: bg,
+            borderRadius: BorderRadius.circular(_kItemRadius),
+          ),
+          child: Row(
+            children: [
+              _ProIcon(icon: item.icon, color: iconColor, active: isActive),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Text(
+                  item.label,
+                  style: TextStyle(
+                    fontSize: 14,
+                    fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
+                    color: textColor,
+                    letterSpacing: -0.28,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  // ── Collapsed icon button ─────────────────────────────────────────────────
+
+  Widget _buildCollapsedIcon(
+    BuildContext context,
+    _NavItem item,
+    Color bg,
+    Color iconColor,
+    _SidebarColors c,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: _kItemGap),
+      child: _ProTooltipIcon(
+        icon: item.icon,
+        label: item.label,
+        iconBg: bg,
+        iconColor: iconColor,
+        activeBg: c.activeBg,
+        colors: c,
+        onTap: () => _activateItem(item.id),
+      ),
+    );
+  }
+
+  // ── Dropdown item (Income) ────────────────────────────────────────────────
+
+  Widget _buildDropdownItem(
+    BuildContext context,
+    _NavItem item,
+    _SidebarColors c,
+  ) {
+    final bool isActive = _activeItemId == item.id;
+    final Color bg = isActive ? c.activeBg : Colors.transparent;
+    final Color iconColor = isActive ? c.textActive : c.textMuted;
+
+    if (_collapsed) {
+      // In collapsed mode: icon that shows a floating popup on hover
+      return Padding(
+        padding: const EdgeInsets.only(bottom: _kItemGap),
+        child: _ProHoverPopupIcon(
+          icon: item.icon,
+          iconBg: bg,
+          iconColor: iconColor,
+          subItems: item.subItems,
+          activeSubItem: _activeSubItem,
+          colors: c,
+          onSubItemTap: _activateSubItem,
+        ),
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Header row — no bottom padding here; the SizedBox at the bottom of
+        // this Column provides the single trailing gap (same as other items).
+        KasyHover(
+              borderRadius: BorderRadius.circular(_kItemRadius),
+              hoverColor: c.activeBg,
+              pressColor: c.activeBg,
+              onTap: () => _activateItem(item.id),
+              child: Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: _kItemHPad,
+                  vertical: _kItemVPad,
+                ),
+                decoration: BoxDecoration(
+                  color: bg,
+                  borderRadius: BorderRadius.circular(_kItemRadius),
+                ),
+                child: Row(
+                  children: [
+                    _ProIcon(icon: item.icon, color: iconColor, active: isActive),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Text(
+                        item.label,
+                        style: TextStyle(
+                          fontSize: 14,
+                          fontWeight: isActive
+                              ? FontWeight.w600
+                              : FontWeight.w500,
+                          color: iconColor,
+                          letterSpacing: -0.28,
+                        ),
+                      ),
+                    ),
+                    AnimatedRotation(
+                      turns: _incomeExpanded ? 0.5 : 0,
+                      duration: const Duration(milliseconds: 200),
+                      child: Icon(
+                        KasyIcons.chevronDown,
+                        size: 16,
+                        color: iconColor,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+        ),
+        // Expandable sub-items tree
+        AnimatedCrossFade(
+          duration: const Duration(milliseconds: 200),
+          crossFadeState: _incomeExpanded
+              ? CrossFadeState.showFirst
+              : CrossFadeState.showSecond,
+          firstChild: _buildSubItemsTree(c),
+          secondChild: const SizedBox.shrink(),
+        ),
+        const SizedBox(height: _kItemGap),
+      ],
+    );
+  }
+
+  // ── Sub-items tree ────────────────────────────────────────────────────────
+
+  Widget _buildSubItemsTree(_SidebarColors c) {
+    final subItems = _kMainItems
+        .firstWhere((i) => i.id == 'income')
+        .subItems;
+    final double lineH = _treeLineHeight(subItems.length);
+
+    return Padding(
+      padding: const EdgeInsets.only(left: _kSubIndent),
+      child: SizedBox(
+        width: 172,
+        child: Stack(
+          clipBehavior: Clip.none,
+          children: [
+            // Vertical tree line
+            Positioned(
+              left: -_kTreeConnectorW,
+              top: 0,
+              child: Container(
+                width: 2,
+                height: lineH,
+                decoration: BoxDecoration(
+                  color: c.divider,
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+            ),
+            // Sub-items
+            Column(
+              children: subItems.asMap().entries.map((entry) {
+                final i = entry.key;
+                final label = entry.value;
+                final isLast = i == subItems.length - 1;
+                return _buildSubItem(label, isLast, c);
+              }).toList(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildSubItem(String label, bool isLast, _SidebarColors c) {
+    final bool isActive = _activeSubItem == label;
+    // Sub-items: active state = bolder text only, no background fill.
+    // Hover still shows the fill via KasyHover.hoverColor for interactivity.
+    const Color bg = Colors.transparent;
+    final Color textColor = isActive ? c.textActive : c.textMuted;
+
+    return Padding(
+      padding: EdgeInsets.only(bottom: isLast ? 0 : _kSubItemGap),
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          // L-connector: bottom-left rounded border
+          Positioned(
+            left: -_kTreeConnectorW,
+            top: _kSubItemH / 2 - 4,
+            child: Container(
+              width: _kTreeConnectorW,
+              height: 8,
+              decoration: BoxDecoration(
+                border: Border(
+                  left: BorderSide(color: c.divider, width: 2),
+                  bottom: BorderSide(color: c.divider, width: 2),
+                ),
+                borderRadius: const BorderRadius.only(
+                  bottomLeft: Radius.circular(8),
+                ),
+              ),
+            ),
+          ),
+          // Item row
+          KasyHover(
+            borderRadius: BorderRadius.circular(_kItemRadius),
+            hoverColor: c.activeBg,
+            pressColor: c.activeBg,
+            onTap: () => _activateSubItem(label),
+            child: Container(
+              height: _kSubItemH,
+              padding: const EdgeInsets.symmetric(
+                horizontal: _kItemHPad,
+                vertical: 8,
+              ),
+              decoration: BoxDecoration(
+                color: bg,
+                borderRadius: BorderRadius.circular(_kItemRadius),
+              ),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  label,
+                  style: TextStyle(
+                    fontSize: 12,
+                    fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
+                    color: textColor,
+                    letterSpacing: -0.24,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ── Collapse toggle button ────────────────────────────────────────────────
+
+  Widget _buildCollapseButton(BuildContext context, _SidebarColors c) {
+    final bool anchoredLeft = widget.side == KasySidebarProSide.left;
+
+    // Left sidebar: button at the right edge; chevron ← when open, → when collapsed.
+    // Right sidebar: button at the left edge; chevron → when open, ← when collapsed.
+    // The button sits inside the AnimatedContainer bounds so it receives full
+    // hit tests (Flutter clips hit testing to the parent's bounds).
+    final double turns = anchoredLeft
+        ? (_collapsed ? -0.25 : 0.25)   // ← open, → collapsed
+        : (_collapsed ? 0.25 : -0.25);  // → open, ← collapsed
+
+    return Positioned(
+      // The outer container is sidebar_width + halfBtn wide.
+      // right: 0  → button right edge at outer container right edge.
+      // Button spans outer_width-28 to outer_width, center = sidebar_width. ✓
+      // Same logic mirrored for right-anchored sidebar.
+      left: anchoredLeft ? null : 0,
+      right: anchoredLeft ? 0 : null,
+      top: 34,
+      child: GestureDetector(
+        onTap: _toggleCollapse,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 220),
+          width: _kCollapseButtonSize,
+          height: _kCollapseButtonSize,
+          decoration: BoxDecoration(
+            color: c.bg,
+            border: Border.all(color: c.divider),
+            borderRadius: BorderRadius.circular(8),
+            boxShadow: [
+              BoxShadow(
+                color: const Color(0xFF000000).withValues(alpha: 0.06),
+                blurRadius: 4,
+                offset: const Offset(0, 1),
+              ),
+            ],
+          ),
+          child: Center(
+            child: AnimatedRotation(
+              turns: turns,
+              duration: const Duration(milliseconds: 220),
+              child: Icon(
+                KasyIcons.chevronDown,
+                size: 16,
+                color: c.textMuted,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _ProIcon — nav icon with subtle shadow weight when active
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Renders a nav icon at 20px. When [active], adds a soft shadow using the
+/// same [color] to simulate a slightly heavier stroke — consistent with the
+/// bolder text weight used on selected items.
+class _ProIcon extends StatelessWidget {
+  const _ProIcon({
+    required this.icon,
+    required this.color,
+    required this.active,
+  });
+
+  final IconData icon;
+  final Color color;
+  final bool active;
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      icon,
+      size: 20,
+      color: color,
+      shadows: active
+          ? [
+              Shadow(color: color.withValues(alpha: 0.55), blurRadius: 0.6),
+              Shadow(color: color.withValues(alpha: 0.35), blurRadius: 1.4),
+            ]
+          : null,
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _ProHoverPopupIcon — collapsed icon that shows a floating submenu on hover
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _ProHoverPopupIcon extends StatefulWidget {
+  const _ProHoverPopupIcon({
+    required this.icon,
+    required this.iconBg,
+    required this.iconColor,
+    required this.subItems,
+    required this.activeSubItem,
+    required this.colors,
+    required this.onSubItemTap,
+  });
+
+  final IconData icon;
+  final Color iconBg;
+  final Color iconColor;
+  final List<String> subItems;
+  final String activeSubItem;
+  final _SidebarColors colors;
+  final ValueChanged<String> onSubItemTap;
+
+  @override
+  State<_ProHoverPopupIcon> createState() => _ProHoverPopupIconState();
+}
+
+class _ProHoverPopupIconState extends State<_ProHoverPopupIcon> {
+  final _overlayController = OverlayPortalController();
+  final _layerLink = LayerLink();
+  bool _onTrigger = false;
+  bool _onPopup = false;
+
+  void _scheduleHide() {
+    Future.delayed(const Duration(milliseconds: 120), () {
+      if (!_onTrigger && !_onPopup && mounted) {
+        _overlayController.hide();
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return OverlayPortal(
+      controller: _overlayController,
+      overlayChildBuilder: _buildPopup,
+      child: CompositedTransformTarget(
+        link: _layerLink,
+        child: MouseRegion(
+          onEnter: (_) {
+            _onTrigger = true;
+            _overlayController.show();
+          },
+          onExit: (_) {
+            _onTrigger = false;
+            _scheduleHide();
+          },
+          child: KasyHover(
+            borderRadius: BorderRadius.circular(_kItemRadius),
+            onTap: () {},
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 150),
+              padding: const EdgeInsets.symmetric(
+                horizontal: _kItemHPad,
+                vertical: _kItemVPad,
+              ),
+              decoration: BoxDecoration(
+                color: widget.iconBg,
+                borderRadius: BorderRadius.circular(_kItemRadius),
+              ),
+              child: Icon(widget.icon, size: 20, color: widget.iconColor),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPopup(BuildContext context) {
+    return CompositedTransformFollower(
+      link: _layerLink,
+      showWhenUnlinked: false,
+      targetAnchor: Alignment.centerRight,
+      followerAnchor: Alignment.centerLeft,
+      offset: const Offset(12, 0),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: MouseRegion(
+          onEnter: (_) => setState(() => _onPopup = true),
+          onExit: (_) {
+            setState(() => _onPopup = false);
+            _scheduleHide();
+          },
+          child: _buildPopupCard(context),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPopupCard(BuildContext context) {
+    final c = widget.colors;
+
+    return Material(
+      color: Colors.transparent,
+      child: Container(
+        width: 172,
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          color: c.bg,
+          border: Border.all(color: c.border),
+          borderRadius: BorderRadius.circular(12),
+          boxShadow: _kPopupShadow,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: widget.subItems.map((label) {
+            final bool isActive = label == widget.activeSubItem;
+            final Color bg = isActive ? c.activeBg : Colors.transparent;
+            final Color textColor = isActive ? c.textActive : c.textMuted;
+
+            return KasyHover(
+              borderRadius: BorderRadius.circular(_kItemRadius),
+              onTap: () => widget.onSubItemTap(label),
+              child: Container(
+                width: double.infinity,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: _kItemHPad,
+                  vertical: 8,
+                ),
+                decoration: BoxDecoration(
+                  color: bg,
+                  borderRadius: BorderRadius.circular(_kItemRadius),
+                ),
+                child: Text(
+                  label,
+                  style: TextStyle(
+                    fontSize: 12,
+                    fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
+                    color: textColor,
+                    letterSpacing: -0.24,
+                  ),
+                ),
+              ),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _ProTooltipIcon — collapsed icon with Figma-matched name tooltip on hover
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _ProTooltipIcon extends StatefulWidget {
+  const _ProTooltipIcon({
+    required this.icon,
+    required this.label,
+    required this.iconBg,
+    required this.iconColor,
+    required this.activeBg,
+    required this.colors,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final String label;
+  final Color iconBg;
+  final Color iconColor;
+  final Color activeBg;
+  final _SidebarColors colors;
+  final VoidCallback onTap;
+
+  @override
+  State<_ProTooltipIcon> createState() => _ProTooltipIconState();
+}
+
+class _ProTooltipIconState extends State<_ProTooltipIcon> {
+  final _overlayController = OverlayPortalController();
+  final _layerLink = LayerLink();
+
+  @override
+  Widget build(BuildContext context) {
+    return OverlayPortal(
+      controller: _overlayController,
+      overlayChildBuilder: _buildTooltip,
+      child: CompositedTransformTarget(
+        link: _layerLink,
+        child: MouseRegion(
+          onEnter: (_) => _overlayController.show(),
+          onExit: (_) => _overlayController.hide(),
+          child: KasyHover(
+            borderRadius: BorderRadius.circular(_kItemRadius),
+            hoverColor: widget.activeBg,
+            pressColor: widget.activeBg,
+            onTap: widget.onTap,
+            child: Container(
+              padding: const EdgeInsets.symmetric(
+                horizontal: _kItemHPad,
+                vertical: _kItemVPad,
+              ),
+              decoration: BoxDecoration(
+                color: widget.iconBg,
+                borderRadius: BorderRadius.circular(_kItemRadius),
+              ),
+              child: Icon(widget.icon, size: 20, color: widget.iconColor),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildTooltip(BuildContext context) {
+    return CompositedTransformFollower(
+      link: _layerLink,
+      showWhenUnlinked: false,
+      targetAnchor: Alignment.centerRight,
+      followerAnchor: Alignment.centerLeft,
+      offset: const Offset(4, 0),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: _TooltipCard(label: widget.label, colors: widget.colors),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _TooltipCard — floating label card with left-pointing arrow (Figma spec)
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _TooltipCard extends StatelessWidget {
+  const _TooltipCard({required this.label, required this.colors});
+
+  final String label;
+  final _SidebarColors colors;
+
+  static const double _arrowW = 13.0;
+  static const double _arrowH = 26.0;
+  static const double _arrowOverlap = 8.0;
+
+  @override
+  Widget build(BuildContext context) {
+    // Use colors.isDark instead of Theme.of(context) — the overlay context
+    // does not always inherit the app theme correctly.
+    // Dark  → bg: colors.divider (#2D2F39), text: rgba(255,255,255,0.8)
+    // Light → bg: black, text: white — inverted tooltip (Figma spec / industry standard)
+    final Color bg = colors.isDark ? colors.divider : Colors.black;
+    final Color textColor =
+        colors.isDark ? const Color(0xCCFFFFFF) : Colors.white;
+
+    return Material(
+      color: Colors.transparent,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            width: _arrowW,
+            height: _arrowH,
+            child: CustomPaint(painter: _TooltipArrowPainter(color: bg)),
+          ),
+          Transform.translate(
+            offset: const Offset(-_arrowOverlap, 0),
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+              decoration: BoxDecoration(
+                color: bg,
+                borderRadius: BorderRadius.circular(4),
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0x40000000),
+                    blurRadius: 5,
+                    offset: Offset(0, 5),
+                  ),
+                ],
+              ),
+              child: Text(
+                label,
+                style: TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w400,
+                  color: textColor,
+                  height: 20 / 14,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// _TooltipArrowPainter — filled left-pointing triangle
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _TooltipArrowPainter extends CustomPainter {
+  const _TooltipArrowPainter({required this.color});
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..color = color..style = PaintingStyle.fill;
+    final path = Path()
+      ..moveTo(size.width, 0)
+      ..lineTo(0, size.height / 2)
+      ..lineTo(size.width, size.height)
+      ..close();
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(_TooltipArrowPainter old) => old.color != color;
+}