@open-mercato/ui 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/src/backend/crud/__tests__/useGroupOrder.test.ts

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+import { act, renderHook } from '@testing-library/react'
+import { useGroupOrder } from '../useGroupOrder'
+
+describe('useGroupOrder', () => {
+  beforeEach(() => { localStorage.clear() })
+
+  it('returns defaults when storage is empty', () => {
+    const defaults = ['a', 'b', 'c']
+    const { result } = renderHook(() => useGroupOrder('people', defaults))
+    expect(result.current.orderedIds).toEqual(defaults)
+  })
+
+  it('hydrates saved order from om:group-order:<pageType>', () => {
+    localStorage.setItem('om:group-order:people', JSON.stringify(['c', 'a', 'b']))
+    const { result } = renderHook(() => useGroupOrder('people', ['a', 'b', 'c']))
+    expect(result.current.orderedIds).toEqual(['c', 'a', 'b'])
+  })
+
+  it('filters out stale IDs no longer in defaults and appends new IDs', () => {
+    localStorage.setItem('om:group-order:people', JSON.stringify(['x', 'a', 'y', 'b']))
+    const { result } = renderHook(() => useGroupOrder('people', ['a', 'b', 'c']))
+    expect(result.current.orderedIds).toEqual(['a', 'b', 'c'])
+  })
+
+  it('reorder() moves items and persists the result', () => {
+    const { result } = renderHook(() => useGroupOrder('people', ['a', 'b', 'c']))
+    act(() => { result.current.reorder(0, 2) })
+    expect(result.current.orderedIds).toEqual(['b', 'c', 'a'])
+    expect(JSON.parse(localStorage.getItem('om:group-order:people')!)).toEqual(['b', 'c', 'a'])
+  })
+
+  it('reorder() handles insertion in the middle', () => {
+    const { result } = renderHook(() => useGroupOrder('p', ['a', 'b', 'c', 'd']))
+    act(() => { result.current.reorder(3, 1) })
+    expect(result.current.orderedIds).toEqual(['a', 'd', 'b', 'c'])
+  })
+
+  it('updates ordering when defaults change to include a new id', () => {
+    const { result, rerender } = renderHook(
+      ({ ids }) => useGroupOrder('p', ids),
+      { initialProps: { ids: ['a', 'b'] } },
+    )
+    rerender({ ids: ['a', 'b', 'c'] })
+    expect(result.current.orderedIds).toEqual(['a', 'b', 'c'])
+  })
+
+  it('removes ids from state when they disappear from defaults', () => {
+    const { result, rerender } = renderHook(
+      ({ ids }) => useGroupOrder('p', ids),
+      { initialProps: { ids: ['a', 'b', 'c'] } },
+    )
+    rerender({ ids: ['a', 'c'] })
+    expect(result.current.orderedIds).toEqual(['a', 'c'])
+  })
+
+  it('does not rewrite storage on initial mount', () => {
+    const spy = jest.spyOn(Storage.prototype, 'setItem')
+    renderHook(() => useGroupOrder('p', ['a', 'b']))
+    expect(spy).not.toHaveBeenCalledWith('om:group-order:p', expect.anything())
+    spy.mockRestore()
+  })
+})

package/src/backend/crud/__tests__/usePersistedBooleanFlag.test.ts

@@ -0,0 +1,49 @@
+/** @jest-environment jsdom */
+import { act, renderHook } from '@testing-library/react'
+import { usePersistedBooleanFlag } from '../usePersistedBooleanFlag'
+
+describe('usePersistedBooleanFlag', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('returns the default value when storage is empty', () => {
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:a', true))
+    expect(result.current.value).toBe(true)
+  })
+
+  it('hydrates from localStorage on mount when a value is saved', () => {
+    localStorage.setItem('test:b', JSON.stringify('1'))
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:b', false))
+    expect(result.current.value).toBe(true)
+  })
+
+  it('hydrates "0" as false regardless of default', () => {
+    localStorage.setItem('test:c', JSON.stringify('0'))
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:c', true))
+    expect(result.current.value).toBe(false)
+  })
+
+  it('persists toggled value to localStorage', () => {
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:d', false))
+    act(() => { result.current.toggle() })
+    expect(result.current.value).toBe(true)
+    expect(localStorage.getItem('test:d')).toBe(JSON.stringify('1'))
+  })
+
+  it('persists setValue writes', () => {
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:e', false))
+    act(() => { result.current.setValue(true) })
+    expect(localStorage.getItem('test:e')).toBe(JSON.stringify('1'))
+    act(() => { result.current.setValue(false) })
+    expect(localStorage.getItem('test:e')).toBe(JSON.stringify('0'))
+  })
+
+  it('writes initial value to storage on mount', () => {
+    // React runs all effects on the same render cycle, so the "set mounted=true"
+    // effect fires before the write effect checks mounted.current. The hook DOES
+    // write the initial value on mount — this test locks in that observed behavior.
+    renderHook(() => usePersistedBooleanFlag('test:f', true))
+    expect(localStorage.getItem('test:f')).toBe(JSON.stringify('1'))
+  })
+})

package/src/backend/crud/__tests__/useZoneCollapse.test.ts

@@ -0,0 +1,31 @@
+/** @jest-environment jsdom */
+import { act, renderHook } from '@testing-library/react'
+import { useZoneCollapse } from '../useZoneCollapse'
+
+describe('useZoneCollapse', () => {
+  beforeEach(() => { localStorage.clear() })
+
+  it('defaults to collapsed=false', () => {
+    const { result } = renderHook(() => useZoneCollapse('person'))
+    expect(result.current.collapsed).toBe(false)
+  })
+
+  it('writes to om:zone1-collapsed:<pageType> on toggle', () => {
+    const { result } = renderHook(() => useZoneCollapse('deal'))
+    act(() => { result.current.toggle() })
+    expect(result.current.collapsed).toBe(true)
+    expect(localStorage.getItem('om:zone1-collapsed:deal')).toBe(JSON.stringify('1'))
+  })
+
+  it('hydrates collapsed=true from storage on mount', () => {
+    localStorage.setItem('om:zone1-collapsed:company', JSON.stringify('1'))
+    const { result } = renderHook(() => useZoneCollapse('company'))
+    expect(result.current.collapsed).toBe(true)
+  })
+
+  it('accepts functional setCollapsed', () => {
+    const { result } = renderHook(() => useZoneCollapse('person'))
+    act(() => { result.current.setCollapsed((prev) => !prev) })
+    expect(result.current.collapsed).toBe(true)
+  })
+})

package/src/backend/crud/useGroupCollapse.ts

@@ -0,0 +1,22 @@
+'use client'
+import { useCallback } from 'react'
+import { usePersistedBooleanFlag } from './usePersistedBooleanFlag'
+
+function getStorageKey(pageType: string, groupId: string) {
+  return `om:collapsible:${pageType}:${groupId}`
+}
+
+export function useGroupCollapse(pageType: string, groupId: string, defaultExpanded = true) {
+  const { value: expanded, toggle, setValue } = usePersistedBooleanFlag(
+    getStorageKey(pageType, groupId),
+    defaultExpanded,
+  )
+  const setExpanded = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+    if (typeof next === 'function') {
+      setValue((prev) => (next as (prev: boolean) => boolean)(prev))
+    } else {
+      setValue(next)
+    }
+  }, [setValue])
+  return { expanded, toggle, setExpanded }
+}

package/src/backend/crud/useGroupOrder.ts

@@ -0,0 +1,74 @@
+'use client'
+import * as React from 'react'
+import {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage,
+} from '@open-mercato/shared/lib/browser/safeLocalStorage'
+
+const STORAGE_PREFIX = 'om:group-order:'
+
+function getStorageKey(pageType: string) {
+  return `${STORAGE_PREFIX}${pageType}`
+}
+
+function mergeOrder(saved: string[], defaults: string[]): string[] {
+  const known = new Set(defaults)
+  const result = saved.filter((id) => known.has(id))
+  for (const id of defaults) {
+    if (!result.includes(id)) result.push(id)
+  }
+  return result
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+/**
+ * Returns the group IDs in the user's preferred order.
+ * Falls back to the default order when no preference is stored.
+ */
+export function useGroupOrder(pageType: string, defaultGroupIds: string[]) {
+  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)
+  const mounted = React.useRef(false)
+
+  React.useEffect(() => {
+    mounted.current = true
+    const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)
+    if (Array.isArray(saved)) {
+      setOrderedIds(mergeOrder(saved, defaultGroupIds))
+    }
+    // Intentionally only runs on mount (per pageType); defaultGroupIds changes are
+    // handled by the sync effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageType])
+
+  // Sync when defaultGroupIds changes (e.g. new groups added dynamically)
+  React.useEffect(() => {
+    setOrderedIds((prev) => {
+      const merged = mergeOrder(prev, defaultGroupIds)
+      return arraysEqual(prev, merged) ? prev : merged
+    })
+  }, [defaultGroupIds])
+
+  const reorder = React.useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setOrderedIds((prev) => {
+        const next = [...prev]
+        const [moved] = next.splice(fromIndex, 1)
+        next.splice(toIndex, 0, moved)
+        if (mounted.current) {
+          writeJsonToLocalStorage(getStorageKey(pageType), next)
+        }
+        return next
+      })
+    },
+    [pageType],
+  )
+
+  return { orderedIds, reorder }
+}

package/src/backend/crud/usePersistedBooleanFlag.ts

@@ -0,0 +1,35 @@
+'use client'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage,
+} from '@open-mercato/shared/lib/browser/safeLocalStorage'
+
+/**
+ * Persists a boolean flag in localStorage under a given key.
+ * Reads once on mount; writes on every change after mount.
+ * Designed to back collapse/expand state for crud form groups and zones.
+ */
+export function usePersistedBooleanFlag(storageKey: string, defaultValue: boolean) {
+  const [value, setValue] = useState(defaultValue)
+  const mounted = useRef(false)
+
+  useEffect(() => {
+    mounted.current = true
+    const saved = readJsonFromLocalStorage<string | null>(storageKey, null)
+    if (saved !== null) {
+      setValue(saved === '1')
+    }
+  }, [storageKey])
+
+  useEffect(() => {
+    if (!mounted.current) return
+    writeJsonToLocalStorage(storageKey, value ? '1' : '0')
+  }, [storageKey, value])
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev)
+  }, [])
+
+  return { value, toggle, setValue }
+}

package/src/backend/crud/useZoneCollapse.ts

@@ -0,0 +1,22 @@
+'use client'
+import { useCallback } from 'react'
+import { usePersistedBooleanFlag } from './usePersistedBooleanFlag'
+
+function getStorageKey(pageType: string) {
+  return `om:zone1-collapsed:${pageType}`
+}
+
+export function useZoneCollapse(pageType: string) {
+  const { value: collapsed, toggle, setValue } = usePersistedBooleanFlag(
+    getStorageKey(pageType),
+    false,
+  )
+  const setCollapsed = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+    if (typeof next === 'function') {
+      setValue((prev) => (next as (prev: boolean) => boolean)(prev))
+    } else {
+      setValue(next)
+    }
+  }, [setValue])
+  return { collapsed, toggle, setCollapsed }
+}

package/src/backend/detail/AttachmentsSection.tsx

@@ -14,6 +14,10 @@ import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 type AttachmentsResponse = {
   items?: AttachmentItem[]
+  total?: number
+  page?: number
+  pageSize?: number
+  totalPages?: number
   error?: string
 }
 
@@ -40,6 +44,8 @@ function AttachmentsSectionImpl({
 }: Props) {
   const t = useT()
   const [items, setItems] = React.useState<AttachmentItem[]>([])
+  const [page, setPage] = React.useState(1)
+  const [totalPages, setTotalPages] = React.useState(1)
   const [loading, setLoading] = React.useState(false)
   const [error, setError] = React.useState<string | null>(null)
   const [isUploading, setIsUploading] = React.useState(false)
@@ -50,13 +56,19 @@ function AttachmentsSectionImpl({
   const [deleteTarget, setDeleteTarget] = React.useState<AttachmentItem | null>(null)
   const fileInputRef = React.useRef<HTMLInputElement | null>(null)
 
-  const load = React.useCallback(async () => {
+  const load = React.useCallback(async (targetPage = 1, replace = true) => {
     if (!recordId) return
     setLoading(true)
     setError(null)
     try {
+      const params = new URLSearchParams({
+        entityId,
+        recordId,
+        page: String(targetPage),
+        pageSize: '24',
+      })
       const call = await apiCall<AttachmentsResponse>(
-        `/api/attachments?entityId=${encodeURIComponent(entityId)}&recordId=${encodeURIComponent(recordId)}`,
+        `/api/attachments?${params.toString()}`,
         undefined,
         { fallback: { items: [] } },
       )
@@ -65,7 +77,10 @@ function AttachmentsSectionImpl({
         throw new Error(message)
       }
       const payload = call.result ?? { items: [] }
-      setItems(Array.isArray(payload.items) ? payload.items : [])
+      const nextItems = Array.isArray(payload.items) ? payload.items : []
+      setItems((current) => (replace ? nextItems : [...current, ...nextItems]))
+      setPage(typeof payload.page === 'number' ? payload.page : targetPage)
+      setTotalPages(typeof payload.totalPages === 'number' ? payload.totalPages : 1)
     } catch (err: any) {
       setError(err?.message || t('attachments.library.errors.load', 'Failed to load attachments.'))
     } finally {
@@ -78,6 +93,8 @@ function AttachmentsSectionImpl({
       void load()
     } else {
       setItems([])
+      setPage(1)
+      setTotalPages(1)
       setError(null)
     }
   }, [load, recordId])
@@ -103,7 +120,7 @@ function AttachmentsSectionImpl({
             throw new Error(message)
           }
         }
-        await load()
+        await load(1, true)
         onChanged?.()
       } catch (err: any) {
         setError(err?.message || t('attachments.library.upload.failed', 'Upload failed.'))
@@ -162,7 +179,7 @@ function AttachmentsSectionImpl({
       }
       setDeleteOpen(false)
       setDeleteTarget(null)
-      await load()
+      await load(1, true)
       onChanged?.()
     } catch (err: any) {
       setError(err?.message || t('attachments.library.errors.delete', 'Failed to delete attachment.'))
@@ -188,7 +205,7 @@ function AttachmentsSectionImpl({
         throw new Error(message)
       }
       setMetadataOpen(false)
-      await load()
+      await load(1, true)
       onChanged?.()
     },
     [load, onChanged, t],
@@ -250,41 +267,53 @@ function AttachmentsSectionImpl({
         )}>
           {items.map((item) => {
             return (
-              <button
+              <div
                 key={item.id}
-                type="button"
-                onClick={() => openMetadataDialog(item)}
-                className="group flex flex-col overflow-hidden rounded-lg border bg-card text-left cursor-pointer transition-shadow hover:shadow-sm"
+                role="group"
+                className="group relative flex flex-col overflow-hidden rounded-lg border bg-card text-left transition-shadow hover:shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
               >
-                <AttachmentVisualPreview
-                  fileName={item.fileName}
-                  mimeType={item.mimeType}
-                  thumbnailUrl={item.thumbnailUrl}
-                  className={compact ? 'aspect-[2/1]' : 'aspect-[4/3]'}
-                  overlay={(
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="absolute right-2 top-2 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        openDeleteDialog(item)
-                      }}
-                    >
-                      <Trash2 className="h-4 w-4 text-destructive" />
-                    </Button>
-                  )}
-                />
-                <div className={cn('space-y-1', compact ? 'p-2' : 'p-3')}>
-                  <div className={cn('truncate font-medium', compact ? 'text-xs' : 'text-sm')} title={item.fileName}>
-                    {item.fileName}
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {formatAttachmentFileSize(item.fileSize)}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  aria-label={item.fileName}
+                  onClick={() => openMetadataDialog(item)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault()
+                      openMetadataDialog(item)
+                    }
+                  }}
+                  className="flex h-auto w-full flex-col items-stretch rounded-lg p-0 text-left hover:bg-transparent focus-visible:outline-none focus-visible:ring-0"
+                >
+                  <AttachmentVisualPreview
+                    fileName={item.fileName}
+                    mimeType={item.mimeType}
+                    thumbnailUrl={item.thumbnailUrl}
+                    className={compact ? 'aspect-[2/1] w-full' : 'aspect-[4/3] w-full'}
+                  />
+                  <div className={cn('space-y-1 w-full', compact ? 'p-2' : 'p-3')}>
+                    <div className={cn('truncate font-medium', compact ? 'text-xs' : 'text-sm')} title={item.fileName}>
+                      {item.fileName}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {formatAttachmentFileSize(item.fileSize)}
+                    </div>
                   </div>
-                </div>
-              </button>
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-2 top-2 z-10 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    openDeleteDialog(item)
+                  }}
+                  aria-label={t('attachments.library.delete', 'Delete attachment')}
+                >
+                  <Trash2 className="h-4 w-4 text-destructive" />
+                </Button>
+              </div>
             )
           })}
         </div>
@@ -294,6 +323,20 @@ function AttachmentsSectionImpl({
         </div>
       )}
 
+      {items.length > 0 && page < totalPages ? (
+        <div className="flex justify-center">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => { void load(page + 1, false) }}
+            disabled={loading}
+          >
+            {t('attachments.library.loadMore', 'Load more')}
+          </Button>
+        </div>
+      ) : null}
+
       <AttachmentMetadataDialog
         open={metadataOpen}
         onOpenChange={setMetadataOpen}