Files
audio-ui/lib/hooks/useHistory.ts
Sebastian Krüger 159da29082 feat: implement Phase 5 - undo/redo system with command pattern
Added comprehensive undo/redo functionality:
- Command pattern interface and base classes
- HistoryManager with 50-operation stack
- EditCommand for all edit operations (cut, delete, paste, trim)
- Full keyboard shortcuts (Ctrl+Z undo, Ctrl+Y/Ctrl+Shift+Z redo)
- HistoryControls UI component with visual feedback
- Integrated history system with all edit operations
- Toast notifications for undo/redo actions
- History state tracking and display

New files:
- lib/history/command.ts - Command interface and BaseCommand
- lib/history/history-manager.ts - HistoryManager class
- lib/history/commands/edit-command.ts - EditCommand and factory functions
- lib/hooks/useHistory.ts - React hook for history management
- components/editor/HistoryControls.tsx - History UI component

Modified files:
- components/editor/AudioEditor.tsx - Integrated history system
- components/editor/EditControls.tsx - Updated keyboard shortcuts display

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 17:08:31 +01:00

55 lines
1.2 KiB
TypeScript

'use client';
import * as React from 'react';
import { HistoryManager } from '@/lib/history/history-manager';
import type { HistoryState } from '@/lib/history/history-manager';
import type { Command } from '@/lib/history/command';
export interface UseHistoryReturn {
execute: (command: Command) => void;
undo: () => boolean;
redo: () => boolean;
clear: () => void;
state: HistoryState;
}
export function useHistory(maxHistorySize: number = 50): UseHistoryReturn {
const [manager] = React.useState(() => new HistoryManager(maxHistorySize));
const [state, setState] = React.useState<HistoryState>(manager.getState());
React.useEffect(() => {
const unsubscribe = manager.subscribe(() => {
setState(manager.getState());
});
return unsubscribe;
}, [manager]);
const execute = React.useCallback(
(command: Command) => {
manager.execute(command);
},
[manager]
);
const undo = React.useCallback(() => {
return manager.undo();
}, [manager]);
const redo = React.useCallback(() => {
return manager.redo();
}, [manager]);
const clear = React.useCallback(() => {
manager.clear();
}, [manager]);
return {
execute,
undo,
redo,
clear,
state,
};
}