@sascha384/tic 1.17.0 → 1.18.0

package/dist/components/WorkItemForm.js

@@ -5,17 +5,31 @@ import TextInput from 'ink-text-input';
 import SelectInput from 'ink-select-input';
 import { AutocompleteInput } from './AutocompleteInput.js';
 import { MultiAutocompleteInput } from './MultiAutocompleteInput.js';
-import { useAppState } from '../app.js';
+import { useNavigationStore } from '../stores/navigationStore.js';
+import { formStackStore, useFormStackStore, } from '../stores/formStackStore.js';
 import { SyncQueueStore } from '../sync/queue.js';
 import { useScrollViewport } from '../hooks/useScrollViewport.js';
 import { useBackendDataStore } from '../stores/backendDataStore.js';
 import { openInEditor } from '../editor.js';
 import { slugifyTemplateName } from '../backends/local/templates.js';
-import { createSnapshot, isSnapshotEqual, } from './formSnapshot.js';
+import { Breadcrumbs } from './Breadcrumbs.js';
 const SELECT_FIELDS = ['type', 'status', 'iteration', 'priority'];
 const PRIORITIES = ['low', 'medium', 'high', 'critical'];
 export function WorkItemForm() {
-    const { backend, syncManager, navigate, navigateToHelp, selectedWorkItemId, activeType, activeTemplate, setActiveTemplate, formMode, setFormMode, editingTemplateSlug, setEditingTemplateSlug, pushWorkItem, popWorkItem, } = useAppState();
+    const backend = useBackendDataStore((s) => s.backend);
+    const syncManager = useBackendDataStore((s) => s.syncManager);
+    const navigate = useNavigationStore((s) => s.navigate);
+    const navigateToHelp = useNavigationStore((s) => s.navigateToHelp);
+    const selectedWorkItemId = useNavigationStore((s) => s.selectedWorkItemId);
+    const activeType = useNavigationStore((s) => s.activeType);
+    const activeTemplate = useNavigationStore((s) => s.activeTemplate);
+    const setActiveTemplate = useNavigationStore((s) => s.setActiveTemplate);
+    const formMode = useNavigationStore((s) => s.formMode);
+    const setFormMode = useNavigationStore((s) => s.setFormMode);
+    const editingTemplateSlug = useNavigationStore((s) => s.editingTemplateSlug);
+    const setEditingTemplateSlug = useNavigationStore((s) => s.setEditingTemplateSlug);
+    const pushWorkItem = useNavigationStore((s) => s.pushWorkItem);
+    const popWorkItem = useNavigationStore((s) => s.popWorkItem);
     const queueStore = useMemo(() => {
         if (!syncManager)
             return null;
@@ -42,6 +56,11 @@ export function WorkItemForm() {
     const currentIteration = useBackendDataStore((s) => s.currentIteration);
     const allItems = useBackendDataStore((s) => s.items);
     const configLoading = useBackendDataStore((s) => s.loading);
+    // Form stack store for draft persistence
+    const currentDraft = useFormStackStore((s) => s.currentDraft());
+    const showDirtyPrompt = useFormStackStore((s) => s.showDiscardPrompt);
+    const storeIsDirty = useFormStackStore((s) => s.isDirty());
+    const { push: pushDraft, updateFields, setFocusedField: setStoreFocusedField, setShowDiscardPrompt: setStoreShowDiscardPrompt, } = formStackStore.getState();
     const [existingItem, setExistingItem] = useState(null);
     const [children, setChildren] = useState([]);
     const [dependents, setDependents] = useState([]);
@@ -56,6 +75,10 @@ export function WorkItemForm() {
             setItemLoading(false);
             return;
         }
+        if (!backend) {
+            setItemLoading(false);
+            return;
+        }
         let cancelled = false;
         setItemLoading(true);
         void (async () => {
@@ -155,62 +178,91 @@ export function WorkItemForm() {
         children,
         dependents,
     ]);
-    const [title, setTitle] = useState('');
-    const [type, setType] = useState(activeType ?? types[0] ?? '');
-    const [status, setStatus] = useState(statuses[0] ?? '');
-    const [iteration, setIteration] = useState(currentIteration);
-    const [priority, setPriority] = useState('medium');
-    const [assignee, setAssignee] = useState('');
-    const [labels, setLabels] = useState('');
-    const [description, setDescription] = useState('');
-    const [parentId, setParentId] = useState('');
-    const [dependsOn, setDependsOn] = useState('');
-    const [newComment, setNewComment] = useState('');
     const [comments, setComments] = useState([]);
-    const [initialSnapshot, setInitialSnapshot] = useState(null);
-    const currentValues = createSnapshot({
-        title,
-        type,
-        status,
-        iteration,
-        priority,
-        assignee,
-        labels,
-        description,
-        parentId,
-        dependsOn,
-        newComment,
-    });
-    const isDirty = initialSnapshot !== null &&
-        !isSnapshotEqual(initialSnapshot, currentValues);
+    // Derive field values from current draft
+    const title = currentDraft?.fields.title ?? '';
+    const type = currentDraft?.fields.type ?? activeType ?? types[0] ?? '';
+    const status = currentDraft?.fields.status ?? statuses[0] ?? '';
+    const iteration = currentDraft?.fields.iteration ?? currentIteration;
+    const priority = (currentDraft?.fields.priority ?? 'medium');
+    const assignee = currentDraft?.fields.assignee ?? '';
+    const labels = currentDraft?.fields.labels ?? '';
+    const description = currentDraft?.fields.description ?? '';
+    const parentId = currentDraft?.fields.parentId ?? '';
+    const dependsOn = currentDraft?.fields.dependsOn ?? '';
+    const newComment = currentDraft?.fields.newComment ?? '';
+    const focusedField = currentDraft?.focusedField ?? 0;
+    // Use store's dirty detection
+    const isDirty = storeIsDirty;
+    // Field setter wrappers that update the store
+    const setTitle = (v) => updateFields({ title: v });
+    const setType = (v) => updateFields({ type: v });
+    const setStatus = (v) => updateFields({ status: v });
+    const setIteration = (v) => updateFields({ iteration: v });
+    const setPriority = (v) => updateFields({ priority: v });
+    const setAssignee = (v) => updateFields({ assignee: v });
+    const setLabels = (v) => updateFields({ labels: v });
+    const setDescription = (v) => updateFields({ description: v });
+    const setParentId = (v) => updateFields({ parentId: v });
+    const setDependsOn = (v) => updateFields({ dependsOn: v });
+    const setNewComment = (v) => updateFields({ newComment: v });
+    const setFocusedField = (v) => {
+        if (typeof v === 'function') {
+            const newVal = v(focusedField);
+            setStoreFocusedField(newVal);
+        }
+        else {
+            setStoreFocusedField(v);
+        }
+    };
+    const setShowDirtyPrompt = setStoreShowDiscardPrompt;
+    // Initialize form draft when entering form (only if stack is empty)
+    useEffect(() => {
+        if (formStackStore.getState().stack.length > 0)
+            return; // Already has a draft
+        const initialFields = {
+            title: '',
+            type: activeType ?? types[0] ?? '',
+            status: statuses[0] ?? '',
+            iteration: currentIteration,
+            priority: 'medium',
+            assignee: '',
+            labels: '',
+            description: '',
+            parentId: '',
+            dependsOn: '',
+            newComment: '',
+        };
+        const draft = {
+            itemId: selectedWorkItemId,
+            itemTitle: selectedWorkItemId ? `#${selectedWorkItemId}` : '(new)',
+            fields: initialFields,
+            initialSnapshot: { ...initialFields },
+            focusedField: 0,
+        };
+        pushDraft(draft);
+    }, []); // Only on mount
     // Sync form fields when the existing item finishes loading
     useEffect(() => {
         if (!existingItem)
             return;
-        setTitle(existingItem.title);
-        setType(existingItem.type);
-        setStatus(existingItem.status);
-        setIteration(existingItem.iteration);
-        setPriority(existingItem.priority ?? 'medium');
-        setAssignee(existingItem.assignee ?? '');
-        setLabels(existingItem.labels.join(', '));
-        setDescription(existingItem.description ?? '');
-        setParentId(existingItem.parent !== null && existingItem.parent !== undefined
+        setComments(existingItem.comments ?? []);
+        // Build field values
+        const parentIdValue = existingItem.parent !== null && existingItem.parent !== undefined
             ? (() => {
                 const pi = allItems.find((i) => i.id === existingItem.parent);
                 return pi
                     ? `#${existingItem.parent} - ${pi.title}`
                     : String(existingItem.parent);
             })()
-            : '');
-        setDependsOn(existingItem.dependsOn
+            : '';
+        const dependsOnValue = existingItem.dependsOn
             ?.map((depId) => {
             const depItem = allItems.find((i) => i.id === depId);
             return depItem ? `#${depId} - ${depItem.title}` : depId;
         })
-            .join(', ') ?? '');
-        setComments(existingItem.comments ?? []);
-        setInitialSnapshot(createSnapshot({
+            .join(', ') ?? '';
+        const newFields = {
             title: existingItem.title,
             type: existingItem.type,
             status: existingItem.status,
@@ -219,23 +271,25 @@ export function WorkItemForm() {
             assignee: existingItem.assignee ?? '',
             labels: existingItem.labels.join(', '),
             description: existingItem.description ?? '',
-            parentId: existingItem.parent !== null && existingItem.parent !== undefined
-                ? (() => {
-                    const pi = allItems.find((i) => i.id === existingItem.parent);
-                    return pi
-                        ? `#${existingItem.parent} - ${pi.title}`
-                        : String(existingItem.parent);
-                })()
-                : '',
-            dependsOn: existingItem.dependsOn
-                ?.map((depId) => {
-                const depItem = allItems.find((i) => i.id === depId);
-                return depItem ? `#${depId} - ${depItem.title}` : depId;
-            })
-                .join(', ') ?? '',
+            parentId: parentIdValue,
+            dependsOn: dependsOnValue,
             newComment: '',
-        }));
-    }, [existingItem]);
+        };
+        // Update both fields and initialSnapshot in the store
+        formStackStore.setState((state) => {
+            if (state.stack.length === 0)
+                return state;
+            const updated = [...state.stack];
+            const current = updated[updated.length - 1];
+            updated[updated.length - 1] = {
+                ...current,
+                itemTitle: existingItem.title,
+                fields: newFields,
+                initialSnapshot: { ...newFields },
+            };
+            return { stack: updated };
+        });
+    }, [existingItem, allItems]);
     // Prefill from template (create mode only)
     useEffect(() => {
         if (selectedWorkItemId !== null || !activeTemplate)
@@ -259,54 +313,15 @@ export function WorkItemForm() {
         if (activeTemplate.dependsOn != null)
             setDependsOn(activeTemplate.dependsOn.join(', '));
     }, [activeTemplate, selectedWorkItemId]);
-    // Capture initial snapshot for new items once config finishes loading
-    useEffect(() => {
-        if (selectedWorkItemId !== null ||
-            configLoading ||
-            initialSnapshot !== null)
-            return;
-        setInitialSnapshot(createSnapshot({
-            title,
-            type,
-            status,
-            iteration,
-            priority,
-            assignee,
-            labels,
-            description,
-            parentId,
-            dependsOn,
-            newComment,
-        }));
-    }, [selectedWorkItemId, configLoading]);
     // Load existing template for editing
     useEffect(() => {
-        if (formMode !== 'template' || !editingTemplateSlug)
+        if (formMode !== 'template' || !editingTemplateSlug || !backend)
             return;
         let cancelled = false;
         void backend.getTemplate(editingTemplateSlug).then((t) => {
             if (cancelled)
                 return;
-            setTitle(t.name);
-            if (t.type != null)
-                setType(t.type);
-            if (t.status != null)
-                setStatus(t.status);
-            if (t.priority != null)
-                setPriority(t.priority);
-            if (t.assignee != null)
-                setAssignee(t.assignee);
-            if (t.labels != null)
-                setLabels(t.labels.join(', '));
-            if (t.iteration != null)
-                setIteration(t.iteration);
-            if (t.description != null)
-                setDescription(t.description);
-            if (t.parent != null)
-                setParentId(String(t.parent));
-            if (t.dependsOn != null)
-                setDependsOn(t.dependsOn.join(', '));
-            setInitialSnapshot(createSnapshot({
+            const newFields = {
                 title: t.name,
                 type: t.type ?? type,
                 status: t.status ?? status,
@@ -318,7 +333,21 @@ export function WorkItemForm() {
                 parentId: t.parent != null ? String(t.parent) : parentId,
                 dependsOn: t.dependsOn != null ? t.dependsOn.join(', ') : dependsOn,
                 newComment: '',
-            }));
+            };
+            // Update both fields and initialSnapshot in the store
+            formStackStore.setState((state) => {
+                if (state.stack.length === 0)
+                    return state;
+                const updated = [...state.stack];
+                const current = updated[updated.length - 1];
+                updated[updated.length - 1] = {
+                    ...current,
+                    itemTitle: t.name,
+                    fields: newFields,
+                    initialSnapshot: { ...newFields },
+                };
+                return { stack: updated };
+            });
         });
         return () => {
             cancelled = true;
@@ -329,10 +358,8 @@ export function WorkItemForm() {
             .filter((item) => item.id !== selectedWorkItemId)
             .map((item) => `#${item.id} - ${item.title}`);
     }, [allItems, selectedWorkItemId]);
-    const [focusedField, setFocusedField] = useState(0);
     const [editing, setEditing] = useState(false);
     const [preEditValue, setPreEditValue] = useState('');
-    const [showDirtyPrompt, setShowDirtyPrompt] = useState(false);
     const [pendingRelNav, setPendingRelNav] = useState(null);
     const [saving, setSaving] = useState(false);
     useEffect(() => {
@@ -345,6 +372,8 @@ export function WorkItemForm() {
         currentField?.startsWith('rel-child-') ||
         currentField?.startsWith('rel-dependent-');
     async function save() {
+        if (!backend)
+            return;
         const parsedLabels = labels
             .split(',')
             .map((l) => l.trim())
@@ -456,19 +485,25 @@ export function WorkItemForm() {
             }
             setActiveTemplate(null);
         }
-        setInitialSnapshot(createSnapshot({
-            title,
-            type,
-            status,
-            iteration,
-            priority,
-            assignee,
-            labels,
-            description,
-            parentId,
-            dependsOn,
-            newComment: '',
-        }));
+        // Update the initialSnapshot after saving so isDirty becomes false
+        formStackStore.setState((state) => {
+            if (state.stack.length === 0)
+                return state;
+            const updated = [...state.stack];
+            const current = updated[updated.length - 1];
+            updated[updated.length - 1] = {
+                ...current,
+                initialSnapshot: {
+                    ...current.fields,
+                    newComment: '', // Comment was saved, reset
+                },
+                fields: {
+                    ...current.fields,
+                    newComment: '', // Clear after save
+                },
+            };
+            return { stack: updated };
+        });
     }
     useInput((_input, key) => {
         // Dirty prompt overlay — capture s/d/esc only
@@ -477,15 +512,40 @@ export function WorkItemForm() {
                 void (async () => {
                     await save();
                     if (pendingRelNav) {
+                        // Push a new draft for the target item
+                        const targetItem = allItems.find((i) => i.id === pendingRelNav);
+                        const defaultFields = {
+                            title: '',
+                            type: activeType ?? types[0] ?? '',
+                            status: statuses[0] ?? '',
+                            iteration: currentIteration,
+                            priority: 'medium',
+                            assignee: '',
+                            labels: '',
+                            description: '',
+                            parentId: '',
+                            dependsOn: '',
+                            newComment: '',
+                        };
+                        const newDraft = {
+                            itemId: pendingRelNav,
+                            itemTitle: targetItem?.title ?? `#${pendingRelNav}`,
+                            fields: defaultFields,
+                            initialSnapshot: { ...defaultFields },
+                            focusedField: 0,
+                        };
+                        pushDraft(newDraft);
                         pushWorkItem(pendingRelNav);
                         setPendingRelNav(null);
                     }
                     else if (formMode === 'template') {
+                        formStackStore.getState().pop();
                         setFormMode('item');
                         setEditingTemplateSlug(null);
                         navigate('settings');
                     }
                     else {
+                        formStackStore.getState().pop();
                         const prev = popWorkItem();
                         if (prev === null)
                             navigate('list');
@@ -497,15 +557,41 @@ export function WorkItemForm() {
             if (_input === 'd') {
                 // Discard: navigate back without saving
                 if (pendingRelNav) {
+                    // Push a new draft for the target item (discarding current)
+                    formStackStore.getState().pop();
+                    const targetItem = allItems.find((i) => i.id === pendingRelNav);
+                    const defaultFields = {
+                        title: '',
+                        type: activeType ?? types[0] ?? '',
+                        status: statuses[0] ?? '',
+                        iteration: currentIteration,
+                        priority: 'medium',
+                        assignee: '',
+                        labels: '',
+                        description: '',
+                        parentId: '',
+                        dependsOn: '',
+                        newComment: '',
+                    };
+                    const newDraft = {
+                        itemId: pendingRelNav,
+                        itemTitle: targetItem?.title ?? `#${pendingRelNav}`,
+                        fields: defaultFields,
+                        initialSnapshot: { ...defaultFields },
+                        focusedField: 0,
+                    };
+                    pushDraft(newDraft);
                     pushWorkItem(pendingRelNav);
                     setPendingRelNav(null);
                 }
                 else if (formMode === 'template') {
+                    formStackStore.getState().pop();
                     setFormMode('item');
                     setEditingTemplateSlug(null);
                     navigate('settings');
                 }
                 else {
+                    formStackStore.getState().pop();
                     const prev = popWorkItem();
                     if (prev === null)
                         navigate('list');
@@ -525,6 +611,7 @@ export function WorkItemForm() {
         if (key.escape && !editing) {
             if (configLoading || itemLoading || saving) {
                 // Allow escape even while loading (no save)
+                formStackStore.getState().pop();
                 if (formMode === 'template') {
                     setFormMode('item');
                     setEditingTemplateSlug(null);
@@ -542,6 +629,7 @@ export function WorkItemForm() {
                 return;
             }
             // Clean — just go back
+            formStackStore.getState().pop();
             if (formMode === 'template') {
                 setFormMode('item');
                 setEditingTemplateSlug(null);
@@ -566,6 +654,7 @@ export function WorkItemForm() {
                 setSaving(true);
                 void (async () => {
                     await save();
+                    formStackStore.getState().pop();
                     if (formMode === 'template') {
                         setFormMode('item');
                         setEditingTemplateSlug(null);
@@ -603,6 +692,29 @@ export function WorkItemForm() {
                             setShowDirtyPrompt(true);
                         }
                         else {
+                            // Create new draft for target item before navigating
+                            const targetItem = allItems.find((i) => i.id === targetId);
+                            const defaultFields = {
+                                title: '',
+                                type: activeType ?? types[0] ?? '',
+                                status: statuses[0] ?? '',
+                                iteration: currentIteration,
+                                priority: 'medium',
+                                assignee: '',
+                                labels: '',
+                                description: '',
+                                parentId: '',
+                                dependsOn: '',
+                                newComment: '',
+                            };
+                            const newDraft = {
+                                itemId: targetId,
+                                itemTitle: targetItem?.title ?? `#${targetId}`,
+                                fields: defaultFields,
+                                initialSnapshot: { ...defaultFields },
+                                focusedField: 0,
+                            };
+                            pushDraft(newDraft);
                             pushWorkItem(targetId);
                         }
                     }
@@ -866,7 +978,7 @@ export function WorkItemForm() {
     const isFieldVisible = (index) => index >= viewport.start && index < viewport.end;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [mode, typeLabel ? ` ${typeLabel}` : '', formMode !== 'template' && selectedWorkItemId !== null
                             ? ` #${selectedWorkItemId}`
-                            : ''] }) }), fields.map((field, index) => {
+                            : ''] }) }), _jsx(Breadcrumbs, {}), fields.map((field, index) => {
                 if (field === 'rel-parent' ||
                     field.startsWith('rel-child-') ||
                     field.startsWith('rel-dependent-')) {