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 1/2] 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

From 273ea8334b293ccc9e175a44207f4b8fd5fdc7df Mon Sep 17 00:00:00 2001
From: Amr Gaber <amrtgaber@gmail.com>
Date: Fri, 6 Feb 2026 18:43:48 -0600
Subject: [PATCH 2/2] Replace tabs with collapsible sections on item detail
 page

Switch from Tabs to Collapsible sections so all content is visible at
once. Add expand/collapse all toggle. Sections default to open.
---
 src/pages/items/item-detail-page.tsx | 337 +++++++++++++++++----------
 1 file changed, 217 insertions(+), 120 deletions(-)

diff --git a/src/pages/items/item-detail-page.tsx b/src/pages/items/item-detail-page.tsx
index 04ab5ec..40f0fa1 100644
--- a/src/pages/items/item-detail-page.tsx
+++ b/src/pages/items/item-detail-page.tsx
@@ -1,6 +1,13 @@
 import { useState, useCallback } from "react"
 import { Link, useNavigate, useParams } from "@tanstack/react-router"
-import { ArrowLeft, MoreHorizontal, Pencil, Trash2 } from "lucide-react"
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronsUpDown,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+} from "lucide-react"
 import { useQueryClient } from "@tanstack/react-query"
 import { toast } from "sonner"
 import {
@@ -39,7 +46,12 @@ import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Separator } from "@/components/ui/separator"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { cn } from "@/lib/utils"
 import {
   Dialog,
   DialogContent,
@@ -62,6 +74,27 @@ export function ItemDetailPage() {
   const [lightboxOpen, setLightboxOpen] = useState(false)
   const [lightboxIndex, setLightboxIndex] = useState(0)
 
+  const sectionKeys = [
+    "details",
+    "images",
+    "provenance",
+    "dimensions",
+    "marks",
+    "notes",
+  ]
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>(
+    () => Object.fromEntries(sectionKeys.map((k) => [k, true]))
+  )
+  const toggleSection = (key: string, value: boolean) =>
+    setOpenSections((prev) => ({ ...prev, [key]: value }))
+  const allExpanded = sectionKeys.every((k) => openSections[k])
+  const toggleAll = () => {
+    const next = !allExpanded
+    const updated: Record<string, boolean> = {}
+    for (const k of sectionKeys) updated[k] = next
+    setOpenSections((prev) => ({ ...prev, ...updated }))
+  }
+
   const { data: itemRes, isLoading } = useGetItemItemsItemIdGet(itemId)
   const item = itemRes?.status === 200 ? itemRes.data : undefined
 
@@ -159,131 +192,164 @@ export function ItemDetailPage() {
               </div>
             )}
 
-            {/* Tabs */}
-            <Tabs defaultValue="details">
-              <TabsList>
-                <TabsTrigger value="details">Details</TabsTrigger>
-                <TabsTrigger value="images">Images</TabsTrigger>
-                <TabsTrigger value="provenance">Provenance</TabsTrigger>
-                <TabsTrigger value="dimensions">Dimensions</TabsTrigger>
-                <TabsTrigger value="marks">Marks</TabsTrigger>
-                <TabsTrigger value="notes">Notes</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="details" className="mt-4 space-y-3">
-                {item.description && (
-                  <DetailRow label="Description" value={item.description} />
-                )}
-                <DetailRow label="Location" value={item.location} />
-                <DetailRow
-                  label="Acquisition Date"
-                  value={item.acquisition_date}
-                />
-                <DetailRow
-                  label="Purchase Price"
-                  value={
-                    item.acquisition_price ? `$${item.acquisition_price}` : null
-                  }
-                />
-                <DetailRow
-                  label="Estimated Value"
-                  value={
-                    item.estimated_value ? `$${item.estimated_value}` : null
-                  }
-                />
-                <DetailRow
-                  label="Acquisition Source"
-                  value={item.acquisition_source}
-                />
-                {item.type_fields && typeDef && typeDef.fields.length > 0 && (
-                  <>
-                    <Separator className="my-3" />
-                    <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                      {typeDef.label} Details
-                    </p>
-                    {typeDef.fields.map((field) => {
-                      const raw = (
-                        item.type_fields as Record<string, unknown>
-                      )?.[field.name]
-                      if (!raw) return null
-                      let display = String(raw)
-                      if (field.type === "enum" && field.options) {
-                        const opt = field.options.find((o) => o.value === raw)
-                        if (opt) display = opt.label
-                      }
-                      return (
-                        <DetailRow
-                          key={field.name}
-                          label={field.label}
-                          value={display}
-                        />
-                      )
-                    })}
-                  </>
-                )}
-                {!item.description &&
-                  !item.location &&
-                  !item.acquisition_date &&
-                  !item.acquisition_price &&
-                  !item.estimated_value &&
-                  !item.acquisition_source &&
-                  !item.type_fields && (
-                    <EmptyTab message="No details recorded yet." />
+            {/* Expand / Collapse all */}
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-foreground mb-2 flex items-center gap-1 text-xs transition-colors"
+              onClick={toggleAll}
+            >
+              <ChevronsUpDown className="h-3.5 w-3.5" />
+              {allExpanded ? "Collapse all" : "Expand all"}
+            </button>
+
+            {/* Sections */}
+            <div className="space-y-2">
+              <DetailSection
+                title="Details"
+                open={!!openSections.details}
+                onOpenChange={(v) => toggleSection("details", v)}
+              >
+                <div className="space-y-3">
+                  {item.description && (
+                    <DetailRow label="Description" value={item.description} />
                   )}
-              </TabsContent>
+                  <DetailRow label="Location" value={item.location} />
+                  <DetailRow
+                    label="Acquisition Date"
+                    value={item.acquisition_date}
+                  />
+                  <DetailRow
+                    label="Purchase Price"
+                    value={
+                      item.acquisition_price
+                        ? `$${item.acquisition_price}`
+                        : null
+                    }
+                  />
+                  <DetailRow
+                    label="Estimated Value"
+                    value={
+                      item.estimated_value ? `$${item.estimated_value}` : null
+                    }
+                  />
+                  <DetailRow
+                    label="Acquisition Source"
+                    value={item.acquisition_source}
+                  />
+                  {item.type_fields && typeDef && typeDef.fields.length > 0 && (
+                    <>
+                      <Separator className="my-3" />
+                      <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                        {typeDef.label} Details
+                      </p>
+                      {typeDef.fields.map((field) => {
+                        const raw = (
+                          item.type_fields as Record<string, unknown>
+                        )?.[field.name]
+                        if (!raw) return null
+                        let display = String(raw)
+                        if (field.type === "enum" && field.options) {
+                          const opt = field.options.find((o) => o.value === raw)
+                          if (opt) display = opt.label
+                        }
+                        return (
+                          <DetailRow
+                            key={field.name}
+                            label={field.label}
+                            value={display}
+                          />
+                        )
+                      })}
+                    </>
+                  )}
+                  {!item.description &&
+                    !item.location &&
+                    !item.acquisition_date &&
+                    !item.acquisition_price &&
+                    !item.estimated_value &&
+                    !item.acquisition_source &&
+                    !item.type_fields && (
+                      <EmptySection message="No details recorded yet." />
+                    )}
+                </div>
+              </DetailSection>
 
-              <TabsContent value="images" className="mt-4">
+              <DetailSection
+                title="Images"
+                open={!!openSections.images}
+                onOpenChange={(v) => toggleSection("images", v)}
+              >
                 <ItemImages itemId={item.id} images={item.images ?? []} />
-              </TabsContent>
-
-              <TabsContent value="provenance" className="mt-4 space-y-3">
-                <DetailRow label="Artist / Maker" value={item.artist_maker} />
-                <DetailRow label="Origin" value={item.origin} />
-                <DetailRow label="Date / Era" value={item.date_era} />
-                {(item.artist_maker || item.origin || item.date_era) && (
-                  <Separator className="my-3" />
-                )}
-                <ProvenanceList
-                  itemId={item.id}
-                  entries={item.provenance_entries ?? []}
-                />
-              </TabsContent>
-
-              <TabsContent value="dimensions" className="mt-4 space-y-3">
-                <DetailRow
-                  label="Height"
-                  value={item.height_cm ? `${item.height_cm} cm` : null}
-                />
-                <DetailRow
-                  label="Width"
-                  value={item.width_cm ? `${item.width_cm} cm` : null}
-                />
-                <DetailRow
-                  label="Depth"
-                  value={item.depth_cm ? `${item.depth_cm} cm` : null}
-                />
-                <DetailRow
-                  label="Weight"
-                  value={item.weight_kg ? `${item.weight_kg} kg` : null}
-                />
-                <DetailRow label="Materials" value={item.materials} />
-                {!item.height_cm &&
-                  !item.width_cm &&
-                  !item.depth_cm &&
-                  !item.weight_kg &&
-                  !item.materials && (
-                    <EmptyTab message="No dimensions recorded." />
+              </DetailSection>
+
+              <DetailSection
+                title="Provenance"
+                open={!!openSections.provenance}
+                onOpenChange={(v) => toggleSection("provenance", v)}
+              >
+                <div className="space-y-3">
+                  <DetailRow label="Artist / Maker" value={item.artist_maker} />
+                  <DetailRow label="Origin" value={item.origin} />
+                  <DetailRow label="Date / Era" value={item.date_era} />
+                  {(item.artist_maker || item.origin || item.date_era) && (
+                    <Separator className="my-3" />
                   )}
-              </TabsContent>
+                  <ProvenanceList
+                    itemId={item.id}
+                    entries={item.provenance_entries ?? []}
+                  />
+                </div>
+              </DetailSection>
+
+              <DetailSection
+                title="Dimensions"
+                open={!!openSections.dimensions}
+                onOpenChange={(v) => toggleSection("dimensions", v)}
+              >
+                <div className="space-y-3">
+                  <DetailRow
+                    label="Height"
+                    value={item.height_cm ? `${item.height_cm} cm` : null}
+                  />
+                  <DetailRow
+                    label="Width"
+                    value={item.width_cm ? `${item.width_cm} cm` : null}
+                  />
+                  <DetailRow
+                    label="Depth"
+                    value={item.depth_cm ? `${item.depth_cm} cm` : null}
+                  />
+                  <DetailRow
+                    label="Weight"
+                    value={item.weight_kg ? `${item.weight_kg} kg` : null}
+                  />
+                  <DetailRow label="Materials" value={item.materials} />
+                  {!item.height_cm &&
+                    !item.width_cm &&
+                    !item.depth_cm &&
+                    !item.weight_kg &&
+                    !item.materials && (
+                      <EmptySection message="No dimensions recorded." />
+                    )}
+                </div>
+              </DetailSection>
 
-              <TabsContent value="marks" className="mt-4">
+              <DetailSection
+                title="Marks"
+                open={!!openSections.marks}
+                onOpenChange={(v) => toggleSection("marks", v)}
+              >
                 <MarkList itemId={item.id} marks={item.marks ?? []} />
-              </TabsContent>
+              </DetailSection>
 
-              <TabsContent value="notes" className="mt-4">
+              <DetailSection
+                title="Notes"
+                open={!!openSections.notes}
+                onOpenChange={(v) => toggleSection("notes", v)}
+              >
                 <ItemNoteList itemId={item.id} notes={item.item_notes ?? []} />
-              </TabsContent>
-            </Tabs>
+              </DetailSection>
+            </div>
 
             <EditItemDialog
               open={editOpen}
@@ -325,12 +391,43 @@ function DetailRow({
   )
 }
 
-function EmptyTab({ message }: { message: string }) {
+function EmptySection({ message }: { message: string }) {
   return (
     <p className="text-muted-foreground py-6 text-center text-sm">{message}</p>
   )
 }
 
+function DetailSection({
+  title,
+  open,
+  onOpenChange,
+  children,
+}: {
+  title: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  children: React.ReactNode
+}) {
+  return (
+    <Collapsible open={open} onOpenChange={onOpenChange}>
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className="hover:bg-muted/50 flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm font-medium transition-colors"
+        >
+          <ChevronDown
+            className={cn("h-4 w-4 transition-transform", open && "rotate-180")}
+          />
+          {title}
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-2 pt-2 pb-4">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
 function ItemHeaderSkeleton() {
   return (
     <div className="mb-6">