Add Supabase Realtime to Next.js (Cursor Prompt)

Add Supabase Realtime subscriptions to existing components in this Next.js app.

FILES TO CREATE:
- src/hooks/useRealtimeSubscription.ts — Reusable hook for Realtime subscriptions
- src/hooks/useRealtimePresence.ts — Hook for presence tracking (online users)

FILES TO MODIFY:
- Components that display data which should update in real-time

IMPLEMENTATION:
1. Create useRealtimeSubscription hook that:
   - Accepts table name, event type (INSERT, UPDATE, DELETE, *), and optional filter
   - Subscribes to the Supabase Realtime channel on mount
   - Calls an onChange callback with the new/updated/deleted row
   - Unsubscribes on unmount (cleanup)
   - Handles reconnection and error states
2. Create useRealtimePresence hook that:
   - Tracks which users are currently online
   - Broadcasts the current user's presence with status and last_seen
   - Returns a list of online users
3. Update existing list/table components to use useRealtimeSubscription:
   - On INSERT: prepend the new item to the list
   - On UPDATE: replace the updated item in the list
   - On DELETE: remove the deleted item from the list
   - Show a subtle animation when items are added/updated
4. Add a presence indicator (green dot) next to user avatars where applicable.

PREREQUISITES:
- Enable Realtime on target tables in Supabase Dashboard (Database > Replication)
- Ensure RLS policies allow SELECT for real-time subscriptions

DO NOT:
- Subscribe to tables with sensitive data without proper RLS
- Create subscriptions in Server Components (they must be client components)
- Forget to unsubscribe in the cleanup function