feat: implement recent snaps feature with import/export functionality and UI enhancements

2026-01-07 18:09:39 +02:00
parent 955d54d2f2
commit d642b7b5da
7 changed files with 577 additions and 119 deletions
@@ -0,0 +1,161 @@
+import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
+import { useRecentSnapsStore, formatRelativeTime, type RecentSnapEntry } from '../store/recentSnapsStore';
+import { useCanvasStore } from '../store/canvasStore';
+
+interface RecentSnapsDropdownProps {
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement>;
+}
+
+const RecentSnapItem = memo(({ 
+  entry, 
+  onOpen, 
+  onDelete 
+}: { 
+  entry: RecentSnapEntry; 
+  onOpen: (snap: RecentSnapEntry) => void;
+  onDelete: (id: string) => void;
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  
+  return (
+    <div
+      className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onOpen(entry)}
+    >
+      {/* Thumbnail Preview */}
+      <div 
+        className="w-12 h-9 rounded bg-neutral-800 border border-white/10 flex items-center justify-center overflow-hidden flex-shrink-0"
+        style={{
+          background: entry.snap.background.type === 'gradient'
+            ? `linear-gradient(${entry.snap.background.gradient.angle}deg, ${entry.snap.background.gradient.from}, ${entry.snap.background.gradient.to})`
+            : entry.snap.background.solid.color
+        }}
+      >
+        <span className="text-[8px] text-white/40">{entry.snap.elements.length} el</span>
+      </div>
+      
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm text-neutral-200 truncate font-medium">{entry.title}</div>
+        <div className="text-xs text-neutral-500">{formatRelativeTime(entry.savedAt)}</div>
+      </div>
+      
+      {/* Actions */}
+      {isHovered && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(entry.id);
+          }}
+          className="p-1 rounded hover:bg-red-500/20 text-neutral-500 hover:text-red-400 transition-colors"
+          title="Remove from recent"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+});
+
+RecentSnapItem.displayName = 'RecentSnapItem';
+
+const RecentSnapsDropdown: React.FC<RecentSnapsDropdownProps> = ({ isOpen, onClose, anchorRef }) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { recentSnaps, removeRecentSnap, clearRecentSnaps } = useRecentSnapsStore();
+  const { setSnap, saveToHistory } = useCanvasStore();
+  
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current && 
+        !dropdownRef.current.contains(e.target as Node) &&
+        anchorRef.current &&
+        !anchorRef.current.contains(e.target as Node)
+      ) {
+        onClose();
+      }
+    };
+    
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onClose, anchorRef]);
+  
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+  
+  const handleOpenSnap = useCallback((entry: RecentSnapEntry) => {
+    saveToHistory();
+    setSnap(entry.snap);
+    onClose();
+  }, [setSnap, saveToHistory, onClose]);
+  
+  const handleDeleteSnap = useCallback((id: string) => {
+    removeRecentSnap(id);
+  }, [removeRecentSnap]);
+  
+  if (!isOpen) return null;
+  
+  return (
+    <div 
+      ref={dropdownRef}
+      className="absolute left-0 top-full mt-2 w-72 bg-[#0a0a0c] border border-white/10 rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
+    >
+      <div className="p-3 border-b border-white/5 flex items-center justify-between">
+        <span className="text-xs font-semibold text-neutral-500 uppercase tracking-wider">Recent Projects</span>
+        {recentSnaps.length > 0 && (
+          <button
+            onClick={clearRecentSnaps}
+            className="text-xs text-neutral-500 hover:text-red-400 transition-colors"
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+      
+      <div className="max-h-80 overflow-y-auto">
+        {recentSnaps.length === 0 ? (
+          <div className="p-6 text-center">
+            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-white/5 flex items-center justify-center">
+              <svg className="w-6 h-6 text-neutral-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <p className="text-sm text-neutral-500">No recent projects</p>
+            <p className="text-xs text-neutral-600 mt-1">Projects you save will appear here</p>
+          </div>
+        ) : (
+          <div className="p-2 space-y-1">
+            {recentSnaps.map((entry) => (
+              <RecentSnapItem
+                key={entry.id}
+                entry={entry}
+                onOpen={handleOpenSnap}
+                onDelete={handleDeleteSnap}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default memo(RecentSnapsDropdown);