@sascha384/tic 5.16.0 → 5.17.0

package/dist/components/WorkItemForm.js

@@ -54,11 +54,21 @@ export function WorkItemForm() {
         popWorkItem: s.popWorkItem,
     })));
     const queue = useBackendDataStore((s) => s.queue);
-    const queueWrite = async (action, itemId, extra) => {
+    /** Look up the rowId for a display ID. Returns -1 if not found. */
+    const rowIdOf = (displayId) => {
+        const item = allItems.find((i) => i.id === displayId);
+        return item?.rowId ?? -1;
+    };
+    /** Look up the display ID for a rowId. Returns null if not found. */
+    const displayIdOf = (rowId) => {
+        const item = allItems.find((i) => i.rowId === rowId);
+        return item?.id ?? null;
+    };
+    const queueWrite = async (action, itemRowId, extra) => {
         if (queue) {
             await queue.append({
                 action,
-                itemId,
+                itemRowId,
                 timestamp: new Date().toISOString(),
                 ...(extra?.commentData ? { commentData: extra.commentData } : {}),
                 ...(extra?.templateSlug ? { templateSlug: extra.templateSlug } : {}),
@@ -97,16 +107,24 @@ export function WorkItemForm() {
         }
         let cancelled = false;
         setItemLoading(true);
+        const displayId = displayIdOf(selectedWorkItemId);
+        if (!displayId) {
+            setItemLoading(false);
+            return;
+        }
         void (async () => {
             try {
-                const item = await backend.getWorkItem(selectedWorkItemId);
+                const item = await backend.getWorkItem(displayId);
                 const [ch, dep] = capabilities.relationships
                     ? await Promise.all([
-                        backend.getChildren(selectedWorkItemId),
-                        backend.getDependents(selectedWorkItemId),
+                        backend.getChildren(displayId),
+                        backend.getDependents(displayId),
                     ])
                     : [[], []];
-                const pi = item.parent ? await backend.getWorkItem(item.parent) : null;
+                const parentDisplayId = item.parent !== null ? displayIdOf(item.parent) : null;
+                const pi = parentDisplayId
+                    ? await backend.getWorkItem(parentDisplayId)
+                    : null;
                 if (cancelled)
                     return;
                 setExistingItem(item);
@@ -180,10 +198,10 @@ export function WorkItemForm() {
                 all.push('rel-parent');
             }
             for (const child of children) {
-                all.push(`rel-child-${child.id}`);
+                all.push(`rel-child-${child.rowId}`);
             }
             for (const dep of dependents) {
-                all.push(`rel-dependent-${dep.id}`);
+                all.push(`rel-dependent-${dep.rowId}`);
             }
         }
         return all;
@@ -205,7 +223,9 @@ export function WorkItemForm() {
         return required;
     }, [selectedWorkItemId, capabilities.customTypes]);
     const requiredFieldsList = useMemo(() => capabilities.requiredFields ?? [...requiredFields], [capabilities.requiredFields, requiredFields]);
-    const { errors: validationErrors, validate, clearError, } = useFormValidation(allItems, selectedWorkItemId, requiredFieldsList);
+    // Convert selectedWorkItemId (rowId) to display ID for validation
+    const selectedDisplayId = selectedWorkItemId !== null ? displayIdOf(selectedWorkItemId) : null;
+    const { errors: validationErrors, validate, clearError, } = useFormValidation(allItems, selectedDisplayId, requiredFieldsList);
     const [comments, setComments] = useState([]);
     // Derive field values from current draft
     const title = currentDraft?.fields.title ?? '';
@@ -252,10 +272,9 @@ export function WorkItemForm() {
         const { createChildParentId, setCreateChildParentId } = navigationStore.getState();
         let parentId = '';
         if (selectedWorkItemId === null && createChildParentId) {
-            const parent = allItems.find((i) => i.id === createChildParentId);
-            parentId = parent
-                ? `#${createChildParentId} - ${parent.title}`
-                : `#${createChildParentId}`;
+            const parent = allItems.find((i) => i.rowId === createChildParentId);
+            const displayId = parent?.id ?? String(createChildParentId);
+            parentId = parent ? `#${displayId} - ${parent.title}` : `#${displayId}`;
             setCreateChildParentId(null);
         }
         const initialFields = {
@@ -273,7 +292,9 @@ export function WorkItemForm() {
         };
         const draft = {
             itemId: selectedWorkItemId,
-            itemTitle: selectedWorkItemId ? `#${selectedWorkItemId}` : '(new)',
+            itemTitle: selectedWorkItemId
+                ? `#${selectedDisplayId ?? selectedWorkItemId}`
+                : '(new)',
             fields: initialFields,
             initialSnapshot: { ...initialFields },
             focusedField: 0,
@@ -291,16 +312,20 @@ export function WorkItemForm() {
         // Build field values
         const parentIdValue = existingItem.parent !== null && existingItem.parent !== undefined
             ? (() => {
-                const pi = allItems.find((i) => i.id === existingItem.parent);
+                const pi = allItems.find((i) => i.rowId === existingItem.parent);
+                const parentDisplayId = pi?.id ?? String(existingItem.parent);
                 return pi
-                    ? `#${existingItem.parent} - ${pi.title}`
+                    ? `#${parentDisplayId} - ${pi.title}`
                     : String(existingItem.parent);
             })()
             : '';
         const dependsOnValue = existingItem.dependsOn
-            ?.map((depId) => {
-            const depItem = allItems.find((i) => i.id === depId);
-            return depItem ? `#${depId} - ${depItem.title}` : depId;
+            ?.map((depRowId) => {
+            const depItem = allItems.find((i) => i.rowId === depRowId);
+            const depDisplayId = depItem?.id ?? String(depRowId);
+            return depItem
+                ? `#${depDisplayId} - ${depItem.title}`
+                : String(depRowId);
         })
             .join(', ') ?? '';
         const newFields = {
@@ -403,7 +428,7 @@ export function WorkItemForm() {
     }, [formMode, editingTemplateSlug, backend]);
     const parentSuggestions = useMemo(() => {
         return allItems
-            .filter((item) => item.id !== selectedWorkItemId)
+            .filter((item) => item.rowId !== selectedWorkItemId && item.id !== null)
             .map((item) => `#${item.id} - ${item.title}`);
     }, [allItems, selectedWorkItemId]);
     const [editing, setEditing] = useState(false);
@@ -431,23 +456,26 @@ export function WorkItemForm() {
             .split(',')
             .map((l) => l.trim())
             .filter((l) => l.length > 0);
+        // Parse display IDs from form fields and resolve to rowIds
         const parsedParent = (() => {
             const trimmed = parentId.trim();
             if (!trimmed)
                 return null;
             const match = trimmed.match(/^#(\S+)\s*-\s/);
-            return match ? match[1] : trimmed;
+            const displayId = match ? match[1] : trimmed;
+            return rowIdOf(displayId);
         })();
         const parsedDependsOn = dependsOn
             .split(',')
             .map((s) => {
             const trimmed = s.trim();
             if (!trimmed)
-                return '';
+                return -1;
             const match = trimmed.match(/^#(\S+)\s*-\s/);
-            return match ? match[1] : trimmed;
+            const displayId = match ? match[1] : trimmed;
+            return rowIdOf(displayId);
         })
-            .filter((s) => s.length > 0);
+            .filter((rowId) => rowId !== -1);
         if (formMode === 'template') {
             const template = {
                 slug: editingTemplateSlug ?? slugifyTemplateName(title),
@@ -467,19 +495,23 @@ export function WorkItemForm() {
                 template.iteration = iteration;
             if (description)
                 template.description = description;
-            if (parsedParent)
-                template.parent = parsedParent;
-            if (parsedDependsOn.length > 0)
-                template.dependsOn = parsedDependsOn;
+            if (parsedParent !== null) {
+                template.parent = displayIdOf(parsedParent);
+            }
+            if (parsedDependsOn.length > 0) {
+                template.dependsOn = parsedDependsOn
+                    .map((rid) => displayIdOf(rid))
+                    .filter((id) => id !== null);
+            }
             if (editingTemplateSlug) {
                 await backend.updateTemplate(editingTemplateSlug, template);
-                await queueWrite('template-update', template.slug, {
+                await queueWrite('template-update', 0, {
                     templateSlug: template.slug,
                 });
             }
             else {
                 await backend.createTemplate(template);
-                await queueWrite('template-create', template.slug, {
+                await queueWrite('template-create', 0, {
                     templateSlug: template.slug,
                 });
             }
@@ -488,9 +520,9 @@ export function WorkItemForm() {
             setEditingTemplateSlug(null);
             return;
         }
-        if (selectedWorkItemId !== null) {
-            const snapshot = await backend.getWorkItem(selectedWorkItemId);
-            await backend.cachedUpdateWorkItem(selectedWorkItemId, {
+        if (selectedWorkItemId !== null && selectedDisplayId) {
+            const snapshot = await backend.getWorkItem(selectedDisplayId);
+            await backend.cachedUpdateWorkItem(selectedDisplayId, {
                 title,
                 type,
                 status,
@@ -505,13 +537,13 @@ export function WorkItemForm() {
             await queueWrite('update', selectedWorkItemId);
             undoStore.getState().pushUndo({
                 type: 'update',
-                label: `edited #${selectedWorkItemId}`,
+                label: `edited #${selectedDisplayId}`,
                 itemSnapshots: [snapshot],
-                syncItemIds: [selectedWorkItemId],
+                syncItemRowIds: [selectedWorkItemId],
                 syncAction: 'update',
             });
             if (capabilities.comments && newComment.trim().length > 0) {
-                const added = await backend.addComment(selectedWorkItemId, {
+                const added = await backend.addComment(selectedDisplayId, {
                     author: 'me',
                     body: newComment.trim(),
                 });
@@ -521,10 +553,10 @@ export function WorkItemForm() {
                 setComments((prev) => [...prev, added]);
                 setNewComment('');
             }
-            await backendDataStore.getState().reloadItem(selectedWorkItemId);
+            await backendDataStore.getState().reloadItem(selectedDisplayId);
             uiStore
                 .getState()
-                .setToast(`Item #${selectedWorkItemId} updated — press u to undo`);
+                .setToast(`Item #${selectedDisplayId} updated — press u to undo`);
         }
         else {
             const created = await backend.cachedCreateWorkItem({
@@ -539,28 +571,30 @@ export function WorkItemForm() {
                 parent: parsedParent,
                 dependsOn: parsedDependsOn,
             });
-            await queueWrite('create', created.id);
+            await queueWrite('create', created.rowId);
             undoStore.getState().pushUndo({
                 type: 'create',
-                label: `created #${created.id}`,
+                label: `created #${created.id ?? created.rowId}`,
                 itemSnapshots: [],
-                syncItemIds: [created.id],
+                syncItemRowIds: [created.rowId],
                 syncAction: 'create',
-                createdIds: [created.id],
+                createdRowIds: [created.rowId],
             });
-            if (capabilities.comments && newComment.trim().length > 0) {
+            if (capabilities.comments && newComment.trim().length > 0 && created.id) {
                 await backend.addComment(created.id, {
                     author: 'me',
                     body: newComment.trim(),
                 });
-                await queueWrite('comment', created.id, {
+                await queueWrite('comment', created.rowId, {
                     commentData: { author: 'me', body: newComment.trim() },
                 });
             }
-            await backendDataStore.getState().reloadItem(created.id);
+            if (created.id) {
+                await backendDataStore.getState().reloadItem(created.id);
+            }
             uiStore
                 .getState()
-                .setToast(`Item #${created.id} created — press u to undo`);
+                .setToast(`Item #${created.id ?? created.rowId} created — press u to undo`);
             setActiveTemplate(null);
         }
         // Update the initialSnapshot after saving so isDirty becomes false
@@ -592,7 +626,7 @@ export function WorkItemForm() {
                     await save();
                     if (pendingRelNav) {
                         // Push a new draft for the target item
-                        const targetItem = allItems.find((i) => i.id === pendingRelNav);
+                        const targetItem = allItems.find((i) => i.rowId === pendingRelNav);
                         const defaultFields = {
                             title: '',
                             type: activeType ?? types[0] ?? '',
@@ -608,7 +642,7 @@ export function WorkItemForm() {
                         };
                         const newDraft = {
                             itemId: pendingRelNav,
-                            itemTitle: targetItem?.title ?? `#${pendingRelNav}`,
+                            itemTitle: targetItem?.title ?? `#${targetItem?.id ?? pendingRelNav}`,
                             fields: defaultFields,
                             initialSnapshot: { ...defaultFields },
                             focusedField: 0,
@@ -642,7 +676,7 @@ export function WorkItemForm() {
                 if (pendingRelNav) {
                     // Push a new draft for the target item (discarding current)
                     formStackStore.getState().pop();
-                    const targetItem = allItems.find((i) => i.id === pendingRelNav);
+                    const targetItem = allItems.find((i) => i.rowId === pendingRelNav);
                     const defaultFields = {
                         title: '',
                         type: activeType ?? types[0] ?? '',
@@ -658,7 +692,7 @@ export function WorkItemForm() {
                     };
                     const newDraft = {
                         itemId: pendingRelNav,
-                        itemTitle: targetItem?.title ?? `#${pendingRelNav}`,
+                        itemTitle: targetItem?.title ?? `#${targetItem?.id ?? pendingRelNav}`,
                         fields: defaultFields,
                         initialSnapshot: { ...defaultFields },
                         focusedField: 0,
@@ -790,24 +824,24 @@ export function WorkItemForm() {
             }
             if (matchesCommand('form-edit', _input, key)) {
                 if (isRelationshipField) {
-                    let targetId = null;
+                    let targetRowId = null;
                     if (currentField === 'rel-parent' && existingItem?.parent) {
-                        targetId = existingItem.parent;
+                        targetRowId = existingItem.parent;
                     }
                     else if (currentField.startsWith('rel-child-')) {
-                        targetId = currentField.slice('rel-child-'.length);
+                        targetRowId = Number(currentField.slice('rel-child-'.length));
                     }
                     else if (currentField.startsWith('rel-dependent-')) {
-                        targetId = currentField.slice('rel-dependent-'.length);
+                        targetRowId = Number(currentField.slice('rel-dependent-'.length));
                     }
-                    if (targetId) {
+                    if (targetRowId) {
                         if (isDirty) {
-                            setPendingRelNav(targetId);
+                            setPendingRelNav(targetRowId);
                             setShowDirtyPrompt(true);
                         }
                         else {
                             // Create new draft for target item before navigating
-                            const targetItem = allItems.find((i) => i.id === targetId);
+                            const targetItem = allItems.find((i) => i.rowId === targetRowId);
                             const defaultFields = {
                                 title: '',
                                 type: activeType ?? types[0] ?? '',
@@ -822,14 +856,14 @@ export function WorkItemForm() {
                                 newComment: '',
                             };
                             const newDraft = {
-                                itemId: targetId,
-                                itemTitle: targetItem?.title ?? `#${targetId}`,
+                                itemId: targetRowId,
+                                itemTitle: targetItem?.title ?? `#${targetItem?.id ?? targetRowId}`,
                                 fields: defaultFields,
                                 initialSnapshot: { ...defaultFields },
                                 focusedField: 0,
                             };
                             pushDraft(newDraft);
-                            pushWorkItem(targetId);
+                            pushWorkItem(targetRowId);
                         }
                     }
                 }
@@ -1089,24 +1123,24 @@ export function WorkItemForm() {
     function renderRelationshipField(field, index) {
         const focused = index === focusedField;
         const cursor = focused ? '>' : ' ';
-        const id = field.startsWith('rel-child-')
-            ? field.slice('rel-child-'.length)
+        const rowId = field.startsWith('rel-child-')
+            ? Number(field.slice('rel-child-'.length))
             : field.startsWith('rel-dependent-')
-                ? field.slice('rel-dependent-'.length)
+                ? Number(field.slice('rel-dependent-'.length))
                 : null;
-        let item = null;
+        let relItem = null;
         if (field === 'rel-parent' && parentItem) {
-            item = { id: parentItem.id, title: parentItem.title };
+            relItem = parentItem;
         }
-        else if (id) {
-            const child = children.find((c) => c.id === id);
-            const dep = dependents.find((d) => d.id === id);
-            const relItem = child ?? dep;
-            item = relItem ? { id: relItem.id, title: relItem.title } : null;
+        else if (rowId !== null) {
+            relItem =
+                children.find((c) => c.rowId === rowId) ??
+                    dependents.find((d) => d.rowId === rowId) ??
+                    null;
         }
-        if (!item)
+        if (!relItem)
             return null;
-        return (_jsxs(Box, { children: [_jsxs(Text, { color: focused ? accent : undefined, children: [cursor, " "] }), _jsxs(Text, { bold: focused, color: focused ? accent : undefined, children: ["#", item.id, " (", item.title, ")"] })] }, field));
+        return (_jsxs(Box, { children: [_jsxs(Text, { color: focused ? accent : undefined, children: [cursor, " "] }), _jsxs(Text, { bold: focused, color: focused ? accent : undefined, children: ["#", relItem.id ?? relItem.rowId, " (", relItem.title, ")"] })] }, field));
     }
     const formStackLength = useFormStackStore((s) => s.stack.length);
     const chromeLines = useMemo(() => {
@@ -1151,7 +1185,7 @@ export function WorkItemForm() {
     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: accent, children: [mode, typeLabel ? ` ${typeLabel}` : '', formMode !== 'template' && selectedWorkItemId !== null
-                            ? ` #${selectedWorkItemId}`
+                            ? ` #${selectedDisplayId ?? selectedWorkItemId}`
                             : ''] }) }), _jsx(Breadcrumbs, {}), fields.map((field, index) => {
                 if (field === 'rel-parent' ||
                     field.startsWith('rel-child-') ||