Sebastian Krüger
cd59f0606b
Major improvements to UI state management and user preferences: - Add theme toggle with dark/light mode support - Implement Zustand persist middleware for UI state - Add ui-store for panel layout preferences (dock width, heights, tabs) - Persist tool settings (active tool, size, opacity, hardness, etc.) - Persist canvas view preferences (grid, rulers, snap-to-grid) - Persist shape tool settings - Persist collapsible section states - Fix canvas coordinate transformation for centered rendering - Constrain checkerboard and grid to canvas bounds - Add icons to all tab buttons and collapsible sections - Restructure panel-dock to use persisted state Storage impact: ~3.5KB total across all preferences Storage keys: tool-storage, canvas-view-storage, shape-storage, ui-storage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useHistoryStore } from '@/store/history-store';
|
|
import { History } from 'lucide-react';
|
|
|
|
export function HistoryPanel() {
|
|
const { undoStack, redoStack } = useHistoryStore();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-card">
|
|
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
|
{undoStack.length === 0 && redoStack.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">No history yet</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Undo stack (most recent first) */}
|
|
{[...undoStack].reverse().map((command, index) => (
|
|
<div
|
|
key={`undo-${undoStack.length - index - 1}`}
|
|
className="rounded-md border border-border bg-background p-2"
|
|
>
|
|
<p className="text-sm font-medium text-foreground">{command.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(command.timestamp).toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
|
|
{/* Current state indicator */}
|
|
{undoStack.length > 0 && (
|
|
<div className="flex items-center justify-center py-1">
|
|
<div className="h-2 w-2 rounded-full bg-primary" />
|
|
<div className="ml-2 text-xs font-semibold text-primary">Current State</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Redo stack (oldest first) */}
|
|
{[...redoStack].reverse().map((command, index) => (
|
|
<div
|
|
key={`redo-${index}`}
|
|
className="rounded-md border border-border bg-muted/50 p-2 opacity-50"
|
|
>
|
|
<p className="text-sm font-medium text-muted-foreground">{command.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(command.timestamp).toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-border p-3 text-xs text-muted-foreground">
|
|
<div className="flex justify-between">
|
|
<span>{undoStack.length} undoable</span>
|
|
<span>{redoStack.length} redoable</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|