Skip to content

feat: add real-time collaboration with Supabase Realtime#13

Merged
trmquang93 merged 3 commits intomainfrom
feat/realtime-collab
Mar 18, 2026
Merged

feat: add real-time collaboration with Supabase Realtime#13
trmquang93 merged 3 commits intomainfrom
feat/realtime-collab

Conversation

@trmquang93
Copy link
Copy Markdown
Collaborator

Summary

  • Add real-time collaboration via Supabase Realtime (Broadcast + Presence) -- host creates a room, guests join with a 6-char code, state syncs with last-write-wins
  • Fix collaboration screens refreshing non-stop when a guest joins (deduplicate presence join events)
  • Add Participants Panel -- a slide-out right panel showing all room participants with names, colors, and roles; host can change peer roles from the panel

Test plan

  • Create a collaboration room -- Share icon appears, room code is generated
  • Join from another browser tab -- guest receives host's flow state and screen images
  • Verify live cursors appear for all connected peers
  • Click peer avatars area in TopBar -- Participants Panel slides in showing all participants
  • As host, change a guest's role from the panel dropdown -- role updates for both users
  • Leave room -- panel auto-closes, state resets cleanly
  • Verify keyboard shortcuts (Delete, Undo, Redo) are blocked while Participants Panel is open
  • Run npm run lint and npx vite build -- no errors

Implement host/guest collaboration with room-based sessions:
- ShareModal for creating and joining rooms with 6-char codes
- Host broadcasts document state; guests receive via Broadcast channel
- Presence-based peer tracking with role management (editor/viewer)
- Remote cursor rendering in world-space with name labels
- Read-only enforcement for viewer role across all components
- Mid-interaction safety: queues remote updates during drag operations
- Deep linking support via #/editor?room=CODE
- HostLeftModal for session-ended handling
- User guide updated with collaboration documentation
…oins

Supabase Presence fires leave+join on every track() call, so cursor
updates were causing the host to re-send full state ~20x/sec. Each
state payload stripped imageData, wiping guest images in a loop.

- Deduplicate presence join handler with initializedPeersRef so state
  is only sent once per genuinely new peer
- Preserve existing imageData in applyRemotePayload when incoming
  screens arrive without it
Slide-out right panel showing all room participants with names, colors,
and roles. Accessible by clicking the peer avatars area in the TopBar.
Host can change peer roles directly from the panel dropdown.

- Expose selfDisplayName/selfColor from useCollaboration hook
- Replace private _presenceState reads with stable refs
- Auto-close panel on room disconnect
- Guard keyboard shortcuts while panel is open
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flow-forge Ready Ready Preview, Comment Mar 18, 2026 9:42am

@trmquang93 trmquang93 merged commit 8491600 into main Mar 18, 2026
3 checks passed
@github-actions github-actions bot deleted the feat/realtime-collab branch March 18, 2026 09:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant