Add Real-time Updates with Supabase Realtime

[Christiantyemele]

Description

Implement real-time updates across the application using Supabase Realtime so users see changes instantly without refreshing.

Tasks

• Set up Supabase Realtime subscriptions for projects
• Set up Supabase Realtime subscriptions for tasks
• Set up Supabase Realtime subscriptions for comments
• Implement optimistic UI updates for better UX
• Add real-time notification indicators
• Handle connection drops and reconnections gracefully
• Add loading skeletons during real-time updates
• Test real-time functionality across multiple browser tabs

Implementation Details

Use Supabase's subscribe() method to listen to changes:

supabase
  .channel('projects')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'projects' }, (payload) => {
    // Handle update
  })
  .subscribe()

Acceptance Criteria

• Changes to projects, tasks, and comments appear instantly in the UI
• Multiple users see each other's changes in real-time
• Optimistic updates provide immediate feedback
• Connection issues are handled gracefully with reconnection logic
• Real-time subscriptions are properly cleaned up on unmount