The panel that lists what happened since the person last looked.
It has a header with a "mark all as read" action, tabs with the count of what is unread in each, the notifications grouped by day and a footer with the preferences and the full list.
The server owns everything: the tab, the groups and what is read. The panel sends tab_event (with
phx-value-id of the tab), open_event (with phx-value-id of the notification), read_all_event,
preferences_event and all_event, each a string or a %JS{}; inside a LiveComponent give the target. The
library carries no language and no icons: every word is an attr, and the icon slot receives the item and
draws what goes in its tile, coloured by the item's tone (:warn, :info, :risk, :ok, :neutral...).
A group is %{id: ..., label: ..., items: [...]} and an item is %{id: ..., title: ..., meta: ..., tone: ..., unread: boolean} (plus whatever the icon slot needs). An unread item has the warm tint, a dot and a
heavier title; the dot says unread_label to assistive technology. Each tab is %{id: ..., label: ..., count: integer | nil}; a count that is nil or 0 is not shown.
Keyboard: the DevactionUI.NotificationCenter hook moves the focus with ↑ ↓ Home End between the notifications
and with ← → Home End between the tabs; Enter opens the focused notification and selects the focused tab, as
for any button.
Summary
Functions
The notification panel.
Functions
@spec panel(map()) :: Phoenix.LiveView.Rendered.t()
The notification panel.
Attributes
id(:string) (required)title(:string) (required) - the heading of the panel.read_all_label(:string) (required) - the text of the "mark all as read" action.read_all_event(:any) - string or%JS{}; the action is disabled when nothing is unread. Defaults tonil.tabs_label(:string) (required) - names the tab list for assistive technology.tabs(:list) (required) -[%{id: ..., label: ..., count: integer | nil}].tab(:string) (required) - the id of the selected tab.tab_event(:any) - string or%JS{}, withphx-value-idof the tab. Defaults tonil.groups(:list) (required) -[%{id: ..., label: ..., items: [%{id: ..., title: ..., meta: ..., tone: ..., unread: ...}]}].unread_label(:string) (required) - what the unread dot says to assistive technology.empty_label(:string) (required) - shown when there is no group.open_event(:any) - string or%JS{}, withphx-value-idof the item. Defaults tonil.preferences_label(:string) (required)preferences_event(:any) - Defaults tonil.all_label(:string) (required) - the text of the "see all" action.all_event(:any) - Defaults tonil.target(:any) - aphx-target(a@myself) when used inside a LiveComponent. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
icon- what goes in the tile of an item; gets the item.