import { useEffect, useState } from 'react' import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Sparkles } from 'lucide-react' import { cn } from '@/lib/utils' import { useUserPreferencesStore } from '@/store/userPreferencesStore' import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore' import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection' import { NavItem } from './NavItem' import { sessionsApi, treesApi } from '@/api' export function Sidebar() { const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed) const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar) const pinnedItems = usePinnedFlowsStore((s) => s.items) const loadPinned = usePinnedFlowsStore((s) => s.load) const unpinFlow = usePinnedFlowsStore((s) => s.unpin) const [activeSessionCount, setActiveSessionCount] = useState(0) const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 }) // Load pinned flows on mount useEffect(() => { loadPinned() }, [loadPinned]) // Fetch sidebar data on mount useEffect(() => { const fetchData = async () => { try { const [activeSessions, allTrees] = await Promise.all([ sessionsApi.list({ completed: false, size: 50 }).catch(() => []), treesApi.list({ sort_by: 'name' }).catch(() => []), ]) setActiveSessionCount(activeSessions.length) const total = allTrees.length const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length const procedural = allTrees.filter(t => t.tree_type === 'procedural').length const maintenance = allTrees.filter(t => t.tree_type === 'maintenance').length setTreeCounts({ total, troubleshooting, procedural, maintenance }) } catch { // Silently handle errors } } fetchData() }, []) const handleSidebarWheel = (e: React.WheelEvent) => { const sidebar = e.currentTarget const canSidebarScroll = sidebar.scrollHeight > sidebar.clientHeight const atTop = sidebar.scrollTop <= 0 const atBottom = sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 // If sidebar can't consume wheel movement, forward it to main content scroller. if (!canSidebarScroll || (e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) { const main = document.querySelector('.main-content') as HTMLElement | null if (main) { main.scrollTop += e.deltaY e.preventDefault() } } } return ( ) }