{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inbox", "title": "Inbox", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/inbox/Inbox.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Archive,\n ArrowLeft,\n ArrowRight,\n AtSign,\n Forward,\n Inbox as InboxIcon,\n MoreVertical,\n Paperclip,\n Pencil,\n Reply,\n ReplyAll,\n Search,\n Send,\n Smile,\n Star,\n Tag,\n Trash2,\n AlertOctagon,\n FileText,\n Bookmark,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { cn } from '@/lib/utils'\n\ntype ReplyMode = 'reply' | 'reply-all' | 'forward'\n\ntype FolderId = 'inbox' | 'starred' | 'sent' | 'drafts' | 'spam' | 'trash'\n\ninterface Folder {\n id: FolderId\n label: string\n icon: React.ComponentType<{ className?: string }>\n}\n\ninterface LabelTag {\n id: string\n label: string\n color: string\n}\n\ninterface Mail {\n id: string\n folder: FolderId\n from: { name: string; email: string; initials: string }\n to: string\n subject: string\n preview: string\n body: string\n receivedAt: Date\n read: boolean\n starred: boolean\n hasAttachment: boolean\n labels: string[]\n}\n\nconst folders: Folder[] = [\n { id: 'inbox', label: 'Inbox', icon: InboxIcon },\n { id: 'starred', label: 'Starred', icon: Star },\n { id: 'sent', label: 'Sent', icon: Send },\n { id: 'drafts', label: 'Drafts', icon: FileText },\n { id: 'spam', label: 'Spam', icon: AlertOctagon },\n { id: 'trash', label: 'Trash', icon: Trash2 },\n]\n\nconst labels: LabelTag[] = [\n { id: 'work', label: 'Work', color: 'bg-primary' },\n { id: 'personal', label: 'Personal', color: 'bg-success' },\n { id: 'finance', label: 'Finance', color: 'bg-info' },\n { id: 'travel', label: 'Travel', color: 'bg-warning' },\n]\n\nconst now = new Date()\nconst todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())\nconst yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)\n\nconst defaultMails: Mail[] = [\n {\n id: 'e1',\n folder: 'inbox',\n from: { name: 'Sarah Connor', email: 'sarah@acme.com', initials: 'SC' },\n to: 'you@acme.com',\n subject: 'Q2 OKR draft — your sign-off needed',\n preview:\n 'Pulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need…',\n body: `Hi,\\n\\nPulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need your call before we lock it:\\n\\n• Hiring plan: 4 vs 6 ENG roles (page 3)\\n• EU rollout timing: April vs June (page 7)\\n\\nGoing to share with the rest of the leadership team Wednesday EOD, so anything from you by Tuesday is great.\\n\\nThanks,\\nSarah`,\n receivedAt: new Date(now.getTime() - 18 * 60 * 1000),\n read: false,\n starred: true,\n hasAttachment: true,\n labels: ['work'],\n },\n {\n id: 'e2',\n folder: 'inbox',\n from: { name: 'Marcus Rivera', email: 'marcus@acme.com', initials: 'MR' },\n to: 'you@acme.com',\n subject: 'Re: Dashboard review tomorrow',\n preview:\n 'Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.',\n body: `Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.\\n\\nFew things I want to cover:\\n - Throughput delta vs last sprint\\n - The two stories we de-scoped\\n - Q2 capacity ask\\n\\nSee you tomorrow,\\nMarcus`,\n receivedAt: new Date(now.getTime() - 95 * 60 * 1000),\n read: false,\n starred: false,\n hasAttachment: false,\n labels: ['work'],\n },\n {\n id: 'e3',\n folder: 'inbox',\n from: { name: 'Stripe', email: 'receipts@stripe.com', initials: 'St' },\n to: 'you@acme.com',\n subject: 'Your invoice from Acme Inc. — $1,290.00',\n preview: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00…',\n body: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00.',\n receivedAt: new Date(now.getTime() - 4 * 60 * 60 * 1000),\n read: true,\n starred: false,\n hasAttachment: true,\n labels: ['finance'],\n },\n {\n id: 'e4',\n folder: 'inbox',\n from: { name: 'Linear', email: 'no-reply@linear.app', initials: 'Li' },\n to: 'you@acme.com',\n subject: 'Weekly summary: 14 issues closed, 22 opened',\n preview:\n 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',\n body: 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',\n receivedAt: new Date(now.getTime() - 9 * 60 * 60 * 1000),\n read: true,\n starred: false,\n hasAttachment: false,\n labels: ['work'],\n },\n {\n id: 'e5',\n folder: 'inbox',\n from: { name: 'Priya Shah', email: 'priya@acme.com', initials: 'PS' },\n to: 'you@acme.com',\n subject: 'Color tokens are live in staging',\n preview:\n 'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look…',\n body: 'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look when you have a sec.',\n receivedAt: yesterday,\n read: true,\n starred: true,\n hasAttachment: false,\n labels: ['work'],\n },\n {\n id: 'e6',\n folder: 'inbox',\n from: { name: 'United Airlines', email: 'reservations@united.com', initials: 'UA' },\n to: 'you@acme.com',\n subject: 'Your itinerary: SFO → LHR, departing Apr 12',\n preview: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',\n body: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',\n receivedAt: new Date(now.getTime() - 38 * 60 * 60 * 1000),\n read: true,\n starred: false,\n hasAttachment: true,\n labels: ['travel'],\n },\n {\n id: 'e7',\n folder: 'inbox',\n from: { name: 'Mom', email: 'mom@family.net', initials: 'M' },\n to: 'you@acme.com',\n subject: 'Sunday lunch?',\n preview: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',\n body: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',\n receivedAt: new Date(now.getTime() - 55 * 60 * 60 * 1000),\n read: true,\n starred: false,\n hasAttachment: false,\n labels: ['personal'],\n },\n]\n\nexport interface InboxProps {\n messages?: Mail[]\n}\n\nfunction formatMailTime(d: Date): string {\n if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })\n if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'\n const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000))\n if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' })\n return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n}\n\nfunction formatFullTime(d: Date): string {\n return d.toLocaleString(undefined, {\n weekday: 'short',\n month: 'short',\n day: 'numeric',\n hour: 'numeric',\n minute: '2-digit',\n })\n}\n\nfunction labelMeta(id: string): LabelTag | undefined {\n return labels.find((l) => l.id === id)\n}\n\nexport function Inbox({ messages = defaultMails }: InboxProps) {\n const [mails, setMails] = React.useState(messages)\n const [activeFolder, setActiveFolder] = React.useState('inbox')\n const [activeLabel, setActiveLabel] = React.useState(null)\n const [activeId, setActiveId] = React.useState('e1')\n const [search, setSearch] = React.useState('')\n const [replyMode, setReplyMode] = React.useState('reply')\n const [replyDraft, setReplyDraft] = React.useState('')\n const [justSent, setJustSent] = React.useState(false)\n\n function unreadCount(id: FolderId): number {\n if (id === 'starred') return mails.filter((m) => m.starred && !m.read && m.folder !== 'trash').length\n return mails.filter((m) => m.folder === id && !m.read).length\n }\n\n const labelCounts = React.useMemo(\n () =>\n labels.reduce>((acc, l) => {\n acc[l.id] = mails.filter((m) => m.labels.includes(l.id)).length\n return acc\n }, {}),\n [mails],\n )\n\n const visibleMails = React.useMemo(() => {\n const q = search.trim().toLowerCase()\n let list = mails.filter((m) => {\n if (activeLabel) return m.labels.includes(activeLabel)\n if (activeFolder === 'starred') return m.starred && m.folder !== 'trash'\n return m.folder === activeFolder\n })\n if (q) {\n list = list.filter(\n (m) =>\n m.subject.toLowerCase().includes(q) ||\n m.from.name.toLowerCase().includes(q) ||\n m.preview.toLowerCase().includes(q),\n )\n }\n return [...list].sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())\n }, [mails, search, activeLabel, activeFolder])\n\n const activeMail = React.useMemo(() => mails.find((m) => m.id === activeId) ?? null, [mails, activeId])\n\n function selectMail(id: string) {\n setActiveId(id)\n setMails((prev) => prev.map((m) => (m.id === id ? { ...m, read: true } : m)))\n }\n\n function selectFolder(id: FolderId) {\n setActiveFolder(id)\n setActiveLabel(null)\n const list = [...mails]\n .filter((m) => (id === 'starred' ? m.starred && m.folder !== 'trash' : m.folder === id))\n .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())\n const first = list[0]\n if (first) setActiveId(first.id)\n }\n\n function selectLabel(id: string) {\n setActiveLabel(id)\n const list = [...mails]\n .filter((m) => m.labels.includes(id))\n .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())\n const first = list[0]\n if (first) setActiveId(first.id)\n }\n\n function toggleStar(id: string, e?: React.MouseEvent) {\n e?.stopPropagation()\n setMails((prev) => prev.map((m) => (m.id === id ? { ...m, starred: !m.starred } : m)))\n }\n\n function archive(id: string) {\n setMails((prev) => {\n const next = prev.filter((m) => m.id !== id)\n const visible = [...next]\n .filter((m) => {\n if (activeLabel) return m.labels.includes(activeLabel)\n if (activeFolder === 'starred') return m.starred && m.folder !== 'trash'\n return m.folder === activeFolder\n })\n .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())\n const nextActive = visible[0]\n if (nextActive) setActiveId(nextActive.id)\n return next\n })\n }\n\n const replyRecipient = React.useMemo(() => {\n const m = activeMail\n if (!m) return ''\n if (replyMode === 'forward') return ''\n return m.from.name + ' <' + m.from.email + '>'\n }, [activeMail, replyMode])\n\n const replyPlaceholder = replyMode === 'forward' ? 'Add a note before forwarding' : 'Write a reply'\n\n const sendDisabled = !replyDraft.trim() || (replyMode === 'forward' && false)\n\n function changeReplyMode(mode: ReplyMode) {\n setReplyMode(mode)\n setJustSent(false)\n }\n\n function sendReply() {\n const body = replyDraft.trim()\n if (!body) return\n setReplyDraft('')\n setJustSent(true)\n window.setTimeout(() => {\n setJustSent(false)\n }, 1800)\n }\n\n function onReplyKey(e: React.KeyboardEvent) {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n sendReply()\n }\n }\n\n React.useEffect(() => {\n setReplyDraft('')\n setReplyMode('reply')\n setJustSent(false)\n }, [activeId])\n\n return (\n
\n \n\n
\n
\n
\n \n setSearch(e.target.value)}\n placeholder=\"Search mail\"\n className=\"h-8 rounded-lg pl-8 text-xs\"\n />\n
\n \n
\n
\n

\n {activeLabel ? labelMeta(activeLabel)?.label : activeFolder}\n

\n \n {visibleMails.length} message{visibleMails.length === 1 ? '' : 's'}\n \n
\n
\n {visibleMails.map((m) => (\n selectMail(m.id)}\n >\n {m.id === activeId && (\n \n )}\n
\n \n {m.from.initials}\n \n
\n
\n

\n {m.from.name}\n

\n \n {formatMailTime(m.receivedAt)}\n \n
\n

\n {m.subject}\n

\n

{m.preview}

\n
\n {m.labels.map((lid) => (\n \n \n {labelMeta(lid)?.label}\n \n ))}\n {m.hasAttachment && }\n {!m.read && }\n
\n
\n toggleStar(m.id, e)}\n >\n \n \n
\n \n ))}\n\n {visibleMails.length === 0 && (\n
\n
\n \n
\n

Nothing here

\n

No messages match the current filter.

\n
\n )}\n
\n
\n\n
\n {activeMail ? (\n <>\n
\n
\n \n archive(activeMail.id)}\n >\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n\n
\n
\n

\n {activeMail.subject}\n

\n
\n {activeMail.labels.map((lid) => (\n \n \n {labelMeta(lid)?.label}\n \n ))}\n
\n
\n\n
\n \n {activeMail.from.initials}\n \n
\n
\n

{activeMail.from.name}

\n

<{activeMail.from.email}>

\n
\n

to {activeMail.to}

\n
\n
\n {formatFullTime(activeMail.receivedAt)}\n toggleStar(activeMail.id)}\n >\n \n \n
\n
\n\n
\n {activeMail.body}\n
\n\n {activeMail.hasAttachment && (\n
\n
\n
\n \n
\n
\n

attachment.pdf

\n

142 KB · PDF

\n
\n \n
\n
\n )}\n
\n\n
\n
\n changeReplyMode('reply')}\n >\n \n Reply\n \n changeReplyMode('reply-all')}\n >\n \n Reply all\n \n changeReplyMode('forward')}\n >\n \n Forward\n \n
\n
\n {replyRecipient && (\n

\n To: {replyRecipient}\n

\n )}\n setReplyDraft(e.target.value)}\n placeholder={replyPlaceholder}\n rows={1}\n className=\"placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none outline-none focus-visible:ring-0\"\n onKeyDown={onReplyKey}\n />\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n Send\n \n \n
\n
\n
\n {justSent &&

Reply sent

}\n
\n \n ) : (\n
\n
\n
\n \n
\n

No message selected

\n

Pick a message from the list to read it here.

\n
\n
\n )}\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/Inbox.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/input.json" ], "description": "Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.", "categories": [ "communication", "layout" ] }