Epic 1.5 Implement V1 Notifications System

[Ahmedr275]

Implement V1 Notifications System

Overview

This issue focuses on the implementation of the Notifications System (V1) to provide in-app notifications for users, enabling them to stay informed about important updates, actions, and reminders. The initial scope includes a notification dropdown accessible from the main navigation bar and basic notification functionalities.

Design References

Marvel - Live -> Notifications

Requirements

Notifications Panel (Dropdown)

• Add a bell icon to the main navigation bar with a badge counter for unread notifications.
• Clicking the bell icon should display a dropdown panel containing:
  • All Notifications: Chronological list of notifications with timestamps.
  • Unread Notifications: A filtered view showing only unread notifications.
  • Notification Actions:
    • "View Details" button to open detailed content related to the notification.
    • "Mark as Read" button to remove the unread badge for the respective notification.
  • Add "Mark All as Read" functionality for quick management.

Notification Events

• Initial Notification Type:
  • Display an update notification whenever a new tool or AI Assistant is added to production.
• Notifications should include:
  • Title
  • Description
  • Timestamp
  • Relevant action link (if applicable).

Backend Integration

• Create backend triggers for notifications when:
  • A new tool or AI Assistant is added.
  • Specific platform updates are made (e.g., system announcements).
• Notifications data structure should include:
  • id: Unique identifier.
  • type: Notification type (e.g., "update", "announcement").
  • title: Notification title.
  • description: Notification details.
  • timestamp: Timestamp of the notification.
  • is_read: Boolean indicating if the notification has been read.
  • action_link: Optional link to relevant details.

User Interaction

• Users should be able to:
  • Open the dropdown and view all notifications.
  • Click "View Details" to navigate to relevant content.
  • Mark individual notifications as "read."
  • Mark all notifications as "read."

Acceptance Criteria

• A bell icon with an unread badge counter is added to the main navigation bar.
• Clicking the bell icon displays a dropdown panel with "All" and "Unread" tabs.
• Notifications display a title, description, timestamp, and relevant action link.
• Users can mark notifications as "read" or "unread" and perform "Mark All as Read."
• The backend triggers notifications for new tools or AI Assistants added to production.
• Notifications are stored and managed in the database with appropriate schema.
• Unit tests are written for:
  • Notification dropdown rendering.
  • "Mark as Read" and "Mark All as Read" functionality.
  • Backend triggers for notification events.
• Notification data updates in real time without page reload using WebSockets (or alternate implementation if specified).

Additional Notes

• Include placeholder data for testing purposes.
• Ensure the system is extendable for future V2 functionalities, such as interactive notifications.

How to Test

1. Trigger backend events for adding notifications (e.g., new tool deployment).
2. Verify the badge count updates dynamically.
3. Check that the dropdown panel displays all notifications with correct details.
4. Test "Mark as Read" and "Mark All as Read" actions.
5. Validate database schema and data storage for notifications.

[xu-ian]

Hi, I am interested in working on this issue

[sonalshreya]

Hi, I am interested on working on this issue

[Ahmedr275]

Hey folks, you can definitely pick up the issue and work on it. Our process for issue assignment is focused on first to PR so multiple contributors can work on an issue and can bring in their own improvements/ideas to the issue as well. Read more here