developing #10
|
|
@ -14,7 +14,8 @@
|
|||
"next": "16.1.4",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"reactflow": "^11.11.4"
|
||||
"reactflow": "^11.11.4",
|
||||
"yjs": "^13.6.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
|
@ -4975,6 +4976,16 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/isomorphic.js": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
|
||||
"integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/iterator.prototype": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
|
||||
|
|
@ -5130,6 +5141,27 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lib0": {
|
||||
"version": "0.2.117",
|
||||
"resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
|
||||
"integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"isomorphic.js": "^0.2.4"
|
||||
},
|
||||
"bin": {
|
||||
"0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
|
||||
"0gentesthtml": "bin/gentesthtml.js",
|
||||
"0serve": "bin/0serve.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
|
||||
|
|
@ -7186,6 +7218,23 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yjs": {
|
||||
"version": "13.6.29",
|
||||
"resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.29.tgz",
|
||||
"integrity": "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lib0": "^0.2.99"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
"next": "16.1.4",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"reactflow": "^11.11.4"
|
||||
"reactflow": "^11.11.4",
|
||||
"yjs": "^13.6.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
|
|
|||
12
prd.json
12
prd.json
|
|
@ -216,7 +216,7 @@
|
|||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 12,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-058, US-059, US-060, US-061"
|
||||
},
|
||||
{
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
"Typecheck passes"
|
||||
],
|
||||
"priority": 13,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 14,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-043"
|
||||
},
|
||||
{
|
||||
|
|
@ -269,7 +269,7 @@
|
|||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 15,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-043"
|
||||
},
|
||||
{
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 16,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-045"
|
||||
},
|
||||
{
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
"Typecheck passes"
|
||||
],
|
||||
"priority": 17,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-045"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
17
progress.txt
17
progress.txt
|
|
@ -43,6 +43,23 @@
|
|||
- `ChoiceOption` type includes optional `condition?: Condition`. When counting variable usage, check variable nodes + edge conditions + choice option conditions.
|
||||
- React Compiler lint forbids `setState` in effects and reading `useRef().current` during render. Use `useState(() => computeValue())` lazy initializer pattern for one-time initialization logic.
|
||||
- For detecting legacy data shape (pre-migration), pass a flag from the server component (page.tsx) to the client component, since only the server reads raw DB data.
|
||||
- Collaboration tables: `project_collaborators` (roles), `collaboration_sessions` (presence), `audit_trail` (history) — all with RLS scoped by project ownership or collaborator membership
|
||||
- RLS pattern for shared resources: check `projects.user_id = auth.uid()` OR `project_collaborators.user_id = auth.uid()` to cover both owners and collaborators
|
||||
- `RealtimeConnection` class at `src/lib/collaboration/realtime.ts` manages Supabase Realtime channel lifecycle (connect, heartbeat, reconnect, disconnect). Instantiate with (projectId, userId, callbacks).
|
||||
- FlowchartEditor receives `userId` prop from page.tsx server component for collaboration features
|
||||
- Toolbar accepts optional `connectionState` prop to show green/yellow/red connection indicator
|
||||
- `collaboration_sessions` table has UNIQUE(project_id, user_id) constraint to support upsert-based session management
|
||||
- Server actions for project-specific operations go in `src/app/editor/[projectId]/actions.ts` — use `'use server'` directive and return `{ success: boolean; error?: string }` pattern
|
||||
- Editor page.tsx supports both owner and collaborator access: first checks ownership, then falls back to `project_collaborators` lookup. Pass `isOwner` prop to client component.
|
||||
- `ShareModal` at `src/components/editor/ShareModal.tsx` manages collaborator invites/roles/removal via server actions. Only owners see invite form.
|
||||
- Dashboard shared projects use Supabase join query: `project_collaborators.select('role, projects(id, name, updated_at)')` to fetch projects shared with the user
|
||||
- `ProjectCard` supports optional `shared` and `sharedRole` props — when `shared=true`, hide edit/delete buttons and show role badge instead
|
||||
- `PresenceAvatars` at `src/components/editor/PresenceAvatars.tsx` renders connected collaborator avatars. Receives `PresenceUser[]` from `RealtimeConnection.onPresenceSync`.
|
||||
- `RealtimeConnection` constructor takes `(projectId, userId, displayName, callbacks)` — `displayName` is broadcast via Supabase Realtime presence tracking
|
||||
- User color for presence is derived from a hash of their userId, ensuring consistency across sessions. Use `getUserColor(userId)` pattern from PresenceAvatars.
|
||||
- `CRDTManager` at `src/lib/collaboration/crdt.ts` wraps a Yjs Y.Doc with Y.Map<string> for nodes and edges. Connects to Supabase Realtime channel for broadcasting updates.
|
||||
- CRDT sync pattern: local React Flow changes → `updateNodes`/`updateEdges` on CRDTManager → Yjs broadcasts to channel; remote broadcasts → Yjs applies update → callbacks set React Flow state. Use `isRemoteUpdateRef` to prevent echo loops.
|
||||
- For Supabase Realtime broadcast of binary data (Yjs updates), convert `Uint8Array` → `Array.from()` for JSON payload, and `new Uint8Array()` on receive.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { createClient } from '@/lib/supabase/server'
|
||||
import NewProjectButton from '@/components/NewProjectButton'
|
||||
import ProjectList from '@/components/ProjectList'
|
||||
import ProjectCard from '@/components/ProjectCard'
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const supabase = await createClient()
|
||||
|
|
@ -19,6 +20,21 @@ export default async function DashboardPage() {
|
|||
.eq('user_id', user.id)
|
||||
.order('updated_at', { ascending: false })
|
||||
|
||||
// Fetch shared projects (projects where this user is a collaborator)
|
||||
const { data: collaborations } = await supabase
|
||||
.from('project_collaborators')
|
||||
.select('role, projects(id, name, updated_at)')
|
||||
.eq('user_id', user.id)
|
||||
|
||||
const sharedProjects = (collaborations || [])
|
||||
.filter((c) => c.projects)
|
||||
.map((c) => ({
|
||||
...(c.projects as unknown as { id: string; name: string; updated_at: string }),
|
||||
shared: true,
|
||||
role: c.role,
|
||||
}))
|
||||
.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
|
||||
|
|
@ -44,6 +60,26 @@ export default async function DashboardPage() {
|
|||
</div>
|
||||
|
||||
<ProjectList initialProjects={projects || []} />
|
||||
|
||||
{sharedProjects.length > 0 && (
|
||||
<div className="mt-10">
|
||||
<h2 className="mb-4 text-xl font-bold text-zinc-900 dark:text-zinc-50">
|
||||
Shared with me
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{sharedProjects.map((project) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
name={project.name}
|
||||
updatedAt={project.updated_at}
|
||||
shared
|
||||
sharedRole={project.role}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
'use client'
|
||||
|
||||
<<<<<<< HEAD
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
=======
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
>>>>>>> ralph/collaboration-and-character-variables
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
|
|
@ -32,37 +27,16 @@ import { createClient } from '@/lib/supabase/client'
|
|||
import DialogueNode from '@/components/editor/nodes/DialogueNode'
|
||||
import ChoiceNode from '@/components/editor/nodes/ChoiceNode'
|
||||
import VariableNode from '@/components/editor/nodes/VariableNode'
|
||||
<<<<<<< HEAD
|
||||
import ConditionalEdge from '@/components/editor/edges/ConditionalEdge'
|
||||
import ContextMenu, { ContextMenuType } from '@/components/editor/ContextMenu'
|
||||
import ConditionEditor from '@/components/editor/ConditionEditor'
|
||||
import type { FlowchartData, FlowchartNode, FlowchartEdge, Condition } from '@/types/flowchart'
|
||||
|
||||
// LocalStorage key prefix for draft saves
|
||||
const DRAFT_KEY_PREFIX = 'vnwrite-draft-'
|
||||
|
||||
// Debounce delay in ms
|
||||
const AUTOSAVE_DEBOUNCE_MS = 1000
|
||||
|
||||
type ContextMenuState = {
|
||||
x: number
|
||||
y: number
|
||||
type: ContextMenuType
|
||||
nodeId?: string
|
||||
edgeId?: string
|
||||
} | null
|
||||
|
||||
type ConditionEditorState = {
|
||||
edgeId: string
|
||||
condition?: Condition
|
||||
} | null
|
||||
=======
|
||||
import ProjectSettingsModal from '@/components/editor/ProjectSettingsModal'
|
||||
import ConditionEditor from '@/components/editor/ConditionEditor'
|
||||
import ExportValidationModal, { type ValidationIssue } from '@/components/editor/ExportValidationModal'
|
||||
import { EditorProvider } from '@/components/editor/EditorContext'
|
||||
import Toast from '@/components/Toast'
|
||||
import { RealtimeConnection, type ConnectionState, type PresenceUser } from '@/lib/collaboration/realtime'
|
||||
import { CRDTManager } from '@/lib/collaboration/crdt'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import ShareModal from '@/components/editor/ShareModal'
|
||||
import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart'
|
||||
>>>>>>> ralph/collaboration-and-character-variables
|
||||
|
||||
type FlowchartEditorProps = {
|
||||
projectId: string
|
||||
|
|
@ -97,314 +71,6 @@ function toReactFlowEdges(edges: FlowchartEdge[]): Edge[] {
|
|||
}))
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Convert React Flow Node type back to our FlowchartNode type
|
||||
function fromReactFlowNodes(nodes: Node[]): FlowchartNode[] {
|
||||
return nodes.map((node) => ({
|
||||
id: node.id,
|
||||
type: node.type as 'dialogue' | 'choice' | 'variable',
|
||||
position: node.position,
|
||||
data: node.data,
|
||||
})) as FlowchartNode[]
|
||||
}
|
||||
|
||||
// Convert React Flow Edge type back to our FlowchartEdge type
|
||||
function fromReactFlowEdges(edges: Edge[]): FlowchartEdge[] {
|
||||
return edges.map((edge) => ({
|
||||
id: edge.id,
|
||||
source: edge.source,
|
||||
sourceHandle: edge.sourceHandle ?? undefined,
|
||||
target: edge.target,
|
||||
targetHandle: edge.targetHandle ?? undefined,
|
||||
data: edge.data,
|
||||
}))
|
||||
}
|
||||
|
||||
// Get LocalStorage key for a project
|
||||
function getDraftKey(projectId: string): string {
|
||||
return `${DRAFT_KEY_PREFIX}${projectId}`
|
||||
}
|
||||
|
||||
// Save draft to LocalStorage
|
||||
function saveDraft(projectId: string, data: FlowchartData): void {
|
||||
try {
|
||||
localStorage.setItem(getDraftKey(projectId), JSON.stringify(data))
|
||||
} catch (error) {
|
||||
console.error('Failed to save draft to LocalStorage:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Load draft from LocalStorage
|
||||
function loadDraft(projectId: string): FlowchartData | null {
|
||||
try {
|
||||
const draft = localStorage.getItem(getDraftKey(projectId))
|
||||
if (!draft) return null
|
||||
return JSON.parse(draft) as FlowchartData
|
||||
} catch (error) {
|
||||
console.error('Failed to load draft from LocalStorage:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Clear draft from LocalStorage
|
||||
export function clearDraft(projectId: string): void {
|
||||
try {
|
||||
localStorage.removeItem(getDraftKey(projectId))
|
||||
} catch (error) {
|
||||
console.error('Failed to clear draft from LocalStorage:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Compare two FlowchartData objects for equality
|
||||
function flowchartDataEquals(a: FlowchartData, b: FlowchartData): boolean {
|
||||
return JSON.stringify(a) === JSON.stringify(b)
|
||||
}
|
||||
|
||||
// Validate imported flowchart data structure
|
||||
function isValidFlowchartData(data: unknown): data is FlowchartData {
|
||||
if (!data || typeof data !== 'object') return false
|
||||
const obj = data as Record<string, unknown>
|
||||
if (!Array.isArray(obj.nodes)) return false
|
||||
if (!Array.isArray(obj.edges)) return false
|
||||
return true
|
||||
}
|
||||
|
||||
// Ren'Py export types
|
||||
type RenpyDialogueNode = {
|
||||
type: 'dialogue'
|
||||
speaker: string
|
||||
text: string
|
||||
next?: string
|
||||
condition?: Condition
|
||||
}
|
||||
|
||||
type RenpyMenuChoice = {
|
||||
label: string
|
||||
next?: string
|
||||
condition?: Condition
|
||||
}
|
||||
|
||||
type RenpyMenuNode = {
|
||||
type: 'menu'
|
||||
prompt: string
|
||||
choices: RenpyMenuChoice[]
|
||||
}
|
||||
|
||||
type RenpyVariableNode = {
|
||||
type: 'variable'
|
||||
name: string
|
||||
operation: 'set' | 'add' | 'subtract'
|
||||
value: number
|
||||
next?: string
|
||||
condition?: Condition
|
||||
}
|
||||
|
||||
type RenpyNode = RenpyDialogueNode | RenpyMenuNode | RenpyVariableNode
|
||||
|
||||
type RenpyExport = {
|
||||
projectName: string
|
||||
exportedAt: string
|
||||
sections: Record<string, RenpyNode[]>
|
||||
}
|
||||
|
||||
// Find the first node (node with no incoming edges)
|
||||
function findFirstNode(nodes: FlowchartNode[], edges: FlowchartEdge[]): FlowchartNode | null {
|
||||
const targetIds = new Set(edges.map((e) => e.target))
|
||||
const startNodes = nodes.filter((n) => !targetIds.has(n.id))
|
||||
// Return the first start node, or the first node if all have incoming edges
|
||||
return startNodes[0] || nodes[0] || null
|
||||
}
|
||||
|
||||
// Get outgoing edge from a node (for dialogue and variable nodes)
|
||||
function getOutgoingEdge(nodeId: string, edges: FlowchartEdge[], sourceHandle?: string): FlowchartEdge | undefined {
|
||||
return edges.find((e) => e.source === nodeId && (sourceHandle === undefined || e.sourceHandle === sourceHandle))
|
||||
}
|
||||
|
||||
// Get all outgoing edges from a node (for choice nodes)
|
||||
function getOutgoingEdges(nodeId: string, edges: FlowchartEdge[]): FlowchartEdge[] {
|
||||
return edges.filter((e) => e.source === nodeId)
|
||||
}
|
||||
|
||||
// Convert flowchart to Ren'Py format using graph traversal
|
||||
function convertToRenpyFormat(
|
||||
nodes: FlowchartNode[],
|
||||
edges: FlowchartEdge[],
|
||||
projectName: string
|
||||
): RenpyExport {
|
||||
const nodeMap = new Map<string, FlowchartNode>(nodes.map((n) => [n.id, n]))
|
||||
const visited = new Set<string>()
|
||||
const sections: Record<string, RenpyNode[]> = {}
|
||||
let currentSectionName = 'start'
|
||||
let currentSection: RenpyNode[] = []
|
||||
|
||||
// Helper to get or create a label for a node
|
||||
const nodeLabels = new Map<string, string>()
|
||||
let labelCounter = 0
|
||||
|
||||
function getNodeLabel(nodeId: string): string {
|
||||
if (!nodeLabels.has(nodeId)) {
|
||||
const node = nodeMap.get(nodeId)
|
||||
if (node?.type === 'dialogue' && node.data.speaker) {
|
||||
// Use speaker name as part of label if available
|
||||
nodeLabels.set(nodeId, `section_${node.data.speaker.toLowerCase().replace(/\s+/g, '_')}_${labelCounter++}`)
|
||||
} else {
|
||||
nodeLabels.set(nodeId, `section_${labelCounter++}`)
|
||||
}
|
||||
}
|
||||
return nodeLabels.get(nodeId)!
|
||||
}
|
||||
|
||||
// Process a node and its successors
|
||||
function processNode(nodeId: string): void {
|
||||
if (visited.has(nodeId)) return
|
||||
visited.add(nodeId)
|
||||
|
||||
const node = nodeMap.get(nodeId)
|
||||
if (!node) return
|
||||
|
||||
if (node.type === 'dialogue') {
|
||||
const outgoingEdge = getOutgoingEdge(nodeId, edges)
|
||||
const renpyNode: RenpyDialogueNode = {
|
||||
type: 'dialogue',
|
||||
speaker: node.data.speaker || '',
|
||||
text: node.data.text,
|
||||
}
|
||||
|
||||
if (outgoingEdge) {
|
||||
// Check if target node is already visited (creates a jump)
|
||||
if (visited.has(outgoingEdge.target)) {
|
||||
renpyNode.next = getNodeLabel(outgoingEdge.target)
|
||||
} else {
|
||||
renpyNode.next = outgoingEdge.target
|
||||
}
|
||||
if (outgoingEdge.data?.condition) {
|
||||
renpyNode.condition = outgoingEdge.data.condition
|
||||
}
|
||||
}
|
||||
|
||||
currentSection.push(renpyNode)
|
||||
|
||||
// Process next node if not visited
|
||||
if (outgoingEdge && !visited.has(outgoingEdge.target)) {
|
||||
processNode(outgoingEdge.target)
|
||||
}
|
||||
} else if (node.type === 'choice') {
|
||||
const outgoingEdges = getOutgoingEdges(nodeId, edges)
|
||||
|
||||
// Map options to their corresponding edges
|
||||
const choices: RenpyMenuChoice[] = node.data.options.map((option, index) => {
|
||||
// Find edge for this option handle
|
||||
const optionEdge = outgoingEdges.find((e) => e.sourceHandle === `option-${index}`)
|
||||
const choice: RenpyMenuChoice = {
|
||||
label: option.label || `Option ${index + 1}`,
|
||||
}
|
||||
|
||||
if (optionEdge) {
|
||||
// If target is visited, use label; otherwise use target id
|
||||
if (visited.has(optionEdge.target)) {
|
||||
choice.next = getNodeLabel(optionEdge.target)
|
||||
} else {
|
||||
choice.next = optionEdge.target
|
||||
}
|
||||
if (optionEdge.data?.condition) {
|
||||
choice.condition = optionEdge.data.condition
|
||||
}
|
||||
}
|
||||
|
||||
// Per-option condition (visibility condition) takes priority over edge condition
|
||||
if (option.condition) {
|
||||
choice.condition = option.condition
|
||||
}
|
||||
|
||||
return choice
|
||||
})
|
||||
|
||||
const renpyNode: RenpyMenuNode = {
|
||||
type: 'menu',
|
||||
prompt: node.data.prompt || '',
|
||||
choices,
|
||||
}
|
||||
|
||||
currentSection.push(renpyNode)
|
||||
|
||||
// Save current section before processing branches
|
||||
sections[currentSectionName] = currentSection
|
||||
|
||||
// Process each branch in a new section
|
||||
for (const choice of choices) {
|
||||
if (choice.next && !visited.has(choice.next)) {
|
||||
const targetNode = nodeMap.get(choice.next)
|
||||
if (targetNode) {
|
||||
// Start new section for this branch
|
||||
currentSectionName = getNodeLabel(choice.next)
|
||||
currentSection = []
|
||||
processNode(choice.next)
|
||||
if (currentSection.length > 0) {
|
||||
sections[currentSectionName] = currentSection
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (node.type === 'variable') {
|
||||
const outgoingEdge = getOutgoingEdge(nodeId, edges)
|
||||
const renpyNode: RenpyVariableNode = {
|
||||
type: 'variable',
|
||||
name: node.data.variableName,
|
||||
operation: node.data.operation,
|
||||
value: node.data.value,
|
||||
}
|
||||
|
||||
if (outgoingEdge) {
|
||||
if (visited.has(outgoingEdge.target)) {
|
||||
renpyNode.next = getNodeLabel(outgoingEdge.target)
|
||||
} else {
|
||||
renpyNode.next = outgoingEdge.target
|
||||
}
|
||||
if (outgoingEdge.data?.condition) {
|
||||
renpyNode.condition = outgoingEdge.data.condition
|
||||
}
|
||||
}
|
||||
|
||||
currentSection.push(renpyNode)
|
||||
|
||||
if (outgoingEdge && !visited.has(outgoingEdge.target)) {
|
||||
processNode(outgoingEdge.target)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Find and process starting from the first node
|
||||
const firstNode = findFirstNode(nodes, edges)
|
||||
if (firstNode) {
|
||||
processNode(firstNode.id)
|
||||
// Save the final section if it has content
|
||||
if (currentSection.length > 0 && !sections[currentSectionName]) {
|
||||
sections[currentSectionName] = currentSection
|
||||
}
|
||||
}
|
||||
|
||||
// Replace node IDs in next fields with proper labels
|
||||
for (const sectionNodes of Object.values(sections)) {
|
||||
for (const renpyNode of sectionNodes) {
|
||||
if (renpyNode.type === 'dialogue' || renpyNode.type === 'variable') {
|
||||
if (renpyNode.next && nodeLabels.has(renpyNode.next)) {
|
||||
renpyNode.next = nodeLabels.get(renpyNode.next)
|
||||
}
|
||||
} else if (renpyNode.type === 'menu') {
|
||||
for (const choice of renpyNode.choices) {
|
||||
if (choice.next && nodeLabels.has(choice.next)) {
|
||||
choice.next = nodeLabels.get(choice.next)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
projectName,
|
||||
exportedAt: new Date().toISOString(),
|
||||
sections,
|
||||
=======
|
||||
const RANDOM_COLORS = [
|
||||
'#EF4444', '#F97316', '#F59E0B', '#10B981',
|
||||
'#3B82F6', '#8B5CF6', '#EC4899', '#14B8A6',
|
||||
|
|
@ -542,16 +208,11 @@ function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) {
|
|||
nodes: migratedNodes,
|
||||
edges: migratedEdges,
|
||||
toastMessage: `Auto-imported ${parts.join(' and ')} from existing data`,
|
||||
>>>>>>> ralph/collaboration-and-character-variables
|
||||
}
|
||||
}
|
||||
|
||||
// Inner component that uses useReactFlow hook
|
||||
<<<<<<< HEAD
|
||||
function FlowchartEditorInner({ projectId, projectName, initialData }: FlowchartEditorProps) {
|
||||
=======
|
||||
function FlowchartEditorInner({ projectId, initialData, needsMigration }: FlowchartEditorProps) {
|
||||
>>>>>>> ralph/collaboration-and-character-variables
|
||||
// Define custom node types - memoized to prevent re-renders
|
||||
const nodeTypes: NodeTypes = useMemo(
|
||||
() => ({
|
||||
|
|
@ -619,8 +280,104 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
|
|||
const [characters, setCharacters] = useState<Character[]>(migratedData.characters)
|
||||
const [variables, setVariables] = useState<Variable[]>(migratedData.variables)
|
||||
const [showSettings, setShowSettings] = useState(false)
|
||||
const [showShare, setShowShare] = useState(false)
|
||||
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
|
||||
const [toastMessage, setToastMessage] = useState<string | null>(migratedData.toastMessage)
|
||||
const [validationIssues, setValidationIssues] = useState<ValidationIssue[] | null>(null)
|
||||
const [warningNodeIds, setWarningNodeIds] = useState<Set<string>>(new Set())
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
|
||||
const [presenceUsers, setPresenceUsers] = useState<PresenceUser[]>([])
|
||||
const realtimeRef = useRef<RealtimeConnection | null>(null)
|
||||
const crdtRef = useRef<CRDTManager | null>(null)
|
||||
const isRemoteUpdateRef = useRef(false)
|
||||
|
||||
// Initialize CRDT manager and connect to Supabase Realtime channel on mount
|
||||
useEffect(() => {
|
||||
const supabase = createClient()
|
||||
|
||||
const crdtManager = new CRDTManager({
|
||||
onNodesChange: (crdtNodes: FlowchartNode[]) => {
|
||||
isRemoteUpdateRef.current = true
|
||||
setNodes(toReactFlowNodes(crdtNodes))
|
||||
isRemoteUpdateRef.current = false
|
||||
},
|
||||
onEdgesChange: (crdtEdges: FlowchartEdge[]) => {
|
||||
isRemoteUpdateRef.current = true
|
||||
setEdges(toReactFlowEdges(crdtEdges))
|
||||
isRemoteUpdateRef.current = false
|
||||
},
|
||||
onPersist: async (persistNodes: FlowchartNode[], persistEdges: FlowchartEdge[]) => {
|
||||
try {
|
||||
await supabase
|
||||
.from('projects')
|
||||
.update({
|
||||
flowchart_data: {
|
||||
nodes: persistNodes,
|
||||
edges: persistEdges,
|
||||
characters,
|
||||
variables,
|
||||
},
|
||||
})
|
||||
.eq('id', projectId)
|
||||
} catch {
|
||||
// Persistence failure is non-critical; will retry on next change
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// Initialize CRDT document from initial data
|
||||
crdtManager.initializeFromData(migratedData.nodes, migratedData.edges)
|
||||
crdtRef.current = crdtManager
|
||||
|
||||
const connection = new RealtimeConnection(projectId, userId, userDisplayName, {
|
||||
onConnectionStateChange: setConnectionState,
|
||||
onPresenceSync: setPresenceUsers,
|
||||
onChannelSubscribed: (channel) => {
|
||||
crdtManager.connectChannel(channel)
|
||||
},
|
||||
})
|
||||
realtimeRef.current = connection
|
||||
connection.connect()
|
||||
|
||||
return () => {
|
||||
connection.disconnect()
|
||||
realtimeRef.current = null
|
||||
crdtManager.destroy()
|
||||
crdtRef.current = null
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectId, userId, userDisplayName])
|
||||
|
||||
// Sync local React Flow state changes to CRDT (skip remote-originated updates)
|
||||
const nodesForCRDT = useMemo(() => {
|
||||
return nodes.map((node) => ({
|
||||
id: node.id,
|
||||
type: node.type as 'dialogue' | 'choice' | 'variable',
|
||||
position: node.position,
|
||||
data: node.data,
|
||||
})) as FlowchartNode[]
|
||||
}, [nodes])
|
||||
|
||||
const edgesForCRDT = useMemo(() => {
|
||||
return edges.map((edge) => ({
|
||||
id: edge.id,
|
||||
source: edge.source,
|
||||
sourceHandle: edge.sourceHandle,
|
||||
target: edge.target,
|
||||
targetHandle: edge.targetHandle,
|
||||
data: edge.data,
|
||||
})) as FlowchartEdge[]
|
||||
}, [edges])
|
||||
|
||||
useEffect(() => {
|
||||
if (isRemoteUpdateRef.current) return
|
||||
crdtRef.current?.updateNodes(nodesForCRDT)
|
||||
}, [nodesForCRDT])
|
||||
|
||||
useEffect(() => {
|
||||
if (isRemoteUpdateRef.current) return
|
||||
crdtRef.current?.updateEdges(edgesForCRDT)
|
||||
}, [edgesForCRDT])
|
||||
|
||||
const handleAddCharacter = useCallback(
|
||||
(name: string, color: string): string => {
|
||||
|
|
@ -1047,6 +804,19 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
|
|||
[setEdges]
|
||||
)
|
||||
|
||||
// Apply warning styles to nodes with undefined references
|
||||
const styledNodes = useMemo(
|
||||
() =>
|
||||
warningNodeIds.size === 0
|
||||
? nodes
|
||||
: nodes.map((node) =>
|
||||
warningNodeIds.has(node.id)
|
||||
? { ...node, className: 'export-warning-node' }
|
||||
: node
|
||||
),
|
||||
[nodes, warningNodeIds]
|
||||
)
|
||||
|
||||
// Get the selected edge's condition data
|
||||
const selectedEdge = useMemo(
|
||||
() => (selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null),
|
||||
|
|
@ -1064,10 +834,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
|
|||
onExport={handleExport}
|
||||
onImport={handleImport}
|
||||
onProjectSettings={() => setShowSettings(true)}
|
||||
onShare={() => setShowShare(true)}
|
||||
connectionState={connectionState}
|
||||
presenceUsers={presenceUsers}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
nodes={styledNodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
onNodesChange={onNodesChange}
|
||||
|
|
@ -1094,6 +867,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
|
|||
getVariableUsageCount={getVariableUsageCount}
|
||||
/>
|
||||
)}
|
||||
{showShare && (
|
||||
<ShareModal
|
||||
projectId={projectId}
|
||||
isOwner={isOwner}
|
||||
onClose={() => setShowShare(false)}
|
||||
/>
|
||||
)}
|
||||
{selectedEdge && (
|
||||
<ConditionEditor
|
||||
edgeId={selectedEdge.id}
|
||||
|
|
@ -1102,6 +882,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
|
|||
onClose={() => setSelectedEdgeId(null)}
|
||||
/>
|
||||
)}
|
||||
{validationIssues && (
|
||||
<ExportValidationModal
|
||||
issues={validationIssues}
|
||||
onExportAnyway={handleExportAnyway}
|
||||
onCancel={handleExportCancel}
|
||||
/>
|
||||
)}
|
||||
{toastMessage && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
'use server'
|
||||
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
|
||||
export type Collaborator = {
|
||||
id: string
|
||||
user_id: string
|
||||
role: 'owner' | 'editor' | 'viewer'
|
||||
invited_at: string
|
||||
accepted_at: string | null
|
||||
display_name: string | null
|
||||
email: string | null
|
||||
}
|
||||
|
||||
export async function getCollaborators(
|
||||
projectId: string
|
||||
): Promise<{ success: boolean; data?: Collaborator[]; error?: string }> {
|
||||
const supabase = await createClient()
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
return { success: false, error: 'Not authenticated' }
|
||||
}
|
||||
|
||||
// Verify user owns the project
|
||||
const { data: project } = await supabase
|
||||
.from('projects')
|
||||
.select('id, user_id')
|
||||
.eq('id', projectId)
|
||||
.single()
|
||||
|
||||
if (!project) {
|
||||
return { success: false, error: 'Project not found' }
|
||||
}
|
||||
|
||||
const isOwner = project.user_id === user.id
|
||||
|
||||
// Check if user is a collaborator
|
||||
if (!isOwner) {
|
||||
const { data: collab } = await supabase
|
||||
.from('project_collaborators')
|
||||
.select('id')
|
||||
.eq('project_id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (!collab) {
|
||||
return { success: false, error: 'Access denied' }
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch collaborators with profile info
|
||||
const { data: collaborators, error } = await supabase
|
||||
.from('project_collaborators')
|
||||
.select('id, user_id, role, invited_at, accepted_at, profiles(display_name, email)')
|
||||
.eq('project_id', projectId)
|
||||
|
||||
if (error) {
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
|
||||
const result: Collaborator[] = (collaborators || []).map((c) => {
|
||||
const profile = c.profiles as unknown as { display_name: string | null; email: string | null } | null
|
||||
return {
|
||||
id: c.id,
|
||||
user_id: c.user_id,
|
||||
role: c.role as 'owner' | 'editor' | 'viewer',
|
||||
invited_at: c.invited_at,
|
||||
accepted_at: c.accepted_at,
|
||||
display_name: profile?.display_name || null,
|
||||
email: profile?.email || null,
|
||||
}
|
||||
})
|
||||
|
||||
return { success: true, data: result }
|
||||
}
|
||||
|
||||
export async function inviteCollaborator(
|
||||
projectId: string,
|
||||
email: string,
|
||||
role: 'editor' | 'viewer'
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient()
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
return { success: false, error: 'Not authenticated' }
|
||||
}
|
||||
|
||||
// Verify user owns the project
|
||||
const { data: project } = await supabase
|
||||
.from('projects')
|
||||
.select('id, user_id')
|
||||
.eq('id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (!project) {
|
||||
return { success: false, error: 'Only the project owner can invite collaborators' }
|
||||
}
|
||||
|
||||
// Find the user by email in profiles
|
||||
const { data: targetProfile } = await supabase
|
||||
.from('profiles')
|
||||
.select('id, email')
|
||||
.eq('email', email)
|
||||
.single()
|
||||
|
||||
if (!targetProfile) {
|
||||
return { success: false, error: 'No user found with that email address' }
|
||||
}
|
||||
|
||||
// Cannot invite yourself
|
||||
if (targetProfile.id === user.id) {
|
||||
return { success: false, error: 'You cannot invite yourself' }
|
||||
}
|
||||
|
||||
// Check if already a collaborator
|
||||
const { data: existing } = await supabase
|
||||
.from('project_collaborators')
|
||||
.select('id')
|
||||
.eq('project_id', projectId)
|
||||
.eq('user_id', targetProfile.id)
|
||||
.single()
|
||||
|
||||
if (existing) {
|
||||
return { success: false, error: 'This user is already a collaborator' }
|
||||
}
|
||||
|
||||
// Insert collaborator
|
||||
const { error: insertError } = await supabase
|
||||
.from('project_collaborators')
|
||||
.insert({
|
||||
project_id: projectId,
|
||||
user_id: targetProfile.id,
|
||||
role,
|
||||
invited_at: new Date().toISOString(),
|
||||
accepted_at: new Date().toISOString(), // Auto-accept for now
|
||||
})
|
||||
|
||||
if (insertError) {
|
||||
return { success: false, error: insertError.message }
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
export async function updateCollaboratorRole(
|
||||
projectId: string,
|
||||
collaboratorId: string,
|
||||
role: 'editor' | 'viewer'
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient()
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
return { success: false, error: 'Not authenticated' }
|
||||
}
|
||||
|
||||
// Verify user owns the project
|
||||
const { data: project } = await supabase
|
||||
.from('projects')
|
||||
.select('id, user_id')
|
||||
.eq('id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (!project) {
|
||||
return { success: false, error: 'Only the project owner can change roles' }
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('project_collaborators')
|
||||
.update({ role })
|
||||
.eq('id', collaboratorId)
|
||||
.eq('project_id', projectId)
|
||||
|
||||
if (error) {
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
export async function removeCollaborator(
|
||||
projectId: string,
|
||||
collaboratorId: string
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient()
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
return { success: false, error: 'Not authenticated' }
|
||||
}
|
||||
|
||||
// Verify user owns the project
|
||||
const { data: project } = await supabase
|
||||
.from('projects')
|
||||
.select('id, user_id')
|
||||
.eq('id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (!project) {
|
||||
return { success: false, error: 'Only the project owner can remove collaborators' }
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('project_collaborators')
|
||||
.delete()
|
||||
.eq('id', collaboratorId)
|
||||
.eq('project_id', projectId)
|
||||
|
||||
if (error) {
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
}
|
||||
|
|
@ -19,15 +19,52 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
return null
|
||||
}
|
||||
|
||||
const { data: project, error } = await supabase
|
||||
// Fetch user's display name for presence
|
||||
const { data: profile } = await supabase
|
||||
.from('profiles')
|
||||
.select('display_name')
|
||||
.eq('id', user.id)
|
||||
.single()
|
||||
|
||||
const userDisplayName = profile?.display_name || user.email || 'Anonymous'
|
||||
|
||||
// Try to load as owner first
|
||||
const { data: ownedProject } = await supabase
|
||||
.from('projects')
|
||||
.select('id, name, flowchart_data')
|
||||
.eq('id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (error || !project) {
|
||||
notFound()
|
||||
let project = ownedProject
|
||||
let isOwner = true
|
||||
|
||||
// If not the owner, check if the user is a collaborator
|
||||
if (!project) {
|
||||
// RLS on projects allows collaborators to SELECT shared projects
|
||||
const { data: collab } = await supabase
|
||||
.from('project_collaborators')
|
||||
.select('id, role')
|
||||
.eq('project_id', projectId)
|
||||
.eq('user_id', user.id)
|
||||
.single()
|
||||
|
||||
if (!collab) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const { data: sharedProject } = await supabase
|
||||
.from('projects')
|
||||
.select('id, name, flowchart_data')
|
||||
.eq('id', projectId)
|
||||
.single()
|
||||
|
||||
if (!sharedProject) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
project = sharedProject
|
||||
isOwner = false
|
||||
}
|
||||
|
||||
const rawData = project.flowchart_data || {}
|
||||
|
|
@ -42,7 +79,7 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
// the project was created before these features existed and may need auto-migration
|
||||
const needsMigration = !rawData.characters && !rawData.variables
|
||||
|
||||
return (
|
||||
return (<>
|
||||
<div className="flex h-screen flex-col">
|
||||
<header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div className="flex items-center gap-4">
|
||||
|
|
@ -99,10 +136,14 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
<div className="flex-1">
|
||||
<FlowchartEditor
|
||||
projectId={project.id}
|
||||
userId={user.id}
|
||||
userDisplayName={userDisplayName}
|
||||
isOwner={isOwner}
|
||||
initialData={flowchartData}
|
||||
needsMigration={needsMigration}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,3 +24,16 @@ body {
|
|||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Export validation warning highlighting for React Flow nodes */
|
||||
.react-flow__node.export-warning-node {
|
||||
outline: 3px solid #f97316;
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
animation: pulse-warning 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-warning {
|
||||
0%, 100% { outline-color: #f97316; }
|
||||
50% { outline-color: #fb923c; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ interface ProjectCardProps {
|
|||
id: string
|
||||
name: string
|
||||
updatedAt: string
|
||||
onDelete: (id: string) => void
|
||||
onRename: (id: string, newName: string) => void
|
||||
onDelete?: (id: string) => void
|
||||
onRename?: (id: string, newName: string) => void
|
||||
shared?: boolean
|
||||
sharedRole?: string
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
|
|
@ -29,6 +31,8 @@ export default function ProjectCard({
|
|||
updatedAt,
|
||||
onDelete,
|
||||
onRename,
|
||||
shared,
|
||||
sharedRole,
|
||||
}: ProjectCardProps) {
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
|
@ -62,7 +66,7 @@ export default function ProjectCard({
|
|||
|
||||
setIsDeleting(false)
|
||||
setShowDeleteDialog(false)
|
||||
onDelete(id)
|
||||
onDelete?.(id)
|
||||
}
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
|
|
@ -106,7 +110,7 @@ export default function ProjectCard({
|
|||
|
||||
setIsRenaming(false)
|
||||
setShowRenameDialog(false)
|
||||
onRename(id, newName.trim())
|
||||
onRename?.(id, newName.trim())
|
||||
}
|
||||
|
||||
const handleCancelRename = () => {
|
||||
|
|
@ -122,46 +126,55 @@ export default function ProjectCard({
|
|||
onClick={handleCardClick}
|
||||
className="group relative cursor-pointer rounded-lg border border-zinc-200 bg-white p-6 transition-all hover:border-blue-300 hover:shadow-md dark:border-zinc-700 dark:bg-zinc-800 dark:hover:border-blue-600"
|
||||
>
|
||||
<div className="absolute right-3 top-3 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
onClick={handleRenameClick}
|
||||
className="rounded p-1 text-zinc-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
|
||||
title="Rename project"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
{!shared && onRename && onDelete && (
|
||||
<div className="absolute right-3 top-3 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
onClick={handleRenameClick}
|
||||
className="rounded p-1 text-zinc-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
|
||||
title="Rename project"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteClick}
|
||||
className="rounded p-1 text-zinc-400 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400"
|
||||
title="Delete project"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteClick}
|
||||
className="rounded p-1 text-zinc-400 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400"
|
||||
title="Delete project"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{shared && (
|
||||
<div className="absolute right-3 top-3">
|
||||
<span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
|
||||
{sharedRole === 'editor' ? 'Editor' : 'Viewer'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="pr-8 text-lg font-semibold text-zinc-900 group-hover:text-blue-600 dark:text-zinc-50 dark:group-hover:text-blue-400">
|
||||
{name}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
'use client'
|
||||
|
||||
export type ValidationIssue = {
|
||||
nodeId: string
|
||||
nodeType: 'dialogue' | 'choice' | 'variable' | 'edge'
|
||||
contentSnippet: string
|
||||
undefinedReference: string
|
||||
referenceType: 'character' | 'variable'
|
||||
}
|
||||
|
||||
type ExportValidationModalProps = {
|
||||
issues: ValidationIssue[]
|
||||
onExportAnyway: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export default function ExportValidationModal({
|
||||
issues,
|
||||
onExportAnyway,
|
||||
onCancel,
|
||||
}: ExportValidationModalProps) {
|
||||
const characterIssues = issues.filter((i) => i.referenceType === 'character')
|
||||
const variableIssues = issues.filter((i) => i.referenceType === 'variable')
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800">
|
||||
<div className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
className="h-5 w-5 text-orange-500"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
Export Validation Issues
|
||||
</h2>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{issues.length} undefined reference{issues.length !== 1 ? 's' : ''} found. These nodes/edges reference characters or variables that no longer exist.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[50vh] overflow-y-auto px-6 py-4">
|
||||
{characterIssues.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Undefined Characters
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{characterIssues.map((issue, idx) => (
|
||||
<li
|
||||
key={`char-${idx}`}
|
||||
className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
|
||||
{issue.nodeType}
|
||||
</span>
|
||||
<p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{issue.contentSnippet}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
|
||||
ID: {issue.undefinedReference.slice(0, 8)}...
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{variableIssues.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Undefined Variables
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{variableIssues.map((issue, idx) => (
|
||||
<li
|
||||
key={`var-${idx}`}
|
||||
className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
|
||||
{issue.nodeType}
|
||||
</span>
|
||||
<p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{issue.contentSnippet}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
|
||||
ID: {issue.undefinedReference.slice(0, 8)}...
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="rounded border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onExportAnyway}
|
||||
className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Export anyway
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
'use client'
|
||||
|
||||
import type { PresenceUser } from '@/lib/collaboration/realtime'
|
||||
|
||||
type PresenceAvatarsProps = {
|
||||
users: PresenceUser[]
|
||||
}
|
||||
|
||||
const MAX_VISIBLE = 5
|
||||
|
||||
// Generate a consistent color from a user ID hash
|
||||
function getUserColor(userId: string): string {
|
||||
let hash = 0
|
||||
for (let i = 0; i < userId.length; i++) {
|
||||
hash = ((hash << 5) - hash + userId.charCodeAt(i)) | 0
|
||||
}
|
||||
const colors = [
|
||||
'#EF4444', '#F97316', '#F59E0B', '#10B981',
|
||||
'#3B82F6', '#8B5CF6', '#EC4899', '#14B8A6',
|
||||
'#6366F1', '#F43F5E', '#84CC16', '#06B6D4',
|
||||
]
|
||||
return colors[Math.abs(hash) % colors.length]
|
||||
}
|
||||
|
||||
// Get initials from a display name (first letter of first two words)
|
||||
function getInitials(displayName: string): string {
|
||||
const parts = displayName.trim().split(/\s+/)
|
||||
if (parts.length >= 2) {
|
||||
return (parts[0][0] + parts[1][0]).toUpperCase()
|
||||
}
|
||||
return displayName.slice(0, 2).toUpperCase()
|
||||
}
|
||||
|
||||
export default function PresenceAvatars({ users }: PresenceAvatarsProps) {
|
||||
if (users.length === 0) return null
|
||||
|
||||
const visibleUsers = users.slice(0, MAX_VISIBLE)
|
||||
const overflow = users.length - MAX_VISIBLE
|
||||
|
||||
return (
|
||||
<div className="flex items-center -space-x-2">
|
||||
{visibleUsers.map((user) => {
|
||||
const color = getUserColor(user.userId)
|
||||
return (
|
||||
<div
|
||||
key={user.userId}
|
||||
title={user.displayName}
|
||||
className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white text-[10px] font-semibold text-white dark:border-zinc-800"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{getInitials(user.displayName)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{overflow > 0 && (
|
||||
<div
|
||||
className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-zinc-400 text-[10px] font-semibold text-white dark:border-zinc-800 dark:bg-zinc-500"
|
||||
title={`${overflow} more collaborator${overflow > 1 ? 's' : ''}`}
|
||||
>
|
||||
+{overflow}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
getCollaborators,
|
||||
inviteCollaborator,
|
||||
updateCollaboratorRole,
|
||||
removeCollaborator,
|
||||
type Collaborator,
|
||||
} from '@/app/editor/[projectId]/actions'
|
||||
|
||||
type ShareModalProps = {
|
||||
projectId: string
|
||||
isOwner: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function ShareModal({ projectId, isOwner, onClose }: ShareModalProps) {
|
||||
const [collaborators, setCollaborators] = useState<Collaborator[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [email, setEmail] = useState('')
|
||||
const [role, setRole] = useState<'editor' | 'viewer'>('editor')
|
||||
const [inviting, setInviting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null)
|
||||
|
||||
const fetchCollaborators = useCallback(async () => {
|
||||
const result = await getCollaborators(projectId)
|
||||
if (result.success && result.data) {
|
||||
setCollaborators(result.data)
|
||||
}
|
||||
setLoading(false)
|
||||
}, [projectId])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollaborators()
|
||||
}, [fetchCollaborators])
|
||||
|
||||
const handleInvite = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!email.trim()) return
|
||||
|
||||
setInviting(true)
|
||||
setError(null)
|
||||
setSuccessMessage(null)
|
||||
|
||||
const result = await inviteCollaborator(projectId, email.trim(), role)
|
||||
if (result.success) {
|
||||
setEmail('')
|
||||
setSuccessMessage('Collaborator invited successfully')
|
||||
fetchCollaborators()
|
||||
} else {
|
||||
setError(result.error || 'Failed to invite collaborator')
|
||||
}
|
||||
setInviting(false)
|
||||
}
|
||||
|
||||
const handleRoleChange = async (collaboratorId: string, newRole: 'editor' | 'viewer') => {
|
||||
setError(null)
|
||||
const result = await updateCollaboratorRole(projectId, collaboratorId, newRole)
|
||||
if (result.success) {
|
||||
setCollaborators((prev) =>
|
||||
prev.map((c) => (c.id === collaboratorId ? { ...c, role: newRole } : c))
|
||||
)
|
||||
} else {
|
||||
setError(result.error || 'Failed to update role')
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemove = async (collaboratorId: string) => {
|
||||
setError(null)
|
||||
const result = await removeCollaborator(projectId, collaboratorId)
|
||||
if (result.success) {
|
||||
setCollaborators((prev) => prev.filter((c) => c.id !== collaboratorId))
|
||||
} else {
|
||||
setError(result.error || 'Failed to remove collaborator')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-800">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
|
||||
Share Project
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Invite Form - only for owners */}
|
||||
{isOwner && (
|
||||
<form onSubmit={handleInvite} className="mb-6">
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
||||
Invite collaborator by email
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="user@example.com"
|
||||
disabled={inviting}
|
||||
className="flex-1 rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50 dark:placeholder-zinc-500"
|
||||
/>
|
||||
<select
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value as 'editor' | 'viewer')}
|
||||
disabled={inviting}
|
||||
className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50"
|
||||
>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="viewer">Viewer</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={inviting || !email.trim()}
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
{inviting ? 'Inviting...' : 'Invite'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{successMessage && (
|
||||
<div className="mb-4 rounded-md bg-green-50 p-3 text-sm text-green-700 dark:bg-green-900/20 dark:text-green-400">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Collaborators List */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
|
||||
Collaborators
|
||||
</h3>
|
||||
{loading ? (
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">Loading...</p>
|
||||
) : collaborators.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
No collaborators yet. Invite someone to get started.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{collaborators.map((collab) => (
|
||||
<div
|
||||
key={collab.id}
|
||||
className="flex items-center justify-between rounded-md border border-zinc-200 p-3 dark:border-zinc-700"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-zinc-900 truncate dark:text-zinc-50">
|
||||
{collab.display_name || collab.email || 'Unknown user'}
|
||||
</p>
|
||||
{collab.display_name && collab.email && (
|
||||
<p className="text-xs text-zinc-500 truncate dark:text-zinc-400">
|
||||
{collab.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ml-3">
|
||||
{isOwner ? (
|
||||
<>
|
||||
<select
|
||||
value={collab.role}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(collab.id, e.target.value as 'editor' | 'viewer')
|
||||
}
|
||||
className="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-700 focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="viewer">Viewer</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => handleRemove(collab.id)}
|
||||
className="rounded p-1 text-zinc-400 hover:text-red-600 dark:hover:text-red-400"
|
||||
title="Remove collaborator"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<span className="rounded bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400">
|
||||
{collab.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
'use client'
|
||||
|
||||
import type { ConnectionState, PresenceUser } from '@/lib/collaboration/realtime'
|
||||
import PresenceAvatars from './PresenceAvatars'
|
||||
|
||||
type ToolbarProps = {
|
||||
onAddDialogue: () => void
|
||||
onAddChoice: () => void
|
||||
|
|
@ -9,6 +12,23 @@ type ToolbarProps = {
|
|||
onExportRenpy: () => void
|
||||
onImport: () => void
|
||||
onProjectSettings: () => void
|
||||
onShare: () => void
|
||||
connectionState?: ConnectionState
|
||||
presenceUsers?: PresenceUser[]
|
||||
}
|
||||
|
||||
const connectionLabel: Record<ConnectionState, string> = {
|
||||
connecting: 'Connecting…',
|
||||
connected: 'Connected',
|
||||
disconnected: 'Disconnected',
|
||||
reconnecting: 'Reconnecting…',
|
||||
}
|
||||
|
||||
const connectionColor: Record<ConnectionState, string> = {
|
||||
connecting: 'bg-yellow-400',
|
||||
connected: 'bg-green-400',
|
||||
disconnected: 'bg-red-400',
|
||||
reconnecting: 'bg-yellow-400',
|
||||
}
|
||||
|
||||
export default function Toolbar({
|
||||
|
|
@ -20,6 +40,9 @@ export default function Toolbar({
|
|||
onExportRenpy,
|
||||
onImport,
|
||||
onProjectSettings,
|
||||
onShare,
|
||||
connectionState,
|
||||
presenceUsers,
|
||||
}: ToolbarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
|
|
@ -48,12 +71,31 @@ export default function Toolbar({
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{presenceUsers && presenceUsers.length > 0 && (
|
||||
<div className="mr-2">
|
||||
<PresenceAvatars users={presenceUsers} />
|
||||
</div>
|
||||
)}
|
||||
{connectionState && (
|
||||
<div className="flex items-center gap-1.5 mr-2" title={connectionLabel[connectionState]}>
|
||||
<span className={`inline-block h-2.5 w-2.5 rounded-full ${connectionColor[connectionState]}${connectionState === 'reconnecting' ? ' animate-pulse' : ''}`} />
|
||||
<span className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{connectionLabel[connectionState]}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={onProjectSettings}
|
||||
className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Project Settings
|
||||
</button>
|
||||
<button
|
||||
onClick={onShare}
|
||||
className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={isSaving}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
import * as Y from 'yjs'
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js'
|
||||
import type { FlowchartNode, FlowchartEdge } from '@/types/flowchart'
|
||||
|
||||
const PERSIST_DEBOUNCE_MS = 2000
|
||||
const BROADCAST_EVENT = 'yjs-update'
|
||||
|
||||
export type CRDTCallbacks = {
|
||||
onNodesChange: (nodes: FlowchartNode[]) => void
|
||||
onEdgesChange: (edges: FlowchartEdge[]) => void
|
||||
onPersist: (nodes: FlowchartNode[], edges: FlowchartEdge[]) => void
|
||||
}
|
||||
|
||||
export class CRDTManager {
|
||||
private doc: Y.Doc
|
||||
private nodesMap: Y.Map<string> // node ID -> JSON string of FlowchartNode
|
||||
private edgesMap: Y.Map<string> // edge ID -> JSON string of FlowchartEdge
|
||||
private channel: RealtimeChannel | null = null
|
||||
private callbacks: CRDTCallbacks
|
||||
private persistTimer: ReturnType<typeof setTimeout> | null = null
|
||||
private isApplyingRemote = false
|
||||
private isDestroyed = false
|
||||
|
||||
constructor(callbacks: CRDTCallbacks) {
|
||||
this.doc = new Y.Doc()
|
||||
this.nodesMap = this.doc.getMap('nodes')
|
||||
this.edgesMap = this.doc.getMap('edges')
|
||||
this.callbacks = callbacks
|
||||
|
||||
// Listen for remote Yjs document changes
|
||||
this.nodesMap.observe(() => {
|
||||
if (this.isApplyingRemote) return
|
||||
this.notifyNodesChange()
|
||||
this.schedulePersist()
|
||||
})
|
||||
|
||||
this.edgesMap.observe(() => {
|
||||
if (this.isApplyingRemote) return
|
||||
this.notifyEdgesChange()
|
||||
this.schedulePersist()
|
||||
})
|
||||
|
||||
// Broadcast local updates to other clients
|
||||
this.doc.on('update', (update: Uint8Array, origin: unknown) => {
|
||||
if (origin === 'remote') return // Don't re-broadcast remote updates
|
||||
this.broadcastUpdate(update)
|
||||
})
|
||||
}
|
||||
|
||||
/** Initialize the Yjs document from database state */
|
||||
initializeFromData(nodes: FlowchartNode[], edges: FlowchartEdge[]): void {
|
||||
this.doc.transact(() => {
|
||||
nodes.forEach((node) => {
|
||||
this.nodesMap.set(node.id, JSON.stringify(node))
|
||||
})
|
||||
edges.forEach((edge) => {
|
||||
this.edgesMap.set(edge.id, JSON.stringify(edge))
|
||||
})
|
||||
}, 'init')
|
||||
}
|
||||
|
||||
/** Connect to a Supabase Realtime channel for syncing updates */
|
||||
connectChannel(channel: RealtimeChannel): void {
|
||||
this.channel = channel
|
||||
|
||||
// Listen for broadcast updates from other clients
|
||||
channel.on('broadcast', { event: BROADCAST_EVENT }, (payload) => {
|
||||
if (this.isDestroyed) return
|
||||
const data = payload.payload as { update?: number[] } | undefined
|
||||
if (data?.update) {
|
||||
const update = new Uint8Array(data.update)
|
||||
this.isApplyingRemote = true
|
||||
Y.applyUpdate(this.doc, update, 'remote')
|
||||
this.isApplyingRemote = false
|
||||
// Notify React state of remote changes
|
||||
this.notifyNodesChange()
|
||||
this.notifyEdgesChange()
|
||||
this.schedulePersist()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** Apply local node changes to the Yjs document */
|
||||
updateNodes(nodes: FlowchartNode[]): void {
|
||||
if (this.isApplyingRemote) return
|
||||
|
||||
this.doc.transact(() => {
|
||||
const currentIds = new Set(nodes.map((n) => n.id))
|
||||
|
||||
// Remove nodes no longer present
|
||||
const existingIds = Array.from(this.nodesMap.keys())
|
||||
existingIds.forEach((id) => {
|
||||
if (!currentIds.has(id)) {
|
||||
this.nodesMap.delete(id)
|
||||
}
|
||||
})
|
||||
|
||||
// Add or update nodes
|
||||
nodes.forEach((node) => {
|
||||
const serialized = JSON.stringify(node)
|
||||
const existing = this.nodesMap.get(node.id)
|
||||
if (existing !== serialized) {
|
||||
this.nodesMap.set(node.id, serialized)
|
||||
}
|
||||
})
|
||||
}, 'local')
|
||||
}
|
||||
|
||||
/** Apply local edge changes to the Yjs document */
|
||||
updateEdges(edges: FlowchartEdge[]): void {
|
||||
if (this.isApplyingRemote) return
|
||||
|
||||
this.doc.transact(() => {
|
||||
const currentIds = new Set(edges.map((e) => e.id))
|
||||
|
||||
// Remove edges no longer present
|
||||
const existingIds = Array.from(this.edgesMap.keys())
|
||||
existingIds.forEach((id) => {
|
||||
if (!currentIds.has(id)) {
|
||||
this.edgesMap.delete(id)
|
||||
}
|
||||
})
|
||||
|
||||
// Add or update edges
|
||||
edges.forEach((edge) => {
|
||||
const serialized = JSON.stringify(edge)
|
||||
const existing = this.edgesMap.get(edge.id)
|
||||
if (existing !== serialized) {
|
||||
this.edgesMap.set(edge.id, serialized)
|
||||
}
|
||||
})
|
||||
}, 'local')
|
||||
}
|
||||
|
||||
/** Get current nodes from the Yjs document */
|
||||
getNodes(): FlowchartNode[] {
|
||||
const nodes: FlowchartNode[] = []
|
||||
this.nodesMap.forEach((value) => {
|
||||
try {
|
||||
nodes.push(JSON.parse(value) as FlowchartNode)
|
||||
} catch {
|
||||
// Skip malformed entries
|
||||
}
|
||||
})
|
||||
return nodes
|
||||
}
|
||||
|
||||
/** Get current edges from the Yjs document */
|
||||
getEdges(): FlowchartEdge[] {
|
||||
const edges: FlowchartEdge[] = []
|
||||
this.edgesMap.forEach((value) => {
|
||||
try {
|
||||
edges.push(JSON.parse(value) as FlowchartEdge)
|
||||
} catch {
|
||||
// Skip malformed entries
|
||||
}
|
||||
})
|
||||
return edges
|
||||
}
|
||||
|
||||
/** Clean up resources */
|
||||
destroy(): void {
|
||||
this.isDestroyed = true
|
||||
if (this.persistTimer) {
|
||||
clearTimeout(this.persistTimer)
|
||||
this.persistTimer = null
|
||||
}
|
||||
this.doc.destroy()
|
||||
this.channel = null
|
||||
}
|
||||
|
||||
private notifyNodesChange(): void {
|
||||
this.callbacks.onNodesChange(this.getNodes())
|
||||
}
|
||||
|
||||
private notifyEdgesChange(): void {
|
||||
this.callbacks.onEdgesChange(this.getEdges())
|
||||
}
|
||||
|
||||
private broadcastUpdate(update: Uint8Array): void {
|
||||
if (!this.channel || this.isDestroyed) return
|
||||
this.channel.send({
|
||||
type: 'broadcast',
|
||||
event: BROADCAST_EVENT,
|
||||
payload: { update: Array.from(update) },
|
||||
})
|
||||
}
|
||||
|
||||
private schedulePersist(): void {
|
||||
if (this.persistTimer) {
|
||||
clearTimeout(this.persistTimer)
|
||||
}
|
||||
this.persistTimer = setTimeout(() => {
|
||||
if (this.isDestroyed) return
|
||||
this.callbacks.onPersist(this.getNodes(), this.getEdges())
|
||||
}, PERSIST_DEBOUNCE_MS)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
import { createClient } from '@/lib/supabase/client'
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js'
|
||||
|
||||
export type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'reconnecting'
|
||||
|
||||
export type PresenceUser = {
|
||||
userId: string
|
||||
displayName: string
|
||||
}
|
||||
|
||||
type RealtimeCallbacks = {
|
||||
onConnectionStateChange: (state: ConnectionState) => void
|
||||
onPresenceSync?: (users: PresenceUser[]) => void
|
||||
onChannelSubscribed?: (channel: RealtimeChannel) => void
|
||||
}
|
||||
|
||||
const HEARTBEAT_INTERVAL_MS = 30_000
|
||||
const RECONNECT_BASE_DELAY_MS = 1000
|
||||
const RECONNECT_MAX_DELAY_MS = 30_000
|
||||
|
||||
export class RealtimeConnection {
|
||||
private channel: RealtimeChannel | null = null
|
||||
private heartbeatTimer: ReturnType<typeof setInterval> | null = null
|
||||
private reconnectTimer: ReturnType<typeof setTimeout> | null = null
|
||||
private reconnectAttempts = 0
|
||||
private projectId: string
|
||||
private userId: string
|
||||
private displayName: string
|
||||
private callbacks: RealtimeCallbacks
|
||||
private isDestroyed = false
|
||||
private supabase = createClient()
|
||||
|
||||
constructor(projectId: string, userId: string, displayName: string, callbacks: RealtimeCallbacks) {
|
||||
this.projectId = projectId
|
||||
this.userId = userId
|
||||
this.displayName = displayName
|
||||
this.callbacks = callbacks
|
||||
}
|
||||
|
||||
async connect(): Promise<void> {
|
||||
if (this.isDestroyed) return
|
||||
this.callbacks.onConnectionStateChange('connecting')
|
||||
|
||||
this.channel = this.supabase.channel(`project:${this.projectId}`, {
|
||||
config: { presence: { key: this.userId } },
|
||||
})
|
||||
|
||||
this.channel
|
||||
.on('presence', { event: 'sync' }, () => {
|
||||
if (this.channel) {
|
||||
const state = this.channel.presenceState()
|
||||
const users: PresenceUser[] = []
|
||||
for (const [key, presences] of Object.entries(state)) {
|
||||
if (key === this.userId) continue // Exclude own presence
|
||||
const presence = presences[0] as { userId?: string; displayName?: string } | undefined
|
||||
if (presence?.userId) {
|
||||
users.push({
|
||||
userId: presence.userId,
|
||||
displayName: presence.displayName || 'Anonymous',
|
||||
})
|
||||
}
|
||||
}
|
||||
this.callbacks.onPresenceSync?.(users)
|
||||
}
|
||||
})
|
||||
.subscribe(async (status) => {
|
||||
if (this.isDestroyed) return
|
||||
|
||||
if (status === 'SUBSCRIBED') {
|
||||
this.reconnectAttempts = 0
|
||||
this.callbacks.onConnectionStateChange('connected')
|
||||
this.startHeartbeat()
|
||||
await this.createSession()
|
||||
// Track presence with user info
|
||||
await this.channel?.track({
|
||||
userId: this.userId,
|
||||
displayName: this.displayName,
|
||||
})
|
||||
// Notify that the channel is ready for CRDT sync
|
||||
if (this.channel) {
|
||||
this.callbacks.onChannelSubscribed?.(this.channel)
|
||||
}
|
||||
} else if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
|
||||
this.callbacks.onConnectionStateChange('reconnecting')
|
||||
this.scheduleReconnect()
|
||||
} else if (status === 'CLOSED') {
|
||||
this.callbacks.onConnectionStateChange('disconnected')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async disconnect(): Promise<void> {
|
||||
this.isDestroyed = true
|
||||
this.stopHeartbeat()
|
||||
this.clearReconnectTimer()
|
||||
|
||||
if (this.channel) {
|
||||
await this.deleteSession()
|
||||
this.supabase.removeChannel(this.channel)
|
||||
this.channel = null
|
||||
}
|
||||
|
||||
this.callbacks.onConnectionStateChange('disconnected')
|
||||
}
|
||||
|
||||
getChannel(): RealtimeChannel | null {
|
||||
return this.channel
|
||||
}
|
||||
|
||||
private async createSession(): Promise<void> {
|
||||
try {
|
||||
await this.supabase.from('collaboration_sessions').upsert(
|
||||
{
|
||||
project_id: this.projectId,
|
||||
user_id: this.userId,
|
||||
cursor_position: null,
|
||||
selected_node_id: null,
|
||||
connected_at: new Date().toISOString(),
|
||||
last_heartbeat: new Date().toISOString(),
|
||||
},
|
||||
{ onConflict: 'project_id,user_id' }
|
||||
)
|
||||
} catch {
|
||||
// Fire-and-forget: session creation failure shouldn't block editing
|
||||
}
|
||||
}
|
||||
|
||||
private async deleteSession(): Promise<void> {
|
||||
try {
|
||||
await this.supabase
|
||||
.from('collaboration_sessions')
|
||||
.delete()
|
||||
.eq('project_id', this.projectId)
|
||||
.eq('user_id', this.userId)
|
||||
} catch {
|
||||
// Fire-and-forget: cleanup failure is non-critical
|
||||
}
|
||||
}
|
||||
|
||||
private startHeartbeat(): void {
|
||||
this.stopHeartbeat()
|
||||
this.heartbeatTimer = setInterval(async () => {
|
||||
if (this.isDestroyed) {
|
||||
this.stopHeartbeat()
|
||||
return
|
||||
}
|
||||
try {
|
||||
await this.supabase
|
||||
.from('collaboration_sessions')
|
||||
.update({ last_heartbeat: new Date().toISOString() })
|
||||
.eq('project_id', this.projectId)
|
||||
.eq('user_id', this.userId)
|
||||
} catch {
|
||||
// Heartbeat failure is non-critical
|
||||
}
|
||||
}, HEARTBEAT_INTERVAL_MS)
|
||||
}
|
||||
|
||||
private stopHeartbeat(): void {
|
||||
if (this.heartbeatTimer) {
|
||||
clearInterval(this.heartbeatTimer)
|
||||
this.heartbeatTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
private scheduleReconnect(): void {
|
||||
if (this.isDestroyed) return
|
||||
this.clearReconnectTimer()
|
||||
|
||||
const delay = Math.min(
|
||||
RECONNECT_BASE_DELAY_MS * Math.pow(2, this.reconnectAttempts),
|
||||
RECONNECT_MAX_DELAY_MS
|
||||
)
|
||||
this.reconnectAttempts++
|
||||
|
||||
this.reconnectTimer = setTimeout(async () => {
|
||||
if (this.isDestroyed) return
|
||||
this.callbacks.onConnectionStateChange('reconnecting')
|
||||
|
||||
if (this.channel) {
|
||||
this.supabase.removeChannel(this.channel)
|
||||
this.channel = null
|
||||
}
|
||||
|
||||
await this.connect()
|
||||
}, delay)
|
||||
}
|
||||
|
||||
private clearReconnectTimer(): void {
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer)
|
||||
this.reconnectTimer = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,13 +4,6 @@ export type Position = {
|
|||
y: number;
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Condition type for conditional edges and choice options
|
||||
export type Condition = {
|
||||
variableName: string;
|
||||
operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
|
||||
value: number;
|
||||
=======
|
||||
// Character type: represents a defined character in the project
|
||||
export type Character = {
|
||||
id: string;
|
||||
|
|
@ -34,7 +27,6 @@ export type Condition = {
|
|||
variableId?: string;
|
||||
operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
|
||||
value: number | string | boolean;
|
||||
>>>>>>> ralph/collaboration-and-character-variables
|
||||
};
|
||||
|
||||
// DialogueNode type: represents character speech/dialogue
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
-- Migration: Add collaboration sessions and audit trail tables
|
||||
-- Supports real-time multi-user editing with presence tracking and change history
|
||||
|
||||
-- =============================================================================
|
||||
-- PROJECT COLLABORATORS TABLE
|
||||
-- =============================================================================
|
||||
-- Tracks which users have access to a project and their role
|
||||
CREATE TABLE IF NOT EXISTS project_collaborators (
|
||||
id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
||||
user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
|
||||
role text NOT NULL CHECK (role IN ('owner', 'editor', 'viewer')),
|
||||
invited_at timestamptz DEFAULT now(),
|
||||
accepted_at timestamptz,
|
||||
UNIQUE (project_id, user_id)
|
||||
);
|
||||
|
||||
-- Enable Row Level Security
|
||||
ALTER TABLE project_collaborators ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
-- RLS: Users can view collaborators for projects they belong to
|
||||
CREATE POLICY "Users can view collaborators for their projects"
|
||||
ON project_collaborators
|
||||
FOR SELECT
|
||||
USING (
|
||||
auth.uid() = user_id
|
||||
OR project_id IN (
|
||||
SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
|
||||
)
|
||||
OR project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- RLS: Project owners can insert collaborators
|
||||
CREATE POLICY "Owners can add collaborators"
|
||||
ON project_collaborators
|
||||
FOR INSERT
|
||||
WITH CHECK (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- RLS: Project owners can update collaborator roles
|
||||
CREATE POLICY "Owners can update collaborators"
|
||||
ON project_collaborators
|
||||
FOR UPDATE
|
||||
USING (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
)
|
||||
WITH CHECK (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- RLS: Project owners can remove collaborators
|
||||
CREATE POLICY "Owners can remove collaborators"
|
||||
ON project_collaborators
|
||||
FOR DELETE
|
||||
USING (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- =============================================================================
|
||||
-- COLLABORATION SESSIONS TABLE
|
||||
-- =============================================================================
|
||||
-- Tracks active editing sessions for real-time presence
|
||||
CREATE TABLE IF NOT EXISTS collaboration_sessions (
|
||||
id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
||||
user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
|
||||
cursor_position jsonb,
|
||||
selected_node_id text,
|
||||
connected_at timestamptz DEFAULT now(),
|
||||
last_heartbeat timestamptz DEFAULT now()
|
||||
);
|
||||
|
||||
-- Enable Row Level Security
|
||||
ALTER TABLE collaboration_sessions ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
-- RLS: Users can view sessions for projects they collaborate on
|
||||
CREATE POLICY "Collaborators can view sessions"
|
||||
ON collaboration_sessions
|
||||
FOR SELECT
|
||||
USING (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
OR project_id IN (
|
||||
SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- RLS: Users can insert their own sessions
|
||||
CREATE POLICY "Users can create own sessions"
|
||||
ON collaboration_sessions
|
||||
FOR INSERT
|
||||
WITH CHECK (auth.uid() = user_id);
|
||||
|
||||
-- RLS: Users can update their own sessions (heartbeat, cursor position)
|
||||
CREATE POLICY "Users can update own sessions"
|
||||
ON collaboration_sessions
|
||||
FOR UPDATE
|
||||
USING (auth.uid() = user_id)
|
||||
WITH CHECK (auth.uid() = user_id);
|
||||
|
||||
-- RLS: Users can delete their own sessions (disconnect)
|
||||
CREATE POLICY "Users can delete own sessions"
|
||||
ON collaboration_sessions
|
||||
FOR DELETE
|
||||
USING (auth.uid() = user_id);
|
||||
|
||||
-- =============================================================================
|
||||
-- AUDIT TRAIL TABLE
|
||||
-- =============================================================================
|
||||
-- Records all node and edge changes for history and revert functionality
|
||||
CREATE TABLE IF NOT EXISTS audit_trail (
|
||||
id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
||||
user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
|
||||
action_type text NOT NULL CHECK (action_type IN ('node_add', 'node_update', 'node_delete', 'edge_add', 'edge_update', 'edge_delete')),
|
||||
entity_id text NOT NULL,
|
||||
previous_state jsonb,
|
||||
new_state jsonb,
|
||||
created_at timestamptz DEFAULT now()
|
||||
);
|
||||
|
||||
-- Enable Row Level Security
|
||||
ALTER TABLE audit_trail ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
-- RLS: Users can view audit trail for projects they collaborate on
|
||||
CREATE POLICY "Collaborators can view audit trail"
|
||||
ON audit_trail
|
||||
FOR SELECT
|
||||
USING (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
OR project_id IN (
|
||||
SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- RLS: Users can insert audit entries for projects they collaborate on
|
||||
CREATE POLICY "Collaborators can write audit entries"
|
||||
ON audit_trail
|
||||
FOR INSERT
|
||||
WITH CHECK (
|
||||
auth.uid() = user_id
|
||||
AND (
|
||||
project_id IN (
|
||||
SELECT id FROM projects WHERE user_id = auth.uid()
|
||||
)
|
||||
OR project_id IN (
|
||||
SELECT project_id FROM project_collaborators
|
||||
WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
-- =============================================================================
|
||||
-- INDEXES
|
||||
-- =============================================================================
|
||||
-- Index for efficient history queries (paginated by time)
|
||||
CREATE INDEX IF NOT EXISTS idx_audit_trail_project_created
|
||||
ON audit_trail(project_id, created_at DESC);
|
||||
|
||||
-- Index for session lookups by project
|
||||
CREATE INDEX IF NOT EXISTS idx_collaboration_sessions_project
|
||||
ON collaboration_sessions(project_id);
|
||||
|
||||
-- Index for collaborator lookups by project
|
||||
CREATE INDEX IF NOT EXISTS idx_project_collaborators_project
|
||||
ON project_collaborators(project_id);
|
||||
|
||||
-- Index for collaborator lookups by user (for "shared with me" queries)
|
||||
CREATE INDEX IF NOT EXISTS idx_project_collaborators_user
|
||||
ON project_collaborators(user_id);
|
||||
|
||||
-- =============================================================================
|
||||
-- UPDATE PROJECTS RLS: Allow collaborators to read/write
|
||||
-- =============================================================================
|
||||
-- Collaborators with 'editor' or 'owner' role can view the project
|
||||
CREATE POLICY "Collaborators can view shared projects"
|
||||
ON projects
|
||||
FOR SELECT
|
||||
USING (
|
||||
id IN (
|
||||
SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
|
||||
-- Collaborators with 'editor' or 'owner' role can update the project
|
||||
CREATE POLICY "Collaborators can update shared projects"
|
||||
ON projects
|
||||
FOR UPDATE
|
||||
USING (
|
||||
id IN (
|
||||
SELECT project_id FROM project_collaborators
|
||||
WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
|
||||
)
|
||||
)
|
||||
WITH CHECK (
|
||||
id IN (
|
||||
SELECT project_id FROM project_collaborators
|
||||
WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
|
||||
)
|
||||
);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
-- Add unique constraint on collaboration_sessions for (project_id, user_id)
|
||||
-- This ensures a user can only have one active session per project,
|
||||
-- and allows upsert operations for session management.
|
||||
ALTER TABLE collaboration_sessions
|
||||
ADD CONSTRAINT collaboration_sessions_project_user_unique
|
||||
UNIQUE (project_id, user_id);
|
||||
Loading…
Reference in New Issue