From 0ae766d89892038cb93c015b88422ad49f12b7b8 Mon Sep 17 00:00:00 2001
From: Amr Gaber <amrtgaber@gmail.com>
Date: Fri, 6 Feb 2026 18:41:45 -0600
Subject: [PATCH] Unify add/edit item form with marks and notes sections

Remove the create-only restriction on marks and notes sections in
ItemForm, and update EditItemDialog to handle creating marks and notes
after a successful edit.
---
 src/components/item-form.tsx         | 41 ++++++-------
 src/pages/items/item-detail-page.tsx | 86 ++++++++++++++++++++++++++--
 2 files changed, 99 insertions(+), 28 deletions(-)

diff --git a/src/components/item-form.tsx b/src/components/item-form.tsx
index 97a3189..b0d3734 100644
--- a/src/components/item-form.tsx
+++ b/src/components/item-form.tsx
@@ -127,7 +127,7 @@ export function ItemForm({
   })
   const [stagedFiles, setStagedFiles] = useState<File[]>([])
 
-  // Staged marks & notes (create mode only)
+  // Staged marks & notes
   const [stagedMarks, setStagedMarks] = useState<StagedMark[]>([])
   const [stagedNotes, setStagedNotes] = useState<StagedNote[]>([])
 
@@ -144,7 +144,8 @@ export function ItemForm({
     "provenance",
     ...(typeDef && typeDef.fields.length > 0 ? ["typeFields"] : []),
     "dimensions",
-    ...(!isEdit ? ["marks", "notes"] : []),
+    "marks",
+    "notes",
   ]
   const allExpanded = sectionKeys.every((k) => openSections[k])
   const toggleAll = () => {
@@ -517,27 +518,23 @@ export function ItemForm({
         </div>
       </CollapsibleSection>
 
-      {/* Marks section (create only) */}
-      {!isEdit && (
-        <CollapsibleSection
-          title="Marks"
-          open={!!openSections.marks}
-          onOpenChange={(v) => toggleSection("marks", v)}
-        >
-          <StagedMarkList marks={stagedMarks} onChange={setStagedMarks} />
-        </CollapsibleSection>
-      )}
+      {/* Marks section */}
+      <CollapsibleSection
+        title="Marks"
+        open={!!openSections.marks}
+        onOpenChange={(v) => toggleSection("marks", v)}
+      >
+        <StagedMarkList marks={stagedMarks} onChange={setStagedMarks} />
+      </CollapsibleSection>
 
-      {/* Notes section (create only) */}
-      {!isEdit && (
-        <CollapsibleSection
-          title="Notes"
-          open={!!openSections.notes}
-          onOpenChange={(v) => toggleSection("notes", v)}
-        >
-          <StagedNoteList notes={stagedNotes} onChange={setStagedNotes} />
-        </CollapsibleSection>
-      )}
+      {/* Notes section */}
+      <CollapsibleSection
+        title="Notes"
+        open={!!openSections.notes}
+        onOpenChange={(v) => toggleSection("notes", v)}
+      >
+        <StagedNoteList notes={stagedNotes} onChange={setStagedNotes} />
+      </CollapsibleSection>
 
       <div className="flex justify-end gap-2">
         <Button type="submit" disabled={isPending}>
diff --git a/src/pages/items/item-detail-page.tsx b/src/pages/items/item-detail-page.tsx
index 5187cb9..04ab5ec 100644
--- a/src/pages/items/item-detail-page.tsx
+++ b/src/pages/items/item-detail-page.tsx
@@ -13,6 +13,9 @@ import {
   useUploadItemImageItemsItemIdImagesPost,
   useDeleteItemImageItemsItemIdImagesImageIdDelete,
 } from "@/api/generated/hooks/item-images/item-images"
+import { useCreateMarkItemsItemIdMarksPost } from "@/api/generated/hooks/marks/marks"
+import { useUploadMarkImageItemsItemIdMarksMarkIdImagesPost } from "@/api/generated/hooks/mark-images/mark-images"
+import { useCreateItemNoteItemsItemIdNotesPost } from "@/api/generated/hooks/notes/notes"
 import {
   getGetCollectionCollectionsCollectionIdGetQueryKey,
   useGetCollectionCollectionsCollectionIdGet,
@@ -24,7 +27,11 @@ import { AppLayout } from "@/components/app-layout"
 import { ImageCarousel } from "@/components/image-carousel"
 import { ImageLightbox } from "@/components/image-lightbox"
 import { ImageUpload } from "@/components/image-upload"
-import { ItemForm } from "@/components/item-form"
+import {
+  ItemForm,
+  type StagedMark,
+  type StagedNote,
+} from "@/components/item-form"
 import { MarkList } from "@/components/mark-list"
 import { ProvenanceList } from "@/components/provenance-list"
 import { ItemNoteList } from "@/components/item-note-list"
@@ -347,11 +354,25 @@ function EditItemDialog({
   const queryClient = useQueryClient()
   const [uploading, setUploading] = useState(false)
   const imageUpload = useUploadItemImageItemsItemIdImagesPost()
+  const createMark = useCreateMarkItemsItemIdMarksPost()
+  const markImageUpload = useUploadMarkImageItemsItemIdMarksMarkIdImagesPost()
+  const createNote = useCreateItemNoteItemsItemIdNotesPost()
 
   const handleSuccess = useCallback(
-    async (_updatedItem: ItemRead, stagedFiles: File[]) => {
+    async (
+      _updatedItem: ItemRead,
+      stagedFiles: File[],
+      stagedMarks: StagedMark[],
+      stagedNotes: StagedNote[]
+    ) => {
+      const hasUploads =
+        stagedFiles.length > 0 ||
+        stagedMarks.length > 0 ||
+        stagedNotes.length > 0
+      if (hasUploads) setUploading(true)
+
+      // 1. Upload item images
       if (stagedFiles.length > 0) {
-        setUploading(true)
         const failed: string[] = []
         for (const file of stagedFiles) {
           try {
@@ -363,12 +384,56 @@ function EditItemDialog({
             failed.push(file.name)
           }
         }
-        setUploading(false)
         if (failed.length > 0) {
           toast.error(`Failed to upload: ${failed.join(", ")}`)
         }
       }
 
+      // 2. Create marks + upload mark images
+      for (const sm of stagedMarks) {
+        try {
+          const markRes = await createMark.mutateAsync({
+            itemId: item.id,
+            data: {
+              title: sm.title || undefined,
+              description: sm.description || undefined,
+            },
+          })
+          if (markRes.status === 201 && sm.files.length > 0) {
+            for (const file of sm.files) {
+              try {
+                await markImageUpload.mutateAsync({
+                  itemId: item.id,
+                  markId: markRes.data.id,
+                  data: { file },
+                })
+              } catch {
+                toast.error(`Failed to upload mark image: ${file.name}`)
+              }
+            }
+          }
+        } catch {
+          toast.error(`Failed to create mark: ${sm.title || "Untitled"}`)
+        }
+      }
+
+      // 3. Create notes
+      for (const sn of stagedNotes) {
+        try {
+          await createNote.mutateAsync({
+            itemId: item.id,
+            data: {
+              title: sn.title || undefined,
+              body: sn.body,
+            },
+          })
+        } catch {
+          toast.error(`Failed to create note: ${sn.title || "Untitled"}`)
+        }
+      }
+
+      if (hasUploads) setUploading(false)
+
       queryClient.invalidateQueries({
         queryKey: getGetItemItemsItemIdGetQueryKey(item.id),
       })
@@ -386,7 +451,16 @@ function EditItemDialog({
       }
       onOpenChange(false)
     },
-    [item.id, item.collection_id, onOpenChange, queryClient, imageUpload]
+    [
+      item.id,
+      item.collection_id,
+      onOpenChange,
+      queryClient,
+      imageUpload,
+      createMark,
+      markImageUpload,
+      createNote,
+    ]
   )
 
   return (
@@ -397,7 +471,7 @@ function EditItemDialog({
         </DialogHeader>
         {uploading ? (
           <p className="text-muted-foreground py-4 text-center text-sm">
-            Uploading images&hellip;
+            Saving&hellip;
           </p>
         ) : (
           <ItemForm