feat: Add stream notification preferences UI - #938
Conversation
Add a full notification preferences page to the Settings section that lets users control which stream events trigger notifications and through which delivery channels. **New files:** - `frontend/src/types/notifications.ts` – TypeScript types for notification events, channels, preference maps, and channel status indicators. - `frontend/src/services/notifications.ts` – API service layer for fetching, updating, and sending test notifications with localStorage fallback. - `frontend/src/pages/Settings.tsx` – Settings page component with: - Per-event toggles (created, claimed, canceled, paused, resumed, completed) - Per-channel toggles (email, webhook, browser push) - Channel status indicators (active/inactive with detail text) - Preview/test notification buttons per event-type and channel - Optimistic UI updates with rollback on failure - `frontend/src/settings.css` – Styles for the settings page including toggle switches, preference table layout, channel status cards, and dark mode overrides. **Modified files:** - `frontend/src/App.tsx` – Added `/settings` route, Settings nav tab, and CSS import. **Acceptance criteria met:** - ✅ Preferences saved to backend on toggle (with localStorage fallback) - ✅ Preview triggers test notification per event/channel combination - ✅ Current channel status shown with connected/disconnected indicators - ✅ Toggle per event type across all delivery channels - ✅ Dark mode support Close ritik4ever#746 🤖 Generated with Codebuff Co-Authored-By: Codebuff <noreply@codebuff.com>
|
@raymondidahor-bot is attempting to deploy a commit to the ritik4ever's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@raymondidahor-bot Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Summary
This PR adds a complete notification preferences UI to the Settings page, allowing users to configure which stream events trigger notifications and through which delivery channels. Closes #746.
What's New
New Files
frontend/src/types/notifications.tsfrontend/src/services/notifications.tsfrontend/src/pages/Settings.tsxfrontend/src/settings.cssModified Files
frontend/src/App.tsx/settingsroute, "Settings" nav tab, and CSS importFeatures
Per-Event Notification Toggles
Toggle notifications for each stream event type:
Per-Channel Delivery
Each event type can be configured for three delivery channels:
Preview / Test Notifications
Each event-type + channel combination has a preview button that sends a test notification, allowing users to verify their notification setup is working correctly.
Channel Status Indicators
The top section shows the current status of each notification channel:
Smart Persistence
Dark Mode
Full dark mode support with appropriate color overrides for all new components.
Acceptance Criteria
Testing
Screenshots
The settings page features a clean table layout with:
🤖 Generated with Codebuff
Co-Authored-By: Codebuff noreply@codebuff.com