3.0 KiB
3.0 KiB
| id | title | status | assignee | created_date | updated_date | labels | dependencies | priority | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| task-033 | Version History & Reversion System with Visual Diffs | Done | 2025-12-04 21:44 | 2025-12-04 23:23 |
|
high |
Description
Implement a comprehensive version history and reversion system that allows users to:
- View and revert to historical board states
- See visual diffs highlighting new/deleted shapes since their last visit
- Walk through CRDT history step-by-step
- Restore accidentally deleted shapes
Key features:
- Time rewind button next to the star dashboard button
- Popup menu showing historical versions
- Yellow glow on newly added shapes (first time user sees them)
- Dim grey on deleted shapes with "undo discard" option
- Permission-based (admin, editor, viewer)
- Integration with R2 backups and Automerge CRDT history
- Compare user's local state with server state to highlight diffs
Acceptance Criteria
- #1 Version history button renders next to star button with time-rewind icon
- #2 Clicking button opens popup showing list of historical versions
- #3 User can select a version to preview or revert to
- #4 Newly added shapes since last user visit have yellow glow effect
- #5 Deleted shapes show dimmed with 'undo discard' option
- #6 Version navigation respects user permissions (admin/editor/viewer)
- #7 Works with R2 backup snapshots for coarse-grained history
- #8 Leverages Automerge CRDT for fine-grained change tracking
- #9 User's last-seen state stored in localStorage for diff comparison
- #10 Visual effects are subtle and non-intrusive
Implementation Notes
Implementation complete in feature/version-reversion worktree:
Files Created:
- src/lib/versionHistory.ts - Core version history utilities
- src/lib/permissions.ts - Role-based permission system
- src/components/VersionHistoryButton.tsx - Time-rewind icon button
- src/components/VersionHistoryPanel.tsx - Panel with 3 tabs
- src/components/DeletedShapesOverlay.tsx - Floating deleted shapes indicator
- src/hooks/useVersionHistory.ts - React hook for state management
- src/hooks/usePermissions.ts - Permission context hook
- src/css/version-history.css - Visual effects CSS
Files Modified:
- src/ui/CustomToolbar.tsx - Added VersionHistoryButton
- src/ui/components.tsx - Added DeletedShapesOverlay
- src/css/style.css - Imported version-history.css
- worker/worker.ts - Added /api/versions endpoints
Features Implemented:
- Time-rewind button next to star dashboard
- Version History Panel with Changes/Versions/Deleted tabs
- localStorage tracking of user's last-seen state
- Yellow glow animation for new shapes
- Dim grey effect for deleted shapes
- Floating indicator with restore options
- R2 integration for version snapshots
- Permission system (admin/editor/viewer roles)
Commit: 03894d2