Skip to content

feat: redesign notification system#3018

Merged
MartinCupela merged 8 commits intomasterfrom
feat/toast-notification-ui
Mar 17, 2026
Merged

feat: redesign notification system#3018
MartinCupela merged 8 commits intomasterfrom
feat/toast-notification-ui

Conversation

@MartinCupela
Copy link
Contributor

@MartinCupela MartinCupela commented Mar 17, 2026

🎯 Goal

Depends on GetStream/stream-chat-js#1706

Introduce a notification targeting system that lets SDK components emit notifications that are consumed by panel-specific NotificationList instances.

  • Notifications can be targeted to one of the following panels: channel, thread, channel-list, thread-list.
  • A reusable hook named useNotificationTarget is available and used instead of repeating local panel detection logic.
  • NotificationList can consume notifications for a specific panel via shared targeting/filtering helpers.
  • NotificationList displays single notification at once. Once that is dismissed / expires, the next one in the queue is displayed.
  • The notification timeout is started from the point when it is rendered, not when it is registered.
  • Panel roots support rendering panel-scoped notification lists in:
    • Channel.tsx
    • Thread.tsx
    • ChannelList.tsx
    • ThreadList.tsx
  • Replaced addNotification from ChannelStateContenxt with client.notifications API
  • Added translators for every notification emitted in the repo

BREAKING CHANGE: replaced addNotification from ChannelStateContenxt with client.notifications API

@MartinCupela MartinCupela changed the title Feat/toast notification UI feat: redesign notification system Mar 17, 2026
Comment on lines +21 to +22
/** @deprecated use isNotificationTargetPanel */
export const isNotificationOriginPanel = isNotificationTargetPanel;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this code isolated from somewhere else? Otherwise, pushing new deprecated code doesn't make a lot of sense.
Maybe we can remove this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done 3c086e1

const latestNotificationRef = useRef<Notification | null>(null);
const listRef = useRef<HTMLDivElement | null>(null);
const observedElementRef = useRef<HTMLDivElement | null>(null);
const startedTimeoutIdsRef = useRef(new Set<string>());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const startedTimeoutIdsRef = useRef(new Set<string>());
const startedTimeoutIdsRef = useRef<Set<string>>();
if (!startedTimoutIdsRef.current) {
startedTimeoutIdsRef.current = new Set();
}

lets avoid creating new Set() on every re-render.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 3c086e1

@MartinCupela MartinCupela force-pushed the feat/toast-notification-ui branch from 0f142a7 to de34cb3 Compare March 17, 2026 15:20
# Conflicts:
#	package.json
#	yarn.lock
@github-actions
Copy link

Size Change: +4.23 kB (+0.99%)

Total Size: 431 kB

Filename Size Change
./dist/Channel-BiyUJZdb.js 0 B -85.5 kB (removed) 🏆
./dist/cjs/emojis.js 2.96 kB +11 B (+0.37%)
./dist/cjs/index.js 229 kB +1.16 kB (+0.51%)
./dist/css/index.css 45.3 kB +1.12 kB (+2.54%)
./dist/WithAudioPlayback-DvH8PIGu.js 87.4 kB +87.4 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
./dist/audioProcessing-BbOs2wMd.js 1.32 kB
./dist/cjs/mp3-encoder.js 1.27 kB
./dist/css/v2/emoji-mart.css 1.84 kB
./dist/css/v2/emoji-replacement.css 300 B
./dist/css/v2/index.css 39.4 kB
./dist/css/v2/index.layout.css 22.8 kB

compressed-size-action

@MartinCupela MartinCupela requested a review from oliverlaz March 17, 2026 15:30
@MartinCupela MartinCupela merged commit 83dec93 into master Mar 17, 2026
4 of 5 checks passed
@MartinCupela MartinCupela deleted the feat/toast-notification-ui branch March 17, 2026 15:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants