design: NotificationsDropdown unread badge, type groups, and notification center spec

[MerlinTheWhiz]

Closes #1245

Changes made:

• Design spec:
  • design/notifications-spec.md — Full 10-section design specification covering badge, dropdown, center page, states, accessibility (WCAG 2.1 AA), responsive behavior, motion design, and edge cases
• Design tokens:
  • design-tokens.json — Added notification object with badge colors, type colors/icons, and group label definitions
• Shared types:
  • frontend/src/shared/types/notifications.ts — Notification, NotificationType, NotificationsResponse, NotificationGroup, and filter mode type definitions
• Utility helpers:
  • frontend/src/shared/utils/notifications.ts — formatTimeAgo() for relative timestamps and groupNotificationsByDate() (Today/Yesterday/This Week/Earlier groups)
• API layer:
  • frontend/src/shared/api/client.ts — Added getNotifications(), getNotificationCount(), markNotificationRead(), markAllNotificationsRead()
• Theme CSS:
  • frontend/src/styles/theme.css — Added @Keyframes badge-in, notify-slide-in animations with prefers-reduced-motion support
• Rewrite:
  • frontend/src/shared/components/NotificationsDropdown.tsx — Full implementation with:
    • Unread count badge (1-9, 99+ overflow, red #ef4444)
    • Loading state (3 skeleton items with shimmer)
    • Error state (AlertTriangle icon + retry button)
    • Empty state (existing pattern preserved)
    • Date-grouped notification list with type icons/colors
    • "Mark all as read" button with optimistic update
    • "View all notifications" footer link → Notification Center
    • ARIA: role="dialog", role="list", role="listitem", aria-live regions, keyboard nav
• New component:
  • frontend/src/features/notifications/NotificationsPage.tsx — Full-page center with:
    • Type filter chips (All, Bounty, Submission, PR Review, Payout, System)
    • Read/unread segmented toggle
    • Infinite scroll via IntersectionObserver (20 per page)
    • Per-item read toggle (eye icon)
    • Multi-select with fixed bottom bulk action bar (Mark as read / Clear)
    • "Mark all as read" header action
    • Empty state with filter-aware messaging
    • Error state with retry
    • Glassmorphism styling consistent with existing theme
• Routing:
  • frontend/src/features/dashboard/Dashboard.tsx — Added NotificationsPage import and conditional rendering at currentPage === "notifications"
• Barrel exports:
  • frontend/src/shared/components/index.ts — Added NotificationsDropdown export
  • frontend/src/features/notifications/index.ts — Created barrel export for NotificationsPage
• Verification
  • npx vite build — passes with no errors

[vercel]

@MerlinTheWhiz is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@MerlinTheWhiz 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! 🚀

Learn more about application limits