feat: redesign sidebar to consolidate threads under projects (#918)

Replace flat Projects/Threads sidebar sections with a project-centric tree
where threads are nested under their parent project. Key changes:

- Add useProjectThreads hook for lazy per-project thread fetching with pagination
- Create ProjectTreeGroup component with collapsible project nodes and nested threads
- Projects section expanded by default; Threads section collapsed (orphan threads)
- Empty state shows "No projects yet" with Create Project CTA for new users
- Per-project "Create new thread" and "Show more" buttons
- Thread move between projects syncs both sidebar sections

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: ryaneggz <kre8mymedia@gmail.com>

Author: ryaneggz

frontend/src/components/drawers/app-sidebar.tsx

@@ -10,8 +10,6 @@ import {
 	MoreHorizontal,
 	Trash2,
 	FolderKanban,
-	Plus,
-	FileText,
 	Loader2,
 	Search,
 	Calendar,
@@ -67,6 +65,8 @@ import { AxiosResponse } from "axios";
 import { useScheduleExecutions } from "@/hooks/useScheduleExecutions";
 import { useSchedules } from "@/hooks/useSchedules";
 import { ScheduleSidebarItem } from "@/components/sidebar/ScheduleSidebarItem";
+import { ProjectTreeGroup } from "@/components/sidebar/ProjectTreeGroup";
+import { useProjectThreads } from "@/hooks/useProjectThreads";
 
 interface AssistantItemProps {
 	agent: Agent;
@@ -361,197 +361,7 @@ function ThreadItem({ thread, projects }: ThreadItemProps) {
 	);
 }
 
-interface ProjectItemProps {
-	project: Project;
-	onAddSource: (project: Project) => void;
-}
-
-function ProjectItem({ project, onAddSource }: ProjectItemProps) {
-	const { selectedProject, selectProject, handleDeleteProject } =
-		useProjectContext();
-	const { setMetadata } = useChatContext();
-	const { isMobile, setOpenMobile } = useSidebar();
-	const navigate = useNavigate();
-
-	const isSelected = selectedProject?.id === project.id;
-	const sourceCount = project.sources?.length || 0;
-
-	const handleProjectClick = () => {
-		selectProject(project);
-		setMetadata((prev: any) => ({
-			...prev,
-			project_id: project.id,
-		}));
-		if (isMobile) {
-			setOpenMobile(false);
-		}
-		// Navigate to project page
-		navigate(`/p/${project.id}`);
-	};
-
-	const handleDeleteClick = async () => {
-		if (window.confirm("Are you sure you want to delete this project?")) {
-			const deleted = await handleDeleteProject(project.id!);
-			if (deleted) {
-				setMetadata((prev: any) => {
-					const { project_id: _project_id, ...rest } = prev;
-					return rest;
-				});
-			}
-		}
-	};
-
-	const relativeTime = project.updated_at
-		? formatDistanceToNow(new Date(project.updated_at), { addSuffix: true })
-		: "";
-
-	return (
-		<SidebarMenuItem className="mb-1 group/project relative">
-			<SidebarMenuButton
-				asChild
-				isActive={isSelected}
-				className={`h-auto px-3 py-3 rounded-lg border transition-all ${
-					isSelected
-						? "bg-sidebar-accent border-sidebar-accent shadow-sm"
-						: "bg-transparent border-sidebar-border hover:bg-sidebar-accent/50 hover:border-sidebar-accent/50"
-				}`}
-			>
-				<button
-					onClick={handleProjectClick}
-					className="flex items-start gap-2.5 w-full"
-				>
-					<div className="flex flex-col min-w-0 flex-1 gap-1.5">
-						<div className="flex items-start justify-between gap-2 w-full">
-							<span
-								className={`text-sm leading-tight line-clamp-2 ${
-									isSelected
-										? "font-semibold text-sidebar-accent-foreground"
-										: "font-medium text-sidebar-foreground"
-								}`}
-							>
-								{project.name}
-							</span>
-							{relativeTime && (
-								<span className="text-[10px] text-sidebar-foreground/40 shrink-0 font-normal mt-0.5 whitespace-nowrap">
-									{relativeTime}
-								</span>
-							)}
-						</div>
-						{project.description && (
-							<span className="text-xs text-sidebar-foreground/60 truncate">
-								{project.description}
-							</span>
-						)}
-						<div className="flex items-center gap-2.5 text-[11px] text-sidebar-foreground/50">
-							<div className="flex items-center gap-1">
-								<FileText className="w-3 h-3" />
-								<span>
-									{sourceCount} source{sourceCount !== 1 ? "s" : ""}
-								</span>
-							</div>
-						</div>
-					</div>
-				</button>
-			</SidebarMenuButton>
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button
-						variant="ghost"
-						size="icon"
-						className="absolute right-2 bottom-2 opacity-0 group-hover/project:opacity-100 transition-opacity h-6 w-6"
-						onClick={(e) => e.stopPropagation()}
-					>
-						<MoreHorizontal className="h-3.5 w-3.5 text-sidebar-foreground/60" />
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end" className="w-48">
-					<DropdownMenuItem
-						onClick={() => onAddSource(project)}
-						className="cursor-pointer"
-					>
-						<Plus className="mr-2 h-4 w-4" />
-						Add Source
-					</DropdownMenuItem>
-					<DropdownMenuItem
-						onClick={handleDeleteClick}
-						className="text-red-300 focus:text-red-400 hover:text-red-300 cursor-pointer"
-					>
-						<Trash2 className="mr-2 h-4 w-4" />
-						Delete
-					</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenu>
-		</SidebarMenuItem>
-	);
-}
-
-interface ProjectsCollapsibleGroupProps {
-	projects: Project[];
-	onCreateProject: () => void;
-	onAddSource: (project: Project) => void;
-}
-
-function ProjectsCollapsibleGroup({
-	projects,
-	onCreateProject,
-	onAddSource,
-}: ProjectsCollapsibleGroupProps) {
-	return (
-		<Collapsible
-			key="projects"
-			title={`Projects (${projects.length} items)`}
-			defaultOpen={false}
-			className="group/collapsible"
-			data-tour="projects-section"
-		>
-			<SidebarGroup className="border-b border-sidebar-border">
-				<SidebarGroupLabel
-					asChild
-					className={`
-						group/label text-sidebar-foreground hover:bg-sidebar-accent
-						hover:text-sidebar-accent-foreground text-sm
-					`}
-				>
-					<CollapsibleTrigger>
-						<FolderKanban className="w-4 h-4 mr-2" />
-						Projects
-						<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-					</CollapsibleTrigger>
-				</SidebarGroupLabel>
-				<CollapsibleContent>
-					<SidebarGroupContent className="px-1 pt-2">
-						<div className="px-2 pb-2">
-							<Button
-								variant="outline"
-								size="sm"
-								className="w-full justify-start gap-2"
-								onClick={onCreateProject}
-							>
-								<Plus className="h-4 w-4" />
-								Create Project
-							</Button>
-						</div>
-						<SidebarMenu className="gap-0">
-							{projects.length > 0 ? (
-								projects.map((project) => (
-									<ProjectItem
-										key={project.id}
-										project={project}
-										onAddSource={onAddSource}
-									/>
-								))
-							) : (
-								<div className="px-3 py-4 text-center text-sm text-sidebar-foreground/50">
-									No projects yet
-								</div>
-							)}
-						</SidebarMenu>
-					</SidebarGroupContent>
-				</CollapsibleContent>
-			</SidebarGroup>
-		</Collapsible>
-	);
-}
+// ProjectItem and ProjectsCollapsibleGroup replaced by ProjectTreeGroup
 
 interface CollapsibleGroupProps {
 	title: string;
@@ -617,7 +427,7 @@ function CollapsibleGroup({
 		<Collapsible
 			key={title}
 			title={`${title} (${items.length} items)`}
-			defaultOpen={type === "threads"}
+			defaultOpen={false}
 			className="group/collapsible"
 			{...(type === "threads" ? { "data-tour": "threads-section" } : {})}
 		>
@@ -813,6 +623,15 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 	} = useChatContext();
 	const { projects, useEffectGetProjects } = useProjectContext();
 	const onLogoLinkClick = useLinkClick("/");
+	const {
+		projectThreadsMap,
+		fetchProjectThreads,
+		loadMoreProjectThreads,
+		toggleProjectExpanded,
+		isProjectExpanded,
+		addThreadToProject,
+		removeThreadFromProject,
+	} = useProjectThreads();
 	// Modal state
 	const [isCreateProjectModalOpen, setIsCreateProjectModalOpen] =
 		useState(false);
@@ -901,10 +720,17 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 						</SidebarGroupLabel>
 					</SidebarGroup>
 
-					<ProjectsCollapsibleGroup
+					<ProjectTreeGroup
 						projects={projects}
 						onCreateProject={() => setIsCreateProjectModalOpen(true)}
 						onAddSource={handleAddSource}
+						projectThreadsMap={projectThreadsMap}
+						fetchProjectThreads={fetchProjectThreads}
+						loadMoreProjectThreads={loadMoreProjectThreads}
+						toggleProjectExpanded={toggleProjectExpanded}
+						isProjectExpanded={isProjectExpanded}
+						addThreadToProject={addThreadToProject}
+						removeThreadFromProject={removeThreadFromProject}
 					/>
 					<SchedulesCollapsibleGroup />
 					<CollapsibleGroup