- {/* Layout wrapper: its size matches the scaled visual size so flex centering works correctly */}
-
-
- {/* Placeholder when empty and not mid-clear */}
-
- {elements.length === 0 && !isClearing && (
-
-
-
{t('whiteboard.ready')}
-
{t('whiteboard.readyHint')}
-
-
- {/* Elements — always rendered so AnimatePresence can track exits */}
-
- {elements.map((element, index) => (
-
- ))}
-
-
+ // ── Render ──────────────────────────────────────────────────────
+ if (elements.length === 0) {
+ return (
+
+
{t('stage.whiteboardEmpty')}
+ );
+ }
+
+ return (
+
+
+
+
);
}
diff --git a/components/whiteboard/whiteboard-history.tsx b/components/whiteboard/whiteboard-history.tsx
new file mode 100644
index 0000000..0015882
--- /dev/null
+++ b/components/whiteboard/whiteboard-history.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { RotateCcw } from 'lucide-react';
+import { useWhiteboardHistoryStore } from '@/lib/store/whiteboard-history';
+import { useStageStore } from '@/lib/store';
+import { createStageAPI } from '@/lib/api/stage-api';
+import { elementFingerprint } from '@/lib/utils/element-fingerprint';
+import { toast } from 'sonner';
+import { useI18n } from '@/lib/hooks/use-i18n';
+
+interface WhiteboardHistoryProps {
+ readonly isOpen: boolean;
+ readonly onClose: () => void;
+}
+
+/**
+ * Whiteboard history dropdown panel.
+ * Shows a list of saved whiteboard snapshots with timestamps and element counts.
+ * Clicking "Restore" replaces the current whiteboard content with the snapshot.
+ */
+export function WhiteboardHistory({ isOpen, onClose }: WhiteboardHistoryProps) {
+ const { t } = useI18n();
+ const snapshots = useWhiteboardHistoryStore((s) => s.snapshots);
+ const panelRef = useRef
(null);
+
+ // Close on outside click
+ useEffect(() => {
+ if (!isOpen) return;
+ const handler = (e: MouseEvent) => {
+ if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+ onClose();
+ }
+ };
+ // Delay listener so the click that opens the panel doesn't immediately close it
+ const id = setTimeout(() => document.addEventListener('mousedown', handler), 0);
+ return () => {
+ clearTimeout(id);
+ document.removeEventListener('mousedown', handler);
+ };
+ }, [isOpen, onClose]);
+
+ const handleRestore = (index: number) => {
+ const snapshot = useWhiteboardHistoryStore.getState().getSnapshot(index);
+ if (!snapshot) return;
+
+ const stageStore = useStageStore;
+ const stageAPI = createStageAPI(stageStore);
+
+ // Get or create whiteboard
+ const wbResult = stageAPI.whiteboard.get();
+ if (!wbResult.success || !wbResult.data) {
+ return;
+ }
+ const whiteboardId = wbResult.data.id;
+
+ const currentElements = wbResult.data.elements || [];
+
+ // Set restoredKey so auto-snapshot skips the incoming change
+ const restoredElementsKey = elementFingerprint(snapshot.elements);
+ useWhiteboardHistoryStore.getState().setRestoredKey(restoredElementsKey);
+
+ try {
+ // Clear existing elements
+ for (const el of currentElements) {
+ stageAPI.whiteboard.deleteElement(el.id, whiteboardId);
+ }
+ // Add snapshot elements
+ // Race condition note: addElement loop may cause intermediate renders where
+ // elementsKey doesn't match restoredKey yet. This is safe because:
+ // 1. The 2-second debounce in auto-snapshot means intermediate states won't trigger snapshots
+ // 2. When the loop completes, final elementsKey will match restoredKey and skip the snapshot
+ // 3. Any pending snapshot timer gets cleared by the next render
+ for (const el of snapshot.elements) {
+ stageAPI.whiteboard.addElement(el, whiteboardId);
+ }
+ } catch (error) {
+ // If restore fails, immediately clear restoredKey to prevent it from getting stuck
+ useWhiteboardHistoryStore.getState().setRestoredKey(null);
+ console.error('Failed to restore whiteboard snapshot:', error);
+ toast.error(t('whiteboard.clearError') + String(error));
+ return;
+ }
+
+ toast.success(t('whiteboard.restored'));
+ onClose();
+ };
+
+ const formatTime = (ts: number) => {
+ const d = new Date(ts);
+ return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
+ };
+
+ return (
+
+ {isOpen && (
+
+ {/* Header */}
+
+
+ {t('whiteboard.history')}
+
+
+ {snapshots.length > 0 ? `${snapshots.length}` : ''}
+
+
+
+ {/* Snapshot list */}
+
+ {snapshots.length === 0 ? (
+
+ {t('whiteboard.noHistory')}
+
+ ) : (
+
+ {[...snapshots].reverse().map((snap, reverseIdx) => {
+ const realIdx = snapshots.length - 1 - reverseIdx;
+ return (
+
+
+
+ {snap.label || `#${realIdx + 1}`}
+
+
+ {formatTime(snap.timestamp)} ·{' '}
+ {t('whiteboard.elementCount').replace(
+ '{count}',
+ String(snap.elements.length),
+ )}
+
+
+
+
+ );
+ })}
+
+ )}
+