Description
Add undo/redo functionality for user actions to improve UX and reduce anxiety about making mistakes.
Actions to Support
- Form edits (before submission)
- Filter changes
- Settings changes
- Goal edits
- Draft transactions
Tasks
- Implement undo/redo state management
- Add undo/redo UI indicators
- Implement keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z)
- Add undo toast notifications
- Limit undo history (e.g., last 20 actions)
- Persist undo history in session storage
- Handle edge cases (page refresh, etc.)
- Document undo-able actions
Technical Implementation
const useUndoRedo = <T,>(initialState: T) => {
const [history, setHistory] = useState<T[]>([initialState]);
const [currentIndex, setCurrentIndex] = useState(0);
const undo = () => { /* ... */ };
const redo = () => { /* ... */ };
const addToHistory = (newState: T) => { /* ... */ };
return { state: history[currentIndex], undo, redo, canUndo, canRedo };
};Acceptance Criteria
Description
Add undo/redo functionality for user actions to improve UX and reduce anxiety about making mistakes.
Actions to Support
Tasks
Technical Implementation
Acceptance Criteria