import { useCallback, useState, type DragEvent } from "react"; import { useTranslation } from "react-i18next"; import { IconChevronDown, IconChevronRight, IconEdit, } from "@tabler/icons-react"; import type { AppView } from "@/app/AppShell"; import type { ProjectInfo } from "@/features/projects/api/projects"; import { ProjectIcon } from "@/features/projects/ui/ProjectIcon"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { SidebarChatRow } from "./SidebarChatRow"; import { SidebarItemMenu } from "./SidebarItemMenu"; const MAX_VISIBLE_CHATS = 5; const PROJECT_ROW_TEXT_CLASS = "text-foreground hover:bg-transparent hover:text-foreground"; interface TabInfo { id: string; title: string; projectId?: string; isRunning?: boolean; hasUnread?: boolean; } export function SidebarProjectSection({ project, projectChats, isExpanded, toggleProject, activeSessionId, onSelectSession, onNewChatInProject, onNavigate, onEditProject, onArchiveProject, onArchiveChat, onRenameChat, onMoveToProject, }: { project: ProjectInfo; projectChats: TabInfo[]; isExpanded: boolean; toggleProject: (projectId: string) => void; activeSessionId?: string | null; onSelectSession?: (sessionId: string) => void; onNewChatInProject?: (projectId: string) => void; onNavigate?: (view: AppView) => void; onEditProject?: (projectId: string) => void; onArchiveProject?: (projectId: string) => void; onArchiveChat?: (sessionId: string) => void; onRenameChat?: (sessionId: string, nextTitle: string) => void; onMoveToProject?: (sessionId: string, projectId: string | null) => void; }) { const { t } = useTranslation(["sidebar", "common"]); const [showAll, setShowAll] = useState(false); const [dragOver, setDragOver] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const handleDragOver = useCallback((e: DragEvent) => { if (e.dataTransfer.types.includes("text/x-session-id")) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setDragOver(true); } }, []); const handleDragLeave = useCallback((e: DragEvent) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) { setDragOver(false); } }, []); const handleDrop = useCallback( (e: DragEvent) => { e.preventDefault(); setDragOver(false); const sessionId = e.dataTransfer.getData("text/x-session-id"); if (sessionId) { onMoveToProject?.(sessionId, project.id); if (!isExpanded) toggleProject(project.id); } }, [onMoveToProject, project.id, isExpanded, toggleProject], ); const visibleChats = projectChats.slice( 0, showAll ? undefined : MAX_VISIBLE_CHATS, ); return ( // biome-ignore lint/a11y/noStaticElementInteractions: drop target for drag-and-drop

onEditProject?.(project.id)} onArchive={() => onArchiveProject?.(project.id)} /> {dragOver && (

)}

{isExpanded && (

{visibleChats.map((session) => { const isActive = activeSessionId === session.id; return ( ); })} {projectChats.length > MAX_VISIBLE_CHATS && ( )}

)}

); }