App Notification Center Panel

[Just-Bamford]

Description

Issue

The NotificationBadge component exists in the Navbar but there is no notification center to view notification history.

this pr Closes #462

Solution

Implemented a comprehensive notification center with slide-out panel, read/unread states, and grouped notifications.

Features

✅ Slide-out panel from right side triggered by NotificationBadge
✅ Notifications grouped by time: Today, This Week, Earlier
✅ Read/unread states with visual indicators (dot on unread)
✅ Mark individual or all notifications as read
✅ Delete individual or clear all notifications
✅ Support for tip, follower, and milestone notification types
✅ Direct links from notifications to relevant pages
✅ Empty state with helpful messaging
✅ Smooth animations with spring transitions
✅ Click-outside closes panel

Files Created

• src/store/notificationStore.ts - Zustand store for notification state
• src/components/NotificationCenter.tsx - Slide-out panel component

Files Modified

• src/components/NotificationBadge.tsx - Opens panel instead of marking read
• src/components/Navbar.tsx - Integrated NotificationCenter

Notification Types

• Tip 💸 - When someone sends a tip
• Follower 👥 - When someone follows
• Milestone 🎉 - When a milestone is reached

Usage

const { addNotification } = useNotificationStore.getState();

addNotification({
  type: 'tip',
  title: 'New tip from Alice',
  description: 'Alice sent you 10 XLM',
  link: '/dashboard',
  metadata: { tipId: '123', amount: 10 }
});