Smart Inbox Triage

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface EmailMessage {
  id: string
  sender: {
    name: string
    email: string
    initials: string
  }
  recipient: string
  subject: string
  snippet: string
  body: string
  timestamp: string
  fullDate: string
  category: 'vip' | 'team' | 'newsletters'
  categoryLabel: string
  badgeVariant?: 'default' | 'secondary' | 'outline' | 'info' | 'success' | 'warning'
  unread: boolean
  starred: boolean
  archived: boolean
  snoozed?: boolean
  attachment?: {
    name: string
    size: string
    type: string
  }
}

Files installed (1)

• components/blocks/SmartInboxTriage.tsx48.5 kB

  Copy

  'use client'
  
  import * as React from 'react'
  import {
    Archive,
    ArrowDown,
    ArrowUp,
    AtSign,
    Check,
    CheckCircle2,
    Clock,
    Command as CommandIcon,
    FileText,
    Forward,
    Mail,
    Paperclip,
    Reply,
    ReplyAll,
    Search,
    Send,
    Smile,
    Star,
    Undo2,
    X,
  } from 'lucide-react'
  import { Avatar, AvatarFallback } from '@/components/ui/avatar'
  import { Badge } from '@/components/ui/badge'
  import { Button } from '@/components/ui/button'
  import { Separator } from '@/components/ui/separator'
  import { cn } from '@/lib/utils'
  
  export type InboxCategory = 'vip' | 'team' | 'newsletters' | 'archived'
  
  export interface EmailMessage {
    id: string
    sender: {
      name: string
      email: string
      initials: string
    }
    recipient: string
    subject: string
    snippet: string
    body: string
    timestamp: string
    fullDate: string
    category: 'vip' | 'team' | 'newsletters'
    categoryLabel: string
    badgeVariant?: 'default' | 'secondary' | 'outline' | 'info' | 'success' | 'warning'
    unread: boolean
    starred: boolean
    archived: boolean
    snoozed?: boolean
    attachment?: {
      name: string
      size: string
      type: string
    }
  }
  
  export interface SmartInboxTriageProps {
    initialCategory?: InboxCategory
    initialSearch?: string
    initialSelectedId?: string
    messages?: EmailMessage[]
    className?: string
  }
  
  const defaultMessages: EmailMessage[] = [
    {
      id: 'msg-1',
      sender: {
        name: 'Marcus Vance',
        email: '[email protected]',
        initials: 'MV',
      },
      recipient: '[email protected], [email protected]',
      subject: 'Architecture Review: Real-time Sync & CRDT Conflict Resolution',
      snippet: 'I’ve updated the design doc with event-sourcing and CRDT tradeoffs for the multi-region sync engine...',
      body: `Hey team,
  
  I’ve updated the architecture RFC for the multi-region state synchronization engine. Based on yesterday's benchmark results, we are proceeding with hybrid state-based CRDTs for deterministic document convergence.
  
  Key RFC Highlights:
  • P99 sync latency reduced from 140ms to 24ms across edge worker replicas
  • Deterministic Last-Write-Wins (LWW) resolver for metadata mutations
  • Offline reconciliation buffer with automated exponential retry backoff
  • Zero dependency footprint — pure TypeScript state machines
  
  Please review the attached technical specification and drop your comments before Thursday's design council.
  
  Best,
  Marcus Vance
  Principal Systems Architect`,
      timestamp: '14:28',
      fullDate: 'Today at 14:28 PM',
      category: 'vip',
      categoryLabel: 'VIP Review',
      badgeVariant: 'default',
      unread: true,
      starred: true,
      archived: false,
      attachment: {
        name: 'sync-engine-rfc-v2.4.pdf',
        size: '2.4 MB',
        type: 'PDF',
      },
    },
    {
      id: 'msg-2',
      sender: {
        name: 'Sarah Connor',
        email: '[email protected]',
        initials: 'SC',
      },
      recipient: '[email protected], [email protected]',
      subject: 'Q2 OKR Sign-off & Headcount Allocation',
      snippet: 'Final draft from the leadership offsite. Flagged two key decisions before Wednesday lock...',
      body: `Hi team,
  
  I’ve compiled the finalized Q2 OKR draft following our executive offsite. There are two strategic items requiring your explicit sign-off before we lock the plan Wednesday EOD:
  
  1. Engineering Headcount: 4 vs. 6 senior backend roles
  2. Multi-cloud deployment schedule: Target June instead of August
  
  Please review and confirm your alignment so we can present to the board.
  
  Thanks,
  Sarah Connor
  VP of Engineering`,
      timestamp: '15:40',
      fullDate: 'Today at 15:40 PM',
      category: 'vip',
      categoryLabel: 'VIP Review',
      badgeVariant: 'default',
      unread: true,
      starred: false,
      archived: false,
    },
    {
      id: 'msg-3',
      sender: {
        name: 'Stripe Merchant Services',
        email: '[email protected]',
        initials: 'ST',
      },
      recipient: '[email protected]',
      subject: 'Payout Confirmed: $18,420.50 USD',
      snippet:
        'Your daily payout for May 18 has been processed and initiated to your linked corporate checking account...',
      body: `Hello UIPKGE Team,
  
  Your automatic daily payout has been initiated and is on its way to your designated bank account ending in •••• 8842.
  
  Transfer Summary:
  • Gross volume (last 24h): $19,250.00
  • Stripe processing fees: -$829.50
  • Net settled transfer: $18,420.50 USD
  • Estimated arrival: Thursday, May 22, 2026
  
  No further action is required. You can download your official tax statement and transaction logs directly in the Stripe Merchant Portal.`,
      timestamp: '12:15',
      fullDate: 'Today at 12:15 PM',
      category: 'vip',
      categoryLabel: 'Finance',
      badgeVariant: 'success',
      unread: true,
      starred: false,
      archived: false,
    },
    {
      id: 'msg-4',
      sender: {
        name: 'GitHub Notifications',
        email: '[email protected]',
        initials: 'GH',
      },
      recipient: '[email protected]',
      subject: '[PR #412] Merged: feat(tokens): OKLCH color scale & dynamic theme engine',
      snippet: 'Merged by @uday into main with 4 approvals and all CI checks passing in 42s...',
      body: `Pull Request #412 has been successfully merged into \`main\` by @uday.
  
  Branch: feat/oklch-tokens → main
  Approvals: 4 / 4 (Marcus Vance, Elena Rostova, Devon Patel, Sarah Connor)
  CI Workflow: Build, Typecheck, and Parity Verification passed in 42s.
  
  Key Deliverables:
  • Implemented OKLCH lightness/chroma token scale with WCAG AAA contrast
  • Tailwind v4 @theme inline integration with zero CSS variable bloat
  • 100% test coverage across both Vue and React registry packages
  
  Automated staging preview is now active at https://staging.uipkge.dev.`,
      timestamp: '10:45',
      fullDate: 'Today at 10:45 AM',
      category: 'team',
      categoryLabel: 'GitHub',
      badgeVariant: 'info',
      unread: false,
      starred: true,
      archived: false,
    },
    {
      id: 'msg-5',
      sender: {
        name: 'Elena Rostova',
        email: '[email protected]',
        initials: 'ER',
      },
      recipient: '[email protected], [email protected]',
      subject: 'Design Tokens OKLCH Migration Spec & Guidelines',
      snippet: 'Here is the finalized Figma token mapping and color ramp guide for the new high-contrast theme...',
      body: `Hi team,
  
  Following up on PR #412, I’ve published the companion Figma variables library and developer handoff sheet.
  
  What’s included in this release:
  1. Semantic tokens: added \`--surface-elevated\` and \`--sidebar-accent\`
  2. Focus ring contrast ratios audited across all 14 colorways
  3. Mobile breakpoint typography scale verified with 12px min floor
  4. Tactile micro-transitions mapped to \`--ease-spring\` (140ms duration)
  
  Please review the design system documentation and let me know if any component needs tailored adjustments.
  
  Warmly,
  Elena Rostova
  Lead Product Designer`,
      timestamp: '09:12',
      fullDate: 'Today at 09:12 AM',
      category: 'team',
      categoryLabel: 'Design',
      badgeVariant: 'secondary',
      unread: false,
      starred: false,
      archived: false,
    },
    {
      id: 'msg-6',
      sender: {
        name: 'Substack / The Unbundled Engineer',
        email: '[email protected]',
        initials: 'SE',
      },
      recipient: '[email protected]',
      subject: 'The Unbundled Engineer: Issue #84 — The Rise of Component Registries',
      snippet:
        'Why copy-paste component architecture is replacing bloated npm packages across modern frontend engineering...',
      body: `Welcome to Issue #84 of The Unbundled Engineer.
  
  This week: Why the component registry model is winning.
  
  "When you install a traditional monolithic npm UI library, you inherit its dependency tree, its CSS opinions, and its release bottlenecks. When you copy registry source code into your own repository, you gain zero-dependency ownership, effortless code customization, and total UI autonomy."
  
  In this edition:
  • Benchmarking bundle sizes: Registry components vs. Monolithic packages
  • Tactile micro-interactions and keyboard-first inbox triage UX
  • The future of dual-framework design systems (Vue 3.5 & React 19)
  
  Read the full deep-dive on our website.`,
      timestamp: 'Yesterday',
      fullDate: 'Yesterday at 17:30 PM',
      category: 'newsletters',
      categoryLabel: 'Newsletter',
      badgeVariant: 'warning',
      unread: false,
      starred: false,
      archived: false,
    },
  ]
  
  export function SmartInboxTriage({
    initialCategory = 'vip',
    initialSearch = '',
    initialSelectedId = 'msg-1',
    messages,
    className,
  }: SmartInboxTriageProps) {
    const [mails, setMails] = React.useState<EmailMessage[]>(() =>
      messages ? JSON.parse(JSON.stringify(messages)) : defaultMessages,
    )
    const [activeCategory, setActiveCategory] = React.useState<InboxCategory>(initialCategory)
    const [search, setSearch] = React.useState(initialSearch)
    const [activeId, setActiveId] = React.useState<string>(initialSelectedId)
    const [replyMode, setReplyMode] = React.useState<'reply' | 'reply-all' | 'forward'>('reply')
    const [replyDraft, setReplyDraft] = React.useState('')
    const [toastMessage, setToastMessage] = React.useState('')
    const [hasUndo, setHasUndo] = React.useState(false)
    const [lastArchivedId, setLastArchivedId] = React.useState<string | null>(null)
    const [commandPaletteOpen, setCommandPaletteOpen] = React.useState(false)
    const [commandFilter, setCommandFilter] = React.useState('')
  
    const searchInputRef = React.useRef<HTMLInputElement | null>(null)
    const replyTextareaRef = React.useRef<HTMLTextAreaElement | null>(null)
    const toastTimerRef = React.useRef<number | undefined>(undefined)
  
    const showToast = React.useCallback((msg: string, allowUndo = false) => {
      setToastMessage(msg)
      setHasUndo(allowUndo)
      if (toastTimerRef.current) clearTimeout(toastTimerRef.current)
      toastTimerRef.current = window.setTimeout(() => {
        setToastMessage('')
        setHasUndo(false)
      }, 4000)
    }, [])
  
    const vipCount = React.useMemo(() => mails.filter((m) => !m.archived && m.category === 'vip').length, [mails])
    const teamCount = React.useMemo(() => mails.filter((m) => !m.archived && m.category === 'team').length, [mails])
    const newslettersCount = React.useMemo(
      () => mails.filter((m) => !m.archived && m.category === 'newsletters').length,
      [mails],
    )
    const archivedCount = React.useMemo(() => mails.filter((m) => m.archived).length, [mails])
    const remainingCount = React.useMemo(() => mails.filter((m) => !m.archived).length, [mails])
  
    const categoriesList = React.useMemo<Array<{ id: InboxCategory; label: string; count: number }>>(
      () => [
        { id: 'vip', label: 'Important & VIP', count: vipCount },
        { id: 'team', label: 'Team & GitHub', count: teamCount },
        { id: 'newsletters', label: 'Newsletters', count: newslettersCount },
        { id: 'archived', label: 'Done / Archived', count: archivedCount },
      ],
      [vipCount, teamCount, newslettersCount, archivedCount],
    )
  
    const visibleMails = React.useMemo(() => {
      const q = search.trim().toLowerCase()
      let list = mails.filter((m) => {
        if (activeCategory === 'archived') {
          return m.archived
        }
        return !m.archived && m.category === activeCategory
      })
  
      if (q) {
        list = list.filter(
          (m) =>
            m.subject.toLowerCase().includes(q) ||
            m.sender.name.toLowerCase().includes(q) ||
            m.sender.email.toLowerCase().includes(q) ||
            m.snippet.toLowerCase().includes(q) ||
            m.body.toLowerCase().includes(q),
        )
      }
  
      return list
    }, [mails, activeCategory, search])
  
    const activeMail = React.useMemo(() => {
      if (!activeId) return visibleMails[0] ?? null
      return mails.find((m) => m.id === activeId) ?? visibleMails[0] ?? null
    }, [mails, activeId, visibleMails])
  
    const selectMail = React.useCallback((id: string) => {
      setActiveId(id)
      setMails((prev) => prev.map((m) => (m.id === id ? { ...m, unread: false } : m)))
    }, [])
  
    const selectCategory = React.useCallback(
      (cat: InboxCategory) => {
        setActiveCategory(cat)
        const q = search.trim().toLowerCase()
        const nextVisible = mails.filter((m) => {
          if (cat === 'archived') return m.archived
          return !m.archived && m.category === cat
        })
        const filtered = q
          ? nextVisible.filter(
              (m) =>
                m.subject.toLowerCase().includes(q) ||
                m.sender.name.toLowerCase().includes(q) ||
                m.sender.email.toLowerCase().includes(q) ||
                m.snippet.toLowerCase().includes(q) ||
                m.body.toLowerCase().includes(q),
            )
          : nextVisible
  
        if (filtered[0]) {
          selectMail(filtered[0].id)
        } else {
          setActiveId('')
        }
      },
      [mails, search, selectMail],
    )
  
    const archiveMail = React.useCallback(
      (id?: string) => {
        const targetId = id ?? activeMail?.id
        if (!targetId) return
  
        const item = mails.find((m) => m.id === targetId)
        if (!item) return
  
        setMails((prev) => prev.map((m) => (m.id === targetId ? { ...m, archived: true, snoozed: false } : m)))
        setLastArchivedId(targetId)
        showToast(`Archived: "${item.subject}"`, true)
  
        // Find next visible email
        const remainingVisible = visibleMails.filter((m) => m.id !== targetId)
        if (remainingVisible[0]) {
          selectMail(remainingVisible[0].id)
        } else {
          setActiveId('')
        }
      },
      [activeMail, mails, showToast, visibleMails, selectMail],
    )
  
    const snoozeMail = React.useCallback(
      (id?: string) => {
        const targetId = id ?? activeMail?.id
        if (!targetId) return
  
        const item = mails.find((m) => m.id === targetId)
        if (!item) return
  
        setMails((prev) => prev.map((m) => (m.id === targetId ? { ...m, archived: true, snoozed: true } : m)))
        setLastArchivedId(targetId)
        showToast('Snoozed until tomorrow 08:00 AM', true)
  
        const remainingVisible = visibleMails.filter((m) => m.id !== targetId)
        if (remainingVisible[0]) {
          selectMail(remainingVisible[0].id)
        } else {
          setActiveId('')
        }
      },
      [activeMail, mails, showToast, visibleMails, selectMail],
    )
  
    const undoLastAction = React.useCallback(() => {
      if (!lastArchivedId) return
      const item = mails.find((m) => m.id === lastArchivedId)
      if (item) {
        setMails((prev) => prev.map((m) => (m.id === lastArchivedId ? { ...m, archived: false, snoozed: false } : m)))
        setActiveCategory(item.category)
        setActiveId(item.id)
        showToast(`Restored: "${item.subject}"`)
      }
      setLastArchivedId(null)
      setHasUndo(false)
    }, [lastArchivedId, mails, showToast])
  
    const toggleStar = React.useCallback(
      (id?: string, e?: React.MouseEvent) => {
        e?.stopPropagation()
        const targetId = id ?? activeMail?.id
        if (!targetId) return
        setMails((prev) => prev.map((m) => (m.id === targetId ? { ...m, starred: !m.starred } : m)))
      },
      [activeMail],
    )
  
    const navigateNext = React.useCallback(() => {
      if (visibleMails.length === 0) return
      const currentIndex = visibleMails.findIndex((m) => m.id === activeId)
      if (currentIndex === -1 || currentIndex >= visibleMails.length - 1) {
        selectMail(visibleMails[0].id)
      } else {
        selectMail(visibleMails[currentIndex + 1].id)
      }
    }, [visibleMails, activeId, selectMail])
  
    const navigatePrev = React.useCallback(() => {
      if (visibleMails.length === 0) return
      const currentIndex = visibleMails.findIndex((m) => m.id === activeId)
      if (currentIndex <= 0) {
        selectMail(visibleMails[visibleMails.length - 1].id)
      } else {
        selectMail(visibleMails[currentIndex - 1].id)
      }
    }, [visibleMails, activeId, selectMail])
  
    const sendReply = React.useCallback(() => {
      const content = replyDraft.trim()
      if (!content || !activeMail) return
  
      const senderName = activeMail.sender.name
      setReplyDraft('')
      showToast(`Reply sent to ${senderName}`)
    }, [replyDraft, activeMail, showToast])
  
    const markAllRead = React.useCallback(() => {
      setMails((prev) =>
        prev.map((m) => {
          if (activeCategory === 'archived' ? m.archived : !m.archived && m.category === activeCategory) {
            return { ...m, unread: false }
          }
          return m
        }),
      )
      showToast('Marked all as read')
    }, [activeCategory, showToast])
  
    const archiveAllInCategory = React.useCallback(() => {
      if (activeCategory === 'archived') return
      setMails((prev) => prev.map((m) => (!m.archived && m.category === activeCategory ? { ...m, archived: true } : m)))
      showToast('All messages in category archived')
      setActiveId('')
    }, [activeCategory, showToast])
  
    // Global Keyboard Navigation
    React.useEffect(() => {
      function handleKeyDown(e: KeyboardEvent) {
        const activeEl = document.activeElement
        const isInputActive =
          activeEl instanceof HTMLInputElement ||
          activeEl instanceof HTMLTextAreaElement ||
          activeEl?.getAttribute('contenteditable') === 'true'
  
        // Cmd+K / Ctrl+K
        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
          e.preventDefault()
          setCommandPaletteOpen((prev) => !prev)
          return
        }
  
        // Cmd+Z / Ctrl+Z
        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z') {
          e.preventDefault()
          undoLastAction()
          return
        }
  
        // Cmd+Enter inside reply
        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
          if (replyDraft.trim()) {
            e.preventDefault()
            sendReply()
            return
          }
        }
  
        // Escape
        if (e.key === 'Escape') {
          if (commandPaletteOpen) {
            e.preventDefault()
            setCommandPaletteOpen(false)
            return
          }
          if (isInputActive) {
            ;(activeEl as HTMLElement).blur()
            return
          }
          if (search) {
            setSearch('')
            return
          }
        }
  
        // Guard for typing in inputs
        if (isInputActive) return
  
        switch (e.key.toLowerCase()) {
          case 'j':
          case 'arrowdown':
            e.preventDefault()
            navigateNext()
            break
          case 'k':
          case 'arrowup':
            e.preventDefault()
            navigatePrev()
            break
          case 'e':
            e.preventDefault()
            archiveMail()
            break
          case 'h':
            e.preventDefault()
            snoozeMail()
            break
          case 'r':
            e.preventDefault()
            replyTextareaRef.current?.focus()
            break
          case 's':
            e.preventDefault()
            toggleStar()
            break
          case '/':
            e.preventDefault()
            searchInputRef.current?.focus()
            searchInputRef.current?.select()
            break
          case '1':
            e.preventDefault()
            selectCategory('vip')
            break
          case '2':
            e.preventDefault()
            selectCategory('team')
            break
          case '3':
            e.preventDefault()
            selectCategory('newsletters')
            break
          case '4':
            e.preventDefault()
            selectCategory('archived')
            break
        }
      }
  
      window.addEventListener('keydown', handleKeyDown)
      return () => {
        window.removeEventListener('keydown', handleKeyDown)
        if (toastTimerRef.current) clearTimeout(toastTimerRef.current)
      }
    }, [
      archiveMail,
      commandPaletteOpen,
      navigateNext,
      navigatePrev,
      replyDraft,
      search,
      selectCategory,
      sendReply,
      snoozeMail,
      toggleStar,
      undoLastAction,
    ])
  
    const commandPaletteItems = React.useMemo(
      () => [
        { key: 'E', label: 'Archive active email', action: () => archiveMail() },
        { key: 'H', label: 'Snooze until tomorrow', action: () => snoozeMail() },
        {
          key: 'R',
          label: 'Reply to sender',
          action: () => {
            replyTextareaRef.current?.focus()
          },
        },
        { key: 'S', label: 'Toggle star / priority', action: () => toggleStar() },
        { key: '1', label: 'Switch to Important & VIP', action: () => selectCategory('vip') },
        { key: '2', label: 'Switch to Team & GitHub', action: () => selectCategory('team') },
        { key: '3', label: 'Switch to Newsletters', action: () => selectCategory('newsletters') },
        { key: '4', label: 'Switch to Done / Archived', action: () => selectCategory('archived') },
        { key: 'Shift+A', label: 'Mark all as read in current category', action: () => markAllRead() },
        { key: 'Shift+E', label: 'Archive all in category', action: () => archiveAllInCategory() },
      ],
      [archiveAllInCategory, archiveMail, markAllRead, selectCategory, snoozeMail, toggleStar],
    )
  
    const filteredCommandPaletteItems = React.useMemo(() => {
      const q = commandFilter.trim().toLowerCase()
      if (!q) return commandPaletteItems
      return commandPaletteItems.filter((i) => i.label.toLowerCase().includes(q) || i.key.toLowerCase().includes(q))
    }, [commandFilter, commandPaletteItems])
  
    function executeCommand(action: () => void) {
      action()
      setCommandPaletteOpen(false)
      setCommandFilter('')
    }
  
    return (
      <div
        data-slot="smart-inbox-triage"
        className={cn(
          'bg-card text-card-foreground border-border relative flex flex-col overflow-hidden rounded-xl border shadow-xs',
          className,
        )}
      >
        {/* TOP COMMAND BAR */}
        <header className="bg-card/95 border-border/80 border-b px-4 py-3 backdrop-blur-xs">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            {/* Left: Inbox Status & Goal Badge */}
            <div className="flex flex-wrap items-center gap-2.5">
              <div className="bg-primary/10 border-primary/20 text-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-tight">
                <span className="bg-primary size-2 animate-pulse rounded-full" />
                <span>Inbox Zero Goal</span>
                <span className="text-primary font-mono tabular-nums">
                  {remainingCount === 0 ? 'Zero Achieved 🎉' : `${remainingCount} Messages Remaining`}
                </span>
              </div>
  
              <div className="border-border/70 bg-muted/40 text-muted-foreground hidden items-center gap-1.5 rounded-full border px-3 py-1 text-xs xl:inline-flex">
                <span>Shortcuts:</span>
                <kbd className="bg-card border-border/80 text-foreground rounded border px-1.5 py-0.5 font-mono text-xs">
                  E
                </kbd>
                <span>Archive</span>
                <kbd className="bg-card border-border/80 text-foreground rounded border px-1.5 py-0.5 font-mono text-xs">
                  H
                </kbd>
                <span>Snooze</span>
                <kbd className="bg-card border-border/80 text-foreground rounded border px-1.5 py-0.5 font-mono text-xs">
                  R
                </kbd>
                <span>Reply</span>
                <kbd className="bg-card border-border/80 text-foreground rounded border px-1.5 py-0.5 font-mono text-xs">
                  J/K
                </kbd>
                <span>Navigate</span>
              </div>
            </div>
  
            {/* Right: Search Bar & Command Key Trigger */}
            <div className="flex items-center gap-2">
              <div className="relative w-full sm:w-72">
                <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
                <input
                  ref={searchInputRef}
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  type="text"
                  placeholder="Search messages..."
                  className="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border pr-8 pl-8 text-xs shadow-xs focus-visible:ring-2 focus-visible:outline-none"
                />
                <kbd className="bg-muted text-muted-foreground border-border/70 absolute top-1/2 right-2 -translate-y-1/2 rounded border px-1 font-mono text-xs">
                  /
                </kbd>
              </div>
  
              <Button
                aria-label="Close command palette"
                variant="outline"
                size="sm"
                className="h-8 shrink-0 gap-1.5 px-2.5 text-xs font-medium"
                onClick={() => setCommandPaletteOpen(true)}
              >
                <CommandIcon className="size-3.5" />
                <span className="hidden sm:inline">Commands</span>
                <kbd className="bg-muted text-muted-foreground border-border/60 ml-0.5 rounded border px-1 font-mono text-xs">
                  ⌘K
                </kbd>
              </Button>
            </div>
          </div>
  
          {/* Split Category Tabs Bar */}
          <div className="border-border/40 mt-3 flex items-center justify-between border-t pt-2.5">
            <nav className="flex flex-wrap items-center gap-1.5" aria-label="Inbox Categories">
              {categoriesList.map((cat) => (
                <button
                  key={cat.id}
                  type="button"
                  className={cn(
                    'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150',
                    activeCategory === cat.id
                      ? 'bg-primary text-primary-foreground shadow-xs'
                      : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',
                  )}
                  onClick={() => selectCategory(cat.id)}
                >
                  <span>{cat.label}</span>
                  <span
                    className={cn(
                      'inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-xs font-semibold tabular-nums',
                      activeCategory === cat.id
                        ? 'bg-primary-foreground/20 text-primary-foreground'
                        : 'bg-muted text-foreground',
                    )}
                  >
                    {cat.count}
                  </span>
                </button>
              ))}
            </nav>
  
            <div className="hidden items-center gap-1 sm:flex">
              <Button
                variant="ghost"
                size="sm"
                className="text-muted-foreground hover:text-foreground h-7 px-2 text-xs"
                onClick={markAllRead}
              >
                <Check className="mr-1 size-3" />
                Mark read
              </Button>
            </div>
          </div>
        </header>
  
        {/* 2-COLUMN SPLIT PANE */}
        <div className="grid h-[620px] grid-cols-1 md:grid-cols-[384px_1fr]">
          {/* LEFT: EMAIL LIST (w-96) */}
          <aside className="bg-card border-border flex min-w-0 flex-col border-r">
            {/* List Header */}
            <div className="bg-muted/20 border-border/80 flex h-11 shrink-0 items-center justify-between border-b px-3.5">
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground text-xs font-semibold tracking-tight uppercase">
                  {categoriesList.find((c) => c.id === activeCategory)?.label}
                </span>
                <Badge variant="outline" className="h-4 px-1.5 font-mono text-xs tabular-nums">
                  {visibleMails.length}
                </Badge>
              </div>
              <span className="text-muted-foreground/80 font-mono text-xs">[J/K] navigate</span>
            </div>
  
            {/* Scrollable Messages Feed */}
            <div className="list-scroll divide-border/40 flex-1 divide-y overflow-y-auto">
              {visibleMails.map((mail) => (
                <div
                  key={mail.id}
                  role="button"
                  tabIndex={0}
                  className={cn(
                    'group relative flex cursor-pointer flex-col gap-1 px-4 py-3 text-left transition-colors duration-150',
                    mail.id === activeMail?.id
                      ? 'bg-accent/70 text-accent-foreground'
                      : 'hover:bg-muted/40 text-foreground',
                  )}
                  onClick={() => selectMail(mail.id)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault()
                      selectMail(mail.id)
                    }
                  }}
                >
                  {/* Active indicator left bar */}
                  {mail.id === activeMail?.id && (
                    <span className="bg-primary absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full" />
                  )}
  
                  {/* Row 1: Sender avatar, name, time, star */}
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex min-w-0 items-center gap-2.5">
                      <Avatar className="size-6 shrink-0 text-xs">
                        <AvatarFallback className="bg-muted text-xs font-semibold">{mail.sender.initials}</AvatarFallback>
                      </Avatar>
                      <p
                        className={cn(
                          'truncate text-xs',
                          mail.unread ? 'text-foreground font-semibold' : 'text-foreground/80 font-medium',
                        )}
                      >
                        {mail.sender.name}
                      </p>
                    </div>
  
                    <div className="flex shrink-0 items-center gap-1.5">
                      <span className="text-muted-foreground font-mono text-xs tabular-nums">{mail.timestamp}</span>
                      <button
                        type="button"
                        className={cn(
                          'hover:text-warning inline-flex size-6 items-center justify-center rounded transition-colors',
                          mail.starred ? 'text-warning' : 'text-muted-foreground/40 hover:text-muted-foreground',
                        )}
                        title={mail.starred ? 'Unstar message' : 'Star message'}
                        onClick={(e) => toggleStar(mail.id, e)}
                      >
                        <Star className={cn('size-3.5', mail.starred ? 'fill-warning' : '')} />
                      </button>
                    </div>
                  </div>
  
                  {/* Row 2: Subject line with unread bullet */}
                  <div className="mt-0.5 flex items-center gap-1.5">
                    {mail.unread && <span className="bg-primary size-1.5 shrink-0 rounded-full" />}
                    <p
                      className={cn(
                        'truncate text-xs tracking-tight',
                        mail.unread ? 'text-foreground font-semibold' : 'text-foreground/90 font-medium',
                      )}
                    >
                      {mail.subject}
                    </p>
                  </div>
  
                  {/* Row 3: 1-line snippet */}
                  <p className="text-muted-foreground line-clamp-1 text-xs leading-relaxed">{mail.snippet}</p>
  
                  {/* Row 4: Category badge and attachment */}
                  <div className="mt-1 flex items-center justify-between gap-2">
                    <Badge variant={mail.badgeVariant ?? 'secondary'} className="h-4.5 px-1.5 text-xs font-medium">
                      {mail.categoryLabel}
                    </Badge>
  
                    {mail.attachment && (
                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
                        <Paperclip className="size-3" />
                        <span>{mail.attachment.type}</span>
                      </div>
                    )}
                  </div>
                </div>
              ))}
  
              {/* Empty State */}
              {visibleMails.length === 0 && (
                <div className="flex flex-col items-center justify-center px-6 py-20 text-center">
                  <div className="bg-muted/80 text-muted-foreground mb-3 flex size-12 items-center justify-center rounded-full">
                    <CheckCircle2 className="text-primary size-6" />
                  </div>
                  <p className="text-foreground text-sm font-semibold">Inbox Zero Achieved</p>
                  <p className="text-muted-foreground mt-1 max-w-[220px] text-xs">
                    No emails in {categoriesList.find((c) => c.id === activeCategory)?.label}. You are completely caught
                    up!
                  </p>
                  {activeCategory !== 'archived' && (
                    <Button
                      variant="outline"
                      size="sm"
                      className="mt-4 h-7 text-xs"
                      onClick={() => selectCategory('archived')}
                    >
                      View Archived
                    </Button>
                  )}
                </div>
              )}
            </div>
          </aside>
  
          {/* RIGHT: SELECTED EMAIL READER & QUICK ACTION */}
          <main className="bg-background flex min-w-0 flex-col overflow-hidden">
            {activeMail ? (
              <>
                {/* Top Action Bar */}
                <div className="bg-card/80 border-border flex h-11 shrink-0 items-center justify-between gap-2 overflow-x-auto border-b px-4 backdrop-blur-xs">
                  <div className="flex items-center gap-1">
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-7 gap-1 px-2.5 text-xs font-medium shadow-xs"
                      onClick={() => archiveMail(activeMail.id)}
                    >
                      <Archive className="size-3.5" />
                      <span>Archive</span>
                      <kbd className="bg-muted text-muted-foreground border-border/80 ml-0.5 rounded border px-1 font-mono text-xs">
                        E
                      </kbd>
                    </Button>
  
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-7 gap-1 px-2.5 text-xs font-medium shadow-xs"
                      onClick={() => snoozeMail(activeMail.id)}
                    >
                      <Clock className="size-3.5" />
                      <span>Snooze</span>
                      <kbd className="bg-muted text-muted-foreground border-border/80 ml-0.5 rounded border px-1 font-mono text-xs">
                        H
                      </kbd>
                    </Button>
  
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-7 gap-1 px-2.5 text-xs font-medium shadow-xs"
                      onClick={() => replyTextareaRef.current?.focus()}
                    >
                      <Reply className="size-3.5" />
                      <span>Reply</span>
                      <kbd className="bg-muted text-muted-foreground border-border/80 ml-0.5 rounded border px-1 font-mono text-xs">
                        R
                      </kbd>
                    </Button>
  
                    <Button
                      variant="ghost"
                      size="icon"
                      className="size-7"
                      title={activeMail.starred ? 'Unstar' : 'Star'}
                      onClick={(e) => toggleStar(activeMail.id, e)}
                    >
                      <Star
                        className={cn(
                          'size-4',
                          activeMail.starred ? 'fill-warning text-warning' : 'text-muted-foreground',
                        )}
                      />
                    </Button>
                  </div>
  
                  {/* Reader Navigation buttons */}
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground size-7"
                      title="Previous (K)"
                      onClick={navigatePrev}
                      aria-label="Action"
                    >
                      <ArrowUp className="size-3.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground size-7"
                      title="Next (J)"
                      onClick={navigateNext}
                      aria-label="Action"
                    >
                      <ArrowDown className="size-3.5" />
                    </Button>
                  </div>
                </div>
  
                {/* Toast Feedback Notification Banner */}
                {toastMessage && (
                  <div className="bg-primary text-primary-foreground flex items-center justify-between px-4 py-2 text-xs font-medium shadow-xs transition-colors">
                    <div className="flex items-center gap-2">
                      <Check className="size-3.5" />
                      <span>{toastMessage}</span>
                    </div>
                    {hasUndo && (
                      <button
                        type="button"
                        className="bg-primary-foreground/20 hover:bg-primary-foreground/30 inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-semibold transition-colors"
                        onClick={undoLastAction}
                      >
                        <Undo2 className="size-3" />
                        <span>Undo (⌘Z)</span>
                      </button>
                    )}
                  </div>
                )}
  
                {/* Reader Scroll Area */}
                <div className="reader-scroll flex-1 overflow-y-auto px-6 py-5">
                  {/* Subject Title */}
                  <div className="flex items-start justify-between gap-4">
                    <h1 className="text-foreground text-lg font-bold tracking-tight sm:text-xl lg:text-2xl">
                      {activeMail.subject}
                    </h1>
                    <Badge variant={activeMail.badgeVariant ?? 'default'} className="shrink-0 text-xs">
                      {activeMail.categoryLabel}
                    </Badge>
                  </div>
  
                  {/* Sender & Recipient Information Card */}
                  <div className="border-border/80 bg-muted/20 mt-4 flex items-start gap-3 rounded-lg border p-3.5">
                    <Avatar className="size-9 shrink-0">
                      <AvatarFallback className="bg-primary/10 text-primary text-xs font-bold">
                        {activeMail.sender.initials}
                      </AvatarFallback>
                    </Avatar>
  
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-baseline justify-between gap-x-2">
                        <p className="text-foreground min-w-0 truncate text-sm font-semibold">
                          {activeMail.sender.name}{' '}
                          <span className="text-muted-foreground text-xs font-normal">
                            &lt;{activeMail.sender.email}&gt;
                          </span>
                        </p>
                        <span className="text-muted-foreground font-mono text-xs tabular-nums">
                          {activeMail.fullDate}
                        </span>
                      </div>
                      <p className="text-muted-foreground mt-0.5 text-xs">
                        to <span className="text-foreground/80 font-medium">{activeMail.recipient}</span>
                      </p>
                    </div>
                  </div>
  
                  <Separator className="my-5" />
  
                  {/* Email Body Content */}
                  <article className="text-foreground/90 space-y-4 text-sm leading-relaxed whitespace-pre-wrap">
                    {activeMail.body}
                  </article>
  
                  {/* Attachment Tile */}
                  {activeMail.attachment && (
                    <div className="mt-6">
                      <p className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase">
                        Attachment
                      </p>
                      <div className="border-border/80 bg-card hover:bg-muted/30 flex max-w-sm items-center justify-between gap-3 rounded-lg border p-3 shadow-xs">
                        <div className="flex items-center gap-3">
                          <div className="bg-info/10 text-info flex size-9 items-center justify-center rounded-md">
                            <FileText className="size-4" />
                          </div>
                          <div>
                            <p className="text-foreground text-xs font-semibold">{activeMail.attachment.name}</p>
                            <p className="text-muted-foreground font-mono text-xs">
                              {activeMail.attachment.size} · {activeMail.attachment.type}
                            </p>
                          </div>
                        </div>
                        <Button aria-label="Download attachment" variant="outline" size="sm" className="h-7 px-2 text-xs">
                          Download
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
  
                {/* Quick Reply Composer */}
                <div className="border-border bg-card border-t p-3.5">
                  <div className="mb-2 flex items-center justify-between">
                    {/* Mode pills */}
                    <div className="flex items-center gap-1">
                      <button
                        type="button"
                        className={cn(
                          'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                          replyMode === 'reply'
                            ? 'bg-primary/10 text-primary font-semibold'
                            : 'text-muted-foreground hover:bg-muted',
                        )}
                        onClick={() => setReplyMode('reply')}
                      >
                        <Reply className="size-3" />
                        Reply
                      </button>
                      <button
                        type="button"
                        className={cn(
                          'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                          replyMode === 'reply-all'
                            ? 'bg-primary/10 text-primary font-semibold'
                            : 'text-muted-foreground hover:bg-muted',
                        )}
                        onClick={() => setReplyMode('reply-all')}
                      >
                        <ReplyAll className="size-3" />
                        Reply all
                      </button>
                      <button
                        type="button"
                        className={cn(
                          'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                          replyMode === 'forward'
                            ? 'bg-primary/10 text-primary font-semibold'
                            : 'text-muted-foreground hover:bg-muted',
                        )}
                        onClick={() => setReplyMode('forward')}
                      >
                        <Forward className="size-3" />
                        Forward
                      </button>
                    </div>
  
                    <span className="text-muted-foreground hidden min-w-0 truncate font-mono text-xs lg:inline">
                      To: {activeMail.sender.email}
                    </span>
                  </div>
  
                  {/* Composer Input Box */}
                  <div className="border-input bg-background focus-within:border-ring focus-within:ring-ring/50 relative flex flex-col rounded-lg border shadow-xs focus-within:ring-2">
                    <textarea
                      ref={replyTextareaRef}
                      value={replyDraft}
                      onChange={(e) => setReplyDraft(e.target.value)}
                      rows={2}
                      placeholder={`Write a reply to ${activeMail.sender.name}... (⌘↵ to send)`}
                      className="placeholder:text-muted-foreground w-full resize-none bg-transparent px-3 py-2 text-xs leading-relaxed outline-none"
                    />
  
                    <div className="border-border/40 flex items-center justify-between border-t px-2 py-1.5">
                      <div className="flex items-center gap-0.5">
                        <Button
                          aria-label="Attach file"
                          variant="ghost"
                          size="icon"
                          className="text-muted-foreground hover:text-foreground size-7"
                        >
                          <Paperclip className="size-3.5" />
                        </Button>
                        <Button
                          aria-label="Add emoji"
                          variant="ghost"
                          size="icon"
                          className="text-muted-foreground hover:text-foreground size-7"
                        >
                          <Smile className="size-3.5" />
                        </Button>
                        <Button
                          aria-label="Mention someone"
                          variant="ghost"
                          size="icon"
                          className="text-muted-foreground hover:text-foreground size-7"
                        >
                          <AtSign className="size-3.5" />
                        </Button>
                      </div>
  
                      <div className="flex items-center gap-2">
                        <kbd className="bg-muted text-muted-foreground border-border/70 hidden rounded border px-1.5 py-0.5 font-mono text-xs sm:inline-flex">
                          ⌘↵
                        </kbd>
                        <Button
                          size="sm"
                          className="h-7 gap-1 px-3 text-xs font-semibold shadow-xs"
                          disabled={!replyDraft.trim()}
                          onClick={sendReply}
                        >
                          <span>Send</span>
                          <Send className="size-3" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            ) : (
              /* No Email Selected Placeholder */
              <div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
                <div className="bg-muted/60 text-muted-foreground mb-3 flex size-14 items-center justify-center rounded-full">
                  <Mail className="size-7" />
                </div>
                <p className="text-foreground text-sm font-semibold">No message selected</p>
                <p className="text-muted-foreground mt-1 max-w-sm text-xs">
                  Select an email from the list or use J/K to navigate through your triage queue.
                </p>
              </div>
            )}
          </main>
        </div>
  
        {/* COMMAND PALETTE MODAL (⌘K) */}
        {commandPaletteOpen && (
          <div
            className="bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-xs"
            onClick={(e) => {
              if (e.target === e.currentTarget) setCommandPaletteOpen(false)
            }}
          >
            <div className="bg-card text-card-foreground border-border animate-in fade-in-0 zoom-in-95 w-full max-w-lg overflow-hidden rounded-xl border shadow-xl">
              <div className="border-border flex items-center border-b px-3 py-2.5">
                <CommandIcon className="text-muted-foreground mr-2 size-4" />
                <input
                  value={commandFilter}
                  onChange={(e) => setCommandFilter(e.target.value)}
                  type="text"
                  placeholder="Type a command or shortcut..."
                  className="placeholder:text-muted-foreground w-full bg-transparent text-xs outline-none"
                  autoFocus
                />
                <button
                  type="button"
                  className="text-muted-foreground hover:text-foreground ml-2 rounded p-1"
                  aria-label="Close command palette"
                  onClick={() => setCommandPaletteOpen(false)}
                >
                  <X className="size-4" />
                </button>
              </div>
  
              <div className="max-h-72 overflow-y-auto p-2">
                <p className="text-muted-foreground px-2 py-1 text-xs font-semibold tracking-wider uppercase">
                  High Velocity Actions
                </p>
                {filteredCommandPaletteItems.map((item) => (
                  <button
                    key={item.key}
                    type="button"
                    className="hover:bg-muted/70 flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left text-xs transition-colors"
                    onClick={() => executeCommand(item.action)}
                  >
                    <span>{item.label}</span>
                    <kbd className="bg-muted text-muted-foreground border-border/80 rounded border px-1.5 py-0.5 font-mono text-xs">
                      {item.key}
                    </kbd>
                  </button>
                ))}
              </div>
  
              <div className="bg-muted/40 border-border text-muted-foreground flex items-center justify-between border-t px-3 py-2 text-xs">
                <span>
                  Use <strong>Esc</strong> to close
                </span>
                <span>Superhuman Mode Active</span>
              </div>
            </div>
          </div>
        )}
      </div>
    )
  }