88 lines
3.1 KiB
Markdown
88 lines
3.1 KiB
Markdown
---
|
|
id: task-033
|
|
title: Version History & Reversion System with Visual Diffs
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2025-12-04 21:44'
|
|
updated_date: '2025-12-05 00:46'
|
|
labels:
|
|
- feature
|
|
- version-control
|
|
- automerge
|
|
- r2
|
|
- ui
|
|
dependencies: []
|
|
priority: high
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
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
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Version history button renders next to star button with time-rewind icon
|
|
- [x] #2 Clicking button opens popup showing list of historical versions
|
|
- [x] #3 User can select a version to preview or revert to
|
|
- [x] #4 Newly added shapes since last user visit have yellow glow effect
|
|
- [x] #5 Deleted shapes show dimmed with 'undo discard' option
|
|
- [x] #6 Version navigation respects user permissions (admin/editor/viewer)
|
|
- [x] #7 Works with R2 backup snapshots for coarse-grained history
|
|
- [ ] #8 Leverages Automerge CRDT for fine-grained change tracking
|
|
- [x] #9 User's last-seen state stored in localStorage for diff comparison
|
|
- [x] #10 Visual effects are subtle and non-intrusive
|
|
<!-- AC:END -->
|
|
|
|
## Implementation Notes
|
|
|
|
<!-- SECTION:NOTES:BEGIN -->
|
|
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)
|
|
<!-- SECTION:NOTES:END -->
|