import { useStore } from '@nanostores/react' import { type ReactNode, useEffect, useRef, useState } from 'react' import { createPortal } from 'react-dom' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Button } from '@/components/ui/button' import { Codicon } from '@/components/ui/codicon' import { CopyButton } from '@/components/ui/copy-button' import { useI18n } from '@/i18n' import { triggerHaptic } from '@/lib/haptics' import { AlertCircle, AlertTriangle, CheckCircle2, type IconComponent, Info } from '@/lib/icons' import { cn } from '@/lib/utils' import { $notifications, type AppNotification, clearNotifications, dismissNotification, type NotificationKind } from '@/store/notifications' type ToneVariant = 'default' | 'destructive' | 'warning' | 'success' const tone: Record = { error: { icon: AlertCircle, iconClass: 'text-destructive', variant: 'destructive' }, warning: { icon: AlertTriangle, iconClass: 'text-primary', variant: 'warning' }, info: { icon: Info, iconClass: 'text-muted-foreground', variant: 'default' }, success: { icon: CheckCircle2, iconClass: 'text-primary', variant: 'success' } } const STACK_SURFACE = 'pointer-events-auto border border-(--stroke-nous) bg-popover/95 shadow-nous backdrop-blur-md' function partitionNotifications(notifications: AppNotification[]) { const defaultStack: AppNotification[] = [] const bottomRightStack: AppNotification[] = [] for (const notification of notifications) { if (notification.placement === 'bottom-right') { bottomRightStack.push(notification) } else { defaultStack.push(notification) } } return { bottomRightStack, defaultStack } } export function NotificationStack() { const notifications = useStore($notifications) const { bottomRightStack, defaultStack } = partitionNotifications(notifications) const { t } = useI18n() const lastNotificationIdRef = useRef(null) const [expanded, setExpanded] = useState(false) const copy = t.notifications useEffect(() => { if (defaultStack.length <= 1) { setExpanded(false) } }, [defaultStack.length]) useEffect(() => { const latest = notifications[0] if (!latest || latest.id === lastNotificationIdRef.current) { return } lastNotificationIdRef.current = latest.id if (latest.kind === 'success') { triggerHaptic('success') } else if (latest.kind === 'error') { triggerHaptic('error') } else if (latest.kind === 'warning') { triggerHaptic('warning') } }, [notifications]) return ( <> {defaultStack.length > 0 && ( setExpanded(v => !v)} /> )} {bottomRightStack.length > 0 && } ) } // Portaled to with a z above the Radix dialog layer (overlay z-[120], // content z-[130]) — see the top-center variant below for why. const REGION_BASE = 'pointer-events-none fixed z-[200] flex gap-2' // Primary stack: top-center, collapsed to the latest toast with a "+N more" // expander + clear-all — the noisy/important surface (errors, warnings, // action toasts). Without the portal it lives inside the React root subtree, // which any body-level dialog/overlay portal paints over — so a toast fired // while a dialog is open was invisible. function TopCenterStack({ copy, expanded, notifications, onToggleExpanded }: { copy: ReturnType['t']['notifications'] expanded: boolean notifications: AppNotification[] onToggleExpanded: () => void }) { const [latest, ...older] = notifications return createPortal(
{expanded && older.map(n => )} {older.length > 0 && (
)}
, document.body ) } // Ambient stack: bottom-right, every toast shown at once (routine confirmations // rarely queue up), newest on top, no expand/clear-all chrome. function BottomRightStack({ copy, notifications }: { copy: ReturnType['t']['notifications'] notifications: AppNotification[] }) { return createPortal(
{notifications.map(n => ( ))}
, document.body ) } function NotificationItem({ notification }: { notification: AppNotification }) { const styles = tone[notification.kind] const Icon = styles.icon const hasDetail = Boolean(notification.detail && notification.detail !== notification.message) const { t } = useI18n() const copy = t.notifications return ( {notification.icon ? ( ) : ( )}
{notification.title && {notification.title}}

{notification.message}

{hasDetail && } {notification.action && ( )}
) } function NotificationDetail({ detail }: { detail: string }) { const { t } = useI18n() const copy = t.notifications return (
{copy.details} 
          {detail}
{copy.copyDetail}
) } export function InlineNotice({ kind = 'info', title, children, className }: { kind?: NotificationKind title?: string children: ReactNode className?: string }) { const styles = tone[kind] const Icon = styles.icon return ( {title && {title}} {children} ) }