Collaborative notification components for real-time multi-user interfaces.
Provides an inbox system with notification items, filtered lists, a tabbed panel, badge counters, and specialized notification types for mentions and thread replies.
Components
| Component | Purpose |
|---|---|
collab_inbox_notification/1 | Single inbox notification item |
collab_inbox_list/1 | Scrollable list of notifications |
collab_inbox_panel/1 | Full inbox panel with tabs and mark-all-read |
collab_notification_badge/1 | Unread count badge (red circle) |
collab_mention_notification/1 | Specialized @mention notification |
collab_thread_notification/1 | Specialized thread reply notification |
Notification map shape
Components that accept a :notification map expect:
%{
id: "notif-1",
type: :mention | :thread_reply | :comment | :edit | :join,
user_name: "Alice Adams",
user_color: "#3B82F6",
user_avatar_url: "/avatars/alice.jpg", # optional
message: "mentioned you in Chapter 1",
preview: "Hey @Bob, check this out...", # optional
read: false,
created_at: ~U[2026-03-19 10:00:00Z],
thread_id: "thread-1", # optional
comment_id: "comment-1" # optional
}Summary
Functions
Renders a scrollable list of inbox notifications.
Renders a single inbox notification item.
Renders a full inbox panel with header, tab bar, mark-all-read action, and a filtered notification list.
Renders a specialized mention notification.
Renders an unread count badge as a red circle with the count number.
Renders a specialized thread reply notification.
Functions
Renders a scrollable list of inbox notifications.
Shows an empty state message when no notifications are present.
Example
<.collab_inbox_list
id="inbox-list"
notifications={@notifications}
/>Attributes
id(:string) (required)notifications(:list) - Defaults to[].on_click(:string) - Defaults to"collab:notification:click".on_dismiss(:string) - Defaults to"collab:notification:dismiss".empty_message(:string) - Defaults to"No notifications".class(:string) - Defaults tonil.
Renders a single inbox notification item.
Shows an unread indicator dot, type icon, user avatar, message text, relative timestamp, and a dismiss button visible on hover.
Example
<.collab_inbox_notification
id="notif-1"
notification={%{id: "1", type: :mention, user_name: "Alice", message: "mentioned you", read: false, created_at: ~U[2026-03-19T10:00:00Z]}}
/>Attributes
id(:string) (required)notification(:map) (required)on_click(:string) - Defaults to"collab:notification:click".on_dismiss(:string) - Defaults to"collab:notification:dismiss".class(:string) - Defaults tonil.
Renders a full inbox panel with header, tab bar, mark-all-read action, and a filtered notification list.
Tabs filter notifications by type: All, Mentions, Threads, Unread.
Example
<.collab_inbox_panel
id="inbox-panel"
notifications={@notifications}
active_tab={:all}
/>Attributes
id(:string) (required)notifications(:list) - Defaults to[].active_tab(:atom) - Defaults to:all. Must be one of:all,:mentions,:threads, or:unread.on_tab_change(:string) - Defaults to"collab:notification:tab".on_mark_all_read(:string) - Defaults to"collab:notification:mark_all_read".class(:string) - Defaults tonil.
Renders a specialized mention notification.
Shows an "@" icon with "X mentioned you in Y" message and an optional preview of the surrounding text.
Example
<.collab_mention_notification
id="mention-1"
notification={%{id: "1", user_name: "Alice", message: "mentioned you in Chapter 1", preview: "Hey @Bob", read: false, created_at: ~U[2026-03-19T10:00:00Z]}}
/>Attributes
id(:string) (required)notification(:map) (required)on_click(:string) - Defaults to"collab:notification:click".class(:string) - Defaults tonil.
Renders an unread count badge as a red circle with the count number.
Hidden when count is 0 or nil.
Example
<.collab_notification_badge count={5} />Attributes
count(:any) - Defaults to0.class(:string) - Defaults tonil.
Renders a specialized thread reply notification.
Shows a reply icon with "X replied to your thread" message and an optional preview of the reply text.
Example
<.collab_thread_notification
id="thread-1"
notification={%{id: "1", user_name: "Bob", message: "replied to your thread", preview: "Great point!", read: false, created_at: ~U[2026-03-19T10:00:00Z]}}
/>Attributes
id(:string) (required)notification(:map) (required)on_click(:string) - Defaults to"collab:notification:click".class(:string) - Defaults tonil.