Notifications

The bell in the app top bar and the panel it opens: what happened to the user while they were elsewhere. React apps/web/src/components/notifications/NotifBell.tsx (the app, not @acrm/ui), CSS apps/web/src/ds/notifications.css.

Not a toast: a toast reports what you just did and disappears; a notification reports what someone else did and waits.

When to use

  • Assignments, scheduled events, completed background actions — anything the user did not cause and should see later.
  • Anything that must survive the user not looking at the screen.

When not to use

  • The result of an action the user just took — that is toast.
  • A failure of the content on screen — that is error-state.
  • Anything blocking — that is a dialog.

Anatomy

  • Bell span.nbell › button.icobtn + span.nbell-badge. The badge caps at 9+.
  • Panel div.npanel[role="dialog"][aria-label="Oznámení"]:
  • .npanel-head — .npanel-title, a CountBadge with accent tone (2 nové), .npanel-actions with .npanel-link (Označit vše) and .npanel-ico (close).
  • .npanel-tabs — .npanel-tab × 2 (Vše, Nepřečtené with .n carrying the count).
  • .npanel-body — .ngroup-label day groups (Nové under 24h, Dříve above) and .nitem rows, or .npanel-empty (icon + .t + .s, worded per filter).
  • .npanel-foot — Zobrazit všechna oznámení, present only when there are rows.
  • Row .nitem.unread|.read: .nitem-lead (icon tinted by type tone) · .nitem-main with .nitem-t and .nitem-meta (time · .dotsep · .nitem-link) · .nitem-dot while unread.

Measured: clicking a row opens the target and marks it read — the dot goes, the head badge and the tab count both drop; Označit vše empties both and swaps the body to the per-filter empty state, and the footer disappears with it.

Best practices

Do

  • Let the row be the whole click target, and keep Zobrazit as the explicit second affordance.
  • Word the empty state per filter — Vše přečteno under Nepřečtené, Žádná oznámení under Vše.
  • Keep the type tone on the lead icon only; the row text stays neutral.
  • Strip mention tokens out of subjects before they reach the row.

Don't

  • Put an action other than "open" in a row.
  • Show a 0 anywhere — a count of zero is not drawn.
  • Use the panel for things the user caused.
  • Let the badge grow past 9+.

Content

  • Row text is the subject as the user would name it, with no type prefix.
  • Time is relative (před 20 min, včera, pondělí).
  • Group labels are fixed: Nové, Dříve.
  • toast — the user's own actions.
  • count-badge — the badge in the head and the bell.
  • popover — the surface the panel sits on.
  • Stories: components--notifications--default, --variants, --states, --composition.

Source: docs/notifications/notifications.usage.md · GitLab