jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/backlog/tasks/task-033 - Version-History-...

3.1 KiB
Raw Blame History

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-05 00:46
feature
version-control
automerge
r2
ui
high

Description

Implement a comprehensive version history and reversion system that allows users to:

  1. View and revert to historical board states
  2. See visual diffs highlighting new/deleted shapes since their last visit
  3. Walk through CRDT history step-by-step
  4. 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:

  1. Time-rewind button next to star dashboard
  2. Version History Panel with Changes/Versions/Deleted tabs
  3. localStorage tracking of user's last-seen state
  4. Yellow glow animation for new shapes
  5. Dim grey effect for deleted shapes
  6. Floating indicator with restore options
  7. R2 integration for version snapshots
  8. Permission system (admin/editor/viewer roles)

Commit: 03894d2

Renamed GoogleDataBrowser to GoogleExportBrowser as requested by user

Pushed to feature/google-export branch (commit 33f5dc7)