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

package/src/portal/hooks/usePortalNotifications.ts

@@ -2,6 +2,11 @@
 import * as React from 'react'
 import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
 import { apiCall } from '../../backend/utils/apiCall'
+import {
+  PORTAL_BRIDGE_STATUS_DOM_NAME,
+  readPortalBridgeHealth,
+  type PortalBridgeStatusDetail,
+} from './portalBridgeStatus'
 
 export type UsePortalNotificationsResult = {
   notifications: NotificationDto[]
@@ -28,13 +33,11 @@ async function fetchJson<T>(url: string, init?: RequestInit): Promise<T | null>
 }
 
 /**
- * Portal notification hook — polls customer notification endpoints.
+ * Portal notification hook with SSE-first delivery and polling fallback.
  *
- * Fetches notifications from `/api/customer_accounts/portal/notifications`
- * and unread count from `.../unread-count`. Polls every 8 seconds.
- *
- * Also listens for portal SSE events (`notifications.notification.created`)
- * to trigger immediate refresh.
+ * Performs an initial list/count reconciliation, refreshes on notification,
+ * reconnect, and focus events, and polls every 8 seconds until the portal
+ * event bridge explicitly reports a healthy connection.
  */
 export function usePortalNotifications(): UsePortalNotificationsResult {
   const [notifications, setNotifications] = React.useState<NotificationDto[]>([])
@@ -66,18 +69,50 @@ export function usePortalNotifications(): UsePortalNotificationsResult {
     setIsLoading(false)
   }, [])
 
-  // Poll
+  const [usePolling, setUsePolling] = React.useState(() => {
+    if (typeof window === 'undefined' || !('EventSource' in window)) {
+      return true
+    }
+    return readPortalBridgeHealth() !== true
+  })
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !('EventSource' in window)) {
+      return
+    }
+    const handleStatusChange = (event: Event) => {
+      const detail = (event as CustomEvent<PortalBridgeStatusDetail>).detail
+      if (detail && typeof detail.healthy === 'boolean') {
+        setUsePolling(!detail.healthy)
+        if (!detail.healthy) {
+          fetchAll()
+        }
+      }
+    }
+    window.addEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)
+    return () => {
+      window.removeEventListener(PORTAL_BRIDGE_STATUS_DOM_NAME, handleStatusChange)
+    }
+  }, [fetchAll])
+
   React.useEffect(() => {
     fetchAll()
+  }, [fetchAll])
+
+  React.useEffect(() => {
+    if (!usePolling) return
     const interval = setInterval(fetchAll, POLL_INTERVAL)
     return () => clearInterval(interval)
-  }, [fetchAll])
+  }, [fetchAll, usePolling])
 
-  // Listen for portal SSE notification events
   React.useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail
-      if (detail?.id === 'notifications.notification.created' || detail?.id === 'notifications.notification.batch_created') {
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent<{ id?: string }>).detail
+      if (
+        detail?.id === 'notifications.notification.created' ||
+        detail?.id === 'notifications.notification.batch_created' ||
+        detail?.id === 'om:portal-bridge:reconnected'
+      ) {
         fetchAll()
       }
     }
@@ -85,6 +120,14 @@ export function usePortalNotifications(): UsePortalNotificationsResult {
     return () => window.removeEventListener('om:portal-event', handler)
   }, [fetchAll])
 
+  React.useEffect(() => {
+    const onFocus = () => {
+      fetchAll()
+    }
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [fetchAll])
+
   const markAsRead = React.useCallback(async (id: string) => {
     await fetchJson(`${BASE}/${id}/read`, { method: 'PUT' })
     setNotifications((prev) =>

package/src/portal/utils/__tests__/nav.test.ts

@@ -97,7 +97,7 @@ describe('buildPortalNav', () => {
     expect(groups).toEqual([{ id: 'main', items: [expect.objectContaining({ label: 'Orders' })] }])
   })
 
-  it('bypasses feature checks when isPortalAdmin is true', () => {
+  it('does not let the deprecated portal-admin flag bypass effective features', () => {
     const routes: FrontendRouteManifestEntry[] = [
       makeRoute({
         pattern: '/[orgSlug]/portal/orders',
@@ -107,7 +107,7 @@ describe('buildPortalNav', () => {
     ]
 
     const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [], isPortalAdmin: true })
-    expect(groups[0].items[0].label).toBe('Orders')
+    expect(groups).toEqual([])
   })
 
   it('ignores navHidden pages even when nav is declared', () => {

package/src/portal/utils/nav.ts

@@ -22,9 +22,9 @@ export type BuildPortalNavOptions = {
   routes: readonly FrontendRouteManifestEntry[]
   /** Current customer org slug — substituted into `[orgSlug]` patterns. */
   orgSlug: string
-  /** Feature strings granted to the current customer (may include wildcards). */
+  /** Concrete effective features granted to the current customer. */
   grantedFeatures: readonly string[]
-  /** If true, bypass feature checks (portal admin). Defaults to false. */
+  /** @deprecated Portal admins must receive concrete effective features. */
   isPortalAdmin?: boolean
 }
 
@@ -75,7 +75,6 @@ export function buildPortalNav({
   routes,
   orgSlug,
   grantedFeatures,
-  isPortalAdmin = false,
 }: BuildPortalNavOptions): PortalNavGroup[] {
   const mainItems: PortalNavItem[] = []
   const accountItems: PortalNavItem[] = []
@@ -96,7 +95,7 @@ export function buildPortalNav({
     const nav = route.nav!
 
     const requireFeatures = route.requireCustomerFeatures ?? []
-    if (!isPortalAdmin && requireFeatures.length) {
+    if (requireFeatures.length) {
       if (!hasAllFeatures(grantedFeatures as string[], requireFeatures as string[])) continue
     }
 

package/src/primitives/ErrorNotice.tsx

@@ -12,7 +12,7 @@ export function ErrorNotice({ title, message, action }: {
   const resolvedTitle = title ?? t('ui.errors.defaultTitle', 'Something went wrong')
   const resolvedMessage = message ?? t('ui.errors.defaultMessage', 'Unable to load data. Please try again.')
   return (
-    <Alert variant="destructive">
+    <Alert status="error">
       <AlertTitle>{resolvedTitle}</AlertTitle>
       <AlertDescription>{resolvedMessage}</AlertDescription>
       {action ? <div className="mt-2">{action}</div> : null}

package/src/primitives/Notice.tsx

@@ -6,12 +6,12 @@ import { createLogger } from '@open-mercato/shared/lib/logger'
 const logger = createLogger('ui')
 
 /**
- * @deprecated Use <Alert variant="destructive|warning|info"> instead.
+ * @deprecated Use <Alert status="error|warning|information"> instead.
  * Migration guide: docs/design-system/migration-tables.md#j3-component-mapping
  *
- * Notice variant="error"   → Alert variant="destructive"
- * Notice variant="warning" → Alert variant="warning"
- * Notice variant="info"    → Alert variant="info"
+ * Notice variant="error"   → Alert status="error"
+ * Notice variant="warning" → Alert status="warning"
+ * Notice variant="info"    → Alert status="information"
  */
 
 const variantStyles = {
@@ -51,7 +51,7 @@ export function Notice({
   compact = false,
 }: NoticeProps) {
   if (process.env.NODE_ENV === 'development') {
-    logger.warn('<Notice> is deprecated. Use <Alert variant="destructive|warning|info"> instead. See: docs/design-system/migration-tables.md')
+    logger.warn('<Notice> is deprecated. Use <Alert status="error|warning|information"> instead. See: docs/design-system/migration-tables.md')
   }
 
   const styles = variantStyles[variant]

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

@@ -0,0 +1,70 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { Button, buttonVariants } from '../button'
+
+type ButtonVariant = NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
+
+function classesOf(variant: ButtonVariant) {
+  return buttonVariants({ variant }).split(/\s+/).filter(Boolean)
+}
+
+describe('Button destructive variants', () => {
+  // The DS policy: `destructive` is the quiet trigger (red text on a calm
+  // surface) so a page full of delete buttons does not train users to ignore
+  // red; `destructive-solid` is the filled form, reserved for the single
+  // point-of-no-return confirmation inside a dialog. These tests pin both
+  // halves of that contract — swapping them back is a visual regression that
+  // no other test would catch.
+
+  it('destructive is quiet: destructive border and text on the page surface', () => {
+    const classes = classesOf('destructive')
+    expect(classes).toContain('border')
+    expect(classes).toContain('border-destructive')
+    expect(classes).toContain('bg-background')
+    expect(classes).toContain('text-destructive')
+  })
+
+  it('destructive does not fill with the destructive surface', () => {
+    const classes = classesOf('destructive')
+    expect(classes).not.toContain('bg-destructive')
+    expect(classes).not.toContain('text-white')
+  })
+
+  it('destructive-solid fills with the destructive surface and white glyph', () => {
+    const classes = classesOf('destructive-solid')
+    expect(classes).toContain('bg-destructive')
+    expect(classes).toContain('text-white')
+    expect(classes).not.toContain('border-destructive')
+  })
+
+  it('destructive-solid ships no dark background override', () => {
+    // `--destructive` is a semantic token that already resolves per theme; a
+    // `dark:bg-*` override on top of it is what broke IconButton in #3507.
+    const classes = classesOf('destructive-solid')
+    expect(classes.some((cls) => cls.startsWith('dark:bg-'))).toBe(false)
+  })
+
+  it('renders the quiet treatment on the element for variant="destructive"', () => {
+    const { getByRole } = render(<Button variant="destructive">Delete</Button>)
+    const className = getByRole('button').className
+    expect(className).toContain('text-destructive')
+    expect(className).toContain('border-destructive')
+    expect(className.split(/\s+/)).not.toContain('bg-destructive')
+  })
+
+  it('renders the filled treatment on the element for variant="destructive-solid"', () => {
+    const { getByRole } = render(<Button variant="destructive-solid">Delete permanently</Button>)
+    const classNames = getByRole('button').className.split(/\s+/)
+    expect(classNames).toContain('bg-destructive')
+    expect(classNames).toContain('text-white')
+  })
+
+  it('defaults to the primary variant when none is given', () => {
+    const { getByRole } = render(<Button>Save</Button>)
+    const classNames = getByRole('button').className.split(/\s+/)
+    expect(classNames).toContain('bg-primary')
+    expect(classNames).not.toContain('text-destructive')
+  })
+})

package/src/primitives/button.tsx

@@ -9,14 +9,20 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover',
+        /* Destructive is quiet by design: red text on a calm surface. A wall
+           of solid red buttons trains users to ignore red. The filled form is
+           `destructive-solid`, reserved for the single point-of-no-return
+           confirmation inside a dialog — never for the button that opens it. */
         destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10',
+          'border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive/10 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive',
+        'destructive-solid':
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive',
         'destructive-outline':
-          'border border-destructive/30 bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:border-destructive/40 dark:hover:bg-destructive/15',
+          'border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive/10',
         'destructive-soft':
-          'bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20',
+          'bg-destructive/10 text-destructive hover:bg-destructive/15',
         'destructive-ghost':
-          'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/15',
+          'text-destructive hover:bg-destructive/10',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',

package/src/theme/ThemeProvider.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { createContext, useContext } from 'react'
 import { createLogger } from '@open-mercato/shared/lib/logger'
+import { THEME_STORAGE_KEY } from './theme-init-script'
 
 const logger = createLogger('ui').child({ component: 'ThemeProvider' })
 
@@ -16,8 +17,6 @@ type ThemeContextValue = {
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
-const THEME_STORAGE_KEY = 'om-theme'
-
 function getSystemTheme(): 'light' | 'dark' {
   if (typeof window === 'undefined') return 'light'
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'

package/src/theme/__tests__/theme-init-script.test.ts

@@ -0,0 +1,70 @@
+import { THEME_INIT_SCRIPT, THEME_STORAGE_KEY } from '../theme-init-script'
+
+function mockSystemTheme(prefersDark: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches: query.includes('prefers-color-scheme: dark') ? prefersDark : false,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }),
+  })
+}
+
+function runThemeInitScript() {
+  new Function(THEME_INIT_SCRIPT)()
+}
+
+describe('THEME_INIT_SCRIPT', () => {
+  beforeEach(() => {
+    document.documentElement.classList.remove('dark')
+    window.localStorage.clear()
+    jest.restoreAllMocks()
+  })
+
+  it('applies the dark class when the stored preference is dark', () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, 'dark')
+    mockSystemTheme(false)
+
+    runThemeInitScript()
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true)
+  })
+
+  it('keeps the light theme when the stored preference is light, even if the system prefers dark', () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, 'light')
+    mockSystemTheme(true)
+
+    runThemeInitScript()
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false)
+  })
+
+  it('falls back to the system preference when nothing is stored', () => {
+    mockSystemTheme(true)
+
+    runThemeInitScript()
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true)
+  })
+
+  it('stays on the light theme when nothing is stored and the system prefers light', () => {
+    mockSystemTheme(false)
+
+    runThemeInitScript()
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false)
+  })
+
+  it('degrades gracefully when localStorage is unavailable', () => {
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('localStorage is blocked')
+    })
+    mockSystemTheme(true)
+
+    expect(() => runThemeInitScript()).not.toThrow()
+    expect(document.documentElement.classList.contains('dark')).toBe(false)
+  })
+})

package/src/theme/index.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider, useTheme } from './ThemeProvider'
+export { THEME_INIT_SCRIPT, THEME_STORAGE_KEY } from './theme-init-script'
 export { ThemeToggle } from './ThemeToggle'
 export { QueryProvider } from './QueryProvider'

package/src/theme/theme-init-script.ts

@@ -0,0 +1,23 @@
+export const THEME_STORAGE_KEY = 'om-theme'
+
+/**
+ * Inline source for the root layout's theme initializer.
+ *
+ * It MUST be rendered as a plain, non-deferred `<script>` element so the browser
+ * executes it while parsing the document, before the first paint. Deferring it —
+ * for example through `next/script` with `strategy="beforeInteractive"`, which in
+ * the App Router only queues the code onto `self.__next_s` for the client runtime
+ * to replay once hydration starts — makes the page paint in light theme first and
+ * flash to dark afterwards.
+ */
+export const THEME_INIT_SCRIPT = `
+(function () {
+  try {
+    var stored = localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});
+    var theme = stored === 'dark' ? 'dark'
+      : stored === 'light' ? 'light'
+      : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    if (theme === 'dark') document.documentElement.classList.add('dark');
+  } catch (error) {}
+})();
+`