@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-alert-stack/index.tsx

@@ -0,0 +1,827 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  AlertTriangle,
+  AlertCircle,
+  Info,
+  Check,
+  Clock,
+  ChevronDown,
+  ChevronUp,
+  X,
+  Bell,
+  BellOff,
+  Volume2,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type AlertSeverity = "critical" | "warning" | "info"
+
+export interface Alert {
+  id: string
+  title: string
+  description?: string
+  severity: AlertSeverity
+  source?: string
+  timestamp: Date
+  acknowledged?: boolean
+  acknowledgedBy?: string
+  snoozedUntil?: Date
+  count?: number
+}
+
+export interface WakaAlertStackProps {
+  /** Array of alerts to display */
+  alerts: Alert[]
+  /** Callback when an alert is acknowledged */
+  onAcknowledge?: (alertId: string) => void
+  /** Callback when an alert is snoozed */
+  onSnooze?: (alertId: string, duration: number) => void
+  /** Callback when an alert is dismissed */
+  onDismiss?: (alertId: string) => void
+  /** Maximum number of visible alerts in the stack */
+  maxVisible?: number
+  /** Whether to group similar alerts */
+  groupSimilar?: boolean
+  /** Whether to animate entry/exit */
+  animated?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================
+// SEVERITY CONFIG
+// ============================================
+
+const severityConfig: Record<
+  AlertSeverity,
+  {
+    icon: React.ElementType
+    color: string
+    bgColor: string
+    borderColor: string
+    ringColor: string
+    label: string
+    priority: number
+  }
+> = {
+  critical: {
+    icon: AlertTriangle,
+    color: "text-red-600 dark:text-red-300",
+    bgColor: "bg-red-50 dark:bg-red-900/40",
+    borderColor: "border-red-500 dark:border-red-400",
+    ringColor: "ring-red-500/20 dark:ring-red-400/30",
+    label: "Critical",
+    priority: 3,
+  },
+  warning: {
+    icon: AlertCircle,
+    color: "text-amber-600 dark:text-amber-300",
+    bgColor: "bg-amber-50 dark:bg-amber-900/40",
+    borderColor: "border-amber-500 dark:border-amber-400",
+    ringColor: "ring-amber-500/20 dark:ring-amber-400/30",
+    label: "Warning",
+    priority: 2,
+  },
+  info: {
+    icon: Info,
+    color: "text-blue-600 dark:text-blue-300",
+    bgColor: "bg-blue-50 dark:bg-blue-900/40",
+    borderColor: "border-blue-500 dark:border-blue-400",
+    ringColor: "ring-blue-500/20 dark:ring-blue-400/30",
+    label: "Info",
+    priority: 1,
+  },
+}
+
+// ============================================
+// SNOOZE DURATIONS
+// ============================================
+
+const snoozeDurations = [
+  { label: "5 min", value: 5 * 60 * 1000 },
+  { label: "15 min", value: 15 * 60 * 1000 },
+  { label: "30 min", value: 30 * 60 * 1000 },
+  { label: "1 hour", value: 60 * 60 * 1000 },
+  { label: "4 hours", value: 4 * 60 * 60 * 1000 },
+]
+
+// ============================================
+// UTILITY FUNCTIONS
+// ============================================
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return "Just now"
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return date.toLocaleDateString()
+}
+
+function formatDuration(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+
+  if (diffMins < 60) return `${diffMins}m`
+  if (diffHours < 24) return `${diffHours}h ${diffMins % 60}m`
+  return `${Math.floor(diffHours / 24)}d ${diffHours % 24}h`
+}
+
+function formatSnoozeRemaining(snoozedUntil: Date): string {
+  const now = new Date()
+  const diffMs = snoozedUntil.getTime() - now.getTime()
+
+  if (diffMs <= 0) return "Expired"
+
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+
+  if (diffMins < 60) return `${diffMins}m remaining`
+  return `${diffHours}h ${diffMins % 60}m remaining`
+}
+
+// ============================================
+// HOOKS
+// ============================================
+
+export interface UseSoundNotificationOptions {
+  enabled?: boolean
+  volume?: number
+  soundUrl?: string
+}
+
+export function useSoundNotification(options: UseSoundNotificationOptions = {}) {
+  const { enabled = true, volume = 0.5, soundUrl } = options
+  const audioRef = React.useRef<HTMLAudioElement | null>(null)
+  const [isMuted, setIsMuted] = React.useState(!enabled)
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined" && soundUrl) {
+      audioRef.current = new Audio(soundUrl)
+      audioRef.current.volume = volume
+    }
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause()
+        audioRef.current = null
+      }
+    }
+  }, [soundUrl, volume])
+
+  const playSound = React.useCallback(() => {
+    if (!isMuted && audioRef.current) {
+      audioRef.current.currentTime = 0
+      audioRef.current.play().catch(() => {
+        // Autoplay may be blocked
+      })
+    }
+  }, [isMuted])
+
+  const toggleMute = React.useCallback(() => {
+    setIsMuted((prev) => !prev)
+  }, [])
+
+  return {
+    playSound,
+    isMuted,
+    toggleMute,
+  }
+}
+
+export interface UseAlertStackOptions {
+  onNewAlert?: (alert: Alert) => void
+  playSoundOnCritical?: boolean
+}
+
+export function useAlertStack(
+  initialAlerts: Alert[] = [],
+  options: UseAlertStackOptions = {}
+) {
+  const [alerts, setAlerts] = React.useState<Alert[]>(initialAlerts)
+  const { onNewAlert, playSoundOnCritical = true } = options
+  const prevAlertsRef = React.useRef<Set<string>>(new Set(initialAlerts.map((a) => a.id)))
+
+  const addAlert = React.useCallback(
+    (alert: Omit<Alert, "id" | "timestamp">) => {
+      const newAlert: Alert = {
+        ...alert,
+        id: `alert-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        timestamp: new Date(),
+      }
+      setAlerts((prev) => [newAlert, ...prev])
+      onNewAlert?.(newAlert)
+      return newAlert
+    },
+    [onNewAlert]
+  )
+
+  const acknowledgeAlert = React.useCallback((alertId: string, acknowledgedBy?: string) => {
+    setAlerts((prev) =>
+      prev.map((a) =>
+        a.id === alertId
+          ? { ...a, acknowledged: true, acknowledgedBy }
+          : a
+      )
+    )
+  }, [])
+
+  const snoozeAlert = React.useCallback((alertId: string, duration: number) => {
+    const snoozedUntil = new Date(Date.now() + duration)
+    setAlerts((prev) =>
+      prev.map((a) =>
+        a.id === alertId ? { ...a, snoozedUntil } : a
+      )
+    )
+  }, [])
+
+  const dismissAlert = React.useCallback((alertId: string) => {
+    setAlerts((prev) => prev.filter((a) => a.id !== alertId))
+  }, [])
+
+  const clearAcknowledged = React.useCallback(() => {
+    setAlerts((prev) => prev.filter((a) => !a.acknowledged))
+  }, [])
+
+  const clearAll = React.useCallback(() => {
+    setAlerts([])
+  }, [])
+
+  // Check for new alerts
+  React.useEffect(() => {
+    const currentIds = new Set(alerts.map((a) => a.id))
+    const newAlerts = alerts.filter((a) => !prevAlertsRef.current.has(a.id))
+
+    if (playSoundOnCritical) {
+      const hasCritical = newAlerts.some((a) => a.severity === "critical")
+      if (hasCritical) {
+        // Sound notification hook should be used externally
+      }
+    }
+
+    prevAlertsRef.current = currentIds
+  }, [alerts, playSoundOnCritical])
+
+  const activeAlerts = React.useMemo(() => {
+    const now = new Date()
+    return alerts.filter((a) => {
+      if (a.snoozedUntil && a.snoozedUntil > now) return false
+      return true
+    })
+  }, [alerts])
+
+  const snoozedAlerts = React.useMemo(() => {
+    const now = new Date()
+    return alerts.filter((a) => a.snoozedUntil && a.snoozedUntil > now)
+  }, [alerts])
+
+  return {
+    alerts,
+    activeAlerts,
+    snoozedAlerts,
+    addAlert,
+    acknowledgeAlert,
+    snoozeAlert,
+    dismissAlert,
+    clearAcknowledged,
+    clearAll,
+  }
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface AlertCardProps {
+  alert: Alert
+  onAcknowledge?: (alertId: string) => void
+  onSnooze?: (alertId: string, duration: number) => void
+  onDismiss?: (alertId: string) => void
+  isStacked?: boolean
+  stackIndex?: number
+  animated?: boolean
+}
+
+function AlertCard({
+  alert,
+  onAcknowledge,
+  onSnooze,
+  onDismiss,
+  isStacked = false,
+  stackIndex = 0,
+  animated = true,
+}: AlertCardProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const [showSnoozeMenu, setShowSnoozeMenu] = React.useState(false)
+  const snoozeMenuRef = React.useRef<HTMLDivElement>(null)
+
+  const config = severityConfig[alert.severity]
+  const Icon = config.icon
+  const isSnoozed = alert.snoozedUntil && alert.snoozedUntil > new Date()
+
+  // Close snooze menu when clicking outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (snoozeMenuRef.current && !snoozeMenuRef.current.contains(event.target as Node)) {
+        setShowSnoozeMenu(false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
+
+  const stackStyles = isStacked
+    ? {
+        transform: `translateY(${stackIndex * 8}px) scale(${1 - stackIndex * 0.02})`,
+        zIndex: 100 - stackIndex,
+        opacity: 1 - stackIndex * 0.15,
+      }
+    : {}
+
+  return (
+    <div
+      className={cn(
+        "relative w-full rounded-lg border-l-4 shadow-lg transition-all duration-300",
+        config.borderColor,
+        config.bgColor,
+        "ring-1",
+        config.ringColor,
+        alert.acknowledged && "opacity-60",
+        isSnoozed && "opacity-50",
+        animated && "animate-in slide-in-from-right-5 fade-in duration-300",
+        isStacked && stackIndex > 0 && "absolute top-0 left-0"
+      )}
+      style={stackStyles}
+    >
+      {/* Main Content */}
+      <div className="p-4">
+        {/* Header Row */}
+        <div className="flex items-start gap-3">
+          {/* Icon */}
+          <div
+            className={cn(
+              "flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center",
+              config.bgColor,
+              "ring-2",
+              config.ringColor
+            )}
+          >
+            <Icon className={cn("h-5 w-5", config.color)} />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <h4 className="font-semibold text-sm text-foreground">
+                    {alert.title}
+                  </h4>
+                  {alert.count && alert.count > 1 && (
+                    <span
+                      className={cn(
+                        "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium",
+                        config.bgColor,
+                        config.color,
+                        "ring-1",
+                        config.ringColor
+                      )}
+                    >
+                      {alert.count}
+                    </span>
+                  )}
+                </div>
+                {alert.source && (
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {alert.source}
+                  </p>
+                )}
+              </div>
+
+              {/* Dismiss Button */}
+              {onDismiss && (
+                <button
+                  onClick={() => onDismiss(alert.id)}
+                  className="flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+                  aria-label="Dismiss alert"
+                >
+                  <X className="h-4 w-4 text-muted-foreground" />
+                </button>
+              )}
+            </div>
+
+            {/* Timestamp and Duration */}
+            <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+              <span>{formatRelativeTime(alert.timestamp)}</span>
+              <span className="text-muted-foreground/50">|</span>
+              <span className="flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {formatDuration(alert.timestamp)}
+              </span>
+              {isSnoozed && alert.snoozedUntil && (
+                <>
+                  <span className="text-muted-foreground/50">|</span>
+                  <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400">
+                    <BellOff className="h-3 w-3" />
+                    {formatSnoozeRemaining(alert.snoozedUntil)}
+                  </span>
+                </>
+              )}
+            </div>
+
+            {/* Acknowledged Info */}
+            {alert.acknowledged && (
+              <div className="flex items-center gap-1 mt-1 text-xs text-green-600 dark:text-green-400">
+                <Check className="h-3 w-3" />
+                <span>
+                  Acknowledged
+                  {alert.acknowledgedBy && ` by ${alert.acknowledgedBy}`}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Description (Expandable) */}
+        {alert.description && (
+          <div className="mt-3">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {isExpanded ? (
+                <ChevronUp className="h-3 w-3" />
+              ) : (
+                <ChevronDown className="h-3 w-3" />
+              )}
+              {isExpanded ? "Hide details" : "Show details"}
+            </button>
+
+            {isExpanded && (
+              <div className="mt-2 p-3 rounded-md bg-black/5 dark:bg-white/5 animate-in slide-in-from-top-2 fade-in duration-200">
+                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                  {alert.description}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        {(!alert.acknowledged || onSnooze) && (
+          <div className="flex items-center gap-2 mt-3">
+            {/* Acknowledge Button */}
+            {onAcknowledge && !alert.acknowledged && (
+              <button
+                onClick={() => onAcknowledge(alert.id)}
+                className={cn(
+                  "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
+                  "bg-green-100 text-green-700 hover:bg-green-200",
+                  "dark:bg-green-900/50 dark:text-green-300 dark:hover:bg-green-900/70"
+                )}
+              >
+                <Check className="h-3.5 w-3.5" />
+                Acknowledge
+              </button>
+            )}
+
+            {/* Snooze Button */}
+            {onSnooze && !isSnoozed && (
+              <div className="relative" ref={snoozeMenuRef}>
+                <button
+                  onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
+                  className={cn(
+                    "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
+                    "bg-amber-100 text-amber-700 hover:bg-amber-200",
+                    "dark:bg-amber-900/50 dark:text-amber-300 dark:hover:bg-amber-900/70"
+                  )}
+                >
+                  <BellOff className="h-3.5 w-3.5" />
+                  Snooze
+                  <ChevronDown className="h-3 w-3" />
+                </button>
+
+                {/* Snooze Menu */}
+                {showSnoozeMenu && (
+                  <div className="absolute bottom-full left-0 mb-1 py-1 bg-popover border rounded-md shadow-lg min-w-[120px] z-50 animate-in slide-in-from-bottom-2 fade-in duration-150">
+                    {snoozeDurations.map((duration) => (
+                      <button
+                        key={duration.value}
+                        onClick={() => {
+                          onSnooze(alert.id, duration.value)
+                          setShowSnoozeMenu(false)
+                        }}
+                        className="w-full px-3 py-1.5 text-xs text-left hover:bg-muted transition-colors"
+                      >
+                        {duration.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface StackedAlertsPreviewProps {
+  alerts: Alert[]
+  maxVisible: number
+  onExpand: () => void
+}
+
+function StackedAlertsPreview({
+  alerts,
+  maxVisible,
+  onExpand,
+}: StackedAlertsPreviewProps) {
+  const visibleAlerts = alerts.slice(0, maxVisible)
+  const hiddenCount = alerts.length - maxVisible
+
+  return (
+    <div className="relative">
+      {/* Stacked cards effect */}
+      <div className="relative" style={{ height: `${56 + (Math.min(maxVisible, alerts.length) - 1) * 8}px` }}>
+        {visibleAlerts.map((alert, index) => {
+          const config = severityConfig[alert.severity]
+          const Icon = config.icon
+
+          return (
+            <div
+              key={alert.id}
+              className={cn(
+                "absolute left-0 right-0 h-14 rounded-lg border-l-4 shadow-md transition-all duration-300",
+                config.borderColor,
+                config.bgColor,
+                "ring-1",
+                config.ringColor,
+                "cursor-pointer hover:translate-y-[-2px]"
+              )}
+              style={{
+                transform: `translateY(${index * 8}px) scale(${1 - index * 0.02})`,
+                zIndex: 100 - index,
+                opacity: 1 - index * 0.15,
+              }}
+              onClick={onExpand}
+            >
+              <div className="flex items-center gap-3 p-3 h-full">
+                <Icon className={cn("h-5 w-5 flex-shrink-0", config.color)} />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{alert.title}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatRelativeTime(alert.timestamp)}
+                  </p>
+                </div>
+                {alert.count && alert.count > 1 && (
+                  <span
+                    className={cn(
+                      "flex-shrink-0 inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium",
+                      config.color
+                    )}
+                  >
+                    {alert.count}
+                  </span>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Hidden count badge */}
+      {hiddenCount > 0 && (
+        <button
+          onClick={onExpand}
+          className="absolute -bottom-2 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-muted rounded-full text-xs font-medium text-muted-foreground hover:bg-muted/80 transition-colors shadow-sm"
+        >
+          +{hiddenCount} more
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaAlertStack({
+  alerts,
+  onAcknowledge,
+  onSnooze,
+  onDismiss,
+  maxVisible = 5,
+  groupSimilar = true,
+  animated = true,
+  className,
+}: WakaAlertStackProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+
+  // Process and sort alerts by priority
+  const processedAlerts = React.useMemo(() => {
+    const now = new Date()
+
+    // Filter out snoozed alerts
+    let filteredAlerts = alerts.filter((a) => {
+      if (a.snoozedUntil && a.snoozedUntil > now) return false
+      return true
+    })
+
+    // Group similar alerts if enabled
+    if (groupSimilar) {
+      const grouped = new Map<string, Alert>()
+
+      filteredAlerts.forEach((alert) => {
+        const key = `${alert.severity}-${alert.title}-${alert.source || ""}`
+        const existing = grouped.get(key)
+
+        if (existing) {
+          // Update count and use most recent timestamp
+          grouped.set(key, {
+            ...existing,
+            count: (existing.count || 1) + 1,
+            timestamp:
+              alert.timestamp > existing.timestamp
+                ? alert.timestamp
+                : existing.timestamp,
+          })
+        } else {
+          grouped.set(key, { ...alert, count: alert.count || 1 })
+        }
+      })
+
+      filteredAlerts = Array.from(grouped.values())
+    }
+
+    // Sort by priority (critical first) then by timestamp (newest first)
+    return filteredAlerts.sort((a, b) => {
+      const priorityDiff =
+        severityConfig[b.severity].priority -
+        severityConfig[a.severity].priority
+      if (priorityDiff !== 0) return priorityDiff
+      return b.timestamp.getTime() - a.timestamp.getTime()
+    })
+  }, [alerts, groupSimilar])
+
+  // Get snoozed alerts for display
+  const snoozedAlerts = React.useMemo(() => {
+    const now = new Date()
+    return alerts.filter((a) => a.snoozedUntil && a.snoozedUntil > now)
+  }, [alerts])
+
+  // Summary stats
+  const stats = React.useMemo(() => {
+    return {
+      critical: processedAlerts.filter((a) => a.severity === "critical").length,
+      warning: processedAlerts.filter((a) => a.severity === "warning").length,
+      info: processedAlerts.filter((a) => a.severity === "info").length,
+      snoozed: snoozedAlerts.length,
+    }
+  }, [processedAlerts, snoozedAlerts])
+
+  if (alerts.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center py-8 text-center rounded-lg border border-dashed",
+          className
+        )}
+      >
+        <Bell className="h-10 w-10 text-muted-foreground/50 mb-3" />
+        <p className="text-sm text-muted-foreground">No active alerts</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Summary Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <h3 className="font-semibold text-sm">Alerts</h3>
+          <div className="flex items-center gap-2">
+            {stats.critical > 0 && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300">
+                <AlertTriangle className="h-3 w-3" />
+                {stats.critical}
+              </span>
+            )}
+            {stats.warning > 0 && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
+                <AlertCircle className="h-3 w-3" />
+                {stats.warning}
+              </span>
+            )}
+            {stats.info > 0 && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+                <Info className="h-3 w-3" />
+                {stats.info}
+              </span>
+            )}
+            {stats.snoozed > 0 && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground">
+                <BellOff className="h-3 w-3" />
+                {stats.snoozed}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Expand/Collapse Toggle */}
+        {processedAlerts.length > 1 && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+          >
+            {isExpanded ? (
+              <>
+                <ChevronUp className="h-3 w-3" />
+                Collapse
+              </>
+            ) : (
+              <>
+                <ChevronDown className="h-3 w-3" />
+                Expand all
+              </>
+            )}
+          </button>
+        )}
+      </div>
+
+      {/* Alert Stack */}
+      {isExpanded ? (
+        // Expanded view - show all alerts
+        <div className="space-y-3">
+          {processedAlerts.map((alert, index) => (
+            <AlertCard
+              key={alert.id}
+              alert={alert}
+              onAcknowledge={onAcknowledge}
+              onSnooze={onSnooze}
+              onDismiss={onDismiss}
+              animated={animated}
+            />
+          ))}
+
+          {/* Snoozed Alerts Section */}
+          {snoozedAlerts.length > 0 && (
+            <div className="pt-3 border-t">
+              <p className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
+                <BellOff className="h-3 w-3" />
+                Snoozed ({snoozedAlerts.length})
+              </p>
+              <div className="space-y-2">
+                {snoozedAlerts.map((alert) => (
+                  <AlertCard
+                    key={alert.id}
+                    alert={alert}
+                    onAcknowledge={onAcknowledge}
+                    onSnooze={onSnooze}
+                    onDismiss={onDismiss}
+                    animated={false}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        // Stacked view
+        <>
+          {processedAlerts.length === 1 ? (
+            <AlertCard
+              alert={processedAlerts[0]}
+              onAcknowledge={onAcknowledge}
+              onSnooze={onSnooze}
+              onDismiss={onDismiss}
+              animated={animated}
+            />
+          ) : (
+            <StackedAlertsPreview
+              alerts={processedAlerts}
+              maxVisible={maxVisible}
+              onExpand={() => setIsExpanded(true)}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WakaAlertStack