@sascha384/tic 1.11.0 → 1.13.0

package/dist/components/WorkItemForm.js

@@ -10,22 +10,25 @@ import { SyncQueueStore } from '../sync/queue.js';
 import { useScrollViewport } from '../hooks/useScrollViewport.js';
 import { useBackendData } from '../hooks/useBackendData.js';
 import { openInEditor } from '../editor.js';
+import { slugifyTemplateName } from '../backends/local/templates.js';
+import { createSnapshot, isSnapshotEqual, } from './formSnapshot.js';
 const SELECT_FIELDS = ['type', 'status', 'iteration', 'priority'];
 const PRIORITIES = ['low', 'medium', 'high', 'critical'];
 export function WorkItemForm() {
-    const { backend, syncManager, navigate, navigateToHelp, selectedWorkItemId, activeType, pushWorkItem, popWorkItem, } = useAppState();
+    const { backend, syncManager, navigate, navigateToHelp, selectedWorkItemId, activeType, activeTemplate, setActiveTemplate, formMode, setFormMode, editingTemplateSlug, setEditingTemplateSlug, pushWorkItem, popWorkItem, } = useAppState();
     const queueStore = useMemo(() => {
         if (!syncManager)
             return null;
         return new SyncQueueStore(process.cwd());
     }, [syncManager]);
-    const queueWrite = async (action, itemId, commentData) => {
+    const queueWrite = async (action, itemId, extra) => {
         if (queueStore) {
             await queueStore.append({
                 action,
                 itemId,
                 timestamp: new Date().toISOString(),
-                ...(commentData ? { commentData } : {}),
+                ...(extra?.commentData ? { commentData: extra.commentData } : {}),
+                ...(extra?.templateSlug ? { templateSlug: extra.templateSlug } : {}),
             });
             syncManager?.pushPending().catch(() => { });
         }
@@ -82,6 +85,29 @@ export function WorkItemForm() {
         };
     }, [selectedWorkItemId, backend, capabilities.relationships]);
     const fields = useMemo(() => {
+        if (formMode === 'template') {
+            const tf = capabilities.templateFields;
+            const all = ['title'];
+            if (tf.type)
+                all.push('type');
+            if (tf.status)
+                all.push('status');
+            if (tf.iteration)
+                all.push('iteration');
+            if (tf.priority)
+                all.push('priority');
+            if (tf.assignee)
+                all.push('assignee');
+            if (tf.labels)
+                all.push('labels');
+            if (tf.description)
+                all.push('description');
+            if (tf.parent)
+                all.push('parent');
+            if (tf.dependsOn)
+                all.push('dependsOn');
+            return all;
+        }
         const all = ['title'];
         if (capabilities.customTypes)
             all.push('type');
@@ -113,7 +139,14 @@ export function WorkItemForm() {
             }
         }
         return all;
-    }, [capabilities, selectedWorkItemId, existingItem, children, dependents]);
+    }, [
+        formMode,
+        capabilities,
+        selectedWorkItemId,
+        existingItem,
+        children,
+        dependents,
+    ]);
     const [title, setTitle] = useState('');
     const [type, setType] = useState(activeType ?? types[0] ?? '');
     const [status, setStatus] = useState(statuses[0] ?? '');
@@ -126,6 +159,22 @@ export function WorkItemForm() {
     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);
     // Sync form fields when the existing item finishes loading
     useEffect(() => {
         if (!existingItem)
@@ -153,7 +202,120 @@ export function WorkItemForm() {
         })
             .join(', ') ?? '');
         setComments(existingItem.comments ?? []);
+        setInitialSnapshot(createSnapshot({
+            title: existingItem.title,
+            type: existingItem.type,
+            status: existingItem.status,
+            iteration: existingItem.iteration,
+            priority: existingItem.priority ?? 'medium',
+            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(', ') ?? '',
+            newComment: '',
+        }));
     }, [existingItem]);
+    // Prefill from template (create mode only)
+    useEffect(() => {
+        if (selectedWorkItemId !== null || !activeTemplate)
+            return;
+        if (activeTemplate.type != null)
+            setType(activeTemplate.type);
+        if (activeTemplate.status != null)
+            setStatus(activeTemplate.status);
+        if (activeTemplate.priority != null)
+            setPriority(activeTemplate.priority);
+        if (activeTemplate.assignee != null)
+            setAssignee(activeTemplate.assignee);
+        if (activeTemplate.labels != null)
+            setLabels(activeTemplate.labels.join(', '));
+        if (activeTemplate.iteration != null)
+            setIteration(activeTemplate.iteration);
+        if (activeTemplate.description != null)
+            setDescription(activeTemplate.description);
+        if (activeTemplate.parent != null)
+            setParentId(String(activeTemplate.parent));
+        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)
+            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({
+                title: t.name,
+                type: t.type ?? type,
+                status: t.status ?? status,
+                iteration: t.iteration ?? iteration,
+                priority: t.priority ?? priority,
+                assignee: t.assignee ?? assignee,
+                labels: t.labels != null ? t.labels.join(', ') : labels,
+                description: t.description ?? description,
+                parentId: t.parent != null ? String(t.parent) : parentId,
+                dependsOn: t.dependsOn != null ? t.dependsOn.join(', ') : dependsOn,
+                newComment: '',
+            }));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [formMode, editingTemplateSlug, backend]);
     const parentSuggestions = useMemo(() => {
         return allItems
             .filter((item) => item.id !== selectedWorkItemId)
@@ -161,6 +323,9 @@ export function WorkItemForm() {
     }, [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(() => {
         setFocusedField(0);
@@ -193,6 +358,45 @@ export function WorkItemForm() {
             return match ? match[1] : trimmed;
         })
             .filter((s) => s.length > 0);
+        if (formMode === 'template') {
+            const template = {
+                slug: editingTemplateSlug ?? slugifyTemplateName(title),
+                name: title || 'Untitled Template',
+            };
+            if (type)
+                template.type = type;
+            if (status)
+                template.status = status;
+            if (priority !== 'medium')
+                template.priority = priority;
+            if (assignee)
+                template.assignee = assignee;
+            if (parsedLabels.length > 0)
+                template.labels = parsedLabels;
+            if (iteration)
+                template.iteration = iteration;
+            if (description)
+                template.description = description;
+            if (parsedParent)
+                template.parent = parsedParent;
+            if (parsedDependsOn.length > 0)
+                template.dependsOn = parsedDependsOn;
+            if (editingTemplateSlug) {
+                await backend.updateTemplate(editingTemplateSlug, template);
+                await queueWrite('template-update', template.slug, {
+                    templateSlug: template.slug,
+                });
+            }
+            else {
+                await backend.createTemplate(template);
+                await queueWrite('template-create', template.slug, {
+                    templateSlug: template.slug,
+                });
+            }
+            setFormMode('item');
+            setEditingTemplateSlug(null);
+            return;
+        }
         if (selectedWorkItemId !== null) {
             await backend.cachedUpdateWorkItem(selectedWorkItemId, {
                 title,
@@ -213,8 +417,7 @@ export function WorkItemForm() {
                     body: newComment.trim(),
                 });
                 await queueWrite('comment', selectedWorkItemId, {
-                    author: 'me',
-                    body: newComment.trim(),
+                    commentData: { author: 'me', body: newComment.trim() },
                 });
                 setComments((prev) => [...prev, added]);
                 setNewComment('');
@@ -240,21 +443,106 @@ export function WorkItemForm() {
                     body: newComment.trim(),
                 });
                 await queueWrite('comment', created.id, {
-                    author: 'me',
-                    body: newComment.trim(),
+                    commentData: { author: 'me', body: newComment.trim() },
                 });
             }
+            setActiveTemplate(null);
         }
+        setInitialSnapshot(createSnapshot({
+            title,
+            type,
+            status,
+            iteration,
+            priority,
+            assignee,
+            labels,
+            description,
+            parentId,
+            dependsOn,
+            newComment: '',
+        }));
     }
     useInput((_input, key) => {
-        // Allow Esc to navigate back even while loading
+        // Dirty prompt overlay — capture s/d/esc only
+        if (showDirtyPrompt) {
+            if (_input === 's' && (selectedWorkItemId !== null || title.trim())) {
+                void (async () => {
+                    await save();
+                    if (pendingRelNav) {
+                        pushWorkItem(pendingRelNav);
+                        setPendingRelNav(null);
+                    }
+                    else if (formMode === 'template') {
+                        setFormMode('item');
+                        setEditingTemplateSlug(null);
+                        navigate('settings');
+                    }
+                    else {
+                        const prev = popWorkItem();
+                        if (prev === null)
+                            navigate('list');
+                    }
+                })();
+                setShowDirtyPrompt(false);
+                return;
+            }
+            if (_input === 'd') {
+                // Discard: navigate back without saving
+                if (pendingRelNav) {
+                    pushWorkItem(pendingRelNav);
+                    setPendingRelNav(null);
+                }
+                else if (formMode === 'template') {
+                    setFormMode('item');
+                    setEditingTemplateSlug(null);
+                    navigate('settings');
+                }
+                else {
+                    const prev = popWorkItem();
+                    if (prev === null)
+                        navigate('list');
+                }
+                setShowDirtyPrompt(false);
+                return;
+            }
+            if (key.escape) {
+                setShowDirtyPrompt(false);
+                setPendingRelNav(null);
+                return;
+            }
+            // Ignore all other keys while prompt is showing
+            return;
+        }
+        // Esc in navigation mode
         if (key.escape && !editing) {
-            if (!configLoading && !itemLoading && !saving) {
-                void save();
+            if (configLoading || itemLoading || saving) {
+                // Allow escape even while loading (no save)
+                if (formMode === 'template') {
+                    setFormMode('item');
+                    setEditingTemplateSlug(null);
+                    navigate('settings');
+                }
+                else {
+                    const prev = popWorkItem();
+                    if (prev === null)
+                        navigate('list');
+                }
+                return;
+            }
+            if (isDirty) {
+                setShowDirtyPrompt(true);
+                return;
             }
-            const prev = popWorkItem();
-            if (prev === null) {
-                navigate('list');
+            // Clean — just go back
+            if (formMode === 'template') {
+                setFormMode('item');
+                setEditingTemplateSlug(null);
+                navigate('settings');
+            }
+            else {
+                const prev = popWorkItem();
+                if (prev === null)
+                    navigate('list');
             }
             return;
         }
@@ -265,6 +553,24 @@ export function WorkItemForm() {
                 navigateToHelp();
                 return;
             }
+            // Ctrl+S: save and go back
+            if (key.ctrl && _input === 's') {
+                setSaving(true);
+                void (async () => {
+                    await save();
+                    if (formMode === 'template') {
+                        setFormMode('item');
+                        setEditingTemplateSlug(null);
+                        navigate('settings');
+                    }
+                    else {
+                        const prev = popWorkItem();
+                        if (prev === null)
+                            navigate('list');
+                    }
+                })();
+                return;
+            }
             if (key.upArrow) {
                 setFocusedField((f) => Math.max(0, f - 1));
             }
@@ -284,11 +590,13 @@ export function WorkItemForm() {
                         targetId = currentField.slice('rel-dependent-'.length);
                     }
                     if (targetId) {
-                        setSaving(true);
-                        void (async () => {
-                            await save();
+                        if (isDirty) {
+                            setPendingRelNav(targetId);
+                            setShowDirtyPrompt(true);
+                        }
+                        else {
                             pushWorkItem(targetId);
-                        })();
+                        }
                     }
                 }
                 else if (currentField === 'description') {
@@ -303,12 +611,55 @@ export function WorkItemForm() {
                     }
                 }
                 else {
+                    // Capture current value before editing for revert on Esc
+                    const fieldValue = (() => {
+                        switch (currentField) {
+                            case 'title':
+                                return title;
+                            case 'assignee':
+                                return assignee;
+                            case 'labels':
+                                return labels;
+                            case 'parent':
+                                return parentId;
+                            case 'dependsOn':
+                                return dependsOn;
+                            case 'comments':
+                                return newComment;
+                            default:
+                                return '';
+                        }
+                    })();
+                    setPreEditValue(fieldValue);
                     setEditing(true);
                 }
             }
         }
         else {
             if (key.escape) {
+                // Revert field to value before editing started
+                switch (currentField) {
+                    case 'title':
+                        setTitle(preEditValue);
+                        break;
+                    case 'assignee':
+                        setAssignee(preEditValue);
+                        break;
+                    case 'labels':
+                        setLabels(preEditValue);
+                        break;
+                    case 'parent':
+                        setParentId(preEditValue);
+                        break;
+                    case 'dependsOn':
+                        setDependsOn(preEditValue);
+                        break;
+                    case 'comments':
+                        setNewComment(preEditValue);
+                        break;
+                    // Select fields (type, status, iteration, priority) already
+                    // require Enter to confirm, so Esc naturally discards
+                }
                 setEditing(false);
             }
         }
@@ -390,7 +741,9 @@ export function WorkItemForm() {
     function renderField(field, index) {
         const focused = index === focusedField;
         const isEditing = focused && editing;
-        const label = field.charAt(0).toUpperCase() + field.slice(1);
+        const label = formMode === 'template' && field === 'title'
+            ? 'Name'
+            : field.charAt(0).toUpperCase() + field.slice(1);
         const cursor = focused ? '>' : ' ';
         if (field === 'comments') {
             return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: focused ? 'cyan' : undefined, children: [cursor, " "] }), _jsxs(Text, { bold: focused, color: focused ? 'cyan' : undefined, children: [label, ":"] })] }), comments.map((c, ci) => (_jsx(Box, { marginLeft: 4, children: _jsxs(Text, { dimColor: true, children: ["[", c.date, "] ", c.author, ": ", c.body] }) }, ci))), _jsx(Box, { marginLeft: 4, children: isEditing ? (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: "New: " }), _jsx(TextInput, { value: newComment, onChange: setNewComment, focus: true, onSubmit: () => {
@@ -494,10 +847,18 @@ export function WorkItemForm() {
     if (configLoading || itemLoading) {
         return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Loading..." }) }));
     }
-    const mode = selectedWorkItemId !== null ? 'Edit' : 'Create';
-    const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
+    const mode = formMode === 'template'
+        ? editingTemplateSlug
+            ? 'Edit Template'
+            : 'Create Template'
+        : selectedWorkItemId !== null
+            ? 'Edit'
+            : 'Create';
+    const typeLabel = formMode === 'template' ? '' : type.charAt(0).toUpperCase() + type.slice(1);
     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, selectedWorkItemId !== null ? ` #${selectedWorkItemId}` : ''] }) }), fields.map((field, index) => {
+    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) => {
                 if (field === 'rel-parent' ||
                     field.startsWith('rel-child-') ||
                     field.startsWith('rel-dependent-')) {
@@ -510,6 +871,10 @@ export function WorkItemForm() {
                 capabilities.relationships &&
                 fields.some((f, i) => f.startsWith('rel-') && isFieldVisible(i)) && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: "Relationships:" }), existingItem?.parent &&
                         fields.some((f, i) => f === 'rel-parent' && isFieldVisible(i)) && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: "Parent:" }) }), fields.map((field, index) => field === 'rel-parent' && isFieldVisible(index) ? (_jsx(Box, { marginLeft: 2, children: renderRelationshipField(field, index) }, field)) : null)] })), fields.some((f, i) => f.startsWith('rel-child-') && isFieldVisible(i)) && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: "Children:" }) }), fields.map((field, index) => field.startsWith('rel-child-') && isFieldVisible(index) ? (_jsx(Box, { marginLeft: 2, children: renderRelationshipField(field, index) }, field)) : null)] })), fields.some((f, i) => f.startsWith('rel-dependent-') && isFieldVisible(i)) && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: "Depended on by:" }) }), fields.map((field, index) => field.startsWith('rel-dependent-') &&
-                                isFieldVisible(index) ? (_jsx(Box, { marginLeft: 2, children: renderRelationshipField(field, index) }, field)) : null)] }))] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: '↑↓ navigate  enter edit field  esc save & back  ? help' }) })] }));
+                                isFieldVisible(index) ? (_jsx(Box, { marginLeft: 2, children: renderRelationshipField(field, index) }, field)) : null)] }))] })), _jsx(Box, { marginTop: 1, children: showDirtyPrompt ? (_jsx(Text, { children: selectedWorkItemId !== null || title.trim() ? (_jsxs(Text, { children: ["Unsaved changes:", ' ', _jsx(Text, { color: "green", bold: true, children: "(s)" }), _jsx(Text, { children: "ave " }), _jsx(Text, { color: "red", bold: true, children: "(d)" }), _jsx(Text, { children: "iscard " }), _jsx(Text, { color: "yellow", bold: true, children: "(esc)" }), _jsx(Text, { children: " stay" })] })) : (_jsxs(Text, { children: ["Discard new item?", ' ', _jsx(Text, { color: "red", bold: true, children: "(d)" }), _jsx(Text, { children: "iscard " }), _jsx(Text, { color: "yellow", bold: true, children: "(esc)" }), _jsx(Text, { children: " stay" })] })) })) : (_jsx(Text, { dimColor: true, children: editing
+                        ? 'enter confirm  esc revert  ? help'
+                        : isDirty
+                            ? '↑↓ navigate  enter edit  ctrl+s save & back  esc back (unsaved changes)  ? help'
+                            : '↑↓ navigate  enter edit  ctrl+s save & back  esc back  ? help' })) })] }));
 }
 //# sourceMappingURL=WorkItemForm.js.map