import { useCallback, useState, type DragEvent } from "react"; import { useTranslation } from "react-i18next"; import { IconMessage } from "@tabler/icons-react"; import { getDisplaySessionTitle } from "@/features/chat/lib/sessionTitle"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { SessionActivityIndicator } from "@/shared/ui/SessionActivityIndicator"; import { SidebarChatRow } from "./SidebarChatRow"; interface TabInfo { id: string; title: string; projectId?: string; isRunning?: boolean; hasUnread?: boolean; } export function SidebarRecentsSection({ sessions, collapsed, labelTransition, labelVisible, activeSessionId, onNewChat, onSelectSession, onArchiveChat, onRenameChat, onMoveToProject, }: { sessions: TabInfo[]; collapsed: boolean; labelTransition: string; labelVisible: boolean; activeSessionId?: string | null; onNewChat?: () => void; onSelectSession?: (sessionId: 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 [recentsDragOver, setRecentsDragOver] = useState(false); const handleRecentsDragOver = useCallback((e: DragEvent) => { const hasSession = e.dataTransfer.types.includes("text/x-session-id"); if (hasSession) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setRecentsDragOver(true); } }, []); const handleRecentsDragLeave = useCallback((e: DragEvent) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) { setRecentsDragOver(false); } }, []); const handleRecentsDrop = useCallback( (e: DragEvent) => { e.preventDefault(); setRecentsDragOver(false); const sessionId = e.dataTransfer.getData("text/x-session-id"); if (sessionId) { onMoveToProject?.(sessionId, null); } }, [onMoveToProject], ); return ( // biome-ignore lint/a11y/noStaticElementInteractions: drop target for drag-and-drop

{t("sections.recents")} {!collapsed && onNewChat && ( )} {recentsDragOver && (

)}

{sessions.length > 0 && (collapsed ? (

{sessions.map((session) => ( ))}

) : (

{sessions.map((session) => { const isActive = activeSessionId === session.id; return ( ); })}

))}

); }