|
| 1 | +import { useEffect, useState, useCallback } from "react"; |
| 2 | +import { NavLink, useLocation } from "react-router-dom"; |
| 3 | +import { fetchProjects, type ProjectRead } from "@/api/projects"; |
| 4 | +import { fetchSessions, type SessionRead } from "@/api/sessions"; |
| 5 | +import UserMenu from "@/components/UserMenu"; |
| 6 | + |
| 7 | +const SIDEBAR_COLLAPSED_KEY = "codehive-sidebar-collapsed"; |
| 8 | + |
| 9 | +const statusDotColors: Record<string, string> = { |
| 10 | + idle: "bg-gray-400", |
| 11 | + planning: "bg-yellow-400", |
| 12 | + executing: "bg-blue-400", |
| 13 | + waiting_input: "bg-purple-400", |
| 14 | + completed: "bg-green-400", |
| 15 | + failed: "bg-red-400", |
| 16 | +}; |
| 17 | + |
| 18 | +export default function Sidebar() { |
| 19 | + const location = useLocation(); |
| 20 | + const [collapsed, setCollapsed] = useState(() => { |
| 21 | + try { |
| 22 | + return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "true"; |
| 23 | + } catch { |
| 24 | + return false; |
| 25 | + } |
| 26 | + }); |
| 27 | + const [projects, setProjects] = useState<ProjectRead[]>([]); |
| 28 | + const [expandedProjects, setExpandedProjects] = useState<Set<string>>( |
| 29 | + new Set(), |
| 30 | + ); |
| 31 | + const [sessionsByProject, setSessionsByProject] = useState< |
| 32 | + Record<string, SessionRead[]> |
| 33 | + >({}); |
| 34 | + const [loadingSessions, setLoadingSessions] = useState<Set<string>>( |
| 35 | + new Set(), |
| 36 | + ); |
| 37 | + |
| 38 | + useEffect(() => { |
| 39 | + let cancelled = false; |
| 40 | + async function load() { |
| 41 | + try { |
| 42 | + const data = await fetchProjects(); |
| 43 | + if (!cancelled) setProjects(data); |
| 44 | + } catch { |
| 45 | + // Silently fail -- sidebar is supplementary navigation |
| 46 | + } |
| 47 | + } |
| 48 | + load(); |
| 49 | + return () => { |
| 50 | + cancelled = true; |
| 51 | + }; |
| 52 | + }, []); |
| 53 | + |
| 54 | + const toggleCollapse = useCallback(() => { |
| 55 | + setCollapsed((prev) => { |
| 56 | + const next = !prev; |
| 57 | + try { |
| 58 | + localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next)); |
| 59 | + } catch { |
| 60 | + // localStorage unavailable |
| 61 | + } |
| 62 | + return next; |
| 63 | + }); |
| 64 | + }, []); |
| 65 | + |
| 66 | + const toggleProject = useCallback( |
| 67 | + async (projectId: string) => { |
| 68 | + setExpandedProjects((prev) => { |
| 69 | + const next = new Set(prev); |
| 70 | + if (next.has(projectId)) { |
| 71 | + next.delete(projectId); |
| 72 | + } else { |
| 73 | + next.add(projectId); |
| 74 | + } |
| 75 | + return next; |
| 76 | + }); |
| 77 | + |
| 78 | + // Fetch sessions if not already cached |
| 79 | + if (!sessionsByProject[projectId] && !loadingSessions.has(projectId)) { |
| 80 | + setLoadingSessions((prev) => new Set(prev).add(projectId)); |
| 81 | + try { |
| 82 | + const sessions = await fetchSessions(projectId); |
| 83 | + setSessionsByProject((prev) => ({ ...prev, [projectId]: sessions })); |
| 84 | + } catch { |
| 85 | + // Keep empty on error |
| 86 | + } finally { |
| 87 | + setLoadingSessions((prev) => { |
| 88 | + const next = new Set(prev); |
| 89 | + next.delete(projectId); |
| 90 | + return next; |
| 91 | + }); |
| 92 | + } |
| 93 | + } |
| 94 | + }, |
| 95 | + [sessionsByProject, loadingSessions], |
| 96 | + ); |
| 97 | + |
| 98 | + // Determine active project/session from URL |
| 99 | + const activeProjectId = location.pathname.match( |
| 100 | + /^\/projects\/([^/]+)/, |
| 101 | + )?.[1]; |
| 102 | + const activeSessionId = location.pathname.match( |
| 103 | + /^\/sessions\/([^/]+)/, |
| 104 | + )?.[1]; |
| 105 | + |
| 106 | + return ( |
| 107 | + <aside |
| 108 | + data-testid="sidebar" |
| 109 | + className={`bg-gray-900 text-white flex-shrink-0 flex flex-col transition-all duration-200 ${ |
| 110 | + collapsed ? "w-12" : "w-64" |
| 111 | + }`} |
| 112 | + > |
| 113 | + <div className="p-4 flex items-center justify-between"> |
| 114 | + {!collapsed && <h2 className="text-lg font-semibold">Codehive</h2>} |
| 115 | + <button |
| 116 | + onClick={toggleCollapse} |
| 117 | + className="text-gray-400 hover:text-white p-1" |
| 118 | + aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"} |
| 119 | + data-testid="sidebar-toggle" |
| 120 | + > |
| 121 | + {collapsed ? "\u25B6" : "\u25C0"} |
| 122 | + </button> |
| 123 | + </div> |
| 124 | + {!collapsed && ( |
| 125 | + <div className="px-4 pb-2"> |
| 126 | + <UserMenu /> |
| 127 | + </div> |
| 128 | + )} |
| 129 | + <nav className="mt-2 flex-1 overflow-y-auto"> |
| 130 | + <ul className="space-y-0.5"> |
| 131 | + <li> |
| 132 | + <NavLink |
| 133 | + to="/" |
| 134 | + end |
| 135 | + className={({ isActive }) => |
| 136 | + `block px-4 py-2 text-sm ${ |
| 137 | + isActive |
| 138 | + ? "bg-gray-800 text-white font-medium" |
| 139 | + : "text-gray-300 hover:bg-gray-800 hover:text-white" |
| 140 | + }` |
| 141 | + } |
| 142 | + > |
| 143 | + {collapsed ? "D" : "Dashboard"} |
| 144 | + </NavLink> |
| 145 | + </li> |
| 146 | + {projects.map((project) => { |
| 147 | + const isActiveProject = activeProjectId === project.id; |
| 148 | + const isExpanded = expandedProjects.has(project.id); |
| 149 | + const sessions = sessionsByProject[project.id]; |
| 150 | + |
| 151 | + return ( |
| 152 | + <li key={project.id}> |
| 153 | + <div className="flex items-center"> |
| 154 | + <button |
| 155 | + onClick={() => toggleProject(project.id)} |
| 156 | + className="px-2 py-2 text-gray-400 hover:text-white text-xs flex-shrink-0" |
| 157 | + aria-label={`Toggle ${project.name} sessions`} |
| 158 | + data-testid={`toggle-${project.id}`} |
| 159 | + > |
| 160 | + {isExpanded ? "\u25BC" : "\u25B6"} |
| 161 | + </button> |
| 162 | + <NavLink |
| 163 | + to={`/projects/${project.id}`} |
| 164 | + className={`flex-1 block py-2 pr-4 text-sm truncate ${ |
| 165 | + isActiveProject |
| 166 | + ? "text-white font-medium" |
| 167 | + : "text-gray-300 hover:text-white" |
| 168 | + }`} |
| 169 | + > |
| 170 | + {collapsed |
| 171 | + ? project.name.charAt(0).toUpperCase() |
| 172 | + : project.name} |
| 173 | + </NavLink> |
| 174 | + </div> |
| 175 | + {isExpanded && !collapsed && ( |
| 176 | + <ul className="ml-6 space-y-0.5" data-testid={`sessions-${project.id}`}> |
| 177 | + {loadingSessions.has(project.id) && ( |
| 178 | + <li className="px-4 py-1 text-xs text-gray-500"> |
| 179 | + Loading... |
| 180 | + </li> |
| 181 | + )} |
| 182 | + {sessions?.map((session) => { |
| 183 | + const isActiveSession = activeSessionId === session.id; |
| 184 | + const dotColor = |
| 185 | + statusDotColors[session.status] ?? "bg-gray-400"; |
| 186 | + return ( |
| 187 | + <li key={session.id}> |
| 188 | + <NavLink |
| 189 | + to={`/sessions/${session.id}`} |
| 190 | + className={`block px-4 py-1.5 text-xs truncate flex items-center gap-2 ${ |
| 191 | + isActiveSession |
| 192 | + ? "text-white font-medium bg-gray-800" |
| 193 | + : "text-gray-400 hover:text-white hover:bg-gray-800" |
| 194 | + }`} |
| 195 | + > |
| 196 | + <span |
| 197 | + className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${dotColor}`} |
| 198 | + aria-label={session.status} |
| 199 | + /> |
| 200 | + {session.name} |
| 201 | + </NavLink> |
| 202 | + </li> |
| 203 | + ); |
| 204 | + })} |
| 205 | + {sessions?.length === 0 && ( |
| 206 | + <li className="px-4 py-1 text-xs text-gray-500"> |
| 207 | + No sessions |
| 208 | + </li> |
| 209 | + )} |
| 210 | + </ul> |
| 211 | + )} |
| 212 | + </li> |
| 213 | + ); |
| 214 | + })} |
| 215 | + </ul> |
| 216 | + </nav> |
| 217 | + </aside> |
| 218 | + ); |
| 219 | +} |
0 commit comments