# `PhiaUi.Components.Collab.CollabNotification`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/collab/collab_notification.ex#L1)

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
    }

# `collab_inbox_list`

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 to `nil`.

# `collab_inbox_notification`

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 to `nil`.

# `collab_inbox_panel`

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 to `nil`.

# `collab_mention_notification`

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 to `nil`.

# `collab_notification_badge`

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 to `0`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_thread_notification`

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 to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*