feat: add realtime presence indicators for project collaboration

apps/backend/supabase/migrations/0008_user_presence.sql

@@ -0,0 +1,110 @@
+CREATE TABLE IF NOT EXISTS public.user_presence (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    project_id uuid NOT NULL REFERENCES public.projects(id) ON DELETE CASCADE,
+    user_id uuid NOT NULL REFERENCES public.users(id) ON DELETE CASCADE,
+    last_seen timestamp with time zone DEFAULT now() NOT NULL,
+    is_online boolean DEFAULT true NOT NULL,
+    created_at timestamp with time zone DEFAULT now() NOT NULL,
+    updated_at timestamp with time zone DEFAULT now() NOT NULL,
+    UNIQUE(project_id, user_id)
+);
+
+ALTER TABLE public.user_presence ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can view presence for accessible projects" ON public.user_presence
+    FOR SELECT
+    USING (
+        EXISTS (
+            SELECT 1 FROM public.user_projects
+            WHERE user_projects.project_id = user_presence.project_id
+            AND user_projects.user_id = auth.uid()
+        )
+    );
+
+CREATE POLICY "Users can manage their own presence" ON public.user_presence
+    FOR ALL
+    USING (user_id = auth.uid())
+    WITH CHECK (user_id = auth.uid());
+
+CREATE OR REPLACE FUNCTION public.update_user_presence(
+    p_project_id uuid,
+    p_user_id uuid,
+    p_is_online boolean DEFAULT true
+)
+RETURNS void
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+BEGIN
+    INSERT INTO public.user_presence (project_id, user_id, is_online, last_seen, updated_at)
+    VALUES (p_project_id, p_user_id, p_is_online, now(), now())
+    ON CONFLICT (project_id, user_id)
+    DO UPDATE SET
+        is_online = p_is_online,
+        last_seen = now(),
+        updated_at = now();
+END;
+$$;
+
+CREATE OR REPLACE FUNCTION public.cleanup_offline_users()
+RETURNS void
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+BEGIN
+    UPDATE public.user_presence
+    SET is_online = false, updated_at = now()
+    WHERE is_online = true
+    AND last_seen < now() - interval '5 minutes';
+END;
+$$;
+
+CREATE OR REPLACE FUNCTION public.presence_changes()
+RETURNS TRIGGER
+SECURITY DEFINER
+LANGUAGE plpgsql
+AS $$
+DECLARE
+    topic_project_id uuid;
+BEGIN
+    topic_project_id := COALESCE(NEW.project_id, OLD.project_id);
+
+    IF topic_project_id IS NOT NULL THEN
+        PERFORM realtime.broadcast_changes(
+            'presence:' || topic_project_id::text,
+            TG_OP,
+            TG_OP,
+            TG_TABLE_NAME,
+            TG_TABLE_SCHEMA,
+            NEW,
+            OLD
+        );
+    END IF;
+
+    RETURN NULL;
+END;
+$$;
+
+DROP TRIGGER IF EXISTS handle_presence_changes ON public.user_presence;
+CREATE TRIGGER handle_presence_changes
+AFTER INSERT OR UPDATE OR DELETE
+ON public.user_presence
+FOR EACH ROW
+EXECUTE FUNCTION presence_changes();
+
+DROP POLICY IF EXISTS "Authenticated users can receive presence broadcasts" ON "realtime"."messages";
+CREATE POLICY "Authenticated users can receive presence broadcasts"
+ON "realtime"."messages"
+FOR SELECT
+TO authenticated
+USING (
+    CASE
+        WHEN payload->>'table' = 'user_presence' THEN
+            EXISTS (
+                SELECT 1 FROM public.user_projects
+                WHERE user_projects.project_id = (payload->>'project_id')::uuid
+                AND user_projects.user_id = auth.uid()
+            )
+        ELSE false
+    END
+);

apps/web/client/src/app/project/[id]/_components/presence-display.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { usePresenceManager } from '@/components/store/presence';
+import { useEditorEngine } from '@/components/store/editor';
+import { Avatar, AvatarFallback, AvatarImage } from '@onlook/ui/avatar';
+import { Button } from '@onlook/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+
+interface PresenceDisplayProps {
+    className?: string;
+}
+
+export const PresenceDisplay = observer(({ className = '' }: PresenceDisplayProps) => {
+    const presenceManager = usePresenceManager();
+    const editorEngine = useEditorEngine();
+
+    useEffect(() => {
+        if (editorEngine.user && editorEngine.projectId) {
+            presenceManager.setContext(editorEngine.user.id, editorEngine.projectId);
+        }
+    }, [editorEngine.user?.id, editorEngine.projectId, presenceManager]);
+
+    if (!presenceManager.isConnected || presenceManager.otherOnlineUsers.length === 0) {
+        return null;
+    }
+
+    const onlineUsers = presenceManager.otherOnlineUsers;
+
+    return (
+        <div className={`flex items-center gap-1 ${className}`}>
+            {onlineUsers.slice(0, 3).map((user) => (
+                <Tooltip key={user.userId}>
+                    <TooltipTrigger asChild>
+                        <div className="relative">
+                            <Avatar className="h-6 w-6 border-2 border-background-primary">
+                                <AvatarImage src={user.avatarUrl || undefined} alt={user.displayName} />
+                                <AvatarFallback className="text-xs bg-muted text-muted-foreground">
+                                    {user.displayName.split(' ').map(n => n[0]).join('').slice(0, 2)}
+                                </AvatarFallback>
+                            </Avatar>
+                            <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-green-500 border-2 border-background-primary" />
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" className="mt-1" hideArrow>
+                        <p className="text-sm">{user.displayName} is online</p>
+                    </TooltipContent>
+                </Tooltip>
+            ))}
+
+            {onlineUsers.length > 3 && (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-6 w-6 rounded-full p-0 text-xs bg-muted hover:bg-muted/80"
+                        >
+                            +{onlineUsers.length - 3}
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" className="mt-1" hideArrow>
+                        <div className="text-sm">
+                            {onlineUsers.slice(3).map(user => (
+                                <div key={user.userId}>{user.displayName}</div>
+                            ))}
+                        </div>
+                    </TooltipContent>
+                </Tooltip>
+            )}
+        </div>
+    );
+});

apps/web/client/src/app/project/[id]/_components/top-bar/index.tsx

@@ -15,6 +15,7 @@ import { motion } from 'motion/react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { Members } from '../members';
+import { PresenceDisplay } from '../presence-display';
 import { BranchDisplay } from './branch';
 import { ModeToggle } from './mode-toggle';
 import { ProjectBreadcrumb } from './project-breadcrumb';
@@ -53,6 +54,7 @@ export const TopBar = observer(() => {
                     <div className={`transition-all duration-200 ${isMembersPopoverOpen ? 'mr-2' : '-mr-2 group-hover:mr-2'}`}>
                         <Members onPopoverOpenChange={setIsMembersPopoverOpen} />
                     </div>
+                    <PresenceDisplay className="mr-2" />
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <div className="flex items-center">

apps/web/client/src/app/project/[id]/providers.tsx

@@ -2,6 +2,7 @@
 
 import { EditorEngineProvider } from '@/components/store/editor';
 import { HostingProvider } from '@/components/store/hosting';
+import { PresenceProvider } from '@/components/store/presence';
 import type { Branch, Project } from '@onlook/models';
 
 export const ProjectProviders = ({
@@ -16,7 +17,9 @@ export const ProjectProviders = ({
     return (
         <EditorEngineProvider project={project} branches={branches}>
             <HostingProvider>
-                {children}
+                <PresenceProvider>
+                    {children}
+                </PresenceProvider>
             </HostingProvider>
         </EditorEngineProvider>
     );

apps/web/client/src/components/store/presence/index.ts

@@ -0,0 +1 @@
+export { PresenceProvider, usePresenceManager } from './provider';

apps/web/client/src/components/store/presence/manager.ts

@@ -0,0 +1,163 @@
+import { makeAutoObservable, reaction } from 'mobx';
+import { api } from '@/trpc/react';
+import { createClient } from '@/utils/supabase/client';
+
+export interface PresenceUser {
+    userId: string;
+    displayName: string;
+    avatarUrl?: string | null;
+    lastSeen: Date;
+}
+
+export class PresenceManager {
+    onlineUsers: PresenceUser[] = [];
+    currentUserId: string | null = null;
+    currentProjectId: string | null = null;
+    isConnected = false;
+
+    isLoading = false;
+
+    private subscription: any = null;
+
+    constructor() {
+        makeAutoObservable(this);
+
+        reaction(
+            () => this.currentProjectId,
+            (projectId) => {
+                if (projectId) {
+                    this.joinProject(projectId);
+                } else {
+                    this.leaveProject();
+                }
+            }
+        );
+    }
+
+    setContext(userId: string, projectId: string) {
+        this.currentUserId = userId;
+        this.currentProjectId = projectId;
+    }
+
+    async joinProject(projectId: string) {
+        if (!this.currentUserId) return;
+
+        try {
+            this.isLoading = true;
+            this.currentProjectId = projectId;
+
+            await api.presence.joinProject.mutate({ projectId });
+
+            await this.loadProjectPresence(projectId);
+            this.subscribeToPresenceUpdates(projectId);
+
+            this.isConnected = true;
+        } catch (error) {
+            console.error('Error joining project:', error);
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    async leaveProject() {
+        if (!this.currentProjectId || !this.currentUserId) return;
+
+        try {
+            await api.presence.leaveProject.mutate({ projectId: this.currentProjectId });
+
+            this.unsubscribeFromPresenceUpdates();
+            this.onlineUsers = [];
+            this.currentProjectId = null;
+            this.isConnected = false;
+        } catch (error) {
+            console.error('Error leaving project:', error);
+        }
+    }
+
+    private async loadProjectPresence(projectId: string) {
+        try {
+            const presenceData = await api.presence.getProjectPresence.query({ projectId });
+            this.onlineUsers = presenceData.map(p => ({
+                userId: p.userId,
+                displayName: p.displayName,
+                avatarUrl: p.avatarUrl,
+                lastSeen: p.lastSeen,
+            }));
+        } catch (error) {
+            console.error('Error loading project presence:', error);
+        }
+    }
+
+    private subscribeToPresenceUpdates(projectId: string) {
+        this.unsubscribeFromPresenceUpdates();
+
+        const supabase = createClient();
+        const channel = supabase
+            .channel(`presence:${projectId}`)
+            .on(
+                'postgres_changes',
+                {
+                    event: '*',
+                    schema: 'public',
+                    table: 'user_presence',
+                    filter: `project_id=eq.${projectId}`,
+                },
+                (payload) => {
+                    this.handlePresenceUpdate(payload);
+                }
+            )
+            .subscribe();
+
+        this.subscription = channel;
+    }
+
+    private unsubscribeFromPresenceUpdates() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+
+    private handlePresenceUpdate(payload: any) {
+        const { eventType, new: newRecord, old: oldRecord } = payload;
+
+        switch (eventType) {
+            case 'INSERT':
+            case 'UPDATE':
+                if (newRecord && newRecord.is_online) {
+                    const existingIndex = this.onlineUsers.findIndex(u => u.userId === newRecord.user_id);
+                    const user: PresenceUser = {
+                        userId: newRecord.user_id,
+                        displayName: newRecord.user?.display_name || `${newRecord.user?.first_name || ''} ${newRecord.user?.last_name || ''}`.trim(),
+                        avatarUrl: newRecord.user?.avatar_url,
+                        lastSeen: new Date(newRecord.last_seen),
+                    };
+
+                    if (existingIndex >= 0) {
+                        this.onlineUsers[existingIndex] = user;
+                    } else {
+                        this.onlineUsers.push(user);
+                    }
+                } else {
+                    this.onlineUsers = this.onlineUsers.filter(u => u.userId !== newRecord?.user_id);
+                }
+                break;
+
+            case 'DELETE':
+                this.onlineUsers = this.onlineUsers.filter(u => u.userId !== oldRecord?.user_id);
+                break;
+        }
+    }
+
+    get otherOnlineUsers(): PresenceUser[] {
+        return this.onlineUsers.filter(u => u.userId !== this.currentUserId);
+    }
+
+    isUserOnline(userId: string): boolean {
+        return this.onlineUsers.some(u => u.userId === userId);
+    }
+
+    dispose() {
+        this.leaveProject();
+    }
+}