feat: add realtime presence indicators for project collaboration

[naaa760]

Description

• adds realtime presence indicators showing user avatars in the top-right corner when multiple users are working on the same project. Users can now see who's currently active in their project with live updates via Supabase realtime subscriptions.

Related Issues

Closes #2945 - Add realtime presence feature

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Documentation
• [ ] Refactor
• [ ] Other (please describe):

Testing

• Tested realtime presence updates when users join/leave projects
• Verified proper integration with existing project access controls
• Confirmed UI displays correctly in top bar with responsive behavior
• Validated cleanup of offline users after inactivity timeout

---

[!IMPORTANT] Adds real-time presence indicators for project collaboration with backend and frontend support.

• Backend:
  • Adds user_presence table in 0008_user_presence.sql for tracking user presence in projects.
  • Implements row-level security and policies for presence management in 0008_user_presence.sql.
  • Adds functions update_user_presence, cleanup_offline_users, and presence_changes in 0008_user_presence.sql.
• Frontend:
  • Adds PresenceDisplay component in presence-display.tsx to show online users.
  • Integrates PresenceDisplay into TopBar in index.tsx.
  • Introduces PresenceProvider in providers.tsx for managing presence state.
  • Implements PresenceManager class in manager.ts for handling presence logic.
• API:
  • Adds presenceRouter in presence.ts with procedures for joining, leaving, and querying project presence.
  • Registers presenceRouter in root.ts and index.ts.

^{This description was created by for e9cf1aa0f84158335e6d35b0305c73b39bbda999. You can customize this summary. It will automatically update as commits are pushed.}

Summary by CodeRabbit

• New Features
  • Real-time presence indicators in project top bar: see who’s online with avatars, names on hover, and a “+N” overflow when more than three collaborators are active.
  • Automatic join/leave tracking keeps online/offline status and “last seen” accurate without manual refresh.
  • Presence is available across the project view for consistent collaboration awareness.
  • Access is securely scoped to project members, ensuring presence visibility only within authorized projects.

[vercel[bot]]

@naaa760 is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

Adds realtime user presence: database schema and RLS, Supabase trigger/broadcast, TRPC presence router (join/leave/list/cleanup), client presence state manager and provider, UI component to display online users, and integration into project providers and top bar.

Changes

Cohort / File(s)	Summary
Database presence schema and RLS apps/backend/supabase/migrations/0008_user_presence.sql, packages/db/src/schema/user/presence.ts, packages/db/src/schema/user/index.ts	Introduces user_presence table with RLS, policies, upsert/cleanup functions, realtime trigger, and policy for realtime messages. Adds Drizzle schema, relations, insert schema, and exports.
Server API presence apps/web/client/src/server/api/routers/presence.ts, apps/web/client/src/server/api/root.ts, apps/web/client/src/server/api/routers/index.ts	Adds presenceRouter (joinProject, leaveProject, getProjectPresence, getMyPresence, cleanupOffline). Wires router into appRouter and re-exports.
Client presence state apps/web/client/src/components/store/presence/manager.ts, apps/web/client/src/components/store/presence/provider.tsx, apps/web/client/src/components/store/presence/index.ts	Implements PresenceManager (MobX) with join/leave, load, realtime subscribe/unsubscribe, utilities, and disposal. Adds React context provider and hook. Exposes public barrel exports.
Client UI integration apps/web/client/src/app/project/[id]/_components/presence-display.tsx, apps/web/client/src/app/project/[id]/_components/top-bar/index.tsx, apps/web/client/src/app/project/[id]/providers.tsx	Adds PresenceDisplay component to show online avatars and overflow tooltip. Integrates PresenceProvider into project providers and renders PresenceDisplay in top bar.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant PD as PresenceDisplay (UI)
  participant PM as PresenceManager
  participant API as TRPC presenceRouter
  participant DB as DB (user_presence)
  participant RT as Supabase Realtime

  U->>PD: Open project view
  PD->>PM: setContext(userId, projectId)
  PM->>API: joinProject(projectId)
  API->>DB: upsert presence (is_online=true, last_seen=now)
  DB-->>RT: trigger presence_changes broadcast
  API-->>PM: { success: true }
  PM->>API: getProjectPresence(projectId)
  API->>DB: SELECT online users
  DB-->>API: users list
  API-->>PM: presence list
  PM-->>PD: render avatars
  RT-->>PM: INSERT/UPDATE/DELETE events
  PM-->>PD: update UI

sequenceDiagram
  autonumber
  actor U as User
  participant PM as PresenceManager
  participant API as TRPC presenceRouter
  participant DB as DB (user_presence)
  participant RT as Supabase Realtime

  U->>PM: navigate away / dispose
  PM->>API: leaveProject()
  API->>DB: update presence (is_online=false, updated_at=now)
  DB-->>RT: trigger presence_changes broadcast
  PM->>PM: unsubscribe from realtime

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Suggested reviewers

• Kitenite

Poem

A whisker-twitch, a status gleam,
I hop through projects, live-stream dream.
Avatars glow—“I’m here! I’m near!”
Triggers thump like bunny cheer.
Join, leave, ping—presence in flight,
Real-time pawprints light the night. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly and concisely summarizes the primary feature introduced by the pull request, namely adding realtime presence indicators for project collaboration, and follows a conventional commit style without extraneous details.
Linked Issues Check	✅ Passed	The changes fulfill the objectives of issue #2945 by implementing backend presence tracking and realtime broadcasting, integrating Supabase subscriptions, and displaying other users’ avatars in the top-right corner of the project UI with proper access control.
Out of Scope Changes Check	✅ Passed	All modifications are directly related to implementing realtime presence indicators, including database migrations, API routes, state management, and UI components, with no unrelated or extraneous changes introduced.
Description Check	✅ Passed	The pull request description adheres to the repository template by including a clear description of changes, a linked issue reference, the type of change checkbox, and a testing section, covering all required sections except optional screenshots and additional notes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}