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

package/src/backend/ProfileDropdown.tsx

@@ -1,12 +1,13 @@
 'use client'
 import * as React from 'react'
 import Link from 'next/link'
-import { User, LogOut, Bell, Moon, Sun, Globe, Key, Check } from 'lucide-react'
+import { User, LogOut, Bell, Moon, Sun, Globe, Key, Check, ChevronRight } from 'lucide-react'
 import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'
 import { useTheme } from '@open-mercato/ui/theme'
-import { Button } from '../primitives/button'
+import { cn } from '@open-mercato/shared/lib/utils'
 import { IconButton } from '../primitives/icon-button'
+import { Switch } from '../primitives/switch'
 import { useInjectedMenuItems } from './injection/useInjectedMenuItems'
 import { mergeMenuItems, type MergedMenuItem } from './injection/mergeMenuItems'
 import { resolveInjectedIcon } from './injection/resolveInjectedIcon'
@@ -99,8 +100,14 @@ export function ProfileDropdown({
     } catch {}
   }
 
-  const menuItemClass =
-    'w-full text-left text-sm cursor-pointer px-3 py-2 rounded hover:bg-accent inline-flex items-center gap-2.5 outline-none focus-visible:ring-1 focus-visible:ring-ring'
+  // Unified row class — every menu item uses this for perfectly aligned layout.
+  // h-9 keeps all rows the same height regardless of whether they have a trailing element.
+  const menuItemClass = cn(
+    'group flex h-9 w-full items-center gap-3 rounded-md px-2.5 text-sm text-foreground',
+    'transition-colors hover:bg-muted/60 focus:outline-none focus-visible:bg-muted/60',
+    'cursor-pointer',
+  )
+  const menuIconClass = 'size-4 shrink-0 text-muted-foreground group-hover:text-foreground'
 
   const resolveMenuLabel = React.useCallback(
     (item: Pick<MergedMenuItem, 'id' | 'label' | 'labelKey'>): string => {
@@ -139,6 +146,12 @@ export function ProfileDropdown({
     (item: MergedMenuItem) => {
       const label = resolveMenuLabel(item)
       const icon = resolveInjectedIcon(item.icon)
+      const inner = (
+        <>
+          <span className={menuIconClass}>{icon}</span>
+          <span className="flex-1 truncate">{label}</span>
+        </>
+      )
       if (item.href) {
         return (
           <Link
@@ -149,18 +162,15 @@ export function ProfileDropdown({
             data-menu-item-id={item.id}
             onClick={() => setOpen(false)}
           >
-            {icon}
-            <span>{label}</span>
+            {inner}
           </Link>
         )
       }
       return (
-        <Button
+        <button
           key={item.id}
           type="button"
-          variant="ghost"
-          size="sm"
-          className="w-full justify-start"
+          className={menuItemClass}
           role="menuitem"
           data-menu-item-id={item.id}
           onClick={() => {
@@ -168,12 +178,11 @@ export function ProfileDropdown({
             setOpen(false)
           }}
         >
-          {icon}
-          <span>{label}</span>
-        </Button>
+          {inner}
+        </button>
       )
     },
-    [menuItemClass, resolveMenuLabel],
+    [menuItemClass, menuIconClass, resolveMenuLabel],
   )
 
   const renderBuiltInItem = React.useCallback(
@@ -187,8 +196,8 @@ export function ProfileDropdown({
             role="menuitem"
             onClick={() => setOpen(false)}
           >
-            <Key className="size-4" />
-            <span>{t('ui.profileMenu.changePassword', 'Change Password')}</span>
+            <Key className={menuIconClass} />
+            <span className="flex-1 truncate">{t('ui.profileMenu.changePassword', 'Change Password')}</span>
           </Link>
         )
       }
@@ -202,68 +211,78 @@ export function ProfileDropdown({
             role="menuitem"
             onClick={() => setOpen(false)}
           >
-            <Bell className="size-4" />
-            <span>{t('ui.profileMenu.notifications', 'Notification Preferences')}</span>
+            <Bell className={menuIconClass} />
+            <span className="flex-1 truncate">{t('ui.profileMenu.notifications', 'Notification Preferences')}</span>
           </Link>
         )
       }
 
       if (id === 'theme-toggle') {
-        return mounted ? (
-          <Button
+        if (!mounted) return null
+        return (
+          <div
             key={id}
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="w-full justify-between"
+            className={cn(menuItemClass, 'justify-between')}
             role="menuitem"
             onClick={handleThemeToggle}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleThemeToggle()
+              }
+            }}
+            tabIndex={0}
           >
-            <span className="inline-flex items-center gap-2.5">
-              {isDark ? <Moon className="size-4" /> : <Sun className="size-4" />}
-              <span>{t('ui.profileMenu.theme', 'Dark Mode')}</span>
+            <span className="flex flex-1 items-center gap-3">
+              {isDark ? <Moon className={menuIconClass} /> : <Sun className={menuIconClass} />}
+              <span className="flex-1 truncate">{t('ui.profileMenu.theme', 'Theme')}</span>
             </span>
-            <div className={`w-8 h-4 rounded-full transition-colors ${isDark ? 'bg-primary' : 'bg-muted'} relative`}>
-              <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-background shadow transition-transform ${isDark ? 'translate-x-4' : 'translate-x-0.5'}`} />
-            </div>
-          </Button>
-        ) : null
+            <Switch
+              checked={isDark}
+              onCheckedChange={handleThemeToggle}
+              aria-label={t('ui.profileMenu.theme', 'Theme')}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+        )
       }
 
       if (id === 'language') {
         return (
-          <div key={id} className="relative">
-            <Button
+          <div key={id} className="contents">
+            <button
               type="button"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-between"
+              className={menuItemClass}
               role="menuitem"
               onClick={() => setLanguageOpen(!languageOpen)}
               aria-expanded={languageOpen}
             >
-              <span className="inline-flex items-center gap-2.5">
-                <Globe className="size-4" />
-                <span>{t('ui.profileMenu.language', 'Language')}</span>
-              </span>
-              <span className="text-xs text-muted-foreground">
-                {localeLabels[currentLocale]}
-              </span>
-            </Button>
+              <Globe className={menuIconClass} />
+              <span className="truncate">{t('ui.profileMenu.language', 'Language')}</span>
+              <span className="text-xs text-muted-foreground">{localeLabels[currentLocale]}</span>
+              <ChevronRight
+                className={cn(
+                  'ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform',
+                  languageOpen && 'rotate-90',
+                )}
+                aria-hidden="true"
+              />
+            </button>
             {languageOpen && (
-              <div className="mt-1 ml-6 space-y-0.5 border-l pl-2">
+              <div className="ml-7 mr-1 flex flex-col gap-0.5 border-l pl-2 py-1">
                 {locales.map((locale) => (
-                  <Button
+                  <button
                     key={locale}
                     type="button"
-                    variant="ghost"
-                    size="sm"
-                    className={`w-full justify-start gap-2 ${locale === currentLocale ? 'text-primary font-medium' : ''}`}
+                    className={cn(
+                      'flex h-8 w-full items-center justify-between gap-2 rounded-md px-2 text-sm transition-colors hover:bg-muted/60 focus:outline-none focus-visible:bg-muted/60',
+                      locale === currentLocale ? 'font-medium text-foreground' : 'text-muted-foreground',
+                    )}
                     onClick={() => handleLocaleChange(locale)}
                   >
-                    <span>{localeLabels[locale]}</span>
-                    {locale === currentLocale && <Check className="size-3.5" />}
-                  </Button>
+                    <span className="truncate">{localeLabels[locale]}</span>
+                    {locale === currentLocale && <Check className="size-3.5 shrink-0 text-accent-indigo" aria-hidden="true" />}
+                  </button>
                 ))}
               </div>
             )}
@@ -274,16 +293,14 @@ export function ProfileDropdown({
       if (id === 'sign-out') {
         return (
           <form key={id} action="/api/auth/logout" method="POST">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
+            <button
               type="submit"
+              className={menuItemClass}
               role="menuitem"
             >
-              <LogOut className="size-4" />
-              <span>{t('ui.userMenu.logout', 'Sign Out')}</span>
-            </Button>
+              <LogOut className={menuIconClass} />
+              <span className="flex-1 truncate text-left">{t('ui.userMenu.logout', 'Sign Out')}</span>
+            </button>
           </form>
         )
       }
@@ -297,6 +314,7 @@ export function ProfileDropdown({
       isDark,
       languageOpen,
       menuItemClass,
+      menuIconClass,
       mounted,
       notificationsHref,
       t,
@@ -321,42 +339,51 @@ export function ProfileDropdown({
       {open && (
         <div
           ref={menuRef}
-          className="absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-dropdown"
+          className="absolute right-0 top-full z-popover mt-2 w-64 overflow-hidden rounded-lg border bg-popover p-0 shadow-lg"
           role="menu"
           data-testid="profile-dropdown"
         >
           {/* User info header */}
           {(displayName || email) && (
-            <div className="px-3 py-2.5 border-b mb-1">
-              {displayName && (
-                <div className="font-medium text-sm flex items-center gap-2">
-                  <User className="size-4" />
-                  {displayName}
-                </div>
-              )}
-              {displayName && email && (
-                <div className="text-xs text-muted-foreground mt-0.5 ml-6">{email}</div>
-              )}
-              {!displayName && email && (
-                <div className="text-xs text-muted-foreground">
-                  {t('ui.userMenu.loggedInAs', 'Logged in as:')} {email}
-                </div>
-              )}
+            <div className="flex items-center gap-3 border-b bg-muted/30 px-3 py-3">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-accent-indigo/10 text-accent-indigo">
+                <User className="size-4" aria-hidden="true" />
+              </div>
+              <div className="flex min-w-0 flex-1 flex-col">
+                {displayName ? (
+                  <span className="truncate text-sm font-medium leading-5 text-foreground">{displayName}</span>
+                ) : null}
+                {email ? (
+                  <span className={cn(
+                    'truncate text-xs leading-4',
+                    displayName ? 'text-muted-foreground' : 'text-foreground font-medium',
+                  )}>
+                    {email}
+                  </span>
+                ) : null}
+                {!displayName && email ? (
+                  <span className="truncate text-overline uppercase tracking-wider text-muted-foreground/80">
+                    {t('ui.userMenu.loggedInAs', 'Logged in')}
+                  </span>
+                ) : null}
+              </div>
             </div>
           )}
 
-          {mergedMenuItems.map((item) => (
-            <React.Fragment key={item.id}>
-              {item.separator ? <div className="my-1 border-t" /> : null}
-              {item.source === 'injected'
-                ? (item.href || item.onClick || item.label || item.labelKey ? renderInjectedItem(item) : null)
-                : renderBuiltInItem(item.id)}
-            </React.Fragment>
-          ))}
-          <InjectionSpot
-            spotId={BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID}
-            context={injectionContext}
-          />
+          <div className="flex flex-col p-1.5">
+            {mergedMenuItems.map((item) => (
+              <React.Fragment key={item.id}>
+                {item.separator ? <div className="my-1 h-px bg-border" aria-hidden="true" /> : null}
+                {item.source === 'injected'
+                  ? (item.href || item.onClick || item.label || item.labelKey ? renderInjectedItem(item) : null)
+                  : renderBuiltInItem(item.id)}
+              </React.Fragment>
+            ))}
+            <InjectionSpot
+              spotId={BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID}
+              context={injectionContext}
+            />
+          </div>
         </div>
       )}
     </div>

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

@@ -173,6 +173,14 @@ describe('AppShell', () => {
     expect(screen.getByTestId('injection-spot:backend:sidebar:footer')).toBeInTheDocument()
     expect(screen.getByTestId('injection-spot:backend-mutation:global')).toBeInTheDocument()
     expect(screen.getByText('Child content')).toBeInTheDocument()
+
+    const breadcrumbNav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(breadcrumbNav).toHaveAttribute('data-slot', 'breadcrumb')
+    expect(breadcrumbNav).toHaveAttribute('data-divider', 'arrow')
+    const dashboardHome = within(breadcrumbNav).getByRole('link', { name: 'Dashboard' })
+    expect(dashboardHome).toHaveAttribute('href', '/backend')
+    const activePage = within(breadcrumbNav).getByText((_, el) => el?.getAttribute('data-slot') === 'breadcrumb-page')
+    expect(activePage).toHaveAttribute('aria-current', 'page')
     expect(mockInjectionSpot).toHaveBeenCalledWith(
       expect.objectContaining({
         spotId: 'backend-mutation:global',

package/src/backend/notifications/NotificationCountBadge.tsx

@@ -7,7 +7,7 @@ export type NotificationCountBadgeProps = {
 export function NotificationCountBadge({ count }: NotificationCountBadgeProps) {
   if (count <= 0) return null
   return (
-    <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-overline font-medium text-destructive-foreground">
+    <span className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground ring-2 ring-background">
       {count > 99 ? '99+' : count}
     </span>
   )

package/src/backend/notifications/NotificationItem.tsx

@@ -1,8 +1,9 @@
 "use client"
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
-import { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from 'lucide-react'
+import { Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2, X } from 'lucide-react'
 import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
 import type { NotificationDto, NotificationRendererProps, NotificationTypeAction } from '@open-mercato/shared/modules/notifications/types'
@@ -15,37 +16,9 @@ export type NotificationItemProps = {
   onExecuteAction: (actionId: string) => Promise<{ href?: string }>
   onDismiss: () => Promise<void>
   t: TranslateFn
-  /**
-   * Optional custom renderer component for this notification type.
-   * When provided, this component will be used instead of the default rendering.
-   *
-   * Custom renderers receive full control over the notification's appearance while
-   * still having access to action handlers and notification data.
-   *
-   * @example
-   * ```tsx
-   * // In your module's notifications.client.ts
-   * export const salesNotificationTypes = [
-   *   {
-   *     type: 'sales.order.created',
-   *     Renderer: SalesOrderCreatedRenderer,
-   *     // ...other fields
-   *   }
-   * ]
-   *
-   * // Usage in NotificationPanel
-   * const renderer = salesNotificationTypes.find(t => t.type === notification.type)?.Renderer
-   * <NotificationItem
-   *   notification={notification}
-   *   customRenderer={renderer}
-   *   ...
-   * />
-   * ```
-   */
   customRenderer?: ComponentType<NotificationRendererProps>
 }
 
-
 function resolveNotificationText(params: {
   key?: string | null
   fallback?: string | null
@@ -69,13 +42,30 @@ const severityIcons = {
   error: XCircle,
 }
 
-const severityColors = {
+// Avatar background — soft tints matching the Figma example item palette
+const severityAvatarBg = {
+  info: 'bg-status-info-bg',
+  warning: 'bg-status-warning-bg',
+  success: 'bg-status-success-bg',
+  error: 'bg-status-error-bg',
+}
+
+const severityAvatarText = {
   info: 'text-status-info-icon',
   warning: 'text-status-warning-icon',
   success: 'text-status-success-icon',
   error: 'text-status-error-icon',
 }
 
+function humanizeModuleId(moduleId?: string | null): string | null {
+  if (!moduleId) return null
+  return moduleId
+    .split(/[_:.-]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
 export function NotificationItem({
   notification,
   onMarkAsRead,
@@ -89,8 +79,11 @@ export function NotificationItem({
 
   const isUnread = notification.status === 'unread'
   const hasActions = notification.actions && notification.actions.length > 0
-  const severity = notification.severity as keyof typeof severityIcons
+  const severity = (notification.severity as keyof typeof severityIcons) ?? 'info'
   const IconComponent = severityIcons[severity] ?? Bell
+  const avatarBg = severityAvatarBg[severity] ?? 'bg-muted'
+  const avatarText = severityAvatarText[severity] ?? 'text-muted-foreground'
+
   const titleText = resolveNotificationText({
     key: notification.titleKey,
     fallback: notification.title,
@@ -103,14 +96,12 @@ export function NotificationItem({
     variables: notification.bodyVariables ?? undefined,
     t,
   })
+  const timeAgo = formatRelativeTime(notification.createdAt, { translate: t }) ?? ''
+  const sourceLabel = humanizeModuleId(notification.sourceModule)
 
   const handleClick = async () => {
-    if (isUnread) {
-      await onMarkAsRead()
-    }
-    if (notification.linkHref) {
-      router.push(notification.linkHref)
-    }
+    if (isUnread) await onMarkAsRead()
+    if (notification.linkHref) router.push(notification.linkHref)
   }
 
   const handleAction = async (actionId: string, event?: React.MouseEvent) => {
@@ -118,9 +109,7 @@ export function NotificationItem({
     setExecuting(actionId)
     try {
       const result = await onExecuteAction(actionId)
-      if (result.href) {
-        router.push(result.href)
-      }
+      if (result.href) router.push(result.href)
     } finally {
       setExecuting(null)
     }
@@ -131,7 +120,6 @@ export function NotificationItem({
     await onDismiss()
   }
 
-  // Convert notification actions to the format expected by custom renderers
   const rendererActions: NotificationTypeAction[] = notification.actions.map((action) => ({
     id: action.id,
     labelKey: action.labelKey ?? action.label,
@@ -139,7 +127,6 @@ export function NotificationItem({
     icon: action.icon,
   }))
 
-  // Use custom renderer if provided
   if (CustomRenderer) {
     return (
       <CustomRenderer
@@ -168,11 +155,14 @@ export function NotificationItem({
     )
   }
 
+  const showActions = hasActions && notification.status !== 'actioned'
+  const showBodyBubble = !!bodyText && bodyText.length > 0
+
   return (
     <div
       className={cn(
-        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors',
-        isUnread && 'bg-muted/30'
+        'group relative flex gap-4 items-start rounded-xl p-3 transition-colors hover:bg-muted/40 cursor-pointer',
+        isUnread && 'bg-muted/20'
       )}
       onClick={handleClick}
       onKeyDown={(e) => {
@@ -184,79 +174,82 @@ export function NotificationItem({
       role="button"
       tabIndex={0}
     >
-      {isUnread && (
-        <div className="absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" />
-      )}
+      {/* Avatar: severity-tinted circle with severity icon */}
+      <div className={cn('relative shrink-0 flex size-10 items-center justify-center rounded-full', avatarBg)}>
+        <IconComponent className={cn('size-5', avatarText)} aria-hidden="true" />
+        {isUnread ? (
+          <span
+            className="absolute -right-1 -top-1 size-3 rounded-full bg-accent-indigo ring-2 ring-background"
+            aria-hidden="true"
+          />
+        ) : null}
+      </div>
 
-      <div className="flex gap-3">
-        <div
-          className={cn(
-            'flex-shrink-0 mt-0.5',
-            severityColors[severity] ?? 'text-muted-foreground'
-          )}
-        >
-          <IconComponent className="h-5 w-5" />
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        {/* Title row */}
+        <p className="text-sm font-medium leading-5 tracking-tight text-foreground">
+          {titleText}
+        </p>
+
+        {/* Description row: time · source */}
+        <div className="flex flex-wrap items-center gap-1 text-xs leading-4 text-muted-foreground">
+          {timeAgo ? <span className="whitespace-nowrap">{timeAgo}</span> : null}
+          {timeAgo && sourceLabel ? (
+            <span aria-hidden="true" className="text-text-disabled">·</span>
+          ) : null}
+          {sourceLabel ? <span className="truncate">{sourceLabel}</span> : null}
         </div>
 
-        <div className="flex-1 min-w-0">
-          <div className="flex items-start justify-between gap-2">
-            <h4 className={cn('text-sm font-medium', isUnread && 'font-semibold')}>
-              {titleText}
-            </h4>
-            <span className="flex-shrink-0 text-xs text-muted-foreground">
-              {formatRelativeTime(notification.createdAt, { translate: t }) ?? ''}
-            </span>
+        {/* Optional body bubble */}
+        {showBodyBubble ? (
+          <div className="mt-2 inline-flex max-w-full self-start rounded-tr-lg rounded-br-lg rounded-bl-lg rounded-tl-sm border bg-background px-3 py-2 text-sm leading-5 tracking-tight text-muted-foreground shadow-xs">
+            <p className="whitespace-pre-line break-words">{bodyText}</p>
           </div>
-
-          {bodyText && (
-            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
-              {bodyText}
-            </p>
-          )}
-
-          {hasActions && notification.status !== 'actioned' && (
-            <div className="mt-2 flex flex-wrap items-start gap-2">
-              {notification.actions.map((action) => (
+        ) : null}
+
+        {/* Optional actions row */}
+        {showActions ? (
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {notification.actions.map((action, idx) => {
+              const isPrimary = idx === notification.actions.length - 1 || action.variant === 'default'
+              return (
                 <Button
                   key={action.id}
-                  variant={
-                    (action.variant as 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost') ??
-                    'outline'
-                  }
+                  type="button"
+                  variant={isPrimary ? 'default' : 'outline'}
                   size="sm"
-                  className="h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left"
+                  className={cn(
+                    'h-8 rounded-md px-2.5 py-1.5 text-sm font-medium',
+                    isPrimary && 'bg-accent-indigo text-accent-indigo-foreground hover:bg-accent-indigo/90',
+                  )}
                   onClick={(event) => handleAction(action.id, event)}
                   disabled={executing !== null}
                 >
-                  {action.labelKey
-                    ? t(action.labelKey, action.label)
-                    : t(action.label, action.label)}
-                  {executing === action.id && (
-                    <Loader2 className="ml-1 h-3 w-3 animate-spin" />
-                  )}
+                  {action.labelKey ? t(action.labelKey, action.label) : t(action.label, action.label)}
+                  {executing === action.id ? <Loader2 className="ml-1 size-3 animate-spin" /> : null}
                 </Button>
-              ))}
-            </div>
-          )}
-
-          {notification.status === 'actioned' && notification.actionTaken && (
-            <p className="mt-1 text-xs text-muted-foreground italic">
-              {t('notifications.actionTaken', 'Action taken: {action}', {
-                action: notification.actionTaken,
-              })}
-            </p>
-          )}
-        </div>
+              )
+            })}
+          </div>
+        ) : null}
 
-        <Button
-          variant="ghost"
-          size="icon"
-          className="flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-          onClick={handleDismiss}
-        >
-          <X className="h-3 w-3" />
-        </Button>
+        {notification.status === 'actioned' && notification.actionTaken ? (
+          <p className="mt-1 text-xs italic text-muted-foreground">
+            {t('notifications.actionTaken', 'Action taken: {action}', { action: notification.actionTaken })}
+          </p>
+        ) : null}
       </div>
+
+      <IconButton
+        type="button"
+        variant="ghost"
+        size="xs"
+        className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+        onClick={handleDismiss}
+        aria-label={t('notifications.actions.dismiss', 'Dismiss')}
+      >
+        <X className="size-3.5" />
+      </IconButton>
     </div>
   )
 }