60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T72d9,'use client' import * as React from 'react' import { Archive, ArrowLeft, ArrowRight, AtSign, Forward, Inbox as InboxIcon, MoreVertical, Paperclip, Pencil, Reply, ReplyAll, Search, Send, Smile, Star, Tag, Trash2, AlertOctagon, FileText, Bookmark, } from 'lucide-react' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { cn } from '@/lib/utils' type ReplyMode = 'reply' | 'reply-all' | 'forward' type FolderId = 'inbox' | 'starred' | 'sent' | 'drafts' | 'spam' | 'trash' interface Folder { id: FolderId label: string icon: React.ComponentType<{ className?: string }> } interface LabelTag { id: string label: string color: string } interface Mail { id: string folder: FolderId from: { name: string; email: string; initials: string } to: string subject: string preview: string body: string receivedAt: Date read: boolean starred: boolean hasAttachment: boolean labels: string[] } const folders: Folder[] = [ { id: 'inbox', label: 'Inbox', icon: InboxIcon }, { id: 'starred', label: 'Starred', icon: Star }, { id: 'sent', label: 'Sent', icon: Send }, { id: 'drafts', label: 'Drafts', icon: FileText }, { id: 'spam', label: 'Spam', icon: AlertOctagon }, { id: 'trash', label: 'Trash', icon: Trash2 }, ] const labels: LabelTag[] = [ { id: 'work', label: 'Work', color: 'bg-primary' }, { id: 'personal', label: 'Personal', color: 'bg-success' }, { id: 'finance', label: 'Finance', color: 'bg-info' }, { id: 'travel', label: 'Travel', color: 'bg-warning' }, ] const now = new Date() const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()) const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) const defaultMails: Mail[] = [ { id: 'e1', folder: 'inbox', from: { name: 'Sarah Connor', email: 'sarah@acme.com', initials: 'SC' }, to: 'you@acme.com', subject: 'Q2 OKR draft — your sign-off needed', preview: 'Pulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need…', 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`, receivedAt: new Date(now.getTime() - 18 * 60 * 1000), read: false, starred: true, hasAttachment: true, labels: ['work'], }, { id: 'e2', folder: 'inbox', from: { name: 'Marcus Rivera', email: 'marcus@acme.com', initials: 'MR' }, to: 'you@acme.com', subject: 'Re: Dashboard review tomorrow', preview: 'Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.', 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`, receivedAt: new Date(now.getTime() - 95 * 60 * 1000), read: false, starred: false, hasAttachment: false, labels: ['work'], }, { id: 'e3', folder: 'inbox', from: { name: 'Stripe', email: 'receipts@stripe.com', initials: 'St' }, to: 'you@acme.com', subject: 'Your invoice from Acme Inc. — $1,290.00', preview: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00…', body: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00.', receivedAt: new Date(now.getTime() - 4 * 60 * 60 * 1000), read: true, starred: false, hasAttachment: true, labels: ['finance'], }, { id: 'e4', folder: 'inbox', from: { name: 'Linear', email: 'no-reply@linear.app', initials: 'Li' }, to: 'you@acme.com', subject: 'Weekly summary: 14 issues closed, 22 opened', preview: 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.', body: 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.', receivedAt: new Date(now.getTime() - 9 * 60 * 60 * 1000), read: true, starred: false, hasAttachment: false, labels: ['work'], }, { id: 'e5', folder: 'inbox', from: { name: 'Priya Shah', email: 'priya@acme.com', initials: 'PS' }, to: 'you@acme.com', subject: 'Color tokens are live in staging', preview: 'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look…', 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.', receivedAt: yesterday, read: true, starred: true, hasAttachment: false, labels: ['work'], }, { id: 'e6', folder: 'inbox', from: { name: 'United Airlines', email: 'reservations@united.com', initials: 'UA' }, to: 'you@acme.com', subject: 'Your itinerary: SFO → LHR, departing Apr 12', preview: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.', body: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.', receivedAt: new Date(now.getTime() - 38 * 60 * 60 * 1000), read: true, starred: false, hasAttachment: true, labels: ['travel'], }, { id: 'e7', folder: 'inbox', from: { name: 'Mom', email: 'mom@family.net', initials: 'M' }, to: 'you@acme.com', subject: 'Sunday lunch?', preview: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!', body: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!', receivedAt: new Date(now.getTime() - 55 * 60 * 60 * 1000), read: true, starred: false, hasAttachment: false, labels: ['personal'], }, ] export interface InboxProps { messages?: Mail[] } function formatMailTime(d: Date): string { if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) if (d.toDateString() === yesterday.toDateString()) return 'Yesterday' const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000)) if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' }) return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) } function formatFullTime(d: Date): string { return d.toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', }) } function labelMeta(id: string): LabelTag | undefined { return labels.find((l) => l.id === id) } export function Inbox({ messages = defaultMails }: InboxProps) { const [mails, setMails] = React.useState(messages) const [activeFolder, setActiveFolder] = React.useState('inbox') const [activeLabel, setActiveLabel] = React.useState(null) const [activeId, setActiveId] = React.useState('e1') const [search, setSearch] = React.useState('') const [replyMode, setReplyMode] = React.useState('reply') const [replyDraft, setReplyDraft] = React.useState('') const [justSent, setJustSent] = React.useState(false) function unreadCount(id: FolderId): number { if (id === 'starred') return mails.filter((m) => m.starred && !m.read && m.folder !== 'trash').length return mails.filter((m) => m.folder === id && !m.read).length } const labelCounts = React.useMemo( () => labels.reduce>((acc, l) => { acc[l.id] = mails.filter((m) => m.labels.includes(l.id)).length return acc }, {}), [mails], ) const visibleMails = React.useMemo(() => { const q = search.trim().toLowerCase() let list = mails.filter((m) => { if (activeLabel) return m.labels.includes(activeLabel) if (activeFolder === 'starred') return m.starred && m.folder !== 'trash' return m.folder === activeFolder }) if (q) { list = list.filter( (m) => m.subject.toLowerCase().includes(q) || m.from.name.toLowerCase().includes(q) || m.preview.toLowerCase().includes(q), ) } return [...list].sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime()) }, [mails, search, activeLabel, activeFolder]) const activeMail = React.useMemo(() => mails.find((m) => m.id === activeId) ?? null, [mails, activeId]) function selectMail(id: string) { setActiveId(id) setMails((prev) => prev.map((m) => (m.id === id ? { ...m, read: true } : m))) } function selectFolder(id: FolderId) { setActiveFolder(id) setActiveLabel(null) const list = [...mails] .filter((m) => (id === 'starred' ? m.starred && m.folder !== 'trash' : m.folder === id)) .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime()) const first = list[0] if (first) setActiveId(first.id) } function selectLabel(id: string) { setActiveLabel(id) const list = [...mails] .filter((m) => m.labels.includes(id)) .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime()) const first = list[0] if (first) setActiveId(first.id) } function toggleStar(id: string, e?: React.SyntheticEvent) { e?.stopPropagation() setMails((prev) => prev.map((m) => (m.id === id ? { ...m, starred: !m.starred } : m))) } function archive(id: string) { setMails((prev) => { const next = prev.filter((m) => m.id !== id) const visible = [...next] .filter((m) => { if (activeLabel) return m.labels.includes(activeLabel) if (activeFolder === 'starred') return m.starred && m.folder !== 'trash' return m.folder === activeFolder }) .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime()) const nextActive = visible[0] if (nextActive) setActiveId(nextActive.id) return next }) } const replyRecipient = React.useMemo(() => { const m = activeMail if (!m) return '' if (replyMode === 'forward') return '' return m.from.name + ' <' + m.from.email + '>' }, [activeMail, replyMode]) const replyPlaceholder = replyMode === 'forward' ? 'Add a note before forwarding' : 'Write a reply' const sendDisabled = !replyDraft.trim() || (replyMode === 'forward' && false) function changeReplyMode(mode: ReplyMode) { setReplyMode(mode) setJustSent(false) } function sendReply() { const body = replyDraft.trim() if (!body) return setReplyDraft('') setJustSent(true) window.setTimeout(() => { setJustSent(false) }, 1800) } function onReplyKey(e: React.KeyboardEvent) { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault() sendReply() } } React.useEffect(() => { setReplyDraft('') setReplyMode('reply') setJustSent(false) }, [activeId]) return (

setSearch(e.target.value)} placeholder="Search mail" className="h-8 rounded-lg pl-8 text-xs" />

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

{visibleMails.length} message{visibleMails.length === 1 ? '' : 's'}

{visibleMails.map((m) => ( ))} {visibleMails.length === 0 && (

Nothing here

No messages match the current filter.

)}

{activeMail ? ( <>

{activeMail.subject}

{activeMail.labels.map((lid) => ( {labelMeta(lid)?.label} ))}

{activeMail.from.initials}

{activeMail.from.name}

<{activeMail.from.email}>

to {activeMail.to}

{formatFullTime(activeMail.receivedAt)}

{activeMail.body}

{activeMail.hasAttachment && (

attachment.pdf

142 KB · PDF

)}

{replyRecipient && (

To: {replyRecipient}

)}

setReplyDraft(e.target.value)}
                  placeholder={replyPlaceholder}
                  rows={1}
                  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"
                  onKeyDown={onReplyKey}
                />
                <div className="flex items-center justify-between gap-2 px-2 pb-2">
                  <div className="flex items-center gap-0.5">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Attach file"
                    >
                      <Paperclip className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Emoji"
                    >
                      <Smile className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Mention"
                    >
                      <AtSign className="size-4" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-xs sm:inline-flex">
                      <span>⌘</span>
                      <span>↵</span>
                    </kbd>
                    <Button
                      className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                      disabled={sendDisabled}
                      aria-label="Send"
                      onClick={sendReply}
                    >
                      Send
                      <ArrowRight className="size-3.5" />
                    </Button>
                  </div>
                </div>
              </div>
              {justSent && <p className="text-success mt-2 text-center text-xs font-medium">Reply sent</p>}
            </div>
          </>
        ) : (
          <div className="flex flex-1 items-center justify-center">
            <div className="text-center">
              <div className="bg-muted mx-auto mb-3 size-12 rounded-full p-3">
                <InboxIcon className="text-muted-foreground size-6" />
              </div>
              <p className="text-sm font-medium">No message selected</p>
              <p className="text-muted-foreground mt-1 text-xs">Pick a message from the list to read it here.</p>
            </div>
          </div>
        )}
      </section>
    </div>
  )
}
5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/input.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/inbox/Inbox.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/Inbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>