kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/core/sidebar/kasy_sidebar.dart

@@ -1,2021 +0,0 @@
-import 'dart:math' show min;
-
-import 'package:bart/bart/bart_model.dart';
-import 'package:bart/bart/widgets/side_bar/custom_sidebar.dart';
-import 'package:flutter/foundation.dart' show TargetPlatform, defaultTargetPlatform;
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/components/components.dart';
-import 'package:kasy_kit/core/data/models/user.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/features/notifications/providers/notifications_provider.dart';
-import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
-
-const double _kWidth = 260.0;
-const double _kItemHeight = 44.0;
-const double _kItemRadius = 8.0;
-
-/// Entry point — pass to [CustomSideBarOptions.sideBarBuilder].
-Widget kasySidebarBuilder(
-  List<BartMenuRoute> routes,
-  OnTapItem onTapItem,
-  ValueNotifier<int> currentItem,
-) {
-  return _KasySidebarRoot(
-    routes: routes,
-    onTapItem: onTapItem,
-    currentItem: currentItem,
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Root — reacts to Bart's tab-index changes without recreating State
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _KasySidebarRoot extends StatelessWidget {
-  final List<BartMenuRoute> routes;
-  final OnTapItem onTapItem;
-  final ValueNotifier<int> currentItem;
-
-  const _KasySidebarRoot({
-    required this.routes,
-    required this.onTapItem,
-    required this.currentItem,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return ValueListenableBuilder<int>(
-      valueListenable: currentItem,
-      builder: (_, currentIndex, child) => _KasySidebar(
-        routes: routes,
-        currentIndex: currentIndex,
-        onTapItem: onTapItem,
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Sidebar — stateful: holds project expansion + keyboard shortcut ⌘K / Ctrl+K
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _KasySidebar extends StatefulWidget {
-  final List<BartMenuRoute> routes;
-  final int currentIndex;
-  final OnTapItem onTapItem;
-
-  const _KasySidebar({
-    required this.routes,
-    required this.currentIndex,
-    required this.onTapItem,
-  });
-
-  @override
-  State<_KasySidebar> createState() => _KasySidebarState();
-}
-
-class _KasySidebarState extends State<_KasySidebar> {
-  int? _expandedProject;
-  bool _searchOpen = false;
-
-  static const _projects = [
-    (color: Color(0xFF34C759), name: 'Kasy Studio'),
-    (color: Color(0xFF1E88E5), name: 'Design System'),
-    (color: Color(0xFFF57F17), name: 'Components'),
-  ];
-
-  static const _placeholders = [
-    (icon: KasyIcons.flash, label: 'Activity'),
-    (icon: KasyIcons.note, label: 'Tasks'),
-    (icon: KasyIcons.book, label: 'Reports'),
-    (icon: KasyIcons.person, label: 'Team'),
-  ];
-
-  // ── Keyboard shortcut ────────────────────────────────────────────────────
-
-  @override
-  void initState() {
-    super.initState();
-    HardwareKeyboard.instance.addHandler(_onKeyEvent);
-  }
-
-  @override
-  void dispose() {
-    HardwareKeyboard.instance.removeHandler(_onKeyEvent);
-    super.dispose();
-  }
-
-  bool _onKeyEvent(KeyEvent event) {
-    if (!mounted || event is! KeyDownEvent) return false;
-    if (event.logicalKey != LogicalKeyboardKey.keyK) return false;
-    final bool trigger = HardwareKeyboard.instance.isMetaPressed ||
-        HardwareKeyboard.instance.isControlPressed;
-    if (trigger) {
-      _openSearch();
-      return true;
-    }
-    return false;
-  }
-
-  // ── Search modal ─────────────────────────────────────────────────────────
-
-  void _openSearch() {
-    if (_searchOpen || !mounted) return;
-    setState(() => _searchOpen = true);
-    showGeneralDialog<void>(
-      context: context,
-      barrierDismissible: true,
-      barrierLabel: 'Dismiss',
-      barrierColor: Colors.black.withValues(alpha: 0.32),
-      transitionDuration: const Duration(milliseconds: 220),
-      pageBuilder: (ctx, anim, secAnim) => Align(
-        alignment: const Alignment(0, -0.18),
-        child: _SearchModal(
-          routes: widget.routes,
-          onNavigate: (index) {
-            Navigator.of(ctx, rootNavigator: true).pop();
-            widget.onTapItem(index);
-          },
-        ),
-      ),
-      transitionBuilder: (ctx, anim, secAnim, child) {
-        final curved =
-            CurvedAnimation(parent: anim, curve: Curves.easeOutCubic);
-        return FadeTransition(
-          opacity: curved,
-          child: ScaleTransition(
-            scale: Tween<double>(begin: 0.95, end: 1.0).animate(curved),
-            child: child,
-          ),
-        );
-      },
-    ).then((_) {
-      if (mounted) setState(() => _searchOpen = false);
-    });
-  }
-
-  // ── Projects expand/collapse ─────────────────────────────────────────────
-
-  void _toggleProject(int index) {
-    setState(() {
-      _expandedProject = _expandedProject == index ? null : index;
-    });
-  }
-
-  // ── Build ─────────────────────────────────────────────────────────────────
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-
-    return Container(
-      width: _kWidth,
-      decoration: BoxDecoration(
-        color: colors.surface,
-        border: Border(
-          right: BorderSide(color: colors.outline.withValues(alpha: 0.4)),
-        ),
-      ),
-      child: SafeArea(
-        right: false,
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            // ── Scrollable content ──────────────────────────────────────────
-            Expanded(
-              child: ScrollConfiguration(
-                // Hide scrollbar for a cleaner desktop/web look
-                behavior: ScrollConfiguration.of(context)
-                    .copyWith(scrollbars: false),
-                child: SingleChildScrollView(
-                  physics: const ClampingScrollPhysics(),
-                  padding: const EdgeInsets.fromLTRB(12, 16, 12, 8),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      // Brand header
-                      const _Header(),
-                      const SizedBox(height: 16),
-
-                      // Search bar — opens modal on tap / ⌘K
-                      _SearchBar(onTap: _openSearch),
-                      const SizedBox(height: 20),
-
-                      // ── MENU section ─────────────────────────────────────
-                      const _SectionLabel('Menu'),
-                      const SizedBox(height: 4),
-                      ...widget.routes.asMap().entries.map(
-                        (e) => _NavItem(
-                          route: e.value,
-                          isActive: widget.currentIndex == e.key,
-                          onTap: () => widget.onTapItem(e.key),
-                        ),
-                      ),
-                      const SizedBox(height: 8),
-
-                      const _SidebarDivider(),
-                      const SizedBox(height: 8),
-
-                      // ── WORKSPACE section (placeholder items) ─────────────
-                      const _SectionLabel('Workspace'),
-                      const SizedBox(height: 4),
-                      ..._placeholders.map(
-                        (p) =>
-                            _PlaceholderItem(icon: p.icon, label: p.label),
-                      ),
-                      const SizedBox(height: 16),
-
-                      const _SidebarDivider(),
-                      const SizedBox(height: 12),
-
-                      // ── PROJECTS section ──────────────────────────────────
-                      Row(
-                        children: [
-                          const Expanded(child: _SectionLabel('Projects')),
-                          Icon(KasyIcons.add, size: 14, color: colors.muted),
-                          const SizedBox(width: 4),
-                        ],
-                      ),
-                      const SizedBox(height: 4),
-                      ..._projects.asMap().entries.map(
-                        (e) => _ProjectItem(
-                          color: e.value.color,
-                          name: e.value.name,
-                          isExpanded: _expandedProject == e.key,
-                          onToggle: () => _toggleProject(e.key),
-                        ),
-                      ),
-
-                      // Add new project
-                      _AddProjectButton(),
-                      const SizedBox(height: 8),
-                    ],
-                  ),
-                ),
-              ),
-            ),
-
-            // ── Theme toggle + sticky footer ─────────────────────────────
-            const _ThemeToggle(),
-            const SizedBox(height: 8),
-            const _SidebarDivider(),
-            const _UserFooter(),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Header — brand logo + workspace name + dropdown hint
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _Header extends StatelessWidget {
-  const _Header();
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return KasyHover(
-      onTap: () {},
-      hapticEnabled: false,
-      borderRadius: BorderRadius.circular(10),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 4),
-        child: Row(
-          children: [
-            // Brand icon
-            Container(
-              width: 34,
-              height: 34,
-              decoration: BoxDecoration(
-                color: colors.primary,
-                borderRadius: BorderRadius.circular(8),
-              ),
-              child: const Icon(KasyIcons.assistant, size: 18, color: Colors.white),
-            ),
-            const SizedBox(width: 10),
-            // Name + plan
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Text(
-                    'Kasy',
-                    style: context.textTheme.titleMedium?.copyWith(
-                      fontWeight: FontWeight.w700,
-                      height: 1.15,
-                    ),
-                  ),
-                  Text(
-                    'Design System',
-                    style: context.textTheme.labelSmall?.copyWith(
-                      color: colors.muted,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            Icon(KasyIcons.chevronDown, size: 14, color: colors.muted),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Search bar — tappable, opens command-palette modal
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _SearchBar extends StatelessWidget {
-  final VoidCallback onTap;
-  const _SearchBar({required this.onTap});
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return KasyHover(
-      onTap: onTap,
-      semanticLabel: 'Search',
-      borderRadius: BorderRadius.circular(8),
-      child: Container(
-        height: 36,
-        decoration: BoxDecoration(
-          color: colors.surfaceNeutralSoft,
-          borderRadius: BorderRadius.circular(8),
-          border: Border.all(
-            color: colors.outline.withValues(alpha: 0.5),
-            width: 0.6,
-          ),
-        ),
-        child: Row(
-          children: [
-            const SizedBox(width: 10),
-            Icon(KasyIcons.search, size: 15, color: colors.muted),
-            const SizedBox(width: 8),
-            Expanded(
-              child: Text(
-                'Search...',
-                style: context.textTheme.bodySmall?.copyWith(
-                  color: colors.muted,
-                ),
-              ),
-            ),
-            // Keyboard shortcut badge
-            Container(
-              margin: const EdgeInsets.only(right: 8),
-              padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
-              decoration: BoxDecoration(
-                color: colors.outline.withValues(alpha: 0.35),
-                borderRadius: BorderRadius.circular(4),
-              ),
-              child: Text(
-                defaultTargetPlatform == TargetPlatform.macOS ? '⌘K' : 'Ctrl K',
-                style: context.textTheme.labelSmall?.copyWith(
-                  color: colors.muted,
-                  fontSize: 10,
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Section label — ALL CAPS, subtle
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _SectionLabel extends StatelessWidget {
-  final String text;
-  const _SectionLabel(this.text);
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(left: 4, bottom: 2),
-      child: Text(
-        text,
-        style: context.textTheme.labelSmall?.copyWith(
-          color: context.colors.muted,
-          fontWeight: FontWeight.w600,
-          letterSpacing: 0.4,
-          fontSize: 11,
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Divider
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _SidebarDivider extends StatelessWidget {
-  const _SidebarDivider();
-
-  @override
-  Widget build(BuildContext context) {
-    return Divider(
-      height: 1,
-      thickness: 0.8,
-      color: context.colors.outline.withValues(alpha: 0.4),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Nav item — real, tappable, animated active state
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _NavItem extends StatelessWidget {
-  final BartMenuRoute route;
-  final bool isActive;
-  final VoidCallback onTap;
-
-  const _NavItem({
-    required this.route,
-    required this.isActive,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    final Color iconColor =
-        isActive ? colors.primary : colors.onSurface.withValues(alpha: 0.6);
-    final Color textColor = isActive ? colors.primary : colors.onSurface;
-    final bool hasIconBuilder = route.iconBuilder != null;
-    final IconData icon = route.icon ?? KasyIcons.notification;
-
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 1.5),
-      child: KasyHover(
-        onTap: onTap,
-        semanticLabel: route.label,
-        borderRadius: BorderRadius.circular(_kItemRadius),
-        child: AnimatedContainer(
-          duration: const Duration(milliseconds: 160),
-          curve: Curves.easeOut,
-          height: _kItemHeight,
-          decoration: BoxDecoration(
-            color: isActive
-                ? colors.surfacePrimarySoft
-                : Colors.transparent,
-            borderRadius: BorderRadius.circular(_kItemRadius),
-          ),
-          child: Row(
-            children: [
-              // Active accent line on the left
-              AnimatedContainer(
-                duration: const Duration(milliseconds: 160),
-                width: 3,
-                height: 20,
-                margin: const EdgeInsets.only(left: 4, right: 8),
-                decoration: BoxDecoration(
-                  color: isActive ? colors.primary : Colors.transparent,
-                  borderRadius: BorderRadius.circular(2),
-                ),
-              ),
-              // Icon
-              Icon(icon, size: 18, color: iconColor),
-              const SizedBox(width: 10),
-              // Label
-              Expanded(
-                child: Text(
-                  route.label ?? '',
-                  style: context.textTheme.bodyMedium?.copyWith(
-                    color: textColor,
-                    fontWeight:
-                        isActive ? FontWeight.w600 : FontWeight.w500,
-                  ),
-                ),
-              ),
-              // Notification count badge (right side)
-              if (hasIconBuilder) ...[
-                const _NotificationCountBadge(),
-                const SizedBox(width: 10),
-              ],
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Notification count badge — right-aligned pill, reads live count
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _NotificationCountBadge extends ConsumerWidget {
-  const _NotificationCountBadge();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final String? userId = ref.watch(userStateNotifierProvider).user.idOrNull;
-    if (userId == null) return const SizedBox.shrink();
-
-    final int count = ref.watch(notificationsProvider).maybeWhen(
-      data: (list) => list.data.where((n) => !n.seen).length,
-      orElse: () => 0,
-    );
-    if (count == 0) return const SizedBox.shrink();
-
-    return AnimatedSwitcher(
-      duration: const Duration(milliseconds: 220),
-      transitionBuilder: (child, anim) => ScaleTransition(
-        scale: Tween<double>(begin: 0.55, end: 1.0).animate(
-          CurvedAnimation(parent: anim, curve: Curves.easeOutBack),
-        ),
-        child: FadeTransition(opacity: anim, child: child),
-      ),
-      child: Container(
-        key: ValueKey(count),
-        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-        decoration: BoxDecoration(
-          color: context.colors.error,
-          borderRadius: BorderRadius.circular(10),
-        ),
-        child: Text(
-          count > 99 ? '99+' : '$count',
-          style: context.textTheme.labelSmall?.copyWith(
-            color: Colors.white,
-            fontWeight: FontWeight.w700,
-            fontSize: 10,
-            height: 1.2,
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Placeholder item — hover feedback, no navigation (coming soon)
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _PlaceholderItem extends StatelessWidget {
-  final IconData icon;
-  final String label;
-
-  const _PlaceholderItem({required this.icon, required this.label});
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 1.5),
-      child: KasyHover(
-        onTap: () {
-          showKasyToast(
-            context,
-            title: label,
-            message: 'Coming soon',
-            duration: const Duration(seconds: 2),
-          );
-        },
-        hapticEnabled: false,
-        borderRadius: BorderRadius.circular(_kItemRadius),
-        child: SizedBox(
-          height: _kItemHeight,
-          child: Row(
-            children: [
-              const SizedBox(width: 15), // aligns with nav items (3+4+8)
-              Icon(
-                icon,
-                size: 18,
-                color: colors.onSurface.withValues(alpha: 0.35),
-              ),
-              const SizedBox(width: 10),
-              Expanded(
-                child: Text(
-                  label,
-                  style: context.textTheme.bodyMedium?.copyWith(
-                    color: colors.muted,
-                    fontWeight: FontWeight.w500,
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Project item — expandable with animated chevron + sub-items
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _ProjectItem extends StatelessWidget {
-  final Color color;
-  final String name;
-  final bool isExpanded;
-  final VoidCallback onToggle;
-
-  const _ProjectItem({
-    required this.color,
-    required this.name,
-    required this.isExpanded,
-    required this.onToggle,
-  });
-
-  static const _subItems = [
-    (icon: KasyIcons.home, label: 'Overview'),
-    (icon: KasyIcons.person, label: 'Members'),
-    (icon: KasyIcons.settings, label: 'Settings'),
-  ];
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        // ── Header row ────────────────────────────────────────────────────
-        KasyHover(
-          onTap: onToggle,
-          borderRadius: BorderRadius.circular(_kItemRadius),
-          child: SizedBox(
-            height: 36,
-            child: Row(
-              children: [
-                const SizedBox(width: 15),
-                // Colored dot
-                Container(
-                  width: 10,
-                  height: 10,
-                  decoration: BoxDecoration(
-                    color: color,
-                    shape: BoxShape.circle,
-                    boxShadow: [
-                      BoxShadow(
-                        color: color.withValues(alpha: 0.45),
-                        blurRadius: 5,
-                        offset: const Offset(0, 1),
-                      ),
-                    ],
-                  ),
-                ),
-                const SizedBox(width: 12),
-                Expanded(
-                  child: Text(
-                    name,
-                    style: context.textTheme.bodyMedium?.copyWith(
-                      color: colors.onSurface.withValues(alpha: 0.8),
-                      fontWeight: FontWeight.w500,
-                    ),
-                  ),
-                ),
-                // Chevron rotates when expanded
-                AnimatedRotation(
-                  duration: const Duration(milliseconds: 200),
-                  curve: Curves.easeInOut,
-                  turns: isExpanded ? 0.25 : 0.0,
-                  child: Icon(
-                    KasyIcons.chevronRight,
-                    size: 13,
-                    color: colors.muted.withValues(alpha: 0.6),
-                  ),
-                ),
-                const SizedBox(width: 10),
-              ],
-            ),
-          ),
-        ),
-
-        // ── Sub-items — animated expand/collapse ──────────────────────────
-        AnimatedSize(
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeInOut,
-          child: isExpanded
-              ? Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: _subItems
-                      .map((s) =>
-                          _ProjectSubItem(icon: s.icon, label: s.label))
-                      .toList(),
-                )
-              : const SizedBox.shrink(),
-        ),
-      ],
-    );
-  }
-}
-
-class _ProjectSubItem extends StatelessWidget {
-  final IconData icon;
-  final String label;
-
-  const _ProjectSubItem({required this.icon, required this.label});
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return KasyHover(
-      onTap: () {},
-      hapticEnabled: false,
-      borderRadius: BorderRadius.circular(6),
-      child: SizedBox(
-        height: 32,
-        child: Row(
-          children: [
-            const SizedBox(width: 35), // deeper indent
-            Icon(icon, size: 14, color: colors.muted),
-            const SizedBox(width: 9),
-            Text(
-              label,
-              style: context.textTheme.bodySmall?.copyWith(
-                color: colors.onSurface.withValues(alpha: 0.6),
-                fontWeight: FontWeight.w500,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// "Add New Project" button
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _AddProjectButton extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return KasyHover(
-      onTap: () {},
-      hapticEnabled: false,
-      borderRadius: BorderRadius.circular(_kItemRadius),
-      child: SizedBox(
-        height: 34,
-        child: Row(
-          children: [
-            const SizedBox(width: 15),
-            Container(
-              width: 20,
-              height: 20,
-              decoration: BoxDecoration(
-                color: colors.surfacePrimarySoft,
-                borderRadius: BorderRadius.circular(6),
-              ),
-              child: Icon(KasyIcons.add, size: 13, color: colors.primary),
-            ),
-            const SizedBox(width: 10),
-            Text(
-              'New Project',
-              style: context.textTheme.bodySmall?.copyWith(
-                color: colors.primary.withValues(alpha: 0.75),
-                fontWeight: FontWeight.w500,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// User footer — real data via Riverpod, KasyAvatar initials
-// Logout icon only visible on hover to avoid visual clutter.
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _UserFooter extends ConsumerStatefulWidget {
-  const _UserFooter();
-
-  @override
-  ConsumerState<_UserFooter> createState() => _UserFooterState();
-}
-
-class _UserFooterState extends ConsumerState<_UserFooter> {
-  bool _hovered = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final user = ref.watch(userStateNotifierProvider).user;
-
-    final String displayName;
-    final String subtitle;
-
-    if (user is AuthenticatedUserData) {
-      displayName = user.name ?? user.email.split('@').first;
-      subtitle = user.email;
-    } else {
-      displayName = 'Guest';
-      subtitle = 'Not signed in';
-    }
-
-    final String initials =
-        displayName.isNotEmpty ? displayName[0].toUpperCase() : 'G';
-
-    return MouseRegion(
-      onEnter: (_) => setState(() => _hovered = true),
-      onExit: (_) => setState(() => _hovered = false),
-      child: KasyHover(
-        onTap: () {},
-        hapticEnabled: false,
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(12, 10, 12, 10),
-          child: Row(
-            children: [
-              // Avatar
-              KasyAvatar(
-                size: KasyAvatarSize.small,
-                diameter: 32,
-                initials: initials,
-              ),
-              const SizedBox(width: 10),
-              // Name + email
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text(
-                      displayName,
-                      style: context.textTheme.labelMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                      ),
-                      overflow: TextOverflow.ellipsis,
-                      maxLines: 1,
-                    ),
-                    Text(
-                      subtitle,
-                      style: context.textTheme.labelSmall?.copyWith(
-                        color: context.colors.muted,
-                      ),
-                      overflow: TextOverflow.ellipsis,
-                      maxLines: 1,
-                    ),
-                  ],
-                ),
-              ),
-              // Logout icon — only visible on hover
-              AnimatedOpacity(
-                opacity: _hovered ? 1.0 : 0.0,
-                duration: const Duration(milliseconds: 150),
-                child: Padding(
-                  padding: const EdgeInsets.only(left: 8),
-                  child: Icon(
-                    KasyIcons.logout,
-                    size: 16,
-                    color: context.colors.muted,
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Search modal — centered command palette with KasyTextField + live filter
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _SearchModal extends StatefulWidget {
-  final List<BartMenuRoute> routes;
-  final void Function(int index) onNavigate;
-
-  const _SearchModal({required this.routes, required this.onNavigate});
-
-  @override
-  State<_SearchModal> createState() => _SearchModalState();
-}
-
-class _SearchModalState extends State<_SearchModal> {
-  final _controller = TextEditingController();
-  late final FocusNode _focusNode;
-  final ScrollController _scrollController = ScrollController();
-  String _query = '';
-  int _selectedIndex = 0;
-
-  // Approximate height of each result tile (34px icon + 12px vertical padding)
-  static const double _kTileHeight = 47.0;
-
-  static const _placeholders = [
-    (icon: KasyIcons.flash, label: 'Activity'),
-    (icon: KasyIcons.note, label: 'Tasks'),
-    (icon: KasyIcons.book, label: 'Reports'),
-    (icon: KasyIcons.person, label: 'Team'),
-  ];
-
-  @override
-  void initState() {
-    super.initState();
-    _focusNode = FocusNode(onKeyEvent: _onFocusKeyEvent);
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    _focusNode.dispose();
-    _scrollController.dispose();
-    super.dispose();
-  }
-
-  KeyEventResult _onFocusKeyEvent(FocusNode node, KeyEvent event) {
-    if (event is! KeyDownEvent && event is! KeyRepeatEvent) {
-      return KeyEventResult.ignored;
-    }
-
-    final results = _results;
-
-    if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
-      if (results.isNotEmpty) {
-        setState(() {
-          _selectedIndex = (_selectedIndex + 1).clamp(0, results.length - 1);
-        });
-        _scrollToSelected();
-      }
-      return KeyEventResult.handled;
-    }
-
-    if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
-      if (results.isNotEmpty) {
-        setState(() {
-          _selectedIndex = (_selectedIndex - 1).clamp(0, results.length - 1);
-        });
-        _scrollToSelected();
-      }
-      return KeyEventResult.handled;
-    }
-
-    if (event.logicalKey == LogicalKeyboardKey.enter) {
-      if (_selectedIndex < results.length) {
-        final item = results[_selectedIndex];
-        if (item.navIndex != null) {
-          widget.onNavigate(item.navIndex!);
-        }
-      }
-      return KeyEventResult.handled;
-    }
-
-    if (event.logicalKey == LogicalKeyboardKey.escape) {
-      Navigator.of(context, rootNavigator: true).pop();
-      return KeyEventResult.handled;
-    }
-
-    return KeyEventResult.ignored;
-  }
-
-  void _scrollToSelected() {
-    if (!_scrollController.hasClients) return;
-    final offset = (_selectedIndex * _kTileHeight)
-        .clamp(0.0, _scrollController.position.maxScrollExtent);
-    _scrollController.animateTo(
-      offset,
-      duration: const Duration(milliseconds: 120),
-      curve: Curves.easeOut,
-    );
-  }
-
-  List<({IconData icon, String label, int? navIndex})> get _results {
-    final q = _query.trim().toLowerCase();
-    final out = <({IconData icon, String label, int? navIndex})>[];
-
-    // Real nav routes
-    for (var i = 0; i < widget.routes.length; i++) {
-      final r = widget.routes[i];
-      final label = r.label ?? '';
-      if (q.isEmpty || label.toLowerCase().contains(q)) {
-        out.add((
-          icon: r.icon ?? KasyIcons.notification,
-          label: label,
-          navIndex: i,
-        ));
-      }
-    }
-
-    // Placeholder workspace items
-    for (final p in _placeholders) {
-      if (q.isEmpty || p.label.toLowerCase().contains(q)) {
-        out.add((icon: p.icon, label: p.label, navIndex: null));
-      }
-    }
-
-    return out;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    final results = _results;
-    final double maxW = min(560.0, MediaQuery.of(context).size.width - 48);
-
-    return Material(
-      color: Colors.transparent,
-      child: Container(
-        width: maxW,
-        constraints: BoxConstraints(
-          maxHeight: MediaQuery.of(context).size.height * 0.62,
-        ),
-        decoration: BoxDecoration(
-          color: colors.surface,
-          borderRadius: BorderRadius.circular(16),
-          border: Border.all(color: colors.outline.withValues(alpha: 0.25)),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.black.withValues(alpha: 0.18),
-              blurRadius: 40,
-              offset: const Offset(0, 12),
-            ),
-            BoxShadow(
-              color: Colors.black.withValues(alpha: 0.06),
-              blurRadius: 8,
-              offset: const Offset(0, 2),
-            ),
-          ],
-        ),
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(16),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              // ── Search input ──────────────────────────────────────────────
-              Padding(
-                padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
-                child: KasyTextField(
-                  controller: _controller,
-                  focusNode: _focusNode,
-                  hint: 'Search pages, settings, projects...',
-                  autofocus: true,
-                  onChanged: (v) => setState(() {
-                    _query = v;
-                    _selectedIndex = 0;
-                  }),
-                ),
-              ),
-
-              // ── Results ───────────────────────────────────────────────────
-              if (results.isEmpty && _query.isNotEmpty)
-                Padding(
-                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-                  child: Row(
-                    children: [
-                      Icon(KasyIcons.search, size: 16, color: colors.muted),
-                      const SizedBox(width: 8),
-                      Text(
-                        'No results for "$_query"',
-                        style: context.textTheme.bodyMedium
-                            ?.copyWith(color: colors.muted),
-                      ),
-                    ],
-                  ),
-                )
-              else ...[
-                Divider(
-                    height: 1,
-                    color: colors.outline.withValues(alpha: 0.4)),
-                Flexible(
-                  child: ListView.separated(
-                    controller: _scrollController,
-                    shrinkWrap: true,
-                    padding: const EdgeInsets.symmetric(vertical: 6),
-                    itemCount: results.length,
-                    separatorBuilder: (_, idx) => const SizedBox(height: 1),
-                    itemBuilder: (_, i) {
-                      final item = results[i];
-                      return _SearchResultTile(
-                        icon: item.icon,
-                        label: item.label,
-                        isNavigable: item.navIndex != null,
-                        isSelected: i == _selectedIndex,
-                        onTap: item.navIndex != null
-                            ? () => widget.onNavigate(item.navIndex!)
-                            : null,
-                        onHover: () => setState(() => _selectedIndex = i),
-                      );
-                    },
-                  ),
-                ),
-              ],
-
-              // ── Footer hint ───────────────────────────────────────────────
-              Container(
-                decoration: BoxDecoration(
-                  color: colors.surfaceNeutralSoft,
-                  border: Border(
-                    top: BorderSide(
-                        color: colors.outline.withValues(alpha: 0.3)),
-                  ),
-                ),
-                padding: const EdgeInsets.symmetric(
-                    horizontal: 16, vertical: 8),
-                child: const Row(
-                  children: [
-                    _KbdHint(label: '↑↓', tooltip: 'Navigate'),
-                    SizedBox(width: 12),
-                    _KbdHint(label: '↵', tooltip: 'Select'),
-                    SizedBox(width: 12),
-                    _KbdHint(label: 'Esc', tooltip: 'Close'),
-                  ],
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// Keyboard shortcut hint chip shown in the modal footer.
-class _KbdHint extends StatelessWidget {
-  final String label;
-  final String tooltip;
-
-  const _KbdHint({required this.label, required this.tooltip});
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        Container(
-          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
-          decoration: BoxDecoration(
-            color: colors.surface,
-            borderRadius: BorderRadius.circular(4),
-            border:
-                Border.all(color: colors.outline.withValues(alpha: 0.5)),
-          ),
-          child: Text(
-            label,
-            style: context.textTheme.labelSmall?.copyWith(
-              fontSize: 10,
-              color: colors.muted,
-              fontWeight: FontWeight.w600,
-            ),
-          ),
-        ),
-        const SizedBox(width: 4),
-        Text(
-          tooltip,
-          style: context.textTheme.labelSmall?.copyWith(
-            fontSize: 10,
-            color: colors.muted,
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Search result tile
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _SearchResultTile extends StatelessWidget {
-  final IconData icon;
-  final String label;
-  final bool isNavigable;
-  final bool isSelected;
-  final VoidCallback? onTap;
-  final VoidCallback? onHover;
-
-  const _SearchResultTile({
-    required this.icon,
-    required this.label,
-    required this.isNavigable,
-    required this.isSelected,
-    this.onTap,
-    this.onHover,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-
-    final Widget content = AnimatedContainer(
-      duration: const Duration(milliseconds: 100),
-      color: isSelected
-          ? colors.surfacePrimarySoft.withValues(alpha: 0.5)
-          : Colors.transparent,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-        child: Row(
-          children: [
-            // Icon badge
-            Container(
-              width: 34,
-              height: 34,
-              decoration: BoxDecoration(
-                color: isNavigable
-                    ? colors.surfacePrimarySoft
-                    : colors.surfaceNeutralSoft,
-                borderRadius: BorderRadius.circular(8),
-              ),
-              child: Icon(
-                icon,
-                size: 16,
-                color: isNavigable ? colors.primary : colors.muted,
-              ),
-            ),
-            const SizedBox(width: 12),
-            // Label
-            Expanded(
-              child: Text(
-                label,
-                style: context.textTheme.bodyMedium?.copyWith(
-                  color: isNavigable ? colors.onSurface : colors.muted,
-                  fontWeight:
-                      isNavigable ? FontWeight.w500 : FontWeight.w400,
-                ),
-              ),
-            ),
-            // Right indicator
-            if (!isNavigable)
-              Container(
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
-                decoration: BoxDecoration(
-                  color: colors.surfaceNeutralSoft,
-                  borderRadius: BorderRadius.circular(6),
-                  border: Border.all(
-                      color: colors.outline.withValues(alpha: 0.4)),
-                ),
-                child: Text(
-                  'Soon',
-                  style: context.textTheme.labelSmall?.copyWith(
-                    color: colors.muted,
-                    fontSize: 10,
-                  ),
-                ),
-              )
-            else
-              Icon(KasyIcons.arrowForwardIos,
-                  size: 13, color: colors.muted.withValues(alpha: 0.6)),
-          ],
-        ),
-      ),
-    );
-
-    return MouseRegion(
-      onEnter: (_) => onHover?.call(),
-      child: onTap != null
-          ? KasyHover(onTap: onTap!, child: content)
-          : content,
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Theme toggle — pill switcher Light / Dark in the sidebar footer area
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _ThemeToggle extends StatelessWidget {
-  const _ThemeToggle();
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = ThemeProvider.of(context);
-    final isDark = theme.mode == ThemeMode.dark;
-    final colors = context.colors;
-
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(12, 8, 12, 0),
-      child: Container(
-        height: 46,
-        padding: const EdgeInsets.all(4),
-        decoration: BoxDecoration(
-          color: colors.surfaceNeutralSoft,
-          borderRadius: BorderRadius.circular(12),
-          border: Border.all(color: colors.outline.withValues(alpha: 0.35)),
-        ),
-        child: Row(
-          children: [
-            Expanded(
-              child: _ThemeOption(
-                icon: KasyIcons.lightMode,
-                label: 'Light',
-                isActive: !isDark,
-                isDarkMode: isDark,
-                onTap: isDark ? theme.toggle : null,
-              ),
-            ),
-            Expanded(
-              child: _ThemeOption(
-                icon: KasyIcons.darkMode,
-                label: 'Dark',
-                isActive: isDark,
-                isDarkMode: isDark,
-                onTap: isDark ? null : theme.toggle,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class _ThemeOption extends StatelessWidget {
-  final IconData icon;
-  final String label;
-  final bool isActive;
-  final bool isDarkMode;
-  final VoidCallback? onTap;
-
-  const _ThemeOption({
-    required this.icon,
-    required this.label,
-    required this.isActive,
-    required this.isDarkMode,
-    this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-
-    // Active pill — white card on light, distinct dark surface on dark
-    final Color activeBg =
-        isDarkMode ? colors.onSurface.withValues(alpha: 0.18) : colors.surface;
-    final Color activeContentColor =
-        isDarkMode ? Colors.white : colors.onSurface;
-    final Color inactiveColor = colors.muted;
-
-    return KasyHover(
-      onTap: onTap ?? () {},
-      hapticEnabled: false,
-      borderRadius: BorderRadius.circular(8),
-      child: AnimatedContainer(
-        duration: const Duration(milliseconds: 200),
-        curve: Curves.easeOut,
-        decoration: BoxDecoration(
-          color: isActive ? activeBg : Colors.transparent,
-          borderRadius: BorderRadius.circular(8),
-          boxShadow: isActive && !isDarkMode
-              ? [
-                  BoxShadow(
-                    color: Colors.black.withValues(alpha: 0.12),
-                    blurRadius: 8,
-                    offset: const Offset(0, 2),
-                  ),
-                ]
-              : null,
-        ),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              icon,
-              size: 15,
-              color: isActive ? activeContentColor : inactiveColor,
-            ),
-            const SizedBox(width: 6),
-            Text(
-              label,
-              style: context.textTheme.bodySmall?.copyWith(
-                color: isActive ? activeContentColor : inactiveColor,
-                fontWeight: isActive ? FontWeight.w700 : FontWeight.w400,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Rail theme toggle — single icon button in the collapsed rail
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _RailThemeToggle extends StatelessWidget {
-  const _RailThemeToggle();
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = ThemeProvider.of(context);
-    final isDark = theme.mode == ThemeMode.dark;
-    return _RailIconSlot(
-      child: _RailIconBtn(
-        icon: isDark ? KasyIcons.lightMode : KasyIcons.darkMode,
-        tooltip: isDark ? 'Light mode' : 'Dark mode',
-        onTap: theme.toggle,
-        hapticEnabled: false,
-      ),
-    );
-  }
-}
-
-// ═════════════════════════════════════════════════════════════════════════════
-// COLLAPSED SIDEBAR — icon-only rail for medium breakpoint (768–1024 px)
-// ═════════════════════════════════════════════════════════════════════════════
-
-const double _kCollapsedWidth = 64.0;
-const double _kRailIconSize = 40.0;
-
-/// Entry point for the collapsed icon-only sidebar.
-Widget kasySidebarCollapsedBuilder(
-  List<BartMenuRoute> routes,
-  OnTapItem onTapItem,
-  ValueNotifier<int> currentItem,
-) {
-  return _KasySidebarCollapsedRoot(
-    routes: routes,
-    onTapItem: onTapItem,
-    currentItem: currentItem,
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Root
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _KasySidebarCollapsedRoot extends StatelessWidget {
-  final List<BartMenuRoute> routes;
-  final OnTapItem onTapItem;
-  final ValueNotifier<int> currentItem;
-
-  const _KasySidebarCollapsedRoot({
-    required this.routes,
-    required this.onTapItem,
-    required this.currentItem,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return ValueListenableBuilder<int>(
-      valueListenable: currentItem,
-      builder: (_, currentIndex, child) => _KasySidebarCollapsed(
-        routes: routes,
-        currentIndex: currentIndex,
-        onTapItem: onTapItem,
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Collapsed sidebar — stateful for ⌘K shortcut
-// ─────────────────────────────────────────────────────────────────────────────
-
-class _KasySidebarCollapsed extends StatefulWidget {
-  final List<BartMenuRoute> routes;
-  final int currentIndex;
-  final OnTapItem onTapItem;
-
-  const _KasySidebarCollapsed({
-    required this.routes,
-    required this.currentIndex,
-    required this.onTapItem,
-  });
-
-  @override
-  State<_KasySidebarCollapsed> createState() => _KasySidebarCollapsedState();
-}
-
-class _KasySidebarCollapsedState extends State<_KasySidebarCollapsed> {
-  bool _searchOpen = false;
-
-  static const _projects = [
-    (color: Color(0xFF34C759), name: 'Kasy Studio'),
-    (color: Color(0xFF1E88E5), name: 'Design System'),
-    (color: Color(0xFFF57F17), name: 'Components'),
-  ];
-
-  static const _placeholders = [
-    (icon: KasyIcons.flash, label: 'Activity'),
-    (icon: KasyIcons.note, label: 'Tasks'),
-    (icon: KasyIcons.book, label: 'Reports'),
-    (icon: KasyIcons.person, label: 'Team'),
-  ];
-
-  // ── Keyboard shortcut ────────────────────────────────────────────────────
-
-  @override
-  void initState() {
-    super.initState();
-    HardwareKeyboard.instance.addHandler(_onKeyEvent);
-  }
-
-  @override
-  void dispose() {
-    HardwareKeyboard.instance.removeHandler(_onKeyEvent);
-    super.dispose();
-  }
-
-  bool _onKeyEvent(KeyEvent event) {
-    if (!mounted || event is! KeyDownEvent) return false;
-    if (event.logicalKey != LogicalKeyboardKey.keyK) return false;
-    final bool trigger = HardwareKeyboard.instance.isMetaPressed ||
-        HardwareKeyboard.instance.isControlPressed;
-    if (trigger) {
-      _openSearch();
-      return true;
-    }
-    return false;
-  }
-
-  void _openSearch() {
-    if (_searchOpen || !mounted) return;
-    setState(() => _searchOpen = true);
-    showGeneralDialog<void>(
-      context: context,
-      barrierDismissible: true,
-      barrierLabel: 'Dismiss',
-      barrierColor: Colors.black.withValues(alpha: 0.32),
-      transitionDuration: const Duration(milliseconds: 220),
-      pageBuilder: (ctx, anim, secAnim) => Align(
-        alignment: const Alignment(0, -0.18),
-        child: _SearchModal(
-          routes: widget.routes,
-          onNavigate: (index) {
-            Navigator.of(ctx, rootNavigator: true).pop();
-            widget.onTapItem(index);
-          },
-        ),
-      ),
-      transitionBuilder: (ctx, anim, secAnim, child) {
-        final curved =
-            CurvedAnimation(parent: anim, curve: Curves.easeOutCubic);
-        return FadeTransition(
-          opacity: curved,
-          child: ScaleTransition(
-            scale: Tween<double>(begin: 0.95, end: 1.0).animate(curved),
-            child: child,
-          ),
-        );
-      },
-    ).then((_) {
-      if (mounted) setState(() => _searchOpen = false);
-    });
-  }
-
-  // ── Build ─────────────────────────────────────────────────────────────────
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-
-    return Container(
-      width: _kCollapsedWidth,
-      decoration: BoxDecoration(
-        color: colors.surface,
-        border: Border(
-          right: BorderSide(color: colors.outline.withValues(alpha: 0.4)),
-        ),
-      ),
-      child: SafeArea(
-        right: false,
-        child: Column(
-          children: [
-            // ── Scrollable area ────────────────────────────────────────────
-            Expanded(
-              child: ScrollConfiguration(
-                behavior: ScrollConfiguration.of(context)
-                    .copyWith(scrollbars: false),
-                child: SingleChildScrollView(
-                  physics: const ClampingScrollPhysics(),
-                  child: Column(
-                    children: [
-                      const SizedBox(height: 16),
-
-                      // Brand icon
-                      _RailIconSlot(
-                        child: Container(
-                          width: 34,
-                          height: 34,
-                          decoration: BoxDecoration(
-                            color: colors.primary,
-                            borderRadius: BorderRadius.circular(8),
-                          ),
-                          child: const Icon(
-                            KasyIcons.assistant,
-                            size: 18,
-                            color: Colors.white,
-                          ),
-                        ),
-                      ),
-                      const SizedBox(height: 12),
-
-                      // Search
-                      _RailIconSlot(
-                        child: _RailIconBtn(
-                          icon: KasyIcons.search,
-                          tooltip: defaultTargetPlatform == TargetPlatform.macOS
-                              ? 'Search  ⌘K'
-                              : 'Search  Ctrl K',
-                          onTap: _openSearch,
-                        ),
-                      ),
-                      const SizedBox(height: 8),
-                      const _SidebarDivider(),
-                      const SizedBox(height: 8),
-
-                      // ── Nav items ──────────────────────────────────────
-                      ...widget.routes.asMap().entries.map((e) {
-                        final hasBuilder = e.value.iconBuilder != null;
-                        final icon = e.value.icon ?? KasyIcons.notification;
-                        final label = e.value.label ?? '';
-                        final isActive = widget.currentIndex == e.key;
-
-                        if (hasBuilder) {
-                          // Notification item — show dot badge
-                          return Padding(
-                            padding: const EdgeInsets.symmetric(vertical: 2),
-                            child: _CollapsedNotificationBtn(
-                              isActive: isActive,
-                              label: label,
-                              onTap: () => widget.onTapItem(e.key),
-                            ),
-                          );
-                        }
-                        return Padding(
-                          padding: const EdgeInsets.symmetric(vertical: 2),
-                          child: _RailNavBtn(
-                            icon: icon,
-                            tooltip: label,
-                            isActive: isActive,
-                            onTap: () => widget.onTapItem(e.key),
-                          ),
-                        );
-                      }),
-                      const SizedBox(height: 8),
-                      const _SidebarDivider(),
-                      const SizedBox(height: 8),
-
-                      // ── Workspace icons ────────────────────────────────
-                      ..._placeholders.map(
-                        (p) => _RailIconSlot(
-                          child: _RailIconBtn(
-                            icon: p.icon,
-                            tooltip: p.label,
-                            onTap: () {},
-                            hapticEnabled: false,
-                          ),
-                        ),
-                      ),
-                      const SizedBox(height: 12),
-                      const _SidebarDivider(),
-                      const SizedBox(height: 10),
-
-                      // ── Project dots ───────────────────────────────────
-                      ..._projects.map(
-                        (p) => _RailProjectDot(
-                          color: p.color,
-                          name: p.name,
-                        ),
-                      ),
-                      const SizedBox(height: 12),
-                    ],
-                  ),
-                ),
-              ),
-            ),
-
-            // ── Theme toggle + user avatar footer ─────────────────────────
-            const _RailThemeToggle(),
-            const SizedBox(height: 4),
-            const _SidebarDivider(),
-            const _CollapsedUserFooter(),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Rail helpers
-// ─────────────────────────────────────────────────────────────────────────────
-
-/// Centers a child horizontally within the 64 px rail column.
-class _RailIconSlot extends StatelessWidget {
-  final Widget child;
-  const _RailIconSlot({required this.child});
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 2),
-      child: Center(child: child),
-    );
-  }
-}
-
-/// Generic icon-only button: tooltip + hover.
-class _RailIconBtn extends StatelessWidget {
-  final IconData icon;
-  final String tooltip;
-  final VoidCallback onTap;
-  final bool hapticEnabled;
-
-  const _RailIconBtn({
-    required this.icon,
-    required this.tooltip,
-    required this.onTap,
-    this.hapticEnabled = true,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    return Tooltip(
-      message: tooltip,
-      preferBelow: false,
-      waitDuration: const Duration(milliseconds: 400),
-      child: KasyHover(
-        onTap: onTap,
-        hapticEnabled: hapticEnabled,
-        borderRadius: BorderRadius.circular(_kItemRadius),
-        child: SizedBox(
-          width: _kRailIconSize,
-          height: _kRailIconSize,
-          child: Icon(
-            icon,
-            size: 19,
-            color: colors.onSurface.withValues(alpha: 0.6),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// Nav button with a left accent bar that appears when active.
-class _RailNavBtn extends StatelessWidget {
-  final IconData icon;
-  final String tooltip;
-  final bool isActive;
-  final VoidCallback onTap;
-
-  const _RailNavBtn({
-    required this.icon,
-    required this.tooltip,
-    required this.isActive,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = context.colors;
-    const double slotHeight = _kRailIconSize + 4;
-
-    return Tooltip(
-      message: tooltip,
-      preferBelow: false,
-      waitDuration: const Duration(milliseconds: 400),
-      child: SizedBox(
-        width: _kCollapsedWidth,
-        height: slotHeight,
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            // Left accent bar
-            Positioned(
-              left: 0,
-              top: (slotHeight - 20) / 2,
-              child: AnimatedContainer(
-                duration: const Duration(milliseconds: 160),
-                width: 3,
-                height: 20,
-                decoration: BoxDecoration(
-                  color: isActive ? colors.primary : Colors.transparent,
-                  borderRadius: const BorderRadius.only(
-                    topRight: Radius.circular(2),
-                    bottomRight: Radius.circular(2),
-                  ),
-                ),
-              ),
-            ),
-            // Icon with hover
-            KasyHover(
-              onTap: onTap,
-              borderRadius: BorderRadius.circular(_kItemRadius),
-              child: AnimatedContainer(
-                duration: const Duration(milliseconds: 160),
-                curve: Curves.easeOut,
-                width: _kRailIconSize,
-                height: _kRailIconSize,
-                decoration: BoxDecoration(
-                  color: isActive
-                      ? colors.surfacePrimarySoft
-                      : Colors.transparent,
-                  borderRadius: BorderRadius.circular(_kItemRadius),
-                ),
-                child: Icon(
-                  icon,
-                  size: 19,
-                  color: isActive
-                      ? colors.primary
-                      : colors.onSurface.withValues(alpha: 0.6),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-/// Notification button with a live unread dot indicator.
-class _CollapsedNotificationBtn extends ConsumerWidget {
-  final bool isActive;
-  final String label;
-  final VoidCallback onTap;
-
-  const _CollapsedNotificationBtn({
-    required this.isActive,
-    required this.label,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final colors = context.colors;
-    final String? userId =
-        ref.watch(userStateNotifierProvider).user.idOrNull;
-    const double slotHeight = _kRailIconSize + 4;
-
-    return Tooltip(
-      message: label,
-      preferBelow: false,
-      waitDuration: const Duration(milliseconds: 400),
-      child: SizedBox(
-        width: _kCollapsedWidth,
-        height: slotHeight,
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            // Left accent bar
-            Positioned(
-              left: 0,
-              top: (slotHeight - 20) / 2,
-              child: AnimatedContainer(
-                duration: const Duration(milliseconds: 160),
-                width: 3,
-                height: 20,
-                decoration: BoxDecoration(
-                  color: isActive ? colors.primary : Colors.transparent,
-                  borderRadius: const BorderRadius.only(
-                    topRight: Radius.circular(2),
-                    bottomRight: Radius.circular(2),
-                  ),
-                ),
-              ),
-            ),
-            // Icon + dot badge
-            KasyHover(
-              onTap: onTap,
-              borderRadius: BorderRadius.circular(_kItemRadius),
-              child: AnimatedContainer(
-                duration: const Duration(milliseconds: 160),
-                curve: Curves.easeOut,
-                width: _kRailIconSize,
-                height: _kRailIconSize,
-                decoration: BoxDecoration(
-                  color:
-                      isActive ? colors.surfacePrimarySoft : Colors.transparent,
-                  borderRadius: BorderRadius.circular(_kItemRadius),
-                ),
-                child: Stack(
-                  clipBehavior: Clip.none,
-                  alignment: Alignment.center,
-                  children: [
-                    Icon(
-                      KasyIcons.notification,
-                      size: 19,
-                      color: isActive
-                          ? colors.primary
-                          : colors.onSurface.withValues(alpha: 0.6),
-                    ),
-                    if (userId != null)
-                      StreamBuilder<int>(
-                        stream: ref
-                            .read(notificationRepositoryProvider)
-                            .listenToUnreadNotificationsCount(userId),
-                        builder: (_, snapshot) {
-                          final int count = snapshot.data ?? 0;
-                          if (count == 0) return const SizedBox.shrink();
-                          return Positioned(
-                            top: 7,
-                            right: 7,
-                            child: Container(
-                              width: 7,
-                              height: 7,
-                              decoration: BoxDecoration(
-                                color: colors.error,
-                                shape: BoxShape.circle,
-                                border: Border.all(
-                                  color: colors.surface,
-                                  width: 1.2,
-                                ),
-                              ),
-                            ),
-                          );
-                        },
-                      ),
-                  ],
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-/// Small colored dot for the projects section in collapsed mode.
-class _RailProjectDot extends StatelessWidget {
-  final Color color;
-  final String name;
-
-  const _RailProjectDot({required this.color, required this.name});
-
-  @override
-  Widget build(BuildContext context) {
-    return _RailIconSlot(
-      child: Tooltip(
-        message: name,
-        preferBelow: false,
-        waitDuration: const Duration(milliseconds: 400),
-        child: KasyHover(
-          onTap: () {},
-          hapticEnabled: false,
-          borderRadius: BorderRadius.circular(_kItemRadius),
-          child: SizedBox(
-            width: _kRailIconSize,
-            height: _kRailIconSize,
-            child: Center(
-              child: Container(
-                width: 10,
-                height: 10,
-                decoration: BoxDecoration(
-                  color: color,
-                  shape: BoxShape.circle,
-                  boxShadow: [
-                    BoxShadow(
-                      color: color.withValues(alpha: 0.5),
-                      blurRadius: 5,
-                      offset: const Offset(0, 1),
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// User avatar in the collapsed rail footer.
-class _CollapsedUserFooter extends ConsumerWidget {
-  const _CollapsedUserFooter();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final user = ref.watch(userStateNotifierProvider).user;
-    final String displayName = user is AuthenticatedUserData
-        ? (user.name ?? user.email.split('@').first)
-        : 'Guest';
-    final String initials =
-        displayName.isNotEmpty ? displayName[0].toUpperCase() : 'G';
-
-    return KasyHover(
-      onTap: () {},
-      hapticEnabled: false,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 10),
-        child: Center(
-          child: Tooltip(
-            message: displayName,
-            preferBelow: false,
-            waitDuration: const Duration(milliseconds: 400),
-            child: KasyAvatar(
-              size: KasyAvatarSize.small,
-              diameter: 32,
-              initials: initials,
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}