import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { Calendar, Folder, Bot, MoreHorizontal, Pencil, Trash2, ArchiveRestore, Copy, Download, } from "lucide-react"; import { getDisplaySessionTitle, getEditableSessionTitle, isSessionTitleUnchanged, } from "@/features/chat/lib/sessionTitle"; import { useLocaleFormatting } from "@/shared/i18n"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; import { Input } from "@/shared/ui/input"; interface SessionCardProps { id: string; title: string; updatedAt: string; personaName?: string; projectName?: string; projectColor?: string; workingDir?: string; archivedAt?: string; snippet?: string; matchCount?: number; onSelect?: (id: string) => void; onRename?: (id: string, nextTitle: string) => void; onArchive?: (id: string) => void; onUnarchive?: (id: string) => void; onExport?: (id: string) => void; onDuplicate?: (id: string) => void; } export function SessionCard({ id, title, updatedAt, personaName, projectName, projectColor, workingDir, archivedAt, snippet, matchCount, onSelect, onRename, onArchive, onUnarchive, onExport, onDuplicate, }: SessionCardProps) { const { t } = useTranslation(["sessions", "common"]); const { formatRelativeTimeToNow } = useLocaleFormatting(); const [menuOpen, setMenuOpen] = useState(false); const [editing, setEditing] = useState(false); const inputRef = useRef(null); const displayTitle = getDisplaySessionTitle( title, t("common:session.defaultTitle"), ); const editableTitle = getEditableSessionTitle( title, t("common:session.defaultTitle"), ); const [draftTitle, setDraftTitle] = useState(editableTitle); useEffect(() => { setDraftTitle(editableTitle); }, [editableTitle]); useEffect(() => { if (!editing) return; inputRef.current?.focus(); inputRef.current?.select(); }, [editing]); const startRename = () => { setDraftTitle(editableTitle); setMenuOpen(false); setEditing(true); }; const commitRename = () => { const nextTitle = draftTitle.trim(); setEditing(false); if ( !nextTitle || isSessionTitleUnchanged( nextTitle, title, t("common:session.defaultTitle"), ) ) { return; } onRename?.(id, nextTitle); }; const cancelRename = () => { setDraftTitle(editableTitle); setEditing(false); }; return (

{/* Click-to-open overlay */} {archivedAt ? ( <> { setMenuOpen(false); onExport?.(id); }} > {t("common:actions.export")} { setMenuOpen(false); onUnarchive?.(id); }} > {t("common:actions.restore")} ) : ( <> {t("common:actions.rename")} { setMenuOpen(false); onExport?.(id); }} > {t("common:actions.export")} { setMenuOpen(false); onDuplicate?.(id); }} > {t("common:actions.duplicate")} { setMenuOpen(false); onArchive?.(id); }} > {t("common:actions.archive")} )}

); }