…itors
Add comprehensive real-time collaboration infrastructure with auto-save,
presence indicators, conflict resolution, and document history tracking.
## Collaboration Infrastructure
### Core Collaboration System
- Add `useCollaboration` hook for real-time broadcast/presence channels
- Add `useAutoSave` hook with optimistic UI and conflict detection
- Add `usePresence` hook for tracking active editors and user presence
- Implement collaboration.ts with Supabase Realtime integration
- Add autoSave.ts with debounced saves and version management
- Add offlineQueue.ts for handling offline edit scenarios
### UI Components
- Add CollaborationToolbar with save status and active users
- Add SaveIndicator with typing/saving/saved states
- Add ActiveUsers presence component with avatars
- Add EditingIndicator for field-level editing status
- Add PresenceIndicator for user activity visualization
- Add DocumentHistory modal with version comparison
- Add ConflictResolution modal for merge conflict handling
- Add VersionDiff component for side-by-side comparisons
- Add Tooltip UI primitive (Radix UI based)
### State Management
- Add collaborativeDocStore (Zustand) for document state
- Add collaboration types for conflicts, history, presence
## Editor Integration
### Real-time Collaboration Enabled
- PatchSheetEditor: Full collaboration with broadcast on all field changes
- StagePlotEditor: Broadcast for elements, stage size, background images
- TheaterMicPlotEditor: Broadcast for actors, name changes
- CorporateMicPlotEditor: Broadcast for presenters, name changes
- RunOfShowEditor: Collaboration toolbar integrated in header
- ProductionScheduleEditor: Auto-save and collaboration support
- All editors: Database real-time subscriptions for cross-client sync
### Shared Edit Link Fixes
- Fix TheaterMicPlotEditor shareCode parameter for anonymous saves
- Fix CorporateMicPlotEditor shareCode parameter for anonymous saves
- Enable anonymous users to save via update_shared_resource RPC
- Prevent 406 errors for shared edit link users
### Infinite Loop Fixes
- Fix PatchSheetOutputs circular dependency (remove ref tracking)
- Match PatchSheetInputs pattern for stable remote updates
- Ensure broadcasts don't trigger save loops with proper change detection
## Database Migrations
### Version Control System
- Add version columns to all document tables
- Add last_edited timestamps for conflict detection
- Add metadata JSONB columns for collaboration data
### History & Activity Tracking
- Create document_history tables for all document types
- Add document_activity table for audit logging
- Add automatic history triggers on document updates
- Enable point-in-time recovery and version comparison
### Collaboration Support Tables
- Add pending_saves table for offline queue
- Add document_locks table for optimistic locking
- Add RLS policies for collaboration features
- Enable realtime replication for all document tables
### Shared Resource Updates
- Add update_shared_resource RPC function with SECURITY DEFINER
- Fix JSONB extraction in RPC for proper field updates
- Enable anonymous users to save via share codes
- Add proper RETURNING clause for version tracking
## Bug Fixes
### Header Component
- Move collaboration toolbar integration to header
- Add collaborationToolbar prop for editor integration
- Match RunOfShowEditor pattern across all editors
### Share Modal
- Update share link generation for collaboration context
- Maintain compatibility with existing share workflows
### Supabase Client
- Configure realtime options for collaboration channels
- Add proper channel cleanup on unmount
## Dependencies
- Add @radix-ui/react-tooltip for collaboration UI
- Update package.json and pnpm-lock.yaml
## Breaking Changes
None - all changes are additive and backward compatible.
## Performance Improvements
- Debounced auto-save (1500ms default) reduces database writes
- Optimistic UI updates for instant feedback
- Broadcast-first architecture for sub-second propagation
- Reference-based change detection prevents unnecessary saves
## Security
- RLS policies prevent unauthorized access to collaboration data
- Share code validation in update_shared_resource RPC
- Version mismatch detection prevents data loss
- Proper authentication checks for all collaboration features
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PR Type
Enhancement
Description
• Major Release 2.0.0: Comprehensive real-time collaboration system for all document editors
• Real-time Editing: Implemented collaborative editing with presence tracking, cursor synchronization, and live updates across all document types
• Auto-save & Offline Support: Added debounced auto-save with offline queue management using IndexedDB for seamless editing experience
• Version Control: Integrated document history, version tracking, and conflict resolution with rollback capabilities
• Shared Edit Mode: Enabled anonymous user collaboration through shared links with RLS bypass functionality
• Collaboration Infrastructure: Built comprehensive collaboration system with Supabase Broadcast/Presence channels, stores, and utilities
• UI Enhancements: Added collaboration toolbar, presence indicators, save status, and document history components
• Database Schema: Created supporting tables for document history, locks, pending saves, and activity tracking
• Editor Integration: Updated all major editors (Run of Show, Stage Plot, Patch Sheet, Pixel Maps, etc.) with collaboration features
Diagram Walkthrough
File Walkthrough
22 files
useAutoSave.ts
Add comprehensive auto-save hook for collaborative editingapps/web/src/hooks/useAutoSave.ts
• Implements comprehensive auto-save hook with debouncing, offline
support, and version conflict detection
• Provides optimistic UI
updates with rollback capabilities and remote update handling
•
Includes extensive logging and error handling for debugging
collaborative editing scenarios
• Supports shared edit mode with
shareCodeparameter to bypass RLS authenticationcollaborativeDocStore.ts
Add collaborative document store with real-time featuresapps/web/src/stores/collaborativeDocStore.ts
• Creates Zustand store for managing collaborative document state and
real-time synchronization
• Handles presence tracking, broadcast
updates, and offline queue management
• Provides actions for field
updates, cursor tracking, and connection management
• Includes
auto-save configuration and reconnection logic for network disruptions
autoSave.ts
Add auto-save utilities with offline support and conflict detectionapps/web/src/lib/autoSave.ts
• Implements core auto-save utilities with debouncing, retry logic,
and offline queue support
• Provides batch saving, version conflict
detection, and document history snapshots
• Maps document types to
correct timestamp fields and resource types for shared editing
•
Includes comprehensive error handling and logging for debugging save
operations
collaboration.ts
Add real-time collaboration infrastructure with presence trackingapps/web/src/lib/collaboration.ts
• Implements real-time collaboration using Supabase Broadcast and
Presence channels
• Provides user color assignment, presence tracking,
and broadcast message handling
• Includes channel setup, cleanup, and
reconnection logic for network disruptions
• Supports collaborative
cursor tracking and field editing notifications
offlineQueue.ts
Add offline queue management for document synchronizationapps/web/src/lib/offlineQueue.ts
• Implements IndexedDB-based offline queue for document updates using
localforage
• Provides queue management with size limits, stale item
pruning, and statistics
• Supports enqueueing, dequeueing, and batch
operations for offline synchronization
• Includes error handling and
availability checks for IndexedDB storage
collaboration.ts
Add TypeScript types for collaborative editing systemapps/web/src/types/collaboration.ts
• Defines comprehensive TypeScript interfaces for collaborative
editing features
• Includes types for save status, presence users,
broadcast payloads, and document updates
• Provides conflict
resolution, version history, and auto-save configuration types
•
Supports offline queue management and connection status tracking
usePresence.ts
Add presence tracking hook for collaborative cursorsapps/web/src/hooks/usePresence.ts
• Implements presence tracking hook for collaborative cursor and field
editing
• Provides throttled updates for cursor position and editing
field changes
• Includes helper hook for tracking cursor position in
text inputs
• Supports cleanup and blur event handling for presence
state management
useCollaboration.ts
Add main collaboration hook for real-time document editingapps/web/src/hooks/useCollaboration.ts
• Creates main collaboration hook that orchestrates real-time features
• Manages broadcast and presence channels with connection status
tracking
• Provides broadcast functionality and cleanup methods for
collaboration
• Includes memoization for stable references and
prevents unnecessary re-renders
shareUtils.ts
Update shared resource utilities for collaborative editingapps/web/src/lib/shareUtils.ts
• Updates shared resource handling to support edit-mode Run of Show
links
• Modifies
updateSharedResourceto use RPC function forbypassing RLS
• Adds support for additional resource types including
technical riders
• Improves error handling and logging for shared
resource operations
supabase.ts
Update savePixelMap to return created dataapps/web/src/lib/supabase.ts
• Updates
savePixelMapfunction to return the created data afterinsertion
• Adds
.select().single()to the insert operation forretrieving the saved record
• Maintains existing error handling while
providing access to the saved data
CorporateMicPlotEditor.tsx
Integrate collaborative editing features in Corporate Mic Plot Editorapps/web/src/pages/CorporateMicPlotEditor.tsx
• Integrates comprehensive collaborative editing features including
auto-save and real-time sync
• Adds collaboration toolbar, presence
tracking, and version history functionality
• Implements real-time
database subscriptions for cross-user synchronization
• Supports both
authenticated and anonymous users in shared edit mode
SharedProductionSchedule.tsx
Add Real-time Collaboration to Shared Production Schedulesapps/web/src/pages/SharedProductionSchedule.tsx
• Added comprehensive collaboration features including real-time
editing, auto-save, and conflict resolution
• Implemented
authentication requirements for edit mode shared links
• Added version
history and document restoration capabilities
• Enhanced UI with
collaboration toolbar and improved error handling
StagePlotEditor.tsx
Enable Real-time Collaboration in Stage Plot Editorapps/web/src/pages/StagePlotEditor.tsx
• Integrated collaboration hooks for real-time editing and auto-save
functionality
• Added support for anonymous users in shared edit mode
• Implemented real-time database subscriptions for element
synchronization
• Enhanced UI with collaboration toolbar and conflict
resolution modals
RiderEditor.tsx
Implement Collaboration Features in Technical Rider Editorapps/web/src/pages/RiderEditor.tsx
• Added collaboration features with auto-save and real-time
synchronization
• Implemented shared edit functionality with anonymous
user support
• Added version history and document restoration
capabilities
• Enhanced error handling and save status management
CommsPlannerEditor.tsx
Add Real-time Collaboration to Communications Plannerapps/web/src/pages/CommsPlannerEditor.tsx
• Integrated collaboration hooks for real-time editing and auto-save
•
Added shared edit mode support with anonymous user capabilities
•
Implemented version history and conflict resolution features
•
Enhanced document synchronization and state management
Header.tsx
Integrate Collaboration Toolbar into Header Componentapps/web/src/components/Header.tsx
• Added
collaborationToolbarprop to integrate collaboration features• Enhanced header component to display collaboration status and
controls
• Improved responsive design for collaboration toolbar
placement
RunOfShowEditor.tsx
Add real-time collaboration and duplicate functionality to Run of ShowEditorapps/web/src/pages/RunOfShowEditor.tsx
• Added real-time collaboration features with auto-save, presence
tracking, and conflict resolution
• Implemented duplicate item
functionality with smart item numbering
• Integrated collaboration
toolbar and document history components
• Added support for
unauthenticated shared edit users with anonymous IDs
PatchSheetEditor.tsx
Enable real-time collaboration features in Patch Sheet Editorapps/web/src/pages/PatchSheetEditor.tsx
• Integrated real-time collaboration system with auto-save and
presence tracking
• Added collaboration toolbar and document history
modals
• Implemented anonymous user support for shared edit sessions
•
Updated save logic to use auto-save for existing documents
LedPixelMapEditor.tsx
Implement real-time collaboration in LED Pixel Map Editorapps/web/src/pages/LedPixelMapEditor.tsx
• Added comprehensive collaboration support with auto-save and
real-time updates
• Implemented shared edit functionality with
anonymous user support
• Integrated collaboration toolbar and conflict
resolution components
• Enhanced save logic to handle both owned and
shared documents
ProductionScheduleEditor.tsx
Enable comprehensive collaboration in Production Schedule Editorapps/web/src/pages/ProductionScheduleEditor.tsx
• Added full collaboration features including auto-save, presence
tracking, and version history
• Implemented document history with
version restore functionality
• Added collaboration toolbar and
conflict resolution modals
• Enhanced with anonymous user support for
shared editing
StandardPixelMapEditor.tsx
Add real-time collaboration to Standard Pixel Map Editorapps/web/src/pages/StandardPixelMapEditor.tsx
• Integrated real-time collaboration system with auto-save
capabilities
• Added support for shared edit functionality with
anonymous users
• Implemented collaboration toolbar and document
history components
• Enhanced save logic to handle
collaboration-enabled documents
DocumentHistory.tsx
Create DocumentHistory component for version managementapps/web/src/components/History/DocumentHistory.tsx
• Created new component for displaying document version history
timeline
• Implemented expandable version entries with changed fields
display
• Added version restore functionality and infinite scroll
support
• Includes loading states and error handling
1 files
package.json
Update version to 2.0.0 and add localforage dependencypackage.json
• Updates version from 1.5.6.6 to 2.0.0 indicating major release
•
Adds
localforagedependency for IndexedDB-based offline storage2 files
ChartDetailModal.tsx
Minor code quality improvement in ChartDetailModalapps/web/src/components/analyzer/ChartDetailModal.tsx
• Changes variable declaration from
lettoconstfordatavariable•
Minor code quality improvement with no functional changes
PrintStagePlotExport.tsx
Refactor variable declarations in PrintStagePlotExport componentapps/web/src/components/PrintStagePlotExport.tsx
• Changed variable declarations from
lettoconstfor immutable styleobjects
• Applied consistent code style improvements across multiple
style object definitions
1 files
App.tsx
Update React Router configuration with future flagsapps/web/src/App.tsx
• Added React Router future flags for v7 compatibility
• Enabled
v7_startTransitionandv7_relativeSplatPathflags33 files