@open-mercato/ui 0.6.6 → 0.6.7-develop.6553.1.2ec7246e04

package/src/backend/custom-fields/FieldDefinitionsEditor.tsx

@@ -15,7 +15,7 @@ import {
   SelectValue,
 } from '../../primitives/select'
 import { CUSTOM_FIELD_KINDS } from '@open-mercato/shared/modules/entities/kinds'
-import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
+import { useOptionalT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import { FieldRegistry } from '../fields/registry'
 import { slugify } from '@open-mercato/shared/lib/slugify'
 import { useConfirmDialog } from '../confirm-dialog'
@@ -35,6 +35,16 @@ import {
 type FieldsetGroup = { code: string; title?: string; hint?: string }
 type FieldsetConfig = { code: string; label: string; icon?: string; description?: string; groups?: FieldsetGroup[] }
 
+function formatFallback(template: string, params?: Record<string, string | number>) {
+  if (!params) return template
+  return template.replace(/\{\{(\w+)\}\}|\{(\w+)\}/g, (match, doubleKey, singleKey) => {
+    const key = doubleKey ?? singleKey
+    if (!key) return match
+    const value = params[key]
+    return value === undefined ? match : String(value)
+  })
+}
+
 export type FieldDefinition = {
   key: string
   kind: string
@@ -68,7 +78,7 @@ export type FieldDefinitionsEditorProps = {
   listProps?: React.HTMLAttributes<HTMLDivElement>
   singleFieldsetPerRecord?: boolean
   onSingleFieldsetPerRecordChange?: (value: boolean) => void
-  translate?: (key: string, fallback: string) => string
+  translate?: TranslateFn
 }
 
 const DEFAULT_VALUE_NONE = '__open_mercato_no_default__'
@@ -180,11 +190,13 @@ export function FieldDefinitionsEditor({
   const dragIndex = React.useRef<number | null>(null)
   const hasFieldsets = fieldsets.length > 0
   const contextT = useOptionalT()
-  const t = React.useCallback(
-    (key: string, fallback: string) => {
-      if (translate) return translate(key, fallback)
-      if (contextT) return contextT(key, fallback)
-      return fallback
+  const t = React.useCallback<TranslateFn>(
+    (key, fallbackOrParams, params) => {
+      if (translate) return translate(key, fallbackOrParams, params)
+      if (contextT) return contextT(key, fallbackOrParams, params)
+      return typeof fallbackOrParams === 'string'
+        ? formatFallback(fallbackOrParams, params)
+        : key
     },
     [translate, contextT],
   )
@@ -264,7 +276,9 @@ export function FieldDefinitionsEditor({
     if (!onFieldsetsChange) return
     if (!resolvedActiveFieldset) return
     const confirmed = await confirm({
-      title: t('entities.customFields.editor.deleteFieldsetTitle', 'Delete fieldset "{code}"?').replace('{code}', resolvedActiveFieldset),
+      title: t('entities.customFields.editor.deleteFieldsetTitle', 'Delete fieldset "{code}"?', {
+        code: resolvedActiveFieldset,
+      }),
       text: t('entities.customFields.editor.deleteFieldsetText', 'This will move its fields to Unassigned.'),
       variant: 'destructive',
     })
@@ -541,7 +555,7 @@ type FieldDefinitionCardProps = {
   onRegisterGroup?: (fieldsetCode: string, group: FieldsetGroup) => void
   onRemoveGroup?: (fieldsetCode: string, groupCode: string) => void
   onTranslate?: () => void
-  translate?: (key: string, fallback: string) => string
+  translate?: TranslateFn
 }
 
 const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
@@ -573,7 +587,15 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     () => (typeof local.configJson?.fieldset === 'string' ? local.configJson.fieldset : ''),
     [local.configJson?.fieldset],
   )
-  const t = React.useCallback((key: string, fallback: string) => (translate ? translate(key, fallback) : fallback), [translate])
+  const t = React.useCallback<TranslateFn>(
+    (key, fallbackOrParams, params) => {
+      if (translate) return translate(key, fallbackOrParams, params)
+      return typeof fallbackOrParams === 'string'
+        ? formatFallback(fallbackOrParams, params)
+        : key
+    },
+    [translate],
+  )
   React.useEffect(() => {
     localRef.current = definition
     setLocal(definition)
@@ -1093,23 +1115,29 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="required">required</SelectItem>
-                    <SelectItem value="date">date</SelectItem>
-                    <SelectItem value="integer">integer</SelectItem>
-                    <SelectItem value="float">float</SelectItem>
-                    <SelectItem value="lt">lt</SelectItem>
-                    <SelectItem value="lte">lte</SelectItem>
-                    <SelectItem value="gt">gt</SelectItem>
-                    <SelectItem value="gte">gte</SelectItem>
-                    <SelectItem value="eq">eq</SelectItem>
-                    <SelectItem value="ne">ne</SelectItem>
-                    <SelectItem value="regex">regex</SelectItem>
+                    <SelectItem value="required">{t('entities.customFields.editor.validation.required', 'required')}</SelectItem>
+                    <SelectItem value="date">{t('entities.customFields.editor.validation.date', 'date')}</SelectItem>
+                    <SelectItem value="integer">{t('entities.customFields.editor.validation.integer', 'integer')}</SelectItem>
+                    <SelectItem value="float">{t('entities.customFields.editor.validation.float', 'float')}</SelectItem>
+                    <SelectItem value="lt">{t('entities.customFields.editor.validation.lt', 'lt')}</SelectItem>
+                    <SelectItem value="lte">{t('entities.customFields.editor.validation.lte', 'lte')}</SelectItem>
+                    <SelectItem value="gt">{t('entities.customFields.editor.validation.gt', 'gt')}</SelectItem>
+                    <SelectItem value="gte">{t('entities.customFields.editor.validation.gte', 'gte')}</SelectItem>
+                    <SelectItem value="eq">{t('entities.customFields.editor.validation.eq', 'eq')}</SelectItem>
+                    <SelectItem value="ne">{t('entities.customFields.editor.validation.ne', 'ne')}</SelectItem>
+                    <SelectItem value="regex">{t('entities.customFields.editor.validation.regex', 'regex')}</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
               <div className="md:col-span-4">
                 <Input
-                  placeholder={rule?.rule === 'regex' ? t('entities.customFields.editor.rulePatternPlaceholder', 'Pattern (e.g. ^[a-z]+$)') : (['lt','lte','gt','gte'].includes(rule?.rule) ? t('entities.customFields.editor.ruleNumberPlaceholder', 'Number') : '—')}
+                  placeholder={
+                    rule?.rule === 'regex'
+                      ? t('entities.customFields.editor.rulePatternPlaceholder', 'Pattern (e.g. ^[a-z]+$)')
+                      : (['lt','lte','gt','gte'].includes(rule?.rule)
+                        ? t('entities.customFields.editor.ruleNumberPlaceholder', 'Number')
+                        : t('entities.customFields.editor.noParameterPlaceholder', '—'))
+                  }
                   value={rule?.param ?? ''}
                   onChange={(event) => {
                     const value = ['lt','lte','gt','gte'].includes(rule?.rule) ? Number(event.target.value) : event.target.value
@@ -1426,7 +1454,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-muted-foreground hover:text-foreground"
                         onClick={() => handleEditGroupEntry(group)}
-                        aria-label={t('entities.customFields.editor.editGroupAria', 'Edit {code}').replace('{code}', group.code)}
+                        aria-label={t('entities.customFields.editor.editGroupAria', 'Edit {code}', { code: group.code })}
                       >
                         <Pencil className="h-4 w-4" />
                       </IconButton>
@@ -1435,7 +1463,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-destructive hover:text-destructive/80"
                         onClick={() => handleRemoveGroupEntry(group.code)}
-                        aria-label={t('entities.customFields.editor.deleteGroupAria', 'Delete {code}').replace('{code}', group.code)}
+                        aria-label={t('entities.customFields.editor.deleteGroupAria', 'Delete {code}', { code: group.code })}
                       >
                         <Trash2 className="h-4 w-4" />
                       </IconButton>

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -6,6 +6,7 @@ import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
@@ -576,29 +577,21 @@ export function AttachmentMetadataDialog({ open, onOpenChange, item, availableTa
             </div>
             {isImage ? (
               <div className="rounded border">
-                <div className="flex flex-wrap gap-4 border-b px-3 py-2 text-sm font-medium" role="tablist">
-                  {(['preview', 'resize'] as const).map((tab) => (
-                    <Button
-                      key={tab}
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      role="tab"
-                      aria-selected={imageTab === tab}
-                      onClick={() => setImageTab(tab)}
-                      className={cn(
-                        'h-auto -mb-px rounded-none border-b-2 border-transparent px-0 py-1',
-                        imageTab === tab
-                          ? 'border-accent-indigo text-foreground'
-                          : 'text-muted-foreground hover:text-foreground',
-                      )}
-                    >
-                      {tab === 'preview'
-                        ? t('attachments.library.metadata.preview', 'Preview')
-                        : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
-                    </Button>
-                  ))}
-                </div>
+                <Tabs
+                  value={imageTab}
+                  onValueChange={(value) => setImageTab(value as 'preview' | 'resize')}
+                  variant="underline"
+                >
+                  <TabsList className="w-full flex-wrap px-3">
+                    {(['preview', 'resize'] as const).map((tab) => (
+                      <TabsTrigger key={tab} value={tab}>
+                        {tab === 'preview'
+                          ? t('attachments.library.metadata.preview', 'Preview')
+                          : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </Tabs>
                 <div className="space-y-3 p-3">
                   {imageTab === 'preview' ? (
                     previewUrl ? (

package/src/backend/filters/AdvancedFilterBuilder.tsx

@@ -332,7 +332,7 @@ function AndOrToggle({
   const andLabel = t('ui.advancedFilter.combinator.and', 'And')
   const orLabel = t('ui.advancedFilter.combinator.or', 'Or')
   const baseBtn = 'h-8 px-3 text-sm font-medium outline-none focus-visible:shadow-focus disabled:cursor-not-allowed'
-  const selBtn = 'bg-brand-violet text-white hover:bg-brand-violet/90'
+  const selBtn = 'bg-brand-violet text-brand-violet-foreground hover:bg-brand-violet/90'
   const unselBtn = 'bg-background text-foreground hover:bg-accent'
   return (
     <div

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

@@ -0,0 +1,60 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { renderHook } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { useMessageCompose } from '../useMessageCompose'
+import { apiCall } from '../../utils/apiCall'
+
+jest.mock('../../utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../../FlashMessages', () => ({
+  flash: jest.fn(),
+}))
+
+function createWrapper() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        {/* @ts-expect-error shared provider accepts a loose dict shape */}
+        <I18nProvider locale="en" dict={{}}>
+          {children}
+        </I18nProvider>
+      </QueryClientProvider>
+    )
+  }
+}
+
+describe('useMessageCompose recipient suggestions', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: { items: [] },
+      response: { status: 200 },
+    })
+  })
+
+  it('scopes recipient suggestions to the composer active organization', async () => {
+    const { result } = renderHook(() => useMessageCompose({ variant: 'compose' }), {
+      wrapper: createWrapper(),
+    })
+
+    await result.current.loadRecipientSuggestions()
+
+    const authUsersCall = (apiCall as jest.Mock).mock.calls.find(
+      ([url]) => typeof url === 'string' && url.startsWith('/api/auth/users'),
+    )
+    expect(authUsersCall).toBeDefined()
+
+    const requestedUrl = new URL(`http://localhost${authUsersCall[0]}`)
+    expect(requestedUrl.searchParams.get('scopeToActiveOrganization')).toBe('1')
+  })
+})

package/src/backend/messages/useMessageCompose.ts

@@ -413,6 +413,10 @@ export function useMessageCompose({
     const params = new URLSearchParams()
     params.set('page', '1')
     params.set('pageSize', '100')
+    // Scope suggestions to the composer's active organization: a message is stamped with
+    // that org and its detail endpoint denies cross-org recipients, so a recipient from
+    // another org could never open what they were sent.
+    params.set('scopeToActiveOrganization', '1')
     // Recipient lookup is filtered in TagsInput because incremental auth user search is unreliable.
 
     const call = await apiCall<{ items?: UserListItem[] }>(

package/src/primitives/__tests__/drawer.test.tsx

@@ -86,7 +86,8 @@ describe('Drawer', () => {
     const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
     expect(content.className).toContain('right-0')
     expect(content.className).toContain('inset-y-0')
-    expect(content.className).toContain('max-w-md')
+    // Figma Drawer [1.1] width contract: 400px
+    expect(content.className).toContain('max-w-[400px]')
     // Per Figma: inner edge rounded, no panel border on the seam.
     expect(content.className).toContain('rounded-l-xl')
     expect(content.className).not.toMatch(/\bborder-l\b/)

package/src/primitives/drawer.tsx

@@ -94,10 +94,11 @@ const drawerContentVariants = cva(
     variants: {
       side: {
         right:
-          'inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl ' +
+          // Figma Drawer [1.1] width: 400px (not the Tailwind max-w-md 448px)
+          'inset-y-0 right-0 h-full w-full max-w-[400px] rounded-l-xl ' +
           'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
         left:
-          'inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl ' +
+          'inset-y-0 left-0 h-full w-full max-w-[400px] rounded-r-xl ' +
           'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
         top:
           'inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl ' +
@@ -303,7 +304,7 @@ const DrawerTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     data-slot="drawer-title"
-    className={cn('text-base font-semibold leading-tight text-foreground', className)}
+    className={cn('text-lg font-semibold leading-tight text-foreground', className)}
     {...props}
   />
 ))

package/src/primitives/tabs.tsx

@@ -108,9 +108,13 @@ export function Tabs({
 export type TabsListProps = {
   children: React.ReactNode
   className?: string
+  /** Accessible name for the `role="tablist"` element. Set it when the
+   * surrounding context does not already label the strip (e.g. a bare
+   * detail-page section switcher). */
+  'aria-label'?: string
 }
 
-export function TabsList({ children, className }: TabsListProps) {
+export function TabsList({ children, className, 'aria-label': ariaLabel }: TabsListProps) {
   const { variant, orientation } = useTabsContext()
 
   const baseClasses =
@@ -130,6 +134,7 @@ export function TabsList({ children, className }: TabsListProps) {
       data-slot="tabs-list"
       className={cn(baseClasses, className)}
       role="tablist"
+      aria-label={ariaLabel}
       aria-orientation={orientation}
     >
       {children}