Notification variants

Visual catalog from frontend/monorepo. Colors from libs/unit/src/tokens.css.

Що треба показати окремо

Тип Плейсмент Анімація
System notifications global top banner, над nav статичний, dismiss → localStorage
Page notifications top bar / full-width banner / inline під title статичний або CSSTransition ~300ms
Toasts fixed, bottom-center 120ms slide/fade, стек, pause on hover
Side panel notifications dropdown у nav (іконка дзвіночка) окремий компонент, без toast-анімації
Routing canvas notifications червона обводка нод + errored border outline, не toast
AI assistant — не реалізовано як notification

1. System notifications

Global top banner — показується над header/nav на рівні всього застосунку.

Плейсмент
top bar Hub, на всю ширину, над навігацією
Анімація
статичний. Close зберігає dismiss у settings/localStorage

BankingPromo — Solidgate Treasury

Open a multi-currency business account with lightning-fast settlements, SWIFT and SEPA transfers, and more.

apps/hub/src/features/banking/components/BankingPromo/ · feature toggle banking-promo

2. Page notifications

Банери на рівні сторінки: top bar alerts, onboarding banner, inline @monorepo/unit Notification.

Плейсмент
top bar / full-width banner / під header, у формі, у PageContent.notifications[]
Анімація
статичний або CSSTransition ~300ms (BalanceAlertBanner)

BalanceAlertBanner — Chargebackhit Hub

ZeroAlert — Top up to keep receiving alerts
CriticalAlert — Balance is running low
DebtAlert — Account in debt

Hub onboarding banner — secondary variant

Acme Ltd
Finish onboarding to start processing payments.

Inline banner — warning

!
Access restricted
You don't have permission to view this section

Inline banner — info

i
Note
Dynamic descriptors are now managed on Connector account details

Inline banner — alert + actions (3DS Cascading)

This Connector Account doesn't support 3DS Cascading. Replace the account or remove this step.

3. Toasts

@monorepo/unit Notification — тільки primary (success) і alert (error). Fixed bottom-center — react-hot-toast/headless.

Плейсмент
fixed, bottom-center viewport
Анімація
120ms slide/fade, стек кількох toast, pause on hover

primary — toast.success

Saved
Configuration published successfully

alert — toast.error

Failed
Failed to load routing list

placement — bottom-center viewport

Error
The sum of traffic percentages must be 100%

4. Side panel notifications

Persistent feed у nav — не toast, окремий inbox-компонент.

Плейсмент
dropdown у nav (іконка дзвіночка)
Анімація
окремий компонент, без toast-анімації

Hub inbox (nav)

New invoice
Invoice #1842 is ready to download
Maintenance
User management will be unavailable 08:30–09:30 UTC

apps/hub/src/app/components/notifications/

5. Routing canvas notifications

Частково реалізовано: зліва зверху summary-нотифікація з кількістю помилок (як на дизайні) — у коді є лише червона обводка нод і errored border на полях.

Плейсмент
червона обводка нод + errored border на полях
Анімація
outline, не toast. Field error — errored border під полем

Group A

%

Group B

%

% Split container

The sum of traffic percentages must be 100%

6. AI assistant

Не реалізовано як notification. Окремого AI assistant banner / toast / inbox item у монорепо немає. Найближче — Hub AI Analyst command bar (overlay + trigger ⌘I на analytics-сторінках), але це chat panel, не notification pattern.

У коді
apps/hub/src/features/ai-analyst/ · toggle ai-analyst
На дизайні
можливий окремий notification type — ще не імплементовано

AI Analyst — command bar (не notification)

Trigger button → full-screen chat overlay. Payment Analytics, Subscription Analytics V2. Не входить до notification system (NotificationMapper, inbox, toast).