@open-mercato/ui 0.5.1-develop.2800.bfe2178a4f → 0.5.1-develop.2851.2854b4507f

package/src/backend/crud/useGroupCollapse.ts

@@ -7,7 +7,7 @@ function getStorageKey(pageType: string, groupId: string) {
 }
 
 export function useGroupCollapse(pageType: string, groupId: string, defaultExpanded = true) {
-  const { value: expanded, toggle, setValue } = usePersistedBooleanFlag(
+  const { value: expanded, toggle, setValue, isHydrated } = usePersistedBooleanFlag(
     getStorageKey(pageType, groupId),
     defaultExpanded,
   )
@@ -18,5 +18,5 @@ export function useGroupCollapse(pageType: string, groupId: string, defaultExpan
       setValue(next)
     }
   }, [setValue])
-  return { expanded, toggle, setExpanded }
+  return { expanded, toggle, setExpanded, isHydrated }
 }

package/src/backend/crud/usePersistedBooleanFlag.ts

@@ -1,35 +1,89 @@
 'use client'
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useCallback, useEffect, useState, useSyncExternalStore } 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.
- */
+const LOCAL_BROADCAST_EVENT = 'om:persisted-boolean-flag:change'
+
+type SafeEventTarget = {
+  addEventListener: EventTarget['addEventListener']
+  removeEventListener: EventTarget['removeEventListener']
+  dispatchEvent: EventTarget['dispatchEvent']
+}
+
+const localEmitter: SafeEventTarget | null =
+  typeof window !== 'undefined' ? new EventTarget() : null
+
+function readCurrentValue(storageKey: string, defaultValue: boolean): boolean {
+  const saved = readJsonFromLocalStorage<string | null>(storageKey, null)
+  if (saved === '1') return true
+  if (saved === '0') return false
+  return defaultValue
+}
+
+function persistValue(storageKey: string, next: boolean): void {
+  writeJsonToLocalStorage(storageKey, next ? '1' : '0')
+  localEmitter?.dispatchEvent(
+    new CustomEvent(LOCAL_BROADCAST_EVENT, { detail: storageKey }),
+  )
+}
+
+function subscribe(storageKey: string, onChange: () => void): () => void {
+  if (typeof window === 'undefined') return () => {}
+
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key === storageKey) onChange()
+  }
+  const handleLocal = (event: Event) => {
+    const detail = (event as CustomEvent<string>).detail
+    if (detail === storageKey) onChange()
+  }
+
+  window.addEventListener('storage', handleStorage)
+  localEmitter?.addEventListener(LOCAL_BROADCAST_EVENT, handleLocal)
+
+  return () => {
+    window.removeEventListener('storage', handleStorage)
+    localEmitter?.removeEventListener(LOCAL_BROADCAST_EVENT, handleLocal)
+  }
+}
+
 export function usePersistedBooleanFlag(storageKey: string, defaultValue: boolean) {
-  const [value, setValue] = useState(defaultValue)
-  const mounted = useRef(false)
+  const [isHydrated, setIsHydrated] = useState(false)
+  const getSnapshot = useCallback(
+    () => readCurrentValue(storageKey, defaultValue),
+    [storageKey, defaultValue],
+  )
+  const getServerSnapshot = useCallback(() => defaultValue, [defaultValue])
+  const subscribeKey = useCallback(
+    (onChange: () => void) => subscribe(storageKey, onChange),
+    [storageKey],
+  )
 
-  useEffect(() => {
-    mounted.current = true
-    const saved = readJsonFromLocalStorage<string | null>(storageKey, null)
-    if (saved !== null) {
-      setValue(saved === '1')
-    }
-  }, [storageKey])
+  const value = useSyncExternalStore(subscribeKey, getSnapshot, getServerSnapshot)
 
   useEffect(() => {
-    if (!mounted.current) return
-    writeJsonToLocalStorage(storageKey, value ? '1' : '0')
-  }, [storageKey, value])
+    setIsHydrated(true)
+  }, [])
+
+  const setValue = useCallback(
+    (next: boolean | ((prev: boolean) => boolean)) => {
+      const current = readCurrentValue(storageKey, defaultValue)
+      const nextValue =
+        typeof next === 'function'
+          ? (next as (prev: boolean) => boolean)(current)
+          : next
+      persistValue(storageKey, nextValue)
+    },
+    [storageKey, defaultValue],
+  )
 
   const toggle = useCallback(() => {
-    setValue((prev) => !prev)
-  }, [])
+    const current = readCurrentValue(storageKey, defaultValue)
+    persistValue(storageKey, !current)
+  }, [storageKey, defaultValue])
 
-  return { value, toggle, setValue }
+  return { value, toggle, setValue, isHydrated }
 }

package/src/backend/crud/useZoneCollapse.ts

@@ -7,7 +7,7 @@ function getStorageKey(pageType: string) {
 }
 
 export function useZoneCollapse(pageType: string) {
-  const { value: collapsed, toggle, setValue } = usePersistedBooleanFlag(
+  const { value: collapsed, toggle, setValue, isHydrated } = usePersistedBooleanFlag(
     getStorageKey(pageType),
     false,
   )
@@ -18,5 +18,5 @@ export function useZoneCollapse(pageType: string) {
       setValue(next)
     }
   }, [setValue])
-  return { collapsed, toggle, setCollapsed }
+  return { collapsed, toggle, setCollapsed, isHydrated }
 }

package/src/backend/messages/SendObjectMessageDialog.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Send } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
 import {
   MessageComposer,
   type MessageComposerContextObject,
@@ -17,6 +18,10 @@ export type SendObjectMessageDialogProps = {
   lockedType?: string | null
   requiredActionConfig?: MessageComposerRequiredActionConfig | null
   disabled?: boolean
+  buttonVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'muted' | 'link'
+  buttonSize?: 'default' | 'sm' | 'lg' | 'icon'
+  buttonClassName?: string
+  buttonLabel?: string
   viewHref?: string | null
   onSuccess?: MessageComposerProps['onSuccess']
 }
@@ -27,11 +32,16 @@ export function SendObjectMessageDialog({
   lockedType = 'messages.defaultWithObjects',
   requiredActionConfig = null,
   disabled = false,
+  buttonVariant = 'ghost',
+  buttonSize = 'icon',
+  buttonClassName,
+  buttonLabel,
   viewHref: _viewHref = null,
   onSuccess,
 }: SendObjectMessageDialogProps) {
   const t = useT()
   const [open, setOpen] = React.useState(false)
+  const label = buttonLabel ?? t('messages.compose', 'Compose message')
 
   const openComposer = React.useCallback(() => {
     if (disabled) return
@@ -46,19 +56,39 @@ export function SendObjectMessageDialog({
     previewData: object.previewData ?? null,
   }), [object.entityId, object.entityModule, object.entityType, object.sourceEntityId, object.sourceEntityType, object.previewData])
 
-  return (
-    <>
+  const trigger = buttonSize === 'icon' && (buttonVariant === 'outline' || buttonVariant === 'ghost')
+    ? (
+      <IconButton
+        type="button"
+        size="default"
+        variant={buttonVariant}
+        className={buttonClassName}
+        disabled={disabled}
+        onClick={openComposer}
+        aria-label={label}
+        title={label}
+      >
+        <Send className="size-4" />
+      </IconButton>
+    )
+    : (
       <Button
         type="button"
-        size="icon"
-        variant="ghost"
+        size={buttonSize}
+        variant={buttonVariant}
+        className={buttonClassName}
         disabled={disabled}
         onClick={openComposer}
-        aria-label={t('messages.compose', 'Compose message')}
-        title={t('messages.compose', 'Compose message')}
+        aria-label={label}
+        title={label}
       >
-        <Send className="h-4 w-4" />
+        <Send className="size-4" />
       </Button>
+    )
+
+  return (
+    <>
+      {trigger}
       <MessageComposer
         variant="compose"
         open={open}

package/src/backend/messages/__tests__/SendObjectMessageDialog.test.tsx

@@ -74,4 +74,25 @@ describe('SendObjectMessageDialog', () => {
       open: true,
     }))
   })
+
+  it('allows callers to style and label the trigger button', () => {
+    renderWithProviders(
+      <SendObjectMessageDialog
+        object={{
+          entityModule: 'customers',
+          entityType: 'person',
+          entityId: '11111111-1111-4111-8111-111111111111',
+        }}
+        buttonVariant="outline"
+        buttonSize="icon"
+        buttonClassName="size-8"
+        buttonLabel="Send message"
+      />,
+      { dict: {} },
+    )
+
+    const button = screen.getByRole('button', { name: 'Send message' })
+    expect(button.className).toEqual(expect.stringContaining('size-8'))
+    expect(button.className).toEqual(expect.stringContaining('border'))
+  })
 })

package/src/backend/version-history/VersionHistoryAction.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { Clock } from 'lucide-react'
-import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
 import { cn } from '@open-mercato/shared/lib/utils'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import type { VersionHistoryConfig } from './types'
@@ -48,17 +48,17 @@ export function VersionHistoryAction({
 
   return (
     <>
-      <Button
+      <IconButton
         type="button"
         variant="ghost"
-        size="icon"
+        size="default"
         onClick={() => setOpen(true)}
         aria-label={t('audit_logs.version_history.title')}
         title={t('audit_logs.version_history.title')}
         className={buttonClassName}
       >
         <Clock className={cn('size-4', iconClassName)} />
-      </Button>
+      </IconButton>
       <VersionHistoryPanel
         open={open}
         onOpenChange={setOpen}