How to Build a Team Workspace with Lovable

1Create a multi-tenant team workspace schema in Supabase. Tables:
2
31. workspaces: id, name, slug (text unique), avatar_url, owner_id (references auth.users), created_at
4
52. workspace_members: id, workspace_id (references workspaces), user_id (references auth.users), role (text: owner|admin|member), joined_at, UNIQUE(workspace_id, user_id)
6
73. channels: id, workspace_id (references workspaces), name (text), description (text), is_private (bool default false), created_by (references auth.users), created_at
8
94. channel_members: id, channel_id (references channels), user_id (references auth.users), joined_at, UNIQUE(channel_id, user_id)
10
115. messages: id, channel_id (references channels), user_id (references auth.users), body (text), metadata (jsonb default '{}'), created_at, edited_at
12
136. documents: id, workspace_id (references workspaces), title (text), body (text), created_by (references auth.users), updated_at, created_at
14
15Create a SECURITY DEFINER function:
16CREATE OR REPLACE FUNCTION is_workspace_member(p_workspace_id uuid)
17RETURNS boolean LANGUAGE sql SECURITY DEFINER STABLE AS $$
18  SELECT EXISTS (
19    SELECT 1 FROM workspace_members
20    WHERE workspace_id = p_workspace_id AND user_id = auth.uid()
21  );
22$$;
23
24RLS policies using this function:
25- workspaces: SELECT where is_workspace_member(id)
26- workspace_members: SELECT where is_workspace_member(workspace_id)
27- channels: SELECT where is_workspace_member(workspace_id) AND (is_private = false OR EXISTS (SELECT 1 FROM channel_members WHERE channel_id = channels.id AND user_id = auth.uid()))
28- messages: SELECT, INSERT where is_workspace_member((SELECT workspace_id FROM channels WHERE id = channel_id))
29- documents: SELECT, INSERT, UPDATE where is_workspace_member(workspace_id)

1Build the team workspace layout at src/layouts/WorkspaceLayout.tsx.
2
3Requirements:
4- Create a WorkspaceContext (React Context) that holds: activeWorkspaceId, setActiveWorkspaceId, activeChannelId, setActiveChannelId, workspaces (array)
5- Fetch workspaces the user belongs to via workspace_members JOIN workspaces
6- Sidebar (w-64, fixed left):
7  - Top: workspace name + dropdown trigger (Command component) for switching workspaces
8  - Section 'Channels': list of channels for activeWorkspaceId with # prefix. Clicking sets activeChannelId.
9  - Section 'Online Now': Avatar list from Presence (build in next step, placeholder for now)
10  - Bottom: user avatar, display name, settings gear icon
11- Main content area (flex-1, overflow hidden): renders children based on activeChannelId
12- If user belongs to only one workspace, skip the switcher and show the name as a static heading
13- Add a '+' button next to 'Channels' heading that opens a Dialog for creating a new channel
14- New channel Dialog form: name (lowercase, no spaces — validate with zod), description, is_private Checkbox

1// src/components/ChannelView.tsx (excerpt showing Realtime + Presence)
2import { useEffect, useRef, useState } from 'react'
3import { supabase } from '@/lib/supabase'
4import { useAuth } from '@/hooks/useAuth'
5
6type Message = { id: string; user_id: string; body: string; created_at: string }
7type OnlineUser = { user_id: string; display_name: string }
8
9export function useChannelRealtime(channelId: string | null, workspaceId: string | null) {
10  const { user } = useAuth()
11  const [messages, setMessages] = useState<Message[]>([])
12  const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([])
13  const bottomRef = useRef<HTMLDivElement>(null)
14
15  useEffect(() => {
16    if (!channelId || !workspaceId || !user?.id) return
17
18    // Load recent messages
19    supabase
20      .from('messages')
21      .select('id, user_id, body, created_at')
22      .eq('channel_id', channelId)
23      .order('created_at', { ascending: true })
24      .limit(50)
25      .then(({ data }) => setMessages(data ?? []))
26
27    // Realtime messages subscription
28    const realtimeChannel = supabase.channel(`workspace:${workspaceId}:channel:${channelId}`)
29
30    realtimeChannel
31      .on(
32        'postgres_changes',
33        { event: 'INSERT', schema: 'public', table: 'messages', filter: `channel_id=eq.${channelId}` },
34        (payload) => {
35          setMessages((prev) => [...prev, payload.new as Message])
36          setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50)
37        }
38      )
39      .on('presence', { event: 'sync' }, () => {
40        const state = realtimeChannel.presenceState<OnlineUser>()
41        setOnlineUsers(Object.values(state).flat())
42      })
43      .subscribe(async (status) => {
44        if (status === 'SUBSCRIBED') {
45          await realtimeChannel.track({ user_id: user.id, display_name: user.email ?? 'Unknown' })
46        }
47      })
48
49    return () => { supabase.removeChannel(realtimeChannel) }
50  }, [channelId, workspaceId, user?.id])
51
52  return { messages, onlineUsers, bottomRef }
53}

1Add a documents section to the workspace. Requirements:
2
3- Add 'Documents' section to the sidebar below Channels, showing document titles with a file icon
4- Clicking a document title sets activeDocumentId in WorkspaceContext and renders DocumentView in the main area
5- DocumentView at src/components/DocumentView.tsx:
6  - Show document title as a large heading (editable inline — click to edit, Enter or blur to save)
7  - Show body as a Textarea with auto-resize (no character limit)
8  - Show last updated timestamp and created_by user display name
9  - Save on blur: supabase.from('documents').update({ body, updated_at: new Date() }).eq('id', documentId)
10  - Show a saving spinner during the update
11- Add a '+' button next to 'Documents' heading that opens a Dialog for creating a new document
12  - New document form: title field only. Body starts empty.
13  - On create, insert into documents and immediately open the new document
14- Documents list fetches from documents table where workspace_id = activeWorkspaceId, ordered by updated_at DESC

1Add workspace member management. Requirements:
2
31. Create workspace_invitations table: id, workspace_id, email, token (uuid default gen_random_uuid()), role (text default 'member'), invited_by (references auth.users), status (text: pending|accepted|expired), created_at, expires_at (default now() + interval '7 days')
4
52. Add a 'Members' section to workspace settings (a Sheet component triggered from the sidebar gear icon)
6   - Show current workspace_members with Avatar, display name, role Badge, and 'Remove' Button (admin only)
7   - Show pending invitations with email, sent date, and 'Cancel' Button
8   - 'Invite Member' Button opens a Dialog with email Input and role Select (member/admin)
9   - On invite submit: insert into workspace_invitations, then invoke the 'send-workspace-invite' Edge Function
10
113. Create Edge Function supabase/functions/send-workspace-invite/index.ts that:
12   - Reads the invitation row by ID
13   - Sends an email via Resend with a link: https://yourapp.com/join?token={invitation.token}
14   - Returns 200 on success
15
164. Create a /join page that reads the token query param, looks up the invitation, and on user login/signup calls an Edge Function to add them to workspace_members and mark the invitation accepted