78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
|
/**
|
|||
|
|
* HistoryPanel – Zeigt die Undo/Redo-Historie an.
|
|||
|
|
* F-CAD-09: Historie einsehbar
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import type { HistoryEntry } from '../history';
|
|||
|
|
|
|||
|
|
interface HistoryPanelProps {
|
|||
|
|
entries: HistoryEntry[];
|
|||
|
|
onJumpTo: (entryId: string) => void;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatTime = (ts: number): string => {
|
|||
|
|
const d = new Date(ts);
|
|||
|
|
return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const HistoryPanel: React.FC<HistoryPanelProps> = ({ entries, onJumpTo, onClose }) => {
|
|||
|
|
if (entries.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
position: 'fixed', top: '50%', right: '320px', transform: 'translateY(-50%)',
|
|||
|
|
background: 'var(--color-bg-primary, #1e1e2e)', borderRadius: '8px',
|
|||
|
|
padding: '16px', width: '280px', maxHeight: '60vh', overflow: 'auto',
|
|||
|
|
border: '1px solid var(--color-border, #333)', zIndex: 900,
|
|||
|
|
color: 'var(--color-text, #e0e0e0)',
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
|
|||
|
|
<h3 style={{ margin: 0, fontSize: '15px' }}>Historie</h3>
|
|||
|
|
<button onClick={onClose} style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', fontSize: '18px' }}>×</button>
|
|||
|
|
</div>
|
|||
|
|
<p style={{ fontSize: '13px', color: '#888' }}>Keine Historie vorhanden.</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
position: 'fixed', top: '50%', right: '320px', transform: 'translateY(-50%)',
|
|||
|
|
background: 'var(--color-bg-primary, #1e1e2e)', borderRadius: '8px',
|
|||
|
|
padding: '16px', width: '280px', maxHeight: '60vh', overflow: 'auto',
|
|||
|
|
border: '1px solid var(--color-border, #333)', zIndex: 900,
|
|||
|
|
color: 'var(--color-text, #e0e0e0)',
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
|
|||
|
|
<h3 style={{ margin: 0, fontSize: '15px' }}>Historie ({entries.length})</h3>
|
|||
|
|
<button onClick={onClose} style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', fontSize: '18px' }}>×</button>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
|||
|
|
{entries.map((entry, idx) => (
|
|||
|
|
<button
|
|||
|
|
key={entry.id}
|
|||
|
|
onClick={() => onJumpTo(entry.id)}
|
|||
|
|
style={{
|
|||
|
|
display: 'flex', alignItems: 'center', gap: '8px',
|
|||
|
|
padding: '6px 8px', borderRadius: '4px', cursor: 'pointer',
|
|||
|
|
border: 'none', textAlign: 'left', width: '100%',
|
|||
|
|
background: entry.isCurrent ? 'rgba(80, 250, 123, 0.15)' : 'transparent',
|
|||
|
|
color: entry.isCurrent ? '#50fa7b' : 'var(--color-text, #e0e0e0)',
|
|||
|
|
fontWeight: entry.isCurrent ? 600 : 400,
|
|||
|
|
fontSize: '13px',
|
|||
|
|
opacity: entry.id.startsWith('redo-') ? 0.5 : 1,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span style={{ fontSize: '11px', color: '#666', minWidth: '28px' }}>{formatTime(entry.timestamp)}</span>
|
|||
|
|
<span style={{ flex: 1 }}>{entry.label}</span>
|
|||
|
|
{entry.isCurrent && <span style={{ fontSize: '10px' }}>●</span>}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default HistoryPanel;
|