import { useState, useEffect, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { MessageSquare, Plus, Trash2, MoreHorizontal, Pencil, FolderKanban, } from "lucide-react"; import { SearchBar } from "@/shared/ui/SearchBar"; import { Button, buttonVariants } from "@/shared/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/shared/ui/alert-dialog"; import { CreateProjectDialog } from "./CreateProjectDialog"; import { ProjectIcon } from "./ProjectIcon"; import { deleteProject, type ProjectInfo } from "../api/projects"; import { useProjectStore } from "../stores/projectStore"; function ProjectCardMenu({ project, onStartChat, onEdit, onDelete, }: { project: ProjectInfo; onStartChat?: (project: ProjectInfo) => void; onEdit: (project: ProjectInfo) => void; onDelete: (project: ProjectInfo) => void; }) { const { t } = useTranslation(["projects", "common"]); return ( {onStartChat && ( onStartChat(project)}> {t("view.startChat")} )} onEdit(project)}> {t("common:actions.edit")} onDelete(project)} > {t("common:actions.delete")} ); } interface ProjectsViewProps { onStartChat?: (project: ProjectInfo) => void; } export function ProjectsView({ onStartChat }: ProjectsViewProps) { const { t } = useTranslation(["projects", "common"]); const fetchProjects = useProjectStore((s) => s.fetchProjects); const [search, setSearch] = useState(""); const [dialogOpen, setDialogOpen] = useState(false); const [editingProject, setEditingProject] = useState( undefined, ); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(true); const [deletingProject, setDeletingProject] = useState( null, ); const loadProjects = useCallback(async () => { try { await fetchProjects(); setProjects(useProjectStore.getState().projects); } catch { // projects may not exist yet setProjects([]); } finally { setLoading(false); } }, [fetchProjects]); useEffect(() => { loadProjects(); }, [loadProjects]); const handleDelete = (project: ProjectInfo) => { setDeletingProject(project); }; const handleConfirmDeleteProject = async () => { if (!deletingProject) return; try { await deleteProject(deletingProject.id); await loadProjects(); } catch { // best-effort } setDeletingProject(null); }; const handleEdit = (project: ProjectInfo) => { setEditingProject(project); setDialogOpen(true); }; const handleDialogClose = () => { setDialogOpen(false); setEditingProject(undefined); }; const handleNewProject = () => { setEditingProject(undefined); setDialogOpen(true); }; const filtered = projects.filter( (p) => p.name.toLowerCase().includes(search.toLowerCase()) || p.description.toLowerCase().includes(search.toLowerCase()), ); return (

{/* Header */}

{t("view.title")}

{t("view.description")}

{/* Search */} {/* Projects list */} {!loading && filtered.length > 0 && (

{filtered.map((project) => (

{project.name}

{project.prompt && (

{project.prompt}

)}

))} {/* New Project card */}

)} {/* Empty state */} {!loading && filtered.length === 0 && (

{projects.length === 0 ? t("view.emptyTitle") : t("view.noMatchesTitle")}

{projects.length === 0 ? t("view.emptyDescription") : t("view.noMatchesDescription")}

{projects.length === 0 && ( )}

)}

{/* Create / Edit dialog */} {/* Delete confirmation dialog */} !open && setDeletingProject(null)} > {t("view.deleteTitle", { name: deletingProject?.name ?? "", })} {t("view.deleteDescription", { name: deletingProject?.name ?? "", })} {t("common:actions.cancel")} {t("common:actions.delete")}

); }