Notifications

Overview

The Notifications page provides real-time alerts for duels, leagues, achievements, and platform activities with Server-Sent Events (SSE) for live updates.

Core Features

Real-Time Notification System

Connection States:

• Live: 🟢 Real-time updates active

• Reconnecting: ⚠️ Connection interrupted, attempting to restore

SSE Integration:

• Persistent connection for instant delivery

• Automatic reconnection on disconnect

• No polling required

• Low latency notification delivery

Notification Types

Competitive:

• 🎯 Duel Challenges: Incoming duel invitations

• ⚔️ Match Results: Duel outcomes and scores

• 🏅 League Updates: Round results, invitations, championships

Performance:

• 🏆 Achievements: Perfect sessions, streaks, milestones

Social:

• 👥 Friend Requests: Connection requests

• 👥 Community Updates: Social features

Administrative:

• ⏰ Reminders: Duel and league deadlines

Notification Management

Individual Actions:

• Mark as Read (unread notifications only)

• View (navigate to related content if link_path exists)

• Delete

Bulk Actions:

• Mark All as Read button (top of page)

Notification States:

• Unread (highlighted)

• Read (dimmed)

• Timestamp display (localized format)

Empty State

All Caught Up Message:

• Celebratory messaging

• Live connection indicator

• Overview of notification types

• Grid display of notification categories:

  • Duel Challenges

  • Achievements

  • League Updates

  • Match Results

  • Reminders

  • Social updates

Educational Content:

• Explains what triggers each notification type

• Sets expectations for future notifications

• Builds anticipation for platform engagement

Key Insights

Context Integration

const {
  notifications,
  isLoading,
  error,
  isConnected,
  fetchNotifications,
  markAsRead,
  markAllAsRead,
  deleteNotification
} = usePersistentNotifications();

Data Fetching

• Initial load on component mount

• Automatic refresh via SSE

• Manual refresh capability

• Error handling with fallbacks

Notification Object Structure

{
  id: number,
  message: string,
  created_at: timestamp,
  read_status: boolean,
  link_path: string | null,
  notification_type: string
}

User Experience

• Zero-click awareness (badge count in header)

• One-click actions

• Visual distinction between read/unread

• Smooth animations

• Loading states

• Error recovery

Performance

• Lazy loading of notification list

• Event-driven updates (no polling)

• Efficient DOM updates

• Memory-conscious cleanup

Visual Design

• Color-coded notification types

• Icon usage for quick scanning

• Timestamp relative to current time

• Hover states for interactivity

• Empty state with illustrations

---