Notifications — alerts for battle events

[Empreiteiro]

Description

Notify participants and viewers about important battle events like new challengers joining, leadership changes, and battle completion.

Details

Notification Types

Event	Who Gets Notified	Channel
Challenger joins your waiting battle	Battle creator	Browser push + in-app
You lose the lead	Current leader	In-app toast
Battle ends (results)	All participants	Browser push + in-app
Someone votes for you	Participant	In-app toast (subtle)
New battle created (from someone you follow)	Followers	In-app only

Implementation

• Browser Push Notifications: Use the Web Push API with service worker for background notifications
  • Request permission when user creates or joins a battle
  • Store push subscription in Netlify Blobs keyed by a user identifier (fingerprint or optional email)
• In-app toasts: Real-time toast notifications within the app UI (bottom-right corner)
  • Stack up to 3 toasts, auto-dismiss after 5 seconds
  • Clickable — navigate to the relevant battle
• Notification center: Bell icon in header showing unread notification count
  • Dropdown panel listing recent notifications
  • Mark as read / clear all

Optional: Email Notifications

• Opt-in email field when creating/joining a battle
• Email sent via Netlify Functions + a transactional email service (SendGrid, Resend, etc.)
• Unsubscribe link in every email

Acceptance Criteria

• In-app toast notifications for leadership changes and battle events
• Browser push notification permission flow
• Push notifications for battle completion and new challengers
• Notification bell icon with unread count in header
• Notification dropdown panel
• Notifications don't block the UI or cause layout shifts