feat(ui/dashboard): implement UI for notification page

[steveninhle]

Part of #2215

Summary

• Implement Notification Center UI
• Adds the full frontend for the in-app notification center

What's included:

• Notification bell in the top navigation with unread count badge
• Notification feed (list + detail view, mark as read / mark all as read)
• Drafts panel for in-progress notifications
• Publisher flow: markdown editor, multi-language tabs, tag selection, and publish form

[Copilot]

Pull request overview

Implements the dashboard notification center, including feeds, draft publishing, localized Markdown content, and navigation integration.

Changes:

• Adds notification feed, detail views, unread actions, filtering, and pagination.
• Adds system-admin draft and publishing workflows.
• Adds notification APIs, query caching, localization, routing, and navigation UI.

Reviewed changes

Copilot reviewed 58 out of 61 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
ui/dashboard/package.json	Adds Markdown dependencies.
ui/dashboard/yarn.lock	Locks new dependencies.
ui/dashboard/src/@api/cache-invalidation-interceptor.ts	Adds method-aware invalidation.
ui/dashboard/src/@api/cache-invalidation-map.test.ts	Updates invalidation coverage test.
ui/dashboard/src/@api/cache-invalidation-map.ts	Adds notification cache rules.
ui/dashboard/src/@api/notification-center/index.ts	Exports notification APIs.
ui/dashboard/src/@api/notification-center/notification-creator.ts	Creates notification drafts.
ui/dashboard/src/@api/notification-center/notification-delete.ts	Deletes notifications.
ui/dashboard/src/@api/notification-center/notification-drafts-fetcher.ts	Fetches draft collections.
ui/dashboard/src/@api/notification-center/notification-fetcher.ts	Fetches notification details.
ui/dashboard/src/@api/notification-center/notification-mark-all-as-read.ts	Marks all notifications read.
ui/dashboard/src/@api/notification-center/notification-mark-as-read.ts	Marks selected notifications read.
ui/dashboard/src/@api/notification-center/notification-publisher.ts	Publishes drafts.
ui/dashboard/src/@api/notification-center/notification-unread-count-fetcher.ts	Fetches unread count.
ui/dashboard/src/@api/notification-center/notification-updater.ts	Updates drafts.
ui/dashboard/src/@api/notification-center/notifications-fetcher.ts	Fetches notification feeds.
ui/dashboard/src/@icons/index.tsx	Exports the new bell icon.
ui/dashboard/src/@icons/sidebar-icons/notifications.svg	Adds sidebar bell artwork.
ui/dashboard/src/@icons/special-icons/notifications.svg	Removes previous artwork.
ui/dashboard/src/@locales/en/common.json	Adds English notification labels.
ui/dashboard/src/@locales/en/form.json	Adds English form labels.
ui/dashboard/src/@locales/en/message.json	Adds English success messages.
ui/dashboard/src/@locales/ja/common.json	Adds Japanese notification labels.
ui/dashboard/src/@locales/ja/form.json	Adds Japanese form labels.
ui/dashboard/src/@locales/ja/message.json	Adds Japanese success messages.
ui/dashboard/src/@queries/notification-center.ts	Adds notification queries.
ui/dashboard/src/@types/index.ts	Exports notification types.
ui/dashboard/src/@types/notification-center.ts	Defines notification models.
ui/dashboard/src/app/index.tsx	Registers the notification route.
ui/dashboard/src/components/navigation/index.tsx	Integrates notification navigation.
ui/dashboard/src/components/navigation/notification-bell.tsx	Adds bell badge and preview.
ui/dashboard/src/components/pagination/index.tsx	Supports custom pagination styling.
ui/dashboard/src/components/popover/index.tsx	Broadens close-ref typing.
ui/dashboard/src/components/tabs/index.tsx	Corrects active content display.
ui/dashboard/src/constants/routing.ts	Defines notification-feed path.
ui/dashboard/src/elements/confirm-modal/index.tsx	Supports custom submit text.
ui/dashboard/src/hooks/use-options.tsx	Adds notification sort options.
ui/dashboard/src/pages/notification-feed/collection-loader/use-fetch-notifications.ts	Provides notification data hooks.
ui/dashboard/src/pages/notification-feed/constants.ts	Defines draft and tag presets.
ui/dashboard/src/pages/notification-feed/drafts/draft-card.tsx	Renders draft summaries.
ui/dashboard/src/pages/notification-feed/drafts/drafts-panel.tsx	Adds searchable draft panel.
ui/dashboard/src/pages/notification-feed/elements/markdown-content.css	Styles rendered Markdown.
ui/dashboard/src/pages/notification-feed/elements/markdown-content.tsx	Renders and processes Markdown.
ui/dashboard/src/pages/notification-feed/elements/notification-card.tsx	Adds shared card layout.
ui/dashboard/src/pages/notification-feed/elements/notification-detail.tsx	Adds notification detail modal.
ui/dashboard/src/pages/notification-feed/elements/tag-chip.tsx	Renders colored tags.
ui/dashboard/src/pages/notification-feed/elements/tag-list.tsx	Renders compact tag lists.
ui/dashboard/src/pages/notification-feed/feed/notification-list.tsx	Adds feed and bulk read actions.
ui/dashboard/src/pages/notification-feed/feed/notification-row.tsx	Renders feed rows.
ui/dashboard/src/pages/notification-feed/index.tsx	Defines the notification page.
ui/dashboard/src/pages/notification-feed/page-content.tsx	Coordinates filtering and views.
ui/dashboard/src/pages/notification-feed/page-loader.tsx	Applies admin capabilities.
ui/dashboard/src/pages/notification-feed/publisher/form-schema.ts	Defines publisher validation.
ui/dashboard/src/pages/notification-feed/publisher/language-tabs.tsx	Adds localization tabs.
ui/dashboard/src/pages/notification-feed/publisher/markdown-editor.css	Styles the Markdown editor.
ui/dashboard/src/pages/notification-feed/publisher/markdown-editor.tsx	Adds editing and preview modes.
ui/dashboard/src/pages/notification-feed/publisher/publish-form.tsx	Implements publishing workflow.
ui/dashboard/src/pages/notification-feed/publisher/tag-select.tsx	Adds tag creation and colors.
ui/dashboard/src/pages/notification-feed/types.ts	Defines page-specific aliases.
ui/dashboard/src/utils/converts.ts	Adds capped-count formatting.
ui/dashboard/src/utils/notification-mapper.ts	Resolves localized API data.

Suppressed comments (2)

ui/dashboard/src/pages/notification-feed/page-content.tsx:69

• Editing is resolved by searching only the first LIST_PAGE_SIZE (50) unfiltered drafts. A draft selected from page 11+, or an older draft found through search/sort, will not be present here, so initialDraft becomes undefined and the form creates a new notification instead of updating the selected draft. Keep the draft passed to onEditDraft in state directly, or fetch that ID explicitly.
  ui/dashboard/src/components/navigation/notification-bell.tsx:152
• This anchor is nested inside the notification row's <button>, which is invalid interactive-content nesting and creates conflicting click/keyboard semantics for assistive technologies. Render the row as a non-interactive container with separate button and link targets, or remove the nested link.

                  {link && (
                    <a
                      href={link.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      onClick={e => e.stopPropagation()}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[hvn2k1]

Nice work!