import { useState, useEffect, useRef, type FormEvent } from "react"; import { useTranslation } from "react-i18next"; import { IconFolderOpen } from "@tabler/icons-react"; import { getHomeDir } from "@/shared/api/system"; import { Button } from "@/shared/ui/button"; import { Checkbox } from "@/shared/ui/checkbox"; import { Input } from "@/shared/ui/input"; import { Label } from "@/shared/ui/label"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/shared/ui/dialog"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/shared/ui/select"; import { createProject, updateProject, type ProjectInfo, } from "../api/projects"; import { discoverAcpProviders, type AcpProvider } from "@/shared/api/acp"; import { useProjectIconSelection } from "../hooks/useProjectIconSelection"; import { buildEditorText, hasEquivalentWorkingDir, insertWorkingDir, parseEditorText, } from "../lib/projectPromptText"; import { PromptEditor } from "./PromptEditor"; import { DEFAULT_PROJECT_ICON } from "../lib/projectIcons"; import { ProjectIconPicker } from "./ProjectIconPicker"; const DEFAULT_PROJECT_COLOR = "#64748b"; function getDefaultProjectName(path: string | null | undefined): string { const trimmed = path?.trim(); if (!trimmed) { return ""; } const normalized = trimmed.replace(/[\\/]+$/, ""); const parts = normalized.split(/[\\/]/).filter(Boolean); return parts[parts.length - 1] ?? ""; } interface CreateProjectDialogProps { isOpen: boolean; onClose: () => void; onCreated: (project: ProjectInfo) => void; initialWorkingDir?: string | null; editingProject?: ProjectInfo; } export function CreateProjectDialog({ isOpen, onClose, onCreated, initialWorkingDir, editingProject, }: CreateProjectDialogProps) { const { t } = useTranslation(["projects", "common"]); const [name, setName] = useState(""); const [prompt, setPrompt] = useState(""); const { icon, iconCandidates, iconScanPending, iconError, chooseIcon, chooseCustomIcon, resetIcon, } = useProjectIconSelection({ isOpen, prompt }); const [color, setColor] = useState(DEFAULT_PROJECT_COLOR); const [preferredProvider, setPreferredProvider] = useState( null, ); const preferredModel: string | null = null; const [useWorktrees, setUseWorktrees] = useState(false); const [saving, setSaving] = useState(false); const [error, setError] = useState(null); const [acpProviders, setAcpProviders] = useState([]); const isEditing = !!editingProject; useEffect(() => { discoverAcpProviders() .then(setAcpProviders) .catch(() => setAcpProviders([])); }, []); const handleAddDirectory = async () => { try { const { open } = await import("@tauri-apps/plugin-dialog"); const selected = await open({ directory: true, multiple: false, title: t("dialog.addDirectoryDialogTitle"), }); if (selected && typeof selected === "string") { const homeDir = await getHomeDir().catch(() => null); setPrompt((prev) => { if (hasEquivalentWorkingDir(prev, selected, homeDir)) { return prev; } return insertWorkingDir(prev, selected); }); } } catch { // Dialog plugin not available } }; const handleChooseCustomIcon = async () => { await chooseCustomIcon({ title: t("dialog.customIconDialogTitle"), filterName: t("dialog.iconFileFilter"), }); }; // Pre-fill fields when the dialog opens or when the project identity changes, // but NOT on every parent re-render (which would reset user edits mid-typing). const prevOpenRef = useRef(false); const prevEditingIdRef = useRef(undefined); useEffect(() => { const justOpened = isOpen && !prevOpenRef.current; prevOpenRef.current = isOpen; const projectIdChanged = isOpen && !justOpened && editingProject?.id !== prevEditingIdRef.current; prevEditingIdRef.current = editingProject?.id; if (!justOpened && !projectIdChanged) return; if (editingProject) { setName(editingProject.name); setPrompt( buildEditorText(editingProject.workingDirs, editingProject.prompt), ); resetIcon(editingProject.icon); setColor(editingProject.color); setPreferredProvider(editingProject.preferredProvider ?? null); setUseWorktrees(editingProject.useWorktrees); setError(null); } else { setName(getDefaultProjectName(initialWorkingDir)); setPrompt( buildEditorText( initialWorkingDir?.trim() ? [initialWorkingDir.trim()] : [], "", ), ); resetIcon(DEFAULT_PROJECT_ICON); setColor(DEFAULT_PROJECT_COLOR); setPreferredProvider(null); setUseWorktrees(false); setError(null); } }, [isOpen, editingProject, initialWorkingDir, resetIcon]); const canSave = name.trim().length > 0 && !saving; const handleClose = () => { setName(""); setPrompt(""); resetIcon(DEFAULT_PROJECT_ICON); setColor(DEFAULT_PROJECT_COLOR); setPreferredProvider(null); setUseWorktrees(false); setError(null); onClose(); }; const handleSave = async (e: FormEvent) => { e.preventDefault(); if (!canSave) return; setSaving(true); setError(null); const { prompt: parsedPrompt, workingDirs } = parseEditorText(prompt); try { let savedProject: ProjectInfo; if (isEditing) { savedProject = await updateProject( editingProject.id, name.trim(), "", parsedPrompt, icon, color, preferredProvider || null, preferredModel, workingDirs, useWorktrees, ); } else { savedProject = await createProject( name.trim(), "", parsedPrompt, icon, color, preferredProvider || null, preferredModel, workingDirs, useWorktrees, ); } onCreated(savedProject); onClose(); } catch (err) { setError(String(err)); } finally { setSaving(false); } }; return ( ); }