{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "smart-inbox-triage", "title": "Smart Inbox Triage", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/smart-inbox-triage/smart-inbox-triage.component.ts", "content": "import {\n Component,\n DestroyRef,\n ElementRef,\n Input,\n OnInit,\n ViewChild,\n computed,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport {\n Archive,\n ArrowDown,\n ArrowUp,\n AtSign,\n Check,\n CheckCircle2,\n Clock,\n Command as CommandIcon,\n FileText,\n Forward,\n LucideAngularModule,\n Mail,\n Paperclip,\n Reply,\n ReplyAll,\n Search,\n Send,\n Smile,\n Star,\n Undo2,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type InboxCategory = 'vip' | 'team' | 'newsletters' | 'archived'\nexport type InboxReplyMode = 'reply' | 'reply-all' | 'forward'\n\nexport interface EmailMessage {\n id: string\n sender: {\n name: string\n email: string\n initials: string\n }\n recipient: string\n subject: string\n snippet: string\n body: string\n timestamp: string\n fullDate: string\n category: 'vip' | 'team' | 'newsletters'\n categoryLabel: string\n badgeVariant?: 'default' | 'secondary' | 'outline' | 'info' | 'success' | 'warning'\n unread: boolean\n starred: boolean\n archived: boolean\n snoozed?: boolean\n attachment?: {\n name: string\n size: string\n type: string\n }\n}\n\nexport interface InboxCategoryTab {\n id: InboxCategory\n label: string\n count: number\n}\n\nexport interface InboxCommand {\n key: string\n label: string\n action: () => void\n}\n\nconst defaultMessages: EmailMessage[] = [\n {\n id: 'msg-1',\n sender: {\n name: 'Marcus Vance',\n email: 'marcus.vance@uipkge.internal',\n initials: 'MV',\n },\n recipient: 'you@uipkge.dev, core-eng@uipkge.dev',\n subject: 'Architecture Review: Real-time Sync & CRDT Conflict Resolution',\n snippet: 'I’ve updated the design doc with event-sourcing and CRDT tradeoffs for the multi-region sync engine...',\n body: `Hey team,\n\nI’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.\n\nKey RFC Highlights:\n• P99 sync latency reduced from 140ms to 24ms across edge worker replicas\n• Deterministic Last-Write-Wins (LWW) resolver for metadata mutations\n• Offline reconciliation buffer with automated exponential retry backoff\n• Zero dependency footprint — pure TypeScript state machines\n\nPlease review the attached technical specification and drop your comments before Thursday's design council.\n\nBest,\nMarcus Vance\nPrincipal Systems Architect`,\n timestamp: '14:28',\n fullDate: 'Today at 14:28 PM',\n category: 'vip',\n categoryLabel: 'VIP Review',\n badgeVariant: 'default',\n unread: true,\n starred: true,\n archived: false,\n attachment: {\n name: 'sync-engine-rfc-v2.4.pdf',\n size: '2.4 MB',\n type: 'PDF',\n },\n },\n {\n id: 'msg-2',\n sender: {\n name: 'Sarah Connor',\n email: 'sarah.connor@uipkge.internal',\n initials: 'SC',\n },\n recipient: 'you@uipkge.dev, exec@uipkge.dev',\n subject: 'Q2 OKR Sign-off & Headcount Allocation',\n snippet: 'Final draft from the leadership offsite. Flagged two key decisions before Wednesday lock...',\n body: `Hi team,\n\nI’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:\n\n1. Engineering Headcount: 4 vs. 6 senior backend roles\n2. Multi-cloud deployment schedule: Target June instead of August\n\nPlease review and confirm your alignment so we can present to the board.\n\nThanks,\nSarah Connor\nVP of Engineering`,\n timestamp: '15:40',\n fullDate: 'Today at 15:40 PM',\n category: 'vip',\n categoryLabel: 'VIP Review',\n badgeVariant: 'default',\n unread: true,\n starred: false,\n archived: false,\n },\n {\n id: 'msg-3',\n sender: {\n name: 'Stripe Merchant Services',\n email: 'payouts@stripe.com',\n initials: 'ST',\n },\n recipient: 'billing@uipkge.dev',\n subject: 'Payout Confirmed: $18,420.50 USD',\n snippet:\n 'Your daily payout for May 18 has been processed and initiated to your linked corporate checking account...',\n body: `Hello UIPKGE Team,\n\nYour automatic daily payout has been initiated and is on its way to your designated bank account ending in •••• 8842.\n\nTransfer Summary:\n• Gross volume (last 24h): $19,250.00\n• Stripe processing fees: -$829.50\n• Net settled transfer: $18,420.50 USD\n• Estimated arrival: Thursday, May 22, 2026\n\nNo further action is required. You can download your official tax statement and transaction logs directly in the Stripe Merchant Portal.`,\n timestamp: '12:15',\n fullDate: 'Today at 12:15 PM',\n category: 'vip',\n categoryLabel: 'Finance',\n badgeVariant: 'success',\n unread: true,\n starred: false,\n archived: false,\n },\n {\n id: 'msg-4',\n sender: {\n name: 'GitHub Notifications',\n email: 'notifications@github.com',\n initials: 'GH',\n },\n recipient: 'you@uipkge.dev',\n subject: '[PR #412] Merged: feat(tokens): OKLCH color scale & dynamic theme engine',\n snippet: 'Merged by @uday into main with 4 approvals and all CI checks passing in 42s...',\n body: `Pull Request #412 has been successfully merged into \\`main\\` by @uday.\n\nBranch: feat/oklch-tokens → main\nApprovals: 4 / 4 (Marcus Vance, Elena Rostova, Devon Patel, Sarah Connor)\nCI Workflow: Build, Typecheck, and Parity Verification passed in 42s.\n\nKey Deliverables:\n• Implemented OKLCH lightness/chroma token scale with WCAG AAA contrast\n• Tailwind v4 @theme inline integration with zero CSS variable bloat\n• 100% test coverage across both Vue and React registry packages\n\nAutomated staging preview is now active at https://staging.uipkge.dev.`,\n timestamp: '10:45',\n fullDate: 'Today at 10:45 AM',\n category: 'team',\n categoryLabel: 'GitHub',\n badgeVariant: 'info',\n unread: false,\n starred: true,\n archived: false,\n },\n {\n id: 'msg-5',\n sender: {\n name: 'Elena Rostova',\n email: 'elena.rostova@uipkge.internal',\n initials: 'ER',\n },\n recipient: 'you@uipkge.dev, design-system@uipkge.dev',\n subject: 'Design Tokens OKLCH Migration Spec & Guidelines',\n snippet: 'Here is the finalized Figma token mapping and color ramp guide for the new high-contrast theme...',\n body: `Hi team,\n\nFollowing up on PR #412, I’ve published the companion Figma variables library and developer handoff sheet.\n\nWhat’s included in this release:\n1. Semantic tokens: added \\`--surface-elevated\\` and \\`--sidebar-accent\\`\n2. Focus ring contrast ratios audited across all 14 colorways\n3. Mobile breakpoint typography scale verified with 12px min floor\n4. Tactile micro-transitions mapped to \\`--ease-spring\\` (140ms duration)\n\nPlease review the design system documentation and let me know if any component needs tailored adjustments.\n\nWarmly,\nElena Rostova\nLead Product Designer`,\n timestamp: '09:12',\n fullDate: 'Today at 09:12 AM',\n category: 'team',\n categoryLabel: 'Design',\n badgeVariant: 'secondary',\n unread: false,\n starred: false,\n archived: false,\n },\n {\n id: 'msg-6',\n sender: {\n name: 'Substack / The Unbundled Engineer',\n email: 'digest@unbundled.dev',\n initials: 'SE',\n },\n recipient: 'you@uipkge.dev',\n subject: 'The Unbundled Engineer: Issue #84 — The Rise of Component Registries',\n snippet:\n 'Why unbundled component architecture is replacing bloated npm packages across modern frontend engineering...',\n body: `Welcome to Issue #84 of The Unbundled Engineer.\n\nThis week: Why the component registry model is winning.\n\n\"When you install a traditional monolithic npm UI library, you inherit its dependency tree, its CSS opinions, and its release bottlenecks. When you add registry source code directly into your own repository, you gain zero-dependency ownership, effortless code customization, and total UI autonomy.\"\n\nIn this edition:\n• Benchmarking bundle sizes: Registry components vs. Monolithic packages\n• Tactile micro-interactions and keyboard-first inbox triage UX\n• The future of dual-framework design systems (Vue 3.5 & React 19)\n\nRead the full deep-dive on our website.`,\n timestamp: 'Yesterday',\n fullDate: 'Yesterday at 17:30 PM',\n category: 'newsletters',\n categoryLabel: 'Newsletter',\n badgeVariant: 'warning',\n unread: false,\n starred: false,\n archived: false,\n },\n]\n\nconst KBD = 'bg-card border-border/80 text-foreground rounded border px-1.5 py-0.5 font-mono text-xs'\nconst ACTION_KBD = 'bg-muted text-muted-foreground border-border/80 ml-0.5 rounded border px-1 font-mono text-xs'\n\nfunction matchesQuery(m: EmailMessage, q: string): boolean {\n return (\n m.subject.toLowerCase().includes(q) ||\n m.sender.name.toLowerCase().includes(q) ||\n m.sender.email.toLowerCase().includes(q) ||\n m.snippet.toLowerCase().includes(q) ||\n m.body.toLowerCase().includes(q)\n )\n}\n\nfunction inCategory(m: EmailMessage, cat: InboxCategory): boolean {\n if (cat === 'archived') return m.archived\n return !m.archived && m.category === cat\n}\n\n/**\n * Angular port of the UIPKGE SmartInboxTriage block (React `SmartInboxTriage`): a keyboard-first\n * inbox with split category tabs, a message list, a reader with triage actions (archive, snooze,\n * star, undo), a quick-reply composer and a ⌘K command palette. Shortcuts listen on `window`\n * like React: E archive, H snooze, R reply, S star, J/K or arrows navigate, / search, 1-4\n * categories, ⌘Z undo, ⌘↵ send, Esc closes / blurs / clears the search. `messages` seeds the\n * inbox once (a deep copy, like React's initial state); state stays inside the component.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-smart-inbox-triage, [ui-smart-inbox-triage]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"', '(window:keydown)': 'onKeydown($event)' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n \n \n Inbox Zero Goal\n {{ remainingLabel() }}\n
\n\n
\n
\n\n \n
\n
\n \n \n \n /\n
\n\n \n \n Commands\n ⌘K\n \n
\n
\n\n \n
\n \n\n
\n \n \n Mark read\n \n
\n
\n \n\n \n
\n \n
\n }\n \n \n\n \n
\n @if (activeMail(); as active) {\n \n \n
\n \n \n Archive\n E\n \n\n \n \n Snooze\n H\n \n\n \n \n Reply\n R\n \n\n \n \n \n
\n\n \n
\n \n \n \n \n \n \n
\n \n\n \n @if (toastMessage()) {\n \n
\n \n {{ toastMessage() }}\n
\n @if (hasUndo()) {\n \n \n Undo (⌘Z)\n \n }\n \n }\n\n \n
\n \n
\n

\n {{ active.subject }}\n

\n {{\n active.categoryLabel\n }}\n
\n\n \n
\n \n {{\n active.sender.initials\n }}\n \n\n
\n
\n

\n {{ active.sender.name }}\n <{{ active.sender.email }}>\n

\n {{ active.fullDate }}\n
\n

\n to {{ active.recipient }}\n

\n
\n
\n\n \n\n \n
\n {{ active.body }}\n
\n\n \n @if (active.attachment; as attachment) {\n
\n

Attachment

\n \n
\n
\n \n
\n
\n

{{ attachment.name }}

\n

\n {{ attachment.size }} · {{ attachment.type }}\n

\n
\n
\n \n Download\n \n
\n
\n }\n \n\n \n
\n
\n \n
\n \n \n \n
\n\n
\n\n \n \n \n\n
\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n Send\n \n \n
\n
\n
\n \n } @else {\n \n
\n
\n \n
\n

No message selected

\n

\n Select an email from the list or use J/K to navigate through your triage queue.\n

\n
\n }\n
\n \n\n \n @if (commandPaletteOpen()) {\n \n \n
\n \n \n \n \n \n
\n\n
\n

\n High Velocity Actions\n

\n @for (item of filteredCommandPaletteItems(); track item.key) {\n \n {{ item.label }}\n {{ item.key }}\n \n }\n
\n\n \n Use Esc to close\n Superhuman Mode Active\n \n \n \n }\n \n `,\n})\nexport class UiSmartInboxTriageComponent implements OnInit {\n @Input() initialCategory: InboxCategory = 'vip'\n @Input() initialSearch = ''\n @Input() initialSelectedId = 'msg-1'\n /** Seeds the inbox once (deep-copied, like React's initial state). Defaults to the sample inbox. */\n @Input() messages?: EmailMessage[]\n @Input('class') className?: string\n\n @ViewChild('searchInput', { static: true }) searchInput?: ElementRef\n @ViewChild('replyTextarea') replyTextarea?: ElementRef\n /** React `autoFocus` on the palette input: focus it when it mounts. */\n @ViewChild('commandInput') set commandInput(ref: ElementRef | undefined) {\n ref?.nativeElement.focus()\n }\n\n readonly mails = signal(defaultMessages)\n readonly activeCategory = signal('vip')\n readonly search = signal('')\n readonly activeId = signal('msg-1')\n readonly replyMode = signal('reply')\n readonly replyDraft = signal('')\n readonly toastMessage = signal('')\n readonly hasUndo = signal(false)\n readonly lastArchivedId = signal(null)\n readonly commandPaletteOpen = signal(false)\n readonly commandFilter = signal('')\n\n private toastTimer?: ReturnType\n\n protected readonly kbd = KBD\n protected readonly actionKbd = ACTION_KBD\n\n protected readonly Archive = Archive\n protected readonly ArrowDown = ArrowDown\n protected readonly ArrowUp = ArrowUp\n protected readonly AtSign = AtSign\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly CommandIcon = CommandIcon\n protected readonly FileText = FileText\n protected readonly Forward = Forward\n protected readonly Mail = Mail\n protected readonly Paperclip = Paperclip\n protected readonly Reply = Reply\n protected readonly ReplyAll = ReplyAll\n protected readonly Search = Search\n protected readonly Send = Send\n protected readonly Smile = Smile\n protected readonly Star = Star\n protected readonly Undo2 = Undo2\n protected readonly X = X\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.toastTimer))\n }\n\n ngOnInit(): void {\n // React seeds its useState once from these props; inputs land after construction.\n this.mails.set(this.messages ? JSON.parse(JSON.stringify(this.messages)) : defaultMessages)\n this.activeCategory.set(this.initialCategory)\n this.search.set(this.initialSearch)\n this.activeId.set(this.initialSelectedId)\n }\n\n readonly remainingCount = computed(() => this.mails().filter((m) => !m.archived).length)\n readonly remainingLabel = computed(() =>\n this.remainingCount() === 0 ? 'Zero Achieved 🎉' : `${this.remainingCount()} Messages Remaining`,\n )\n\n readonly categoriesList = computed(() => {\n const mails = this.mails()\n const count = (cat: InboxCategory) => mails.filter((m) => inCategory(m, cat)).length\n return [\n { id: 'vip', label: 'Important & VIP', count: count('vip') },\n { id: 'team', label: 'Team & GitHub', count: count('team') },\n { id: 'newsletters', label: 'Newsletters', count: count('newsletters') },\n { id: 'archived', label: 'Done / Archived', count: count('archived') },\n ]\n })\n\n readonly activeCategoryLabel = computed(\n () => this.categoriesList().find((c) => c.id === this.activeCategory())?.label ?? '',\n )\n\n readonly visibleMails = computed(() => this.filterFor(this.activeCategory()))\n\n readonly activeMail = computed(() => {\n const id = this.activeId()\n const visible = this.visibleMails()\n if (!id) return visible[0] ?? null\n return this.mails().find((m) => m.id === id) ?? visible[0] ?? null\n })\n\n readonly commandPaletteItems: InboxCommand[] = [\n { key: 'E', label: 'Archive active email', action: () => this.archiveMail() },\n { key: 'H', label: 'Snooze until tomorrow', action: () => this.snoozeMail() },\n { key: 'R', label: 'Reply to sender', action: () => this.focusReply() },\n { key: 'S', label: 'Toggle star / priority', action: () => this.toggleStar() },\n { key: '1', label: 'Switch to Important & VIP', action: () => this.selectCategory('vip') },\n { key: '2', label: 'Switch to Team & GitHub', action: () => this.selectCategory('team') },\n { key: '3', label: 'Switch to Newsletters', action: () => this.selectCategory('newsletters') },\n { key: '4', label: 'Switch to Done / Archived', action: () => this.selectCategory('archived') },\n { key: 'Shift+A', label: 'Mark all as read in current category', action: () => this.markAllRead() },\n { key: 'Shift+E', label: 'Archive all in category', action: () => this.archiveAllInCategory() },\n ]\n\n readonly filteredCommandPaletteItems = computed(() => {\n const q = this.commandFilter().trim().toLowerCase()\n if (!q) return this.commandPaletteItems\n return this.commandPaletteItems.filter((i) => i.label.toLowerCase().includes(q) || i.key.toLowerCase().includes(q))\n })\n\n get rootClass(): string {\n return cn(\n 'bg-card text-card-foreground border-border relative flex flex-col overflow-hidden rounded-xl border shadow-xs',\n this.className,\n )\n }\n\n /** Messages of `cat`, narrowed by the current search (React's visibleMails / selectCategory filter). */\n private filterFor(cat: InboxCategory): EmailMessage[] {\n const q = this.search().trim().toLowerCase()\n const list = this.mails().filter((m) => inCategory(m, cat))\n return q ? list.filter((m) => matchesQuery(m, q)) : list\n }\n\n private patch(id: string, change: Partial): void {\n this.mails.update((prev) => prev.map((m) => (m.id === id ? { ...m, ...change } : m)))\n }\n\n showToast(msg: string, allowUndo = false): void {\n this.toastMessage.set(msg)\n this.hasUndo.set(allowUndo)\n clearTimeout(this.toastTimer)\n this.toastTimer = setTimeout(() => {\n this.toastMessage.set('')\n this.hasUndo.set(false)\n }, 4000)\n }\n\n selectMail(id: string): void {\n this.activeId.set(id)\n this.patch(id, { unread: false })\n }\n\n selectCategory(cat: InboxCategory): void {\n const first = this.filterFor(cat)[0]\n this.activeCategory.set(cat)\n if (first) this.selectMail(first.id)\n else this.activeId.set('')\n }\n\n archiveMail(id?: string): void {\n this.triage(id, false)\n }\n\n snoozeMail(id?: string): void {\n this.triage(id, true)\n }\n\n /** Archive (or snooze) one message, keep it undoable and select the next visible one. */\n private triage(id: string | undefined, snoozed: boolean): void {\n const targetId = id ?? this.activeMail()?.id\n if (!targetId) return\n const item = this.mails().find((m) => m.id === targetId)\n if (!item) return\n\n const remainingVisible = this.visibleMails().filter((m) => m.id !== targetId)\n this.patch(targetId, { archived: true, snoozed })\n this.lastArchivedId.set(targetId)\n this.showToast(snoozed ? 'Snoozed until tomorrow 08:00 AM' : `Archived: \"${item.subject}\"`, true)\n\n const next = remainingVisible[0]\n if (next) this.selectMail(next.id)\n else this.activeId.set('')\n }\n\n undoLastAction(): void {\n const lastId = this.lastArchivedId()\n if (!lastId) return\n const item = this.mails().find((m) => m.id === lastId)\n if (item) {\n this.patch(lastId, { archived: false, snoozed: false })\n this.activeCategory.set(item.category)\n this.activeId.set(item.id)\n this.showToast(`Restored: \"${item.subject}\"`)\n }\n this.lastArchivedId.set(null)\n this.hasUndo.set(false)\n }\n\n toggleStar(id?: string, e?: Event): void {\n e?.stopPropagation()\n const targetId = id ?? this.activeMail()?.id\n if (!targetId) return\n this.mails.update((prev) => prev.map((m) => (m.id === targetId ? { ...m, starred: !m.starred } : m)))\n }\n\n navigateNext(): void {\n const visible = this.visibleMails()\n if (visible.length === 0) return\n const currentIndex = visible.findIndex((m) => m.id === this.activeId())\n const next = currentIndex === -1 || currentIndex >= visible.length - 1 ? visible[0] : visible[currentIndex + 1]\n if (next) this.selectMail(next.id)\n }\n\n navigatePrev(): void {\n const visible = this.visibleMails()\n if (visible.length === 0) return\n const currentIndex = visible.findIndex((m) => m.id === this.activeId())\n const prev = currentIndex <= 0 ? visible[visible.length - 1] : visible[currentIndex - 1]\n if (prev) this.selectMail(prev.id)\n }\n\n sendReply(): void {\n const content = this.replyDraft().trim()\n const mail = this.activeMail()\n if (!content || !mail) return\n this.replyDraft.set('')\n this.showToast(`Reply sent to ${mail.sender.name}`)\n }\n\n markAllRead(): void {\n const cat = this.activeCategory()\n this.mails.update((prev) => prev.map((m) => (inCategory(m, cat) ? { ...m, unread: false } : m)))\n this.showToast('Marked all as read')\n }\n\n archiveAllInCategory(): void {\n const cat = this.activeCategory()\n if (cat === 'archived') return\n this.mails.update((prev) => prev.map((m) => (!m.archived && m.category === cat ? { ...m, archived: true } : m)))\n this.showToast('All messages in category archived')\n this.activeId.set('')\n }\n\n focusReply(): void {\n this.replyTextarea?.nativeElement.focus()\n }\n\n executeCommand(item: InboxCommand): void {\n item.action()\n this.commandPaletteOpen.set(false)\n this.commandFilter.set('')\n }\n\n onOverlayClick(e: MouseEvent): void {\n if (e.target === e.currentTarget) this.commandPaletteOpen.set(false)\n }\n\n onRowKeydown(e: KeyboardEvent, id: string): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n this.selectMail(id)\n }\n }\n\n /** Global keyboard triage (window keydown), same map and guards as React. */\n onKeydown(e: KeyboardEvent): void {\n const key = (e.key ?? '').toLowerCase()\n const activeEl = document.activeElement\n const isInputActive =\n activeEl instanceof HTMLInputElement ||\n activeEl instanceof HTMLTextAreaElement ||\n activeEl?.getAttribute('contenteditable') === 'true'\n\n if ((e.metaKey || e.ctrlKey) && key === 'k') {\n e.preventDefault()\n this.commandPaletteOpen.update((open) => !open)\n return\n }\n\n if ((e.metaKey || e.ctrlKey) && key === 'z') {\n e.preventDefault()\n this.undoLastAction()\n return\n }\n\n if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {\n if (this.replyDraft().trim()) {\n e.preventDefault()\n this.sendReply()\n return\n }\n }\n\n if (e.key === 'Escape') {\n if (this.commandPaletteOpen()) {\n e.preventDefault()\n this.commandPaletteOpen.set(false)\n return\n }\n if (isInputActive) {\n ;(activeEl as HTMLElement).blur()\n return\n }\n if (this.search()) {\n this.search.set('')\n return\n }\n }\n\n if (isInputActive) return\n\n switch (key) {\n case 'j':\n case 'arrowdown':\n e.preventDefault()\n this.navigateNext()\n break\n case 'k':\n case 'arrowup':\n e.preventDefault()\n this.navigatePrev()\n break\n case 'e':\n e.preventDefault()\n this.archiveMail()\n break\n case 'h':\n e.preventDefault()\n this.snoozeMail()\n break\n case 'r':\n e.preventDefault()\n this.focusReply()\n break\n case 's':\n e.preventDefault()\n this.toggleStar()\n break\n case '/':\n e.preventDefault()\n this.searchInput?.nativeElement.focus()\n this.searchInput?.nativeElement.select()\n break\n case '1':\n e.preventDefault()\n this.selectCategory('vip')\n break\n case '2':\n e.preventDefault()\n this.selectCategory('team')\n break\n case '3':\n e.preventDefault()\n this.selectCategory('newsletters')\n break\n case '4':\n e.preventDefault()\n this.selectCategory('archived')\n break\n }\n }\n\n protected inputValue(e: Event): string {\n return (e.target as HTMLInputElement | HTMLTextAreaElement).value\n }\n\n protected categoryClass(id: InboxCategory): string {\n return cn(\n 'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150',\n this.activeCategory() === id\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',\n )\n }\n\n protected categoryCountClass(id: InboxCategory): string {\n return cn(\n 'inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-xs font-semibold tabular-nums',\n this.activeCategory() === id ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-muted text-foreground',\n )\n }\n\n protected rowClass(mail: EmailMessage): string {\n return cn(\n 'group relative flex cursor-pointer flex-col gap-1 px-4 py-3 text-left transition-colors duration-150',\n mail.id === this.activeMail()?.id ? 'bg-accent/70 text-accent-foreground' : 'hover:bg-muted/40 text-foreground',\n )\n }\n\n protected senderClass(mail: EmailMessage): string {\n return cn('truncate text-xs', mail.unread ? 'text-foreground font-semibold' : 'text-foreground/80 font-medium')\n }\n\n protected subjectClass(mail: EmailMessage): string {\n return cn(\n 'truncate text-xs tracking-tight',\n mail.unread ? 'text-foreground font-semibold' : 'text-foreground/90 font-medium',\n )\n }\n\n protected rowStarClass(mail: EmailMessage): string {\n return cn(\n 'hover:text-warning inline-flex size-6 items-center justify-center rounded transition-colors',\n mail.starred ? 'text-warning' : 'text-muted-foreground/40 hover:text-muted-foreground',\n )\n }\n\n protected modeClass(mode: InboxReplyMode): string {\n return cn(\n 'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.replyMode() === mode ? 'bg-primary/10 text-primary font-semibold' : 'text-muted-foreground hover:bg-muted',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/smart-inbox-triage/smart-inbox-triage.component.ts" }, { "path": "packages/registry-angular/blocks/smart-inbox-triage/index.ts", "content": "export {\n UiSmartInboxTriageComponent,\n type EmailMessage,\n type InboxCategory,\n type InboxCategoryTab,\n type InboxCommand,\n type InboxReplyMode,\n} from './smart-inbox-triage.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/smart-inbox-triage/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Superhuman-style high-velocity email inbox triage command center with keyboard shortcuts, split category tabs (VIP, Team & GitHub, Newsletters, Archived), dual-pane split reader, fast triage actions (Archive, Snooze, Star, Quick Reply), and command palette.", "categories": [ "communication", "productivity", "layout" ] }