howdy_ui - v1.0.0

howdy/ui/bell

A notification bell: a button showing how many notifications are unread, which opens a panel listing the newest.

bell.new(id: "inbox", source: "/notifications")
|> bell.unread(count)
|> bell.inbox("/inbox")
|> bell.view

source is where howdy_notifications serves the inbox, with notifications.routes. The bell keeps up with it as things happen: it follows the server-sent events at source/events, so its count changes as notifications arrive or are read in any tab, and each new notification is shown as a toast. Opening the panel reads the newest from source, and clicking one marks it read on the way to its link. Any other inbox that answers the same JSON works too.

Give it the unread count when drawing the page, so it is right before the events connect. Put it in the page itself, such as in the header, rather than in a live view, so the connection lasts as long as the page. The listening is done by howdy/ui/behaviour, which every page includes. Without JavaScript the panel still opens and links to inbox.

Toasts go in the page’s toast region, toast.region, or one the bell adds when the page has none.

The bell speaks English unless given other words with words; see howdy/ui/words.

A browser keeps one connection open for each tab with a bell. Over HTTP/1.1 browsers allow six connections to a site at once, so serve the app over HTTP/2, as howdy does with TLS, if people keep many tabs open.

Types

Bell

opaque </>

A bell under construction.

pub opaque type Bell

Values

bell_class

</> 
pub fn bell_class() -> css.Class

body_class

</> 
pub fn body_class() -> css.Class

button_class

</> 
pub fn button_class() -> css.Class

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

count_class

</> 
pub fn count_class() -> css.Class

dot_class

</> 
pub fn dot_class() -> css.Class

Filled for an unread notification, hollow for a read one.

empty_class

</> 
pub fn empty_class() -> css.Class
</> 
pub fn footer_class() -> css.Class

header_class

</> 
pub fn header_class() -> css.Class

heading_class

</> 
pub fn heading_class() -> css.Class

inbox

</> 
pub fn inbox(bell: Bell, href: String) -> Bell

A page listing every notification, linked at the foot of the panel.

item_class

</> 
pub fn item_class() -> css.Class
</> 
pub fn link_class() -> css.Class

list_class

</> 
pub fn list_class() -> css.Class

mark_class

</> 
pub fn mark_class() -> css.Class

new

</> 
pub fn new(id id: String, source source: String) -> Bell

A bell whose panel has this id, for the inbox served at source.

panel_class

</> 
pub fn panel_class() -> css.Class

push

</> 
pub fn push(bell: Bell, at path: String) -> Bell

Offer to turn on the browser’s own notifications, which arrive even when the app is not open, using the routes web_push.routes serves at path. The panel shows a button for it in browsers that support push.

push_class

</> 
pub fn push_class() -> css.Class

time_class

</> 
pub fn time_class() -> css.Class

title_class

</> 
pub fn title_class() -> css.Class

unread

</> 
pub fn unread(bell: Bell, count: Int) -> Bell

How many notifications are unread as the page is drawn.

unread_label

</> 
pub fn unread_label(words: words.Words, count: Int) -> String

The words for this many unread notifications.

view

</> 
pub fn view(bell: Bell) -> element.Element(msg)

without_toasts

</> 
pub fn without_toasts(bell: Bell) -> Bell

Do not show new notifications as toasts.

words

</> 
pub fn words(bell: Bell, words: words.Words) -> Bell

Say things in other words, or another language: the bell uses the notifications, unread, mark_*, caught_up, see_all_notifications, notifications_failed, push_* and dismiss words.

✨ Search Document