@open-mercato/ui 0.6.7 → 0.6.8-develop.6874.1.982d6097d8

package/src/backend/schedule/ScheduleToolbar.tsx

@@ -1,8 +1,19 @@
 "use client"
 
 import * as React from 'react'
-import { Button } from '../../primitives/button'
-import { Input } from '../../primitives/input'
+import { DateRangePicker } from '../../primitives/date-range-picker'
+import { IconButton } from '../../primitives/icon-button'
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '../../primitives/segmented-control'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import type { ScheduleRange, ScheduleViewMode } from './types'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -27,17 +38,19 @@ const VIEW_OPTIONS: Array<{ id: ScheduleViewMode; labelKey: string; fallback: st
   { id: 'agenda', labelKey: 'schedule.view.agenda', fallback: 'Agenda' },
 ]
 
-function formatDateInputValue(value: Date): string {
-  const year = value.getFullYear()
-  const month = String(value.getMonth() + 1).padStart(2, '0')
-  const day = String(value.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-function parseDateInputValue(value: string, fallback: Date): Date {
-  if (!value) return fallback
-  const next = new Date(`${value}T00:00:00`)
-  return Number.isNaN(next.getTime()) ? fallback : next
+function getTimezoneOptions(current?: string): string[] {
+  const options = new Set<string>()
+  if (current) options.add(current)
+  options.add('UTC')
+  const resolved = Intl.DateTimeFormat().resolvedOptions().timeZone
+  if (resolved) options.add(resolved)
+  const intlWithSupportedValues = Intl as typeof Intl & { supportedValuesOf?: (input: 'timeZone') => string[] }
+  if (typeof intlWithSupportedValues.supportedValuesOf === 'function') {
+    intlWithSupportedValues.supportedValuesOf('timeZone').forEach((timezone) => {
+      if (timezone) options.add(timezone)
+    })
+  }
+  return Array.from(options).sort((a, b) => a.localeCompare(b))
 }
 
 export type ScheduleToolbarProps = {
@@ -120,68 +133,76 @@ export function ScheduleToolbar({
     onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) })
   }, [onRangeChange, range.start, rangeLength, view])
 
+  const timezoneOptions = React.useMemo(() => getTimezoneOptions(timezone), [timezone])
+
   return (
-    <div className={cn('flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between', className)}>
-      <div className="flex flex-wrap items-center gap-2">
+    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border bg-card p-3', className)}>
+      <SegmentedControl
+        value={view}
+        onValueChange={(value) => {
+          const nextView = value as ScheduleViewMode
+          if (nextView === view) return
+          onViewChange(nextView)
+          onRangeChange(deriveRangeForView(new Date(), nextView))
+        }}
+        aria-label={t('schedule.view.label', 'Schedule view')}
+        className="shrink-0"
+      >
         {VIEW_OPTIONS.map((option) => (
-          <Button
-            key={option.id}
-            variant={view === option.id ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => {
-              if (option.id === view) return
-              onViewChange(option.id)
-              onRangeChange(deriveRangeForView(new Date(), option.id))
-            }}
-          >
+          <SegmentedControlItem key={option.id} value={option.id}>
             {t(option.labelKey, option.fallback)}
-          </Button>
+          </SegmentedControlItem>
         ))}
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('prev')} aria-label={t('schedule.range.prev', 'Previous')}>
+      </SegmentedControl>
+      <div className="flex shrink-0 items-center gap-1">
+        <IconButton
+          type="button"
+          variant="outline"
+          onClick={() => shiftRange('prev')}
+          aria-label={t('schedule.range.prev', 'Previous')}
+        >
           <ChevronLeft className="size-4" aria-hidden />
-        </Button>
-        <div className="text-sm font-medium text-foreground">{rangeLabel}</div>
-        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('next')} aria-label={t('schedule.range.next', 'Next')}>
+        </IconButton>
+        <div className="min-w-0 whitespace-nowrap px-1 text-sm font-medium text-foreground">{rangeLabel}</div>
+        <IconButton
+          type="button"
+          variant="outline"
+          onClick={() => shiftRange('next')}
+          aria-label={t('schedule.range.next', 'Next')}
+        >
           <ChevronRight className="size-4" aria-hidden />
-        </Button>
+        </IconButton>
       </div>
-      <div className="flex flex-wrap items-center gap-3">
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.start', 'Start')}</span>
-          <Input
-            type="date"
-            value={formatDateInputValue(range.start)}
-            onChange={(event) => {
-              const nextStart = parseDateInputValue(event.target.value, range.start)
-              onRangeChange({ start: nextStart, end: range.end })
-            }}
-            className="h-8 w-full sm:w-[140px]"
-          />
-        </label>
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.end', 'End')}</span>
-          <Input
-            type="date"
-            value={formatDateInputValue(range.end)}
-            onChange={(event) => {
-              const nextEnd = parseDateInputValue(event.target.value, range.end)
-              onRangeChange({ start: range.start, end: nextEnd })
-            }}
-            className="h-8 w-full sm:w-[140px]"
-          />
-        </label>
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.timezone', 'Timezone')}</span>
-          <Input
-            type="text"
-            value={timezone ?? ''}
-            onChange={(event) => onTimezoneChange?.(event.target.value)}
-            className="h-8 w-full sm:w-[180px]"
-            placeholder={t('schedule.range.timezone.placeholder', 'UTC')}
-          />
-        </label>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 md:ml-auto">
+        <DateRangePicker
+          value={range}
+          onChange={(next) => {
+            if (!next) return
+            onRangeChange({ start: startOfDay(next.start), end: endOfDay(next.end) })
+          }}
+          size="sm"
+          showPresets={false}
+          numberOfMonths={2}
+          aria-label={t('schedule.range.label', 'Date range')}
+        />
+        {onTimezoneChange ? (
+          <Select value={timezone ?? undefined} onValueChange={onTimezoneChange}>
+            <SelectTrigger
+              size="sm"
+              className="w-auto min-w-[10rem]"
+              aria-label={t('schedule.range.timezone', 'Timezone')}
+            >
+              <SelectValue placeholder={t('schedule.range.timezone.placeholder', 'UTC')} />
+            </SelectTrigger>
+            <SelectContent>
+              {timezoneOptions.map((option) => (
+                <SelectItem key={option} value={option}>
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : null}
       </div>
     </div>
   )

package/src/backend/sidebar/SidebarCustomizationEditor.tsx

@@ -14,6 +14,7 @@ import { Switch } from '../../primitives/switch'
 import { Card, CardContent, CardHeader, CardTitle } from '../../primitives/card'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../../primitives/dialog'
 import { Tag } from '../../primitives/tag'
+import { Badge } from '../../primitives/badge'
 import {
   Select,
   SelectContent,
@@ -31,12 +32,14 @@ import { useConfirmDialog } from '../confirm-dialog'
 import { useGuardedMutation } from '../injection/useGuardedMutation'
 import {
   applyCustomizationDraft,
+  applyGroupHidden,
   applyItemOrder,
   cloneSidebarGroups,
   collectSidebarDefaults,
   filterMainSidebarGroups,
   mergeGroupOrder,
   resolveGroupKey,
+  resolveGroupVisibility,
   resolveItemKey,
   type SidebarCustomizationDraft,
   type SidebarGroup,
@@ -548,6 +551,19 @@ export function SidebarCustomizationEditor({
     })
   }, [updateDraft])
 
+  /**
+   * Hiding a whole group previously meant toggling every item in it one at a time — a dozen-plus
+   * clicks for what reads as a single decision. Writes the same `hiddenItemIds` keys the per-item
+   * switches do, so the persisted settings are indistinguishable from reaching this state by hand.
+   */
+  const setGroupHidden = React.useCallback((groupKey: string, hidden: boolean) => {
+    updateDraft((draft) => {
+      const group = baseSnapshotRef.current?.find((candidate) => resolveGroupKey(candidate) === groupKey)
+      if (!group) return draft
+      return { ...draft, hiddenItemIds: applyGroupHidden(draft.hiddenItemIds, group, hidden) }
+    })
+  }, [updateDraft])
+
   const reset = React.useCallback(() => {
     if (!baseSnapshotRef.current) return
     if (selectedVariant) {
@@ -1222,7 +1238,30 @@ export function SidebarCustomizationEditor({
                             </p>
                           ) : null}
                         </div>
-                        <div className="flex shrink-0 items-center gap-1 mt-[26px]">
+                        <div className="flex shrink-0 items-center gap-2 mt-6">
+                          {(() => {
+                            const visibility = resolveGroupVisibility(baseGroup, draft.hiddenItemIds)
+                            const groupName = trimmedValue.length > 0 ? trimmedValue : placeholder
+                            const label = visibility === 'partial'
+                              ? t('appShell.sidebarCustomizationHideGroupPartial', 'Some items in {group} are hidden — turn off to hide the whole group', { group: groupName })
+                              : t('appShell.sidebarCustomizationShowGroup', 'Show {group}', { group: groupName })
+                            return (
+                              <>
+                                {visibility === 'hidden' ? (
+                                  <Badge variant="muted" size="sm" className="uppercase tracking-wide">
+                                    {t('appShell.sidebarCustomizationHiddenBadge', 'Hidden')}
+                                  </Badge>
+                                ) : null}
+                                <Switch
+                                  checked={visibility !== 'hidden'}
+                                  onCheckedChange={(next) => setGroupHidden(groupId, next !== true)}
+                                  disabled={isBusy}
+                                  aria-label={label}
+                                  title={label}
+                                />
+                              </>
+                            )
+                          })()}
                           <IconButton
                             type="button"
                             variant="outline"
@@ -1349,9 +1388,9 @@ function ItemRow({ item, draft, saving, onLabelChange, onHiddenChange, t, depth,
       </div>
       <div className="flex shrink-0 items-center gap-2 pt-1.5">
         {hidden ? (
-          <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          <Badge variant="muted" size="sm" className="uppercase tracking-wide">
             {t('appShell.sidebarCustomizationHiddenBadge', 'Hidden')}
-          </span>
+          </Badge>
         ) : null}
         <Switch
           checked={!hidden}

package/src/backend/sidebar/__tests__/group-visibility.test.ts

@@ -0,0 +1,131 @@
+import {
+  applyGroupHidden,
+  collectGroupItemKeys,
+  resolveGroupVisibility,
+  resolveItemKey,
+  type SidebarGroup,
+} from '../customization-helpers'
+
+// Hiding a whole group used to require toggling every item in it individually — `AppShell` drops a
+// group only once *all* of its items are hidden. These cases cover the bulk toggle that does it in one
+// action, and pin the invariant that matters for compatibility: it writes the same `hiddenItemIds`
+// keys the per-item switches write, and nothing else.
+
+const group: SidebarGroup = {
+  id: 'catalog.nav.group',
+  name: 'Catalog',
+  items: [
+    { href: '/backend/catalog/products', title: 'Products' },
+    {
+      href: '/backend/catalog/categories',
+      title: 'Categories',
+      children: [
+        { href: '/backend/catalog/categories/tree', title: 'Tree' },
+        { href: '/backend/catalog/categories/import', title: 'Import' },
+      ],
+    },
+  ],
+}
+
+const ALL_KEYS = [
+  '/backend/catalog/products',
+  '/backend/catalog/categories',
+  '/backend/catalog/categories/tree',
+  '/backend/catalog/categories/import',
+]
+
+describe('collectGroupItemKeys', () => {
+  it('includes top-level items and every nested descendant', () => {
+    expect(collectGroupItemKeys(group).sort()).toEqual([...ALL_KEYS].sort())
+  })
+
+  it('returns nothing for an empty group', () => {
+    expect(collectGroupItemKeys({ id: 'empty', name: 'Empty', items: [] })).toEqual([])
+  })
+
+  it('prefers an explicit item id over the href, matching resolveItemKey', () => {
+    const withIds: SidebarGroup = {
+      id: 'g',
+      name: 'G',
+      items: [{ id: 'custom-id', href: '/backend/thing', title: 'Thing' }],
+    }
+
+    expect(collectGroupItemKeys(withIds)).toEqual([resolveItemKey(withIds.items[0])])
+  })
+})
+
+describe('resolveGroupVisibility', () => {
+  it('is visible when nothing is hidden', () => {
+    expect(resolveGroupVisibility(group, {})).toBe('visible')
+  })
+
+  it('is hidden only when every item including descendants is hidden', () => {
+    const allHidden = Object.fromEntries(ALL_KEYS.map((key) => [key, true]))
+
+    expect(resolveGroupVisibility(group, allHidden)).toBe('hidden')
+  })
+
+  it('is partial when some but not all items are hidden', () => {
+    expect(resolveGroupVisibility(group, { '/backend/catalog/products': true })).toBe('partial')
+  })
+
+  it('is partial when only a nested descendant is left visible', () => {
+    const allButOne = Object.fromEntries(
+      ALL_KEYS.filter((key) => key !== '/backend/catalog/categories/import').map((key) => [key, true]),
+    )
+
+    expect(resolveGroupVisibility(group, allButOne)).toBe('partial')
+  })
+
+  it('treats an empty group as visible rather than hidden', () => {
+    expect(resolveGroupVisibility({ id: 'empty', name: 'Empty', items: [] }, {})).toBe('visible')
+  })
+})
+
+describe('applyGroupHidden', () => {
+  it('hides every item in the group, descendants included', () => {
+    const next = applyGroupHidden({}, group, true)
+
+    expect(Object.keys(next).sort()).toEqual([...ALL_KEYS].sort())
+    expect(resolveGroupVisibility(group, next)).toBe('hidden')
+  })
+
+  it('clears every item in the group when shown', () => {
+    const hidden = applyGroupHidden({}, group, true)
+    const next = applyGroupHidden(hidden, group, false)
+
+    expect(next).toEqual({})
+    expect(resolveGroupVisibility(group, next)).toBe('visible')
+  })
+
+  it('leaves keys belonging to other groups untouched', () => {
+    const other = { '/backend/sales/orders': true }
+
+    expect(applyGroupHidden(other, group, true)['/backend/sales/orders']).toBe(true)
+    expect(applyGroupHidden(other, group, false)).toEqual(other)
+  })
+
+  it('does not mutate the input map', () => {
+    const input = { '/backend/sales/orders': true }
+    const snapshot = { ...input }
+
+    applyGroupHidden(input, group, true)
+
+    expect(input).toEqual(snapshot)
+  })
+
+  it('reaches the same state as toggling each item by hand', () => {
+    const byHand = ALL_KEYS.reduce<Record<string, boolean>>((acc, key) => {
+      acc[key] = true
+      return acc
+    }, {})
+
+    expect(applyGroupHidden({}, group, true)).toEqual(byHand)
+  })
+
+  it('is idempotent', () => {
+    const once = applyGroupHidden({}, group, true)
+
+    expect(applyGroupHidden(once, group, true)).toEqual(once)
+  })
+})

package/src/backend/sidebar/customization-helpers.ts

@@ -156,6 +156,53 @@ export function applyCustomizationDraft(
   return result
 }
 
+/** Every item key a group owns, including nested children. */
+export function collectGroupItemKeys(group: SidebarGroup): string[] {
+  const keys: string[] = []
+  const walk = (items: SidebarItem[]) => {
+    for (const item of items) {
+      keys.push(resolveItemKey(item))
+      if (item.children?.length) walk(item.children)
+    }
+  }
+  walk(group.items)
+  return keys
+}
+
+/**
+ * Whether a group is fully visible, fully hidden, or in between. `AppShell` drops a group once every
+ * one of its items is hidden, so `'hidden'` is the state that removes the group from the sidebar.
+ */
+export function resolveGroupVisibility(
+  group: SidebarGroup,
+  hiddenItemIds: Record<string, boolean>,
+): 'visible' | 'hidden' | 'partial' {
+  const keys = collectGroupItemKeys(group)
+  if (keys.length === 0) return 'visible'
+  const hiddenCount = keys.filter((key) => hiddenItemIds[key]).length
+  if (hiddenCount === 0) return 'visible'
+  if (hiddenCount === keys.length) return 'hidden'
+  return 'partial'
+}
+
+/**
+ * Hides or shows every item in a group at once. Writes the same `hiddenItemIds` keys the per-item
+ * switches use, so the resulting settings are indistinguishable from reaching this state by toggling
+ * each item by hand — no new persisted shape, no migration.
+ */
+export function applyGroupHidden(
+  hiddenItemIds: Record<string, boolean>,
+  group: SidebarGroup,
+  hidden: boolean,
+): Record<string, boolean> {
+  const next = { ...hiddenItemIds }
+  for (const key of collectGroupItemKeys(group)) {
+    if (hidden) next[key] = true
+    else delete next[key]
+  }
+  return next
+}
+
 /**
  * Filters groups to include only main sidebar items.
  * Excludes items with pageContext 'settings' or 'profile' from customization.

package/src/backend/utils/__tests__/apiCall.test.ts

@@ -107,3 +107,64 @@ describe('readApiResultOrThrow', () => {
     expect(result).toBeNull()
   })
 })
+
+describe('aborted requests', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  function createAbortedBodyResponse(): Response {
+    const abortError = new Error('The operation was aborted.')
+    abortError.name = 'AbortError'
+    const response = {
+      ok: true,
+      status: 200,
+      headers: new Map<string, string>(),
+      text: jest.fn(async () => { throw abortError }),
+      clone: () => response,
+    } as unknown as Response
+    return response
+  }
+
+  it('rejects with AbortError instead of reporting an empty payload', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createAbortedBodyResponse())
+    const controller = new AbortController()
+    controller.abort()
+
+    await expect(
+      readApiResultOrThrow('/api/interactions', { signal: controller.signal }),
+    ).rejects.toMatchObject({ name: 'AbortError' })
+  })
+
+  it('does not mask a genuinely empty payload when the request was not aborted', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createMockResponse('', { status: 200 }))
+    const controller = new AbortController()
+
+    await expect(
+      readApiResultOrThrow('/api/interactions', { signal: controller.signal }),
+    ).rejects.toThrow('Missing response payload (200)')
+  })
+
+  it('keeps the caller-provided fallback when one is configured', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createAbortedBodyResponse())
+    const controller = new AbortController()
+    controller.abort()
+
+    const call = await apiCall<{ items: string[] }>(
+      '/api/interactions',
+      { signal: controller.signal },
+      { fallback: { items: [] } },
+    )
+    expect(call.result).toEqual({ items: [] })
+  })
+
+  it('propagates AbortError raised by a custom parser', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createMockResponse('{}', { status: 200 }))
+    const abortError = new Error('The operation was aborted.')
+    abortError.name = 'AbortError'
+
+    await expect(
+      apiCall('/api/interactions', undefined, { parse: async () => { throw abortError } }),
+    ).rejects.toMatchObject({ name: 'AbortError' })
+  })
+})

package/src/backend/utils/__tests__/customFieldForms.optionsPaging.test.ts

@@ -0,0 +1,95 @@
+/** @jest-environment node */
+
+const apiCall = jest.fn()
+
+jest.mock('../apiCall', () => ({
+  apiCall: (...args: unknown[]) => apiCall(...args),
+}))
+
+jest.mock('../../fields/registry', () => ({
+  FieldRegistry: { getInput: () => null },
+  loadGeneratedFieldRegistrations: async () => {},
+}))
+
+import { buildFormFieldFromCustomFieldDef } from '../customFieldForms'
+
+const okPage = (payload: Record<string, unknown>) => ({ ok: true, result: payload })
+
+const requestedUrls = () => apiCall.mock.calls.map(([url]) => url as string)
+
+const loadOptionsFor = (def: Parameters<typeof buildFormFieldFromCustomFieldDef>[0]) => {
+  const field = buildFormFieldFromCustomFieldDef(def)
+  const loadOptions = (field as { loadOptions?: (query?: string) => Promise<Array<{ value: string; label: string }>> })
+    .loadOptions
+  if (!loadOptions) throw new Error('[internal] expected the field to expose loadOptions')
+  return loadOptions
+}
+
+/**
+ * Guards the review finding on #4175: the entries route caps rows per response,
+ * so the generic `optionsUrl` loader behind every select/currency/relation and
+ * multi-dictionary custom field must page instead of dropping everything past
+ * the first page.
+ */
+describe('custom field remote options paging', () => {
+  beforeEach(() => {
+    apiCall.mockReset()
+  })
+
+  it('walks every page of a dictionary-backed multi-select', async () => {
+    apiCall
+      .mockResolvedValueOnce(
+        okPage({ items: [{ value: 'a', label: 'Alpha' }], total: 2, hasMore: true }),
+      )
+      .mockResolvedValueOnce(
+        okPage({ items: [{ value: 'b', label: 'Beta' }], total: 2, hasMore: false }),
+      )
+
+    const options = await loadOptionsFor({
+      key: 'tags',
+      kind: 'dictionary',
+      multi: true,
+      dictionaryId: 'dict-1',
+    })()
+
+    expect(requestedUrls()).toEqual([
+      '/api/dictionaries/dict-1/entries',
+      '/api/dictionaries/dict-1/entries?offset=1',
+    ])
+    expect(options).toEqual([
+      { value: 'a', label: 'Alpha' },
+      { value: 'b', label: 'Beta' },
+    ])
+  })
+
+  it('keeps the typeahead query on every page it requests', async () => {
+    apiCall
+      .mockResolvedValueOnce(okPage({ items: [{ value: 'a', label: 'Alpha' }], hasMore: true }))
+      .mockResolvedValueOnce(okPage({ items: [{ value: 'ab', label: 'Able' }], hasMore: false }))
+
+    await loadOptionsFor({ key: 'ref', kind: 'select', optionsUrl: '/api/refs' })('al')
+
+    expect(requestedUrls()[0]).toContain('query=al')
+    expect(requestedUrls()[1]).toContain('query=al')
+    expect(requestedUrls()[1]).toContain('offset=1')
+  })
+
+  it('issues one request for a route that does not report hasMore', async () => {
+    apiCall.mockResolvedValueOnce(okPage({ items: [{ value: 'usd', label: 'USD' }] }))
+
+    const options = await loadOptionsFor({ key: 'ref', kind: 'select', optionsUrl: '/api/refs' })()
+
+    expect(apiCall).toHaveBeenCalledTimes(1)
+    expect(options).toEqual([{ value: 'usd', label: 'USD' }])
+  })
+
+  it('returns no options when a page fails rather than a partial list', async () => {
+    apiCall
+      .mockResolvedValueOnce(okPage({ items: [{ value: 'a', label: 'Alpha' }], hasMore: true }))
+      .mockResolvedValueOnce({ ok: false, result: { error: 'Forbidden' } })
+
+    const options = await loadOptionsFor({ key: 'ref', kind: 'select', optionsUrl: '/api/refs' })()
+
+    expect(options).toEqual([])
+  })
+})