feat(notifications): in-app notification center (Phase 1b of #395)

[jwalin-shah]

Summary

Adds the in-app Notification Center from #395. Phase 7 (#741) shipped native webview notifications (Phase 1a) — this PR mirrors those events into a persistent in-app surface so users have notification history plus preferences.

• notificationSlice (Redux Toolkit + redux-persist) with categories and per-category preferences
• /notifications route + Notification Center page (read/unread, timestamps, click-to-navigate, mark-all-read, clear)
• Bell tab in BottomTabBar with unread badge
• NotificationsPanel in Settings → Features for per-category toggles (messages / agents / skills / system)
• Webview notification handler now also dispatches notificationReceived into the center (kept existing per-account unread-badge behavior untouched)

Out of scope — follow-up PRs

This is deliberately frontend-only to keep review tight. Next up:

• PR B: core-side native banners from agent completions / skill sync / channel inbound via tauri-plugin-notification + DomainEvent subscribers in src/core/event_bus/
• PR C: cross-platform polish, DND / quiet hours, sound customization

Test plan

• Vitest: 7 reducer cases (prepend, preference gating, read flips, cap at 200, unread selector) — all green
• tsc --noEmit clean
• eslint clean
• Manual: bell tab badge increments on webview notification, clears on mark-all-read, toggling a category in Settings stops new items, /notifications page empty state + list render

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a dedicated Notifications center with an "Alerts" tab in the bottom navigation, displaying unread notification count badge.
  • Added notification management capabilities: mark individual notifications as read, mark all as read, and clear all notifications.
  • Enabled category-based notification preferences (Messages, Agents, Skills, System) in Settings, allowing users to control notification delivery by type.
  • Notifications now display relative timestamps and support deep linking to relevant content.

• Tests

  • Added comprehensive test coverage for notification state management and preference handling.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive in-app notifications feature, adding a Redux-persisted notification slice with category preferences, a protected /notifications route, a notifications page with unread badges and time formatting, integration into the bottom tab bar, settings panel controls, and webview notification firing alongside tests.

Changes

Cohort / File(s)	Summary
Routing & Settings app/src/AppRoutes.tsx, app/src/pages/Settings.tsx	Adds protected /notifications route and integrates notifications into the Features settings menu.
UI Components app/src/components/BottomTabBar.tsx, app/src/components/notifications/NotificationCenter.tsx, app/src/components/settings/panels/NotificationsPanel.tsx	Adds notifications tab with unread badge to bottom bar; switches NotificationCenter to use integrationNotifications state; replaces global loading with per-category preference toggles and DND-specific loading in settings panel.
Notifications Page app/src/pages/Notifications.tsx	Reworks page to render Redux-backed notification list with unread styling, mark-as-read actions, relative timestamp formatting, and deep-link navigation.
Redux Notification State app/src/store/notificationSlice.ts, app/src/store/index.ts	Introduces new notificationSlice with 200-item cap, category-preference filtering, persistence (items & preferences), and selectors; persists under notifications key while preserving legacy integrationNotifications reducer.
Webview Integration app/src/lib/webviewNotifications/service.ts	Extends handleFired to dispatch Redux notificationReceived action with constructed notification ID, category, timestamp, and account deep-link.
Tests app/src/store/__tests__/notificationSlice.test.ts	Adds comprehensive Vitest suite covering notification receipt, category filtering, read/clear actions, unread counting, and 200-item truncation.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant WebviewService as Webview Service
    participant Redux as Redux Store
    participant UI as Notifications UI
    
    User->>WebviewService: Native notification fires
    WebviewService->>Redux: notificationReceived action<br/>(with id, category, timestamp)
    Redux->>Redux: Prepend to items list<br/>(if category enabled)
    Redux->>Redux: Truncate to 200 items max
    Redux->>UI: Selector triggers re-render
    UI->>User: Display notification in list<br/>(with unread indicator)
    
    User->>UI: Click unread notification
    UI->>Redux: markRead action
    Redux->>Redux: Update item.read = true
    UI->>User: Remove unread styling<br/>Navigate to deepLink

Loading

sequenceDiagram
    participant User
    participant BottomBar as Bottom Tab Bar
    participant NotifPage as Notifications Page
    participant Redux as Redux Store
    
    User->>Redux: Navigate to /notifications
    Redux->>BottomBar: Badge renders unread count
    BottomBar->>User: Show badge (capped at 9+)
    
    User->>NotifPage: View notifications page
    NotifPage->>Redux: selectUnreadCount selector
    Redux->>NotifPage: Return unread count
    NotifPage->>User: Display list with read/unread states
    
    User->>NotifPage: Click "Mark all as read"
    NotifPage->>Redux: markAllRead action
    Redux->>Redux: Set all items.read = true
    Redux->>BottomBar: Badge count updates to 0

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related issues

• [Feature] Native macOS notifications + in-app notification center #395: Directly implements the requested in-app notification center, Redux notification slice with persistence, protected /notifications route, unread badge UI, and native notification firing integration.

Possibly related PRs

• feat(webview): native OS notifications from embedded webview apps (#714) #727: Makes overlapping changes to the same notification-related files (AppRoutes, Notifications page, settings panels, notification store slice).
• Improve settings, rewards, chat, and skills UI polish #328: Modifies the same AppRoutes.tsx and BottomTabBar.tsx files to add protected routes and bottom-tab entries.

Poem

🐰✨ A notification slice, persisted with care,
Redux-wrapped messages floating in air,
Categories toggled, preferences saved,
Badges and timestamps, notification-paved,
Deep links guide where to go with delight! 🔔

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately summarizes the main change: adding an in-app notification center as Phase 1b of a feature initiative.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}