How to Add Real-Time Features to Your Lovable App

-- In Supabase SQL Editor:
ALTER PUBLICATION supabase_realtime ADD TABLE messages;

-- Or in Dashboard:
-- Table Editor → messages → Enable Realtime

Create a real-time chat component that:
1. Subscribes to INSERT events on the 'messages' table using Supabase Realtime
2. When a new message arrives, adds it to the message list without refreshing
3. Loads existing messages on component mount
4. Unsubscribes from the channel when the component unmounts
5. Shows new messages with a subtle slide-in animation

Add online presence to the chat:
1. When a user opens the chat, track their presence on a 'chat-room' channel
2. Show a green dot next to online users
3. Display 'X users online' at the top
4. Remove the user from presence when they leave the page
5. Update the online list in real-time as users join/leave

Add typing indicators to the chat:
1. When the user types in the input field, broadcast a 'typing' event via Supabase channel
2. Stop broadcasting 2 seconds after the user stops typing
3. Show 'User is typing...' below the messages when someone else is typing
4. Use Supabase broadcast (not database) for performance

Create a notification bell component that:
1. Subscribes to INSERT events on a 'notifications' table for the current user
2. Shows a red badge with unread count
3. Clicking opens a dropdown with notification list
4. Marking as read updates the database
5. New notifications play a subtle sound