@open-mercato/ui 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3380.1.bb14509041

package/src/backend/notifications/NotificationPanel.tsx

@@ -1,9 +1,10 @@
 "use client"
 import * as React from 'react'
-import { X, Bell, CheckCheck, Loader2, RotateCcw } from 'lucide-react'
+import Link from 'next/link'
+import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
-import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'
+import { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'
 import { NotificationItem } from './NotificationItem'
 import type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
@@ -96,117 +97,119 @@ export function NotificationPanel({
     }
   }
 
+  // Preserve the body scroll lock contract that consumers (and integration
+  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which
+  // does not set `document.body.style.overflow` — we set it ourselves so the
+  // contract is observable.
   React.useEffect(() => {
-    if (!open) return
-    const prevOverflow = document.body.style.overflow
+    if (!open || typeof document === 'undefined') return
+    const previous = document.body.style.overflow
     document.body.style.overflow = 'hidden'
     return () => {
-      document.body.style.overflow = prevOverflow
+      document.body.style.overflow = previous
     }
   }, [open])
 
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && open) {
-        onOpenChange(false)
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open, onOpenChange])
-
-  if (!open) return null
-
   return (
-    <>
-      <div
-        className="fixed inset-0 z-overlay bg-black/20"
-        onClick={() => onOpenChange(false)}
-        aria-hidden="true"
-      />
-
-      <div
-        className="fixed right-0 top-0 z-modal h-full w-full max-w-md border-l bg-background shadow-lg"
-        role="dialog"
-        aria-modal="true"
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="gap-0 p-0"
+        hideClose
         aria-label={t('notifications.title', 'Notifications')}
       >
-        <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b px-4 py-3">
-            <div className="flex items-center gap-2">
-              <Bell className="h-5 w-5" />
-              <h2 className="font-semibold">{t('notifications.title', 'Notifications')}</h2>
-              {unreadCount > 0 && (
-                <span className="rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground">
-                  {unreadCount}
-                </span>
-              )}
-            </div>
-            <div className="flex items-center gap-2">
-              {unreadCount > 0 && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleMarkAllRead}
-                  disabled={markingAllRead}
-                >
-                  {markingAllRead ? (
-                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                  ) : (
-                    <CheckCheck className="mr-1 h-4 w-4" />
-                  )}
-                  {t('notifications.markAllRead', 'Mark all read')}
-                </Button>
-              )}
-              <IconButton variant="ghost" size="lg" onClick={() => onOpenChange(false)}>
-                <X className="h-5 w-5" />
-              </IconButton>
-            </div>
+        <div className="flex items-center justify-between gap-3 border-b px-5 py-4">
+          <SheetTitle className="text-base font-medium leading-6 tracking-tight text-foreground">
+            {t('notifications.title', 'Notifications')}
+          </SheetTitle>
+          <div className="flex items-center gap-1">
+            {unreadCount > 0 ? (
+              <button
+                type="button"
+                onClick={handleMarkAllRead}
+                disabled={markingAllRead}
+                className="inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50"
+              >
+                {markingAllRead ? <Loader2 className="size-3.5 animate-spin" /> : null}
+                {t('notifications.markAllRead', 'Mark all read')}
+              </button>
+            ) : null}
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              aria-label={t('notifications.close', 'Close notifications')}
+            >
+              <X className="size-4" />
+            </IconButton>
           </div>
+        </div>
 
-          <Tabs
-            value={filter}
-            onValueChange={(v) => setFilter(v as typeof filter)}
-            className="border-b"
-          >
-            <TabsList className="w-full justify-start rounded-none border-0 bg-transparent px-4">
-              <TabsTrigger value="all">
-                {t('notifications.filters.all', 'All')}
-              </TabsTrigger>
-              <TabsTrigger value="unread">
-                {t('notifications.filters.unread', 'Unread')}
-              </TabsTrigger>
-              <TabsTrigger value="action">
-                {t('notifications.filters.actionRequired', 'Action Required')}
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
+        <div role="tablist" className="flex items-center gap-5 border-b px-5 py-3.5">
+          {(['all', 'unread', 'action'] as const).map((value) => {
+            const isActive = filter === value
+            const label =
+              value === 'all'
+                ? t('notifications.filters.all', 'All')
+                : value === 'unread'
+                  ? t('notifications.filters.unread', 'Unread')
+                  : t('notifications.filters.actionRequired', 'Action Required')
+            return (
+              <button
+                key={value}
+                type="button"
+                role="tab"
+                aria-selected={isActive}
+                onClick={() => setFilter(value)}
+                className="relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
+                data-active={isActive}
+              >
+                <span>{label}</span>
+                {value === 'unread' && unreadCount > 0 ? (
+                  <span className="inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground">
+                    {unreadCount > 99 ? '99+' : unreadCount}
+                  </span>
+                ) : null}
+                {isActive ? (
+                  <span
+                    className="absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground"
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </button>
+            )
+          })}
+        </div>
 
-          {dismissUndo && onUndoDismiss && (
-            <div className="border-b bg-muted/50 px-4 py-2 text-sm">
-              <div className="flex items-center justify-between gap-3">
-                <span>
-                  {t('notifications.toast.dismissed', 'Notification dismissed')}
-                </span>
-                <Button variant="ghost" size="sm" onClick={() => onUndoDismiss()}>
-                  <RotateCcw className="mr-1 h-3 w-3" />
-                  {t('notifications.actions.undo', 'Undo')}
-                </Button>
-              </div>
+        {dismissUndo && onUndoDismiss && (
+          <div className="border-b bg-muted/50 px-4 py-2 text-sm">
+            <div className="flex items-center justify-between gap-3">
+              <span>
+                {t('notifications.toast.dismissed', 'Notification dismissed')}
+              </span>
+              <Button variant="ghost" size="sm" onClick={() => onUndoDismiss()}>
+                <RotateCcw className="mr-1 h-3 w-3" />
+                {t('notifications.actions.undo', 'Undo')}
+              </Button>
             </div>
-          )}
+          </div>
+        )}
 
-          <div className="flex-1 overflow-y-auto overscroll-contain">
-            {filteredNotifications.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                <Bell className="mb-2 h-8 w-8 opacity-50" />
-                <p>{t('notifications.empty', 'No notifications')}</p>
+        <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+          {filteredNotifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
+              <div className="flex size-12 items-center justify-center rounded-full bg-muted/50">
+                <Bell className="size-5" aria-hidden="true" />
               </div>
-            ) : (
-              <div className="divide-y">
-                {filteredNotifications.map((notification) => (
+              <p className="text-sm">{t('notifications.empty', 'No notifications')}</p>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-1 p-2">
+              {filteredNotifications.map((notification, idx) => (
+                <React.Fragment key={notification.id}>
+                  {idx > 0 ? <div className="my-px h-px bg-border" aria-hidden="true" /> : null}
                   <NotificationItem
-                    key={notification.id}
                     notification={notification}
                     onMarkAsRead={() => onMarkAsRead(notification.id)}
                     onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}
@@ -214,12 +217,33 @@ export function NotificationPanel({
                     t={t}
                     customRenderer={customRenderers?.[notification.type]}
                   />
-                ))}
-              </div>
-            )}
+                </React.Fragment>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>{t('notifications.footer.useHint', 'Use')}</span>
+            <span className="inline-flex items-center rounded border bg-muted/50 px-1 py-0.5">
+              <ArrowUp className="size-3" aria-hidden="true" />
+            </span>
+            <span className="inline-flex items-center rounded border bg-muted/50 px-1 py-0.5">
+              <ArrowDown className="size-3" aria-hidden="true" />
+            </span>
+            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>
           </div>
+          <Link
+            href="/backend/config/notifications"
+            onClick={() => onOpenChange(false)}
+            className="inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <Settings2 className="size-3.5" aria-hidden="true" />
+            {t('notifications.footer.manage', 'Manage notifications')}
+          </Link>
         </div>
-      </div>
-    </>
+      </SheetContent>
+    </Sheet>
   )
 }

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

@@ -0,0 +1,298 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen, within } from '@testing-library/react'
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbStatic,
+} from '../breadcrumb'
+
+describe('Breadcrumb primitive', () => {
+  it('renders a <nav> with aria-label="Breadcrumb"', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Home</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(nav).toBeInTheDocument()
+    expect(nav).toHaveAttribute('data-slot', 'breadcrumb')
+    expect(nav).toHaveAttribute('data-divider', 'slash')
+  })
+
+  it('marks the last item with aria-current="page"', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const current = screen.getByText('Current')
+    expect(current).toHaveAttribute('aria-current', 'page')
+    expect(current).toHaveAttribute('data-slot', 'breadcrumb-page')
+  })
+
+  it('renders <ol> for the list and <li> for items + separators', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    const list = within(nav).getByRole('list')
+    expect(list.tagName).toBe('OL')
+    const listItems = within(nav).getAllByRole('listitem')
+    expect(listItems).toHaveLength(2)
+  })
+
+  it('renders slash separator by default', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const separator = document.querySelector('[data-slot="breadcrumb-separator"]')!
+    expect(separator).toHaveAttribute('aria-hidden', 'true')
+    expect(separator).toHaveAttribute('data-divider', 'slash')
+    expect(separator.textContent).toContain('/')
+  })
+
+  it('renders arrow separator (ChevronRight svg) when divider="arrow"', () => {
+    render(
+      <Breadcrumb divider="arrow">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const separator = document.querySelector('[data-slot="breadcrumb-separator"]')!
+    expect(separator).toHaveAttribute('data-divider', 'arrow')
+    expect(separator.querySelector('svg')).not.toBeNull()
+  })
+
+  it('renders dot separator when divider="dot"', () => {
+    render(
+      <Breadcrumb divider="dot">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const separator = document.querySelector('[data-slot="breadcrumb-separator"]')!
+    expect(separator).toHaveAttribute('data-divider', 'dot')
+    expect(separator.textContent).toContain('·')
+  })
+
+  it('allows a per-separator divider override', () => {
+    render(
+      <Breadcrumb divider="slash">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/a">A</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator divider="arrow" data-testid="custom-sep" />
+          <BreadcrumbItem>
+            <BreadcrumbPage>B</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const sep = screen.getByTestId('custom-sep')
+    expect(sep).toHaveAttribute('data-divider', 'arrow')
+    expect(sep.querySelector('svg')).not.toBeNull()
+  })
+
+  it('BreadcrumbLink renders an <a> with hover underline classes', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/customers">Customers</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const link = screen.getByRole('link', { name: 'Customers' })
+    expect(link.tagName).toBe('A')
+    expect(link).toHaveAttribute('href', '/customers')
+    expect(link.className).toContain('hover:text-foreground')
+    expect(link.className).toContain('text-muted-foreground')
+  })
+
+  it('BreadcrumbLink with asChild slots the child element', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/people" data-testid="slotted">People</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const slotted = screen.getByTestId('slotted')
+    expect(slotted.tagName).toBe('A')
+    expect(slotted).toHaveAttribute('href', '/people')
+    expect(slotted).toHaveAttribute('data-slot', 'breadcrumb-link')
+    expect(slotted.className).toContain('hover:text-foreground')
+  })
+
+  it('BreadcrumbLink renders icon children alongside the label', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">
+              <span data-testid="home-icon">H</span>
+              Home
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const link = screen.getByRole('link', { name: 'H Home' })
+    expect(within(link).getByTestId('home-icon')).toBeInTheDocument()
+  })
+
+  it('BreadcrumbLink asChild preserves aria-label on the slotted icon-only anchor', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild aria-label="Dashboard">
+              <a href="/backend" data-testid="home-link">
+                <svg data-testid="home-svg" />
+              </a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const link = screen.getByRole('link', { name: 'Dashboard' })
+    expect(link).toHaveAttribute('href', '/backend')
+    expect(link).toHaveAttribute('data-slot', 'breadcrumb-link')
+    expect(within(link).getByTestId('home-svg')).toBeInTheDocument()
+  })
+
+  it('BreadcrumbList renders nothing when it has no children', () => {
+    const { container } = render(
+      <Breadcrumb>
+        <BreadcrumbList>{null}</BreadcrumbList>
+      </Breadcrumb>,
+    )
+    expect(container.querySelector('ol')).toBeNull()
+  })
+
+  it('BreadcrumbLink default classes include truncate and a viewport-bounded max-width', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const link = screen.getByRole('link', { name: 'Products' })
+    expect(link.className).toContain('truncate')
+    expect(link.className).toContain('max-w-[40vw]')
+    expect(link.className).toContain('md:max-w-[28vw]')
+  })
+
+  it('BreadcrumbLink forwards the title attribute for native tooltip on truncated labels', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/x" title="A very long category name that overflows">
+              A very long category name that overflows
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('title', 'A very long category name that overflows')
+  })
+
+  it('BreadcrumbStatic renders muted text without aria-current or cursor affordance', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbStatic>Settings</BreadcrumbStatic>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const node = screen.getByText('Settings')
+    expect(node).toHaveAttribute('data-slot', 'breadcrumb-static')
+    expect(node).not.toHaveAttribute('aria-current')
+    expect(node.className).toContain('text-muted-foreground')
+    expect(node.className).toContain('select-none')
+  })
+
+  it('BreadcrumbEllipsis renders MoreHorizontal icon and an sr-only label', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbEllipsis />
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    )
+    const ellipsis = document.querySelector('[data-slot="breadcrumb-ellipsis"]')!
+    expect(ellipsis).toBeInTheDocument()
+    expect(ellipsis.querySelector('svg')).not.toBeNull()
+    expect(ellipsis.textContent).toContain('More')
+  })
+})