@open-mercato/ui 0.5.1-develop.2975.ccbadc8198 → 0.5.1-develop.2996.ce62fd491c

package/src/backend/CrudForm.tsx

@@ -779,7 +779,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     // their own protection (or have none by design) keep their pre-existing behavior.
     if ((embedded && !trackDirtyWhenEmbedded) || !hasUnsavedChanges) return
     const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
-      if (!isDirtyRef.current) return
+      if (!isDirtyRef.current || submitNavigationBypassRef.current) return
       event.preventDefault()
       event.returnValue = ''
     }

package/src/backend/__tests__/AppShell.test.tsx

@@ -313,7 +313,7 @@ describe('AppShell', () => {
     )
 
     await waitFor(() => {
-      expect(screen.getByRole('link', { name: 'User Entities' })).toHaveClass('bg-background')
+      expect(screen.getByRole('link', { name: 'User Entities' })).toHaveClass('bg-muted')
       expect(screen.getByRole('link', { name: 'Calendar Entity' })).toBeInTheDocument()
     })
   })

package/src/backend/__tests__/CollapsibleZoneLayout.test.tsx

@@ -228,4 +228,105 @@ describe('CollapsibleZoneLayout', () => {
     })
     expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth', block: 'start' })
   })
+
+  it('focuses the first input field inside the activated section when available', async () => {
+    currentWidth = 1180
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      writable: true,
+      value: currentWidth,
+    })
+    const scrollIntoView = jest.fn()
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      configurable: true,
+      writable: true,
+      value: scrollIntoView,
+    })
+
+    const { container } = renderWithProviders(
+      <CollapsibleZoneLayout
+        zone1={(
+          <div id="collapsible-group-wrapper-personalData">
+            <button type="button" aria-controls="collapsible-group-personalData" aria-expanded="true">Personal group</button>
+            <input type="hidden" name="hidden-field" defaultValue="hidden" />
+            <input type="text" name="first-name" placeholder="First name" />
+            <input type="text" name="last-name" placeholder="Last name" />
+          </div>
+        )}
+        zone2={<div>Zone 2</div>}
+        entityName="Ada Lovelace"
+        pageType="person-v2"
+        sections={[
+          { id: 'personalData', icon: User, label: 'Personal data' },
+        ]}
+      />,
+      { dict: {} },
+    )
+
+    const layout = container.firstElementChild as HTMLElement
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'collapsed')
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Personal data' }))
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'stacked')
+      expect(screen.getByPlaceholderText('First name')).toHaveFocus()
+    })
+  })
+
+  it('expands a collapsed inner group when activated from the rail', async () => {
+    currentWidth = 1180
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      writable: true,
+      value: currentWidth,
+    })
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      configurable: true,
+      writable: true,
+      value: jest.fn(),
+    })
+
+    const headingClickHandler = jest.fn()
+
+    const { container } = renderWithProviders(
+      <CollapsibleZoneLayout
+        zone1={(
+          <div id="collapsible-group-wrapper-personalData">
+            <button
+              type="button"
+              aria-controls="collapsible-group-personalData"
+              aria-expanded="false"
+              onClick={headingClickHandler}
+            >
+              Personal group
+            </button>
+          </div>
+        )}
+        zone2={<div>Zone 2</div>}
+        entityName="Ada Lovelace"
+        pageType="person-v2"
+        sections={[
+          { id: 'personalData', icon: User, label: 'Personal data' },
+        ]}
+      />,
+      { dict: {} },
+    )
+
+    const layout = container.firstElementChild as HTMLElement
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'collapsed')
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Personal data' }))
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'stacked')
+      expect(headingClickHandler).toHaveBeenCalled()
+    })
+  })
 })

package/src/backend/__tests__/CrudForm.navigation.test.tsx

@@ -153,4 +153,46 @@ describe('CrudForm unsaved navigation guard', () => {
     expect(confirmDialogMock).not.toHaveBeenCalled()
     expect(window.location.pathname).toBe('/after-save')
   })
+
+  it('suppresses the native beforeunload dialog while the submit-bypass flag is active (regression: #1733)', async () => {
+    let beforeUnloadDuringSubmit: BeforeUnloadEvent | null = null
+    const onSubmit = jest.fn(async () => {
+      const event = new Event('beforeunload', { cancelable: true }) as BeforeUnloadEvent
+      Object.defineProperty(event, 'returnValue', { writable: true, value: undefined })
+      window.dispatchEvent(event)
+      beforeUnloadDuringSubmit = event
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm title="Form" fields={fields} initialValues={{ name: 'Alice' }} onSubmit={onSubmit} />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.confirmUnsavedChanges': 'Unsaved changes',
+        },
+      },
+    )
+
+    const input = container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
+    const form = container.querySelector('form') as HTMLFormElement
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'Alice updated' } })
+    })
+
+    const dirtyEvent = new Event('beforeunload', { cancelable: true }) as BeforeUnloadEvent
+    Object.defineProperty(dirtyEvent, 'returnValue', { writable: true, value: undefined })
+    window.dispatchEvent(dirtyEvent)
+    expect(dirtyEvent.defaultPrevented).toBe(true)
+
+    await act(async () => {
+      fireEvent.submit(form)
+      await Promise.resolve()
+    })
+
+    expect(onSubmit).toHaveBeenCalled()
+    expect(beforeUnloadDuringSubmit).not.toBeNull()
+    expect(beforeUnloadDuringSubmit!.defaultPrevented).toBe(false)
+    expect(beforeUnloadDuringSubmit!.returnValue).toBeUndefined()
+  })
 })

package/src/backend/__tests__/SidebarCustomizationEditor.test.tsx

@@ -0,0 +1,200 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen, waitFor } from '@testing-library/react'
+import { SidebarCustomizationEditor } from '../sidebar/SidebarCustomizationEditor'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+type ApiCallResult<T> = {
+  ok: boolean
+  status: number
+  result: T | null
+  response: unknown
+  cacheStatus: 'hit' | 'miss' | null
+}
+
+const apiCallMock = jest.fn<Promise<ApiCallResult<unknown>>, [string, RequestInit | undefined]>()
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: (...args: unknown[]) => apiCallMock(args[0] as string, args[1] as RequestInit | undefined),
+  withScopedApiRequestHeaders: (
+    _headers: Record<string, string>,
+    operation: () => Promise<unknown>,
+  ) => operation(),
+}))
+
+const flashMock = jest.fn()
+jest.mock('../FlashMessages', () => ({
+  flash: (...args: unknown[]) => flashMock(...args),
+}))
+
+jest.mock('next/image', () => (props: { alt?: string }) => {
+  const React = require('react')
+  return React.createElement('img', { alt: props.alt, ...props })
+})
+
+jest.mock('../BackendChromeProvider', () => ({
+  useBackendChrome: () => ({ payload: null, isLoading: false }),
+}))
+
+jest.mock('../injection/resolveInjectedIcon', () => ({
+  resolveInjectedIcon: () => null,
+}))
+
+jest.mock('../injection/InjectionSpot', () => ({
+  InjectionSpot: () => null,
+  useInjectionSpotEvents: () => ({
+    triggerEvent: jest.fn(async () => ({ ok: true, requestHeaders: {} })),
+  }),
+}))
+
+jest.mock('../injection/mutationEvents', () => ({
+  GLOBAL_MUTATION_INJECTION_SPOT_ID: 'backend-mutation:global',
+  dispatchBackendMutationError: jest.fn(),
+}))
+
+const fakeGroups = [
+  {
+    id: 'core',
+    name: 'Core',
+    items: [
+      { href: '/backend/users', title: 'Users' },
+      { href: '/backend/roles', title: 'Roles' },
+    ],
+  },
+  {
+    id: 'catalog',
+    name: 'Catalog',
+    items: [
+      { href: '/backend/products', title: 'Products' },
+    ],
+  },
+]
+
+const dict: Record<string, string> = {
+  'appShell.sidebarCustomizationHeading': 'Sidebar customization',
+  'appShell.sidebarCustomizationLoading': 'Loading preferences…',
+  'appShell.sidebarCustomizationLoadError': 'We couldn’t load your sidebar preferences.',
+  'appShell.sidebarCustomizationSave': 'Save',
+  'appShell.sidebarCustomizationCancel': 'Cancel',
+  'appShell.sidebarCustomizationReset': 'Reset',
+  'appShell.sidebarCustomizationDragToReorder': 'Drag to reorder',
+  'appShell.sidebarCustomizationVariantNew': 'Add new variant',
+  'appShell.sidebarCustomizationVariantsEmpty': 'No saved variants yet',
+}
+
+function setApiCallSequence(responses: Array<{ url: RegExp; response: ApiCallResult<unknown> }>) {
+  apiCallMock.mockImplementation((url: string) => {
+    const match = responses.find((entry) => entry.url.test(url))
+    if (!match) {
+      throw new Error(`apiCall mock: no response configured for ${url}`)
+    }
+    return Promise.resolve(match.response)
+  })
+}
+
+function okResult<T>(result: T): ApiCallResult<T> {
+  return { ok: true, status: 200, result, response: {}, cacheStatus: null }
+}
+
+function errorResult(status: number): ApiCallResult<unknown> {
+  return { ok: false, status, result: null, response: {}, cacheStatus: null }
+}
+
+beforeEach(() => {
+  apiCallMock.mockReset()
+  flashMock.mockReset()
+})
+
+describe('SidebarCustomizationEditor', () => {
+  it('shows the loading skeleton before async data resolves', () => {
+    setApiCallSequence([
+      { url: /\/api\/auth\/sidebar\/variants/, response: okResult({ locale: 'en', variants: [] }) },
+      { url: /\/api\/auth\/sidebar\/preferences/, response: okResult({ canApplyToRoles: false, roles: [] }) },
+    ])
+
+    const { container } = renderWithProviders(
+      <SidebarCustomizationEditor groups={fakeGroups} />,
+      { dict },
+    )
+
+    expect(container.querySelector('.animate-pulse')).not.toBeNull()
+    expect(screen.queryByLabelText('Drag to reorder')).not.toBeInTheDocument()
+  })
+
+  it('renders draggable item handles after variants load', async () => {
+    setApiCallSequence([
+      { url: /\/api\/auth\/sidebar\/variants/, response: okResult({ locale: 'en', variants: [] }) },
+      { url: /\/api\/auth\/sidebar\/preferences/, response: okResult({ canApplyToRoles: false, roles: [] }) },
+    ])
+
+    renderWithProviders(<SidebarCustomizationEditor groups={fakeGroups} />, { dict })
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading preferences…')).not.toBeInTheDocument()
+    })
+
+    const dragHandles = await screen.findAllByLabelText('Drag to reorder')
+    expect(dragHandles.length).toBeGreaterThan(0)
+
+    expect(screen.getByText('Variant name')).toBeInTheDocument()
+  })
+
+  it('surfaces a load error when the variants endpoint fails', async () => {
+    setApiCallSequence([
+      { url: /\/api\/auth\/sidebar\/variants/, response: errorResult(500) },
+      { url: /\/api\/auth\/sidebar\/preferences/, response: okResult({ canApplyToRoles: false, roles: [] }) },
+    ])
+
+    renderWithProviders(<SidebarCustomizationEditor groups={fakeGroups} />, { dict })
+
+    await waitFor(() => {
+      expect(screen.getByText('We couldn’t load your sidebar preferences.')).toBeInTheDocument()
+    })
+  })
+
+  it('renders the role-apply target list when canApplyToRoles is true', async () => {
+    setApiCallSequence([
+      { url: /\/api\/auth\/sidebar\/variants/, response: okResult({ locale: 'en', variants: [] }) },
+      {
+        url: /\/api\/auth\/sidebar\/preferences/,
+        response: okResult({
+          canApplyToRoles: true,
+          roles: [
+            { id: 'role-staff', name: 'Staff', hasPreference: false },
+            { id: 'role-admin', name: 'Admin', hasPreference: true },
+          ],
+        }),
+      },
+    ])
+
+    renderWithProviders(<SidebarCustomizationEditor groups={fakeGroups} />, { dict })
+
+    await waitFor(() => {
+      expect(screen.getByText('Staff')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Admin')).toBeInTheDocument()
+  })
+
+  it('does not render the role-apply target list when canApplyToRoles is false', async () => {
+    setApiCallSequence([
+      { url: /\/api\/auth\/sidebar\/variants/, response: okResult({ locale: 'en', variants: [] }) },
+      {
+        url: /\/api\/auth\/sidebar\/preferences/,
+        response: okResult({
+          canApplyToRoles: false,
+          roles: [{ id: 'role-staff', name: 'Staff', hasPreference: false }],
+        }),
+      },
+    ])
+
+    renderWithProviders(<SidebarCustomizationEditor groups={fakeGroups} />, { dict })
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading preferences…')).not.toBeInTheDocument()
+    })
+    expect(screen.queryByText('Staff')).not.toBeInTheDocument()
+  })
+})

package/src/backend/crud/CollapsibleZoneLayout.tsx

@@ -125,9 +125,34 @@ export function CollapsibleZoneLayout({
       const target =
         document.getElementById(section.targetId ?? `collapsible-group-wrapper-${section.id}`)
         ?? document.getElementById(`collapsible-group-${section.id}`)
-      const headingButton = target?.querySelector<HTMLButtonElement>('button[aria-controls]')
-      target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      headingButton?.focus({ preventScroll: true })
+      if (!target) return
+      const headingButton = target.querySelector<HTMLButtonElement>('button[aria-controls]')
+      // If the inner CollapsibleGroup is currently collapsed, expand it so its
+      // contents become visible and tabbable for the user who just navigated here.
+      if (headingButton?.getAttribute('aria-expanded') === 'false') {
+        headingButton.click()
+      }
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      // Prefer focusing the first focusable input/textarea/select inside the
+      // section so the user can start typing immediately. Skip hidden, disabled,
+      // or non-interactive controls. Fall back to the section heading.
+      requestAnimationFrame(() => {
+        const focusables = Array.from(
+          target.querySelectorAll<HTMLElement>(
+            'input:not([type="hidden"]), textarea, select, [contenteditable="true"]',
+          ),
+        )
+        const firstInput = focusables.find((el) => {
+          if (el.hasAttribute('disabled') || el.getAttribute('aria-hidden') === 'true') return false
+          if (el instanceof HTMLInputElement && el.readOnly) return false
+          return true
+        })
+        if (firstInput) {
+          firstInput.focus({ preventScroll: true })
+          return
+        }
+        headingButton?.focus({ preventScroll: true })
+      })
     })
   }, [canCollapse, canShowSideBySide, setCollapsed])
 

package/src/backend/section-page/SectionNav.tsx

@@ -53,22 +53,25 @@ export function SectionNav({
   const renderItem = (item: SectionNavItem) => {
     const isActive = activePath === item.href || activePath.startsWith(item.href + '/')
     const label = item.labelKey ? t(item.labelKey, item.label) : item.label
+    const base = collapsed ? 'w-10 h-10 justify-center' : 'w-full py-2 gap-2'
+    const spacingStyle = !collapsed ? { paddingLeft: '12px', paddingRight: '12px' } : undefined
 
     return (
       <Link
         key={item.id}
         href={item.href}
-        className={`relative text-sm rounded px-3 py-1.5 flex items-center gap-2 transition-colors ${
+        className={`relative text-sm font-medium rounded-lg inline-flex items-center transition-colors ${base} ${
           isActive
-            ? 'bg-background border shadow-sm font-medium'
-            : 'hover:bg-accent hover:text-accent-foreground'
+            ? 'bg-muted text-foreground'
+            : 'text-muted-foreground hover:bg-muted'
         }`}
+        style={spacingStyle}
         title={collapsed ? label : undefined}
       >
         {isActive && (
-          <span className="absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" />
+          <span aria-hidden className={`absolute ${collapsed ? 'left-[-20px]' : 'left-[-12px]'} top-2 w-1 h-5 rounded-r bg-foreground`} />
         )}
-        <span className="flex items-center justify-center shrink-0 text-muted-foreground">
+        <span className="flex items-center justify-center shrink-0">
           {item.icon ?? DefaultIcon}
         </span>
         {!collapsed && <span className="truncate">{label}</span>}
@@ -103,11 +106,13 @@ export function SectionNav({
     return (
       <div key={section.id} className="flex flex-col gap-1">
         {!collapsed && (
-          <div className="px-3 py-1.5 text-xs uppercase text-muted-foreground/80 font-medium">
+          <div className="w-full px-1 py-1 text-xs font-medium uppercase tracking-wider text-muted-foreground/70">
             {sectionLabel}
           </div>
         )}
-        {sortedItems.map(renderItem)}
+        <div className={`flex flex-col ${collapsed ? 'items-center' : ''} gap-1`}>
+          {sortedItems.map(renderItem)}
+        </div>
       </div>
     )
   }
@@ -115,7 +120,7 @@ export function SectionNav({
   const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 
   return (
-    <nav className={`flex flex-col gap-4 p-3 ${collapsed ? 'items-center' : ''}`}>
+    <nav className={`flex flex-col gap-3 ${collapsed ? 'items-center' : ''}`}>
       <div className={`flex items-center ${collapsed ? 'justify-center' : 'justify-between'} gap-2`}>
         {!collapsed && (
           <span className="text-sm font-medium truncate">{resolvedTitle}</span>
@@ -131,8 +136,7 @@ export function SectionNav({
           {collapsed ? <ChevronRight className="size-4" /> : <ChevronLeft className="size-4" />}
         </IconButton>
       </div>
-      <div className="border-t" />
-      <div className={`flex flex-col gap-4 ${collapsed ? 'items-center' : ''}`}>
+      <div className={`flex flex-col gap-2 ${collapsed ? 'items-center' : ''}`}>
         {sortedSections.map(renderSection)}
       </div>
     </nav>

package/src/backend/section-page/SectionPage.tsx

@@ -15,16 +15,21 @@ export function SectionPage({
 
   return (
     <div className="flex h-full min-h-[calc(100vh-8rem)]">
-      <aside className={`${collapsed ? 'w-16' : 'w-64'} border-r bg-muted/30 overflow-y-auto shrink-0 transition-all duration-200`}>
-        <SectionNav
-          title={title}
-          titleKey={titleKey}
-          sections={sections}
-          activePath={activePath}
-          userFeatures={userFeatures}
-          collapsed={collapsed}
-          onToggleCollapse={() => setCollapsed(!collapsed)}
-        />
+      <aside className={`${collapsed ? 'w-16' : 'w-64'} border-r bg-background shrink-0 py-4 transition-all duration-200`}>
+        {/* Padding lives on the inner scroll container so the absolute active-marker
+            (left: -12px from each link) renders inside the inner div's padding box —
+            CSS clips at padding-box edges, so a marker placed there stays visible. */}
+        <div className={`h-full overflow-y-auto scrollbar-hide ${collapsed ? 'pl-2 pr-1' : 'pl-3 pr-1'}`}>
+          <SectionNav
+            title={title}
+            titleKey={titleKey}
+            sections={sections}
+            activePath={activePath}
+            userFeatures={userFeatures}
+            collapsed={collapsed}
+            onToggleCollapse={() => setCollapsed(!collapsed)}
+          />
+        </div>
       </aside>
       <main className="flex-1 overflow-y-auto p-6">
         {children}