Implementation of "Notifications" Page

[Benjtalkshow]

Implementation of "Notifications" Page (app/me/notifications)

Objective

Build a high-fidelity, real-time notification center that serves as the user's primary surface for staying informed about activity across the platform. The page should feel responsive and alive — notifications should arrive and update without requiring a page refresh, driven by the app's established polling logic. All read/unread state must remain in sync globally, so the sidebar badge always reflects accurate counts regardless of where the user navigates. This is not a static list — it is a living, interactive feed that respects the user's attention and time.

---

UI Description

Aesthetics & Design Intent

The notifications page should feel like a polished inbox — structured, calm, and easy to parse. The user should be able to triage their notifications quickly, with clear visual hierarchy separating what is new from what has already been seen. Interactions should be smooth and satisfying, with animations that reinforce state changes rather than feeling abrupt or mechanical.

Feed Layout & Grouping

• Organize all notifications into three distinct sections with clear visual separators between each group:
  • New — unread notifications that have arrived since the user's last visit or last "mark all as read" action
  • Earlier — previously seen notifications that are still within the active retention window
  • Archived — older notifications that have been dismissed or aged out of the active feed
• Section headers should be typographically distinct — subdued but legible — so they guide the eye without competing with the notification content itself
• Empty states for each section should be handled gracefully with a brief, on-brand message rather than a blank space

Notification Interaction

• Clicking any notification item should open a BoundlessSheet from @/components/sheet/ for immersive, full-detail reading
• The sheet must present the complete notification content and any associated metadata in a clean, readable layout
• The sheet should open with a smooth slide-in animation consistent with the app's motion language, and support keyboard dismissal (Escape key) and focus trapping for full accessibility
• Opening a notification via the sheet should automatically mark it as read and update the unread indicator in real time

"Mark All as Read" Action

• Include a prominent "Mark All as Read" button at the top of the feed, visible whenever unread notifications exist
• On activation, all unread indicators (dot badges, bold text, highlight backgrounds) should fade out smoothly using a Framer Motion transition — not disappear abruptly
• The button itself should become hidden or disabled once no unread notifications remain, with a graceful exit animation
• The action must update both the local feed state and the global unreadCount in the session simultaneously to keep the sidebar badge in sync

---

Technical Details

Hooks & Data Path

Primary Hooks

• Use useNotifications() to fetch and manage the current notification list, including read/unread status per item
• Use useNotificationPolling() to establish the background polling interval that keeps the feed up to date without requiring manual refresh

Badge & Global State Sync

• The unreadCount derived from the session must be synced globally to the sidebar notification badge at all times
• Implement this sync via either an EventEmitter pattern or a shared context — the chosen approach must be consistent with how other global state is managed in the codebase
• Any action that changes read state (opening a notification, marking all as read) must immediately propagate the updated unreadCount to the sidebar badge without requiring a full session refresh
• Avoid local-only state mutations that could cause the sidebar badge and the notification feed to fall out of sync

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all notification data must come from the established hooks and session; no hardcoded content or mock states
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Confirm useNotifications() correctly loads and renders the notification feed on page mount
• Verify useNotificationPolling() is active and new notifications appear in the feed without a manual page refresh
• Confirm notifications are correctly grouped into "New", "Earlier", and "Archived" sections with visible separators
• Test clicking a notification — confirm BoundlessSheet opens with the correct full notification content
• Verify that opening a notification via the sheet marks it as read and updates the unread indicator in real time
• Confirm the sidebar notification badge unreadCount updates immediately after any read state change, without a full session refresh
• Test the "Mark All as Read" button — confirm unread indicators fade out smoothly and the button disappears once no unread items remain
• Verify the drawer opens and closes smoothly with correct animation, focus trapping, and keyboard dismissal (Escape key)
• Test all three empty states (no new, no earlier, no archived notifications) render gracefully
• Confirm the page is fully accessible — notification items, section headers, and the sheet are properly announced by screen readers
• Show video evidence

[linear]

BOU-107

[Agbeleshe]

Hello, can I handle this? Yes, I’d like to work on this issue. I am a proficient Next.js/React frontend developer with strong experience building real-time dashboard feeds and notification systems using structured hooks, global state synchronization, and animation-driven UI patterns in repositories managed on GitHub. I have solid experience working with polling-based data flows, read/unread state management, accessible sheet/drawer interactions, and component architectures built with Tailwind, shadcn/ui, and Framer Motion. I’ve implemented similar inbox-style interfaces where consistent global state propagation and smooth UI transitions were critical for production stability and user experience.

To tackle this, I will implement the app/me/notifications page using the existing useNotifications() and useNotificationPolling() hooks as the single source of truth for the feed. I will structure the UI into New, Earlier, and Archived sections with clear visual grouping and graceful empty states, then integrate the BoundlessSheet interaction so opening a notification displays full content while automatically updating its read state. I will ensure unread counts stay synchronized with the global sidebar badge using the repository’s established shared-state pattern, and implement the Mark All as Read action with smooth Framer Motion transitions that update both local and global state instantly. Finally, I will validate accessibility (focus trapping, keyboard dismissal), responsiveness, and polling behavior while ensuring lint/build checks pass and providing video verification as required.

[KAMALDEEN333]

Hi maintainer am a fullstack deverloper with experience in next js,react,nestjs,express,Typescript,java script,postgres,mongo db connection i have read what is required for this and am confident in my skill to achieved it kindly assign ETA 5hours

[JamesVictor-O]

Hello! I’d love to take on this issue. I’ve reviewed the requirements and have a clear path forward for the implementation. I estimate I can have a PR ready within about 3 hours of being assigned. Could you please assign this to me?

[JamesVictor-O]

Hello! I’d love to take on this issue. I’ve reviewed the requirements and have a clear path forward for the implementation. I estimate I can have a PR ready within about 3 hours of being assigned. Could you please assign this to me?