{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "notification-center", "title": "Notification Center", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/notification-center/notification-center.component.ts", "content": "import { Component, Input, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BellOff,\n Check,\n CheckCheck,\n LucideAngularModule,\n MessageSquare,\n ShieldAlert,\n UserPlus,\n X,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiRelativeTimeComponent } from '@/ui/relative-time/relative-time.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\n\nexport type NotificationCenterCategory = 'mention' | 'comment' | 'system' | 'security'\n\nexport interface NotificationCenterItem {\n id: string\n category: NotificationCenterCategory\n title: string\n body: string\n date: Date\n read: boolean\n}\n\nexport type NotificationCenterFilter = 'all' | 'unread' | 'mentions'\n\nconst categoryConfig: Record = {\n mention: { icon: UserPlus, tileClass: 'bg-primary/10 text-primary' },\n comment: { icon: MessageSquare, tileClass: 'bg-chart-3/10 text-chart-3' },\n system: { icon: BellOff, tileClass: 'bg-muted text-muted-foreground' },\n security: { icon: ShieldAlert, tileClass: 'bg-warning/10 text-warning' },\n}\n\nconst now = new Date()\nconst minutesAgo = (m: number) => new Date(now.getTime() - m * 60_000)\nconst hoursAgo = (h: number) => new Date(now.getTime() - h * 3_600_000)\nconst daysAgo = (d: number) => new Date(now.getTime() - d * 86_400_000)\n\nconst stubNotifications: NotificationCenterItem[] = [\n {\n id: 'n1',\n category: 'mention',\n title: 'Priya mentioned you',\n body: '@amara can you review the onboarding flow?',\n date: minutesAgo(6),\n read: false,\n },\n {\n id: 'n2',\n category: 'security',\n title: 'New sign-in from Berlin',\n body: 'Chrome on macOS · 84.190.201.3',\n date: minutesAgo(52),\n read: false,\n },\n {\n id: 'n3',\n category: 'comment',\n title: 'Jonas commented',\n body: 'Shipped the fix — closing the ticket.',\n date: hoursAgo(2),\n read: false,\n },\n {\n id: 'n4',\n category: 'system',\n title: 'Weekly digest ready',\n body: 'Your workspace summary for last week.',\n date: hoursAgo(20),\n read: true,\n },\n {\n id: 'n5',\n category: 'mention',\n title: 'Marcus mentioned you',\n body: 'Design review moved to 15:00, @amara.',\n date: daysAgo(1),\n read: false,\n },\n {\n id: 'n6',\n category: 'comment',\n title: 'Amara commented',\n body: 'Copy updated per legal review.',\n date: daysAgo(1),\n read: true,\n },\n {\n id: 'n7',\n category: 'security',\n title: 'API key rotated',\n body: 'uipkge_live_…4f2a was rotated automatically.',\n date: daysAgo(2),\n read: true,\n },\n]\n\n/**\n * NotificationCenter -- the React block, 1:1: a full-page notification SectionCard with an\n * unread badge, mark-all-read, All / Unread / Mentions tabs that filter the list, day-grouped\n * rows (Today / Earlier) pairing category icon tiles with titles, bodies, relative timestamps,\n * unread dots and hover actions (mark read, dismiss), plus per-tab empty states. Pass\n * `[notifications]` to swap the sample data for your source.\n *\n * Icons inside `ui-button` sit in ``, so the React `size=\"sm\"` `has-[>svg]:px-2.5`\n * padding is set explicitly on the mark-all-read button.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-notification-center, [ui-notification-center]',\n standalone: true,\n // React renders the SectionCard itself: the host stays out of layout and `class` goes to the card.\n host: { '[attr.class]': '\"contents\"', 'data-slot': 'notification-center' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiRelativeTimeComponent,\n UiSectionCardComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n \n
\n @if (unreadCount() > 0) {\n {{ unreadCount() }} new\n }\n \n \n Mark all read\n \n
\n\n
\n
\n \n \n \n
\n
\n\n @if (groups().length === 0) {\n
\n \n \n @if (filter() === 'mentions') {\n No mentions — you're all caught up.\n } @else if (filter() === 'unread') {\n Nothing unread. Nice work.\n } @else {\n Your inbox is empty.\n }\n
\n }\n\n @for (group of groups(); track group.label) {\n
\n

{{ group.label }}

\n
    \n @for (notification of group.items; track notification.id) {\n \n \n \n \n
    \n
    \n

    \n {{ notification.title }}\n

    \n @if (!notification.read) {\n \n }\n
    \n

    {{ notification.body }}

    \n
    \n
    \n \n \n @if (!notification.read) {\n \n \n \n }\n \n \n \n \n
    \n \n }\n
\n
\n }\n \n `,\n})\nexport class UiNotificationCenterComponent {\n protected readonly BellOff = BellOff\n protected readonly Check = Check\n protected readonly CheckCheck = CheckCheck\n protected readonly X = X\n protected readonly cn = cn\n\n /** Your notifications; falls back to the sample list (React `notifications ?? stubNotifications`). */\n @Input() set notifications(value: NotificationCenterItem[] | undefined) {\n this.items.set(value ?? stubNotifications)\n }\n @Input('class') className?: string\n\n readonly items = signal(stubNotifications)\n readonly filter = signal('all')\n\n readonly unreadCount = computed(() => this.items().filter((n) => !n.read).length)\n\n readonly filtered = computed(() =>\n this.items().filter((n) => {\n if (this.filter() === 'unread') return !n.read\n if (this.filter() === 'mentions') return n.category === 'mention'\n return true\n }),\n )\n\n readonly groups = computed(() => {\n const startOfToday = new Date()\n startOfToday.setHours(0, 0, 0, 0)\n return [\n { label: 'Today', items: this.filtered().filter((n) => n.date >= startOfToday) },\n { label: 'Earlier', items: this.filtered().filter((n) => n.date < startOfToday) },\n ].filter((group) => group.items.length > 0)\n })\n\n protected icon(n: NotificationCenterItem): LucideIconData {\n return categoryConfig[n.category].icon\n }\n\n protected tileClass(n: NotificationCenterItem): string {\n return categoryConfig[n.category].tileClass\n }\n\n setFilter(value: string): void {\n this.filter.set(value as NotificationCenterFilter)\n }\n\n markRead(id: string): void {\n this.items.update((list) => list.map((n) => (n.id === id ? { ...n, read: true } : n)))\n }\n\n markAllRead(): void {\n this.items.update((list) => list.map((n) => ({ ...n, read: true })))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/notification-center/notification-center.component.ts" }, { "path": "packages/registry-angular/blocks/notification-center/index.ts", "content": "export {\n UiNotificationCenterComponent,\n type NotificationCenterCategory,\n type NotificationCenterFilter,\n type NotificationCenterItem,\n} from './notification-center.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/notification-center/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/relative-time.json", "https://uipkge.dev/r/angular/section-card.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "Full-page notification center: unread badge, mark-all-read, All/Unread/Mentions tabs with functional filtering, day-grouped rows (Today / Earlier) pairing category icon tiles with titles, bodies, relative timestamps, unread dots and hover actions (mark read, dismiss). Per-tab empty states included; swap `notifications` for your source.", "categories": [ "communication", "dashboard" ] }