feat: quick save button, recent structures in landing overlay, localStorage tracking

AmirMohammad Cheraghali · AmirMohammad Cheraghali · commit d0895659da76 · 2026-03-09T07:58:34.000+01:00
diff --git a/src/ViewerApp.tsx b/src/ViewerApp.tsx
@@ -66,6 +66,7 @@ import { StudioLayout } from './components/StudioLayout';
 import { useAuth } from './lib/AuthContext';
 import { Link } from 'react-router-dom';
 import { uploadStructure } from './lib/structuresService';
+import { addRecentStructure } from './lib/recentStructures';
 
 const deepEqual = (a: any, b: any): boolean => {
   if (a === b) return true;
@@ -1603,6 +1604,53 @@ function App() {
     }
   };
 
+  // ── Quick Save to My Structures ────────────────────────────────
+  const [quickSaving, setQuickSaving] = useState(false);
+  const handleQuickSave = async () => {
+    if (!user?.id) { error("Sign in to save structures to your library."); return; }
+    const ctrl = controllers[0];
+    setQuickSaving(true);
+    try {
+      if (ctrl.file) {
+        await uploadStructure(ctrl.file, user.id);
+        success(`"${ctrl.file.name.replace(/\.[^/.]+$/, '')}" saved to My Structures ✓`);
+      } else if (ctrl.pdbId) {
+        const res = await fetch(`https://files.rcsb.org/download/${ctrl.pdbId.toUpperCase()}.pdb`);
+        if (!res.ok) throw new Error('Could not fetch from RCSB');
+        const blob = await res.blob();
+        const file = new File([blob], `${ctrl.pdbId.toUpperCase()}.pdb`, { type: 'chemical/x-pdb' });
+        await uploadStructure(file, user.id);
+        success(`"${ctrl.pdbId}" saved to My Structures ✓`);
+      } else {
+        error("No structure loaded to save.");
+      }
+    } catch (e: any) {
+      error(e?.message ?? "Quick save failed");
+    } finally {
+      setQuickSaving(false);
+    }
+  };
+
+  // ── Track recent structures in localStorage ────────────────────
+  useEffect(() => {
+    const ctrl = controllers[0];
+    if (ctrl.pdbId && ctrl.pdbId.length >= 4) {
+      addRecentStructure({
+        id: ctrl.pdbId.toUpperCase(),
+        name: proteinTitle || ctrl.pdbId.toUpperCase(),
+        pdbId: ctrl.pdbId.toUpperCase(),
+        fileType: ctrl.dataSource === 'pubchem' ? 'sdf' : 'pdb',
+      });
+    } else if (ctrl.file) {
+      addRecentStructure({
+        id: ctrl.file.name,
+        name: ctrl.file.name.replace(/\.[^/.]+$/, ''),
+        fileType: ctrl.file.name.split('.').pop()?.toLowerCase(),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controllers[0].pdbId, controllers[0].file]);
+
   const handleExportVideo = async () => {
     const viewer = viewerRef.current || viewerRefs[0].current;
     if (!viewer || !recorder.session) return;
@@ -2890,6 +2938,8 @@ function App() {
                     setIsRocking={setIsRocking}
 
                     onSaveSession={() => handleToolAction('save')}
+                    onQuickSave={handleQuickSave}
+                    quickSaving={quickSaving}
                     onLoadSession={handleLoadSession}
                     onDownloadPDB={handleDownloadPDB}
                     onDownloadSequence={handleDownloadSequence}
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -345,6 +345,8 @@ interface ControlsProps {
     onSaveSession: () => void;
     onLoadSession: (file: File) => void;
     onToggleContactMap: () => void;
+    onQuickSave?: () => void;
+    quickSaving?: boolean;
     movies: Movie[];
     colorPalette: ColorPalette;
     setColorPalette: (palette: ColorPalette) => void;
@@ -502,7 +504,9 @@ export const Controls: React.FC<ControlsProps> = ({
     setVisualizerEngine,
     onResetCamera,
     isRocking,
-    setIsRocking
+    setIsRocking,
+    onQuickSave,
+    quickSaving = false,
 }) => {
     // Motif Search State
     const [searchPattern, setSearchPattern] = useState('');
@@ -1010,6 +1014,21 @@ export const Controls: React.FC<ControlsProps> = ({
 
 
                         </div>
+
+                        {onQuickSave && (
+                            <button
+                                onClick={onQuickSave}
+                                disabled={quickSaving}
+                                className={`w-full flex items-center justify-center gap-2 border py-2 rounded-lg transition-all group ${cardBg} hover:opacity-80 disabled:opacity-50`}
+                                title="Save current structure to My Structures library"
+                            >
+                                {quickSaving
+                                    ? <svg className="animate-spin w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" /></svg>
+                                    : <svg className="w-3.5 h-3.5 group-hover:text-blue-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" /><polyline points="17,21 17,13 7,13 7,21" /><polyline points="7,3 7,8 15,8" /></svg>
+                                }
+                                <span className="text-xs font-medium">{quickSaving ? 'Saving…' : 'Save to Library'}</span>
+                            </button>
+                        )}
                     </div>
 
                     {/* 2. STRUCTURE INFO (Always Visible if loaded) */}
diff --git a/src/components/LandingOverlay.tsx b/src/components/LandingOverlay.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { ArrowRight, Upload, Play, BookOpen, Dna, Activity, Shuffle } from 'lucide-react';
+import { ArrowRight, Upload, Play, BookOpen, Dna, Activity, Shuffle, Clock, ChevronRight } from 'lucide-react';
 import clsx from 'clsx';
 import { FEATURED_MOLECULES } from '../data/featuredMolecules';
+import { getRecentStructures, type RecentStructure } from '../lib/recentStructures';
 
 interface LandingOverlayProps {
     isVisible: boolean;
@@ -14,6 +15,12 @@ interface LandingOverlayProps {
 export const LandingOverlay: React.FC<LandingOverlayProps> = ({ isVisible, onDismiss, onUpload, onStartTour, onLoadPdb }) => {
     const [shouldRender, setShouldRender] = useState(isVisible);
     const [isFadingOut, setIsFadingOut] = useState(false);
+    const [recentStructures, setRecentStructures] = useState<RecentStructure[]>([]);
+
+    // Load recent structures from localStorage each time the overlay opens
+    useEffect(() => {
+        if (isVisible) setRecentStructures(getRecentStructures());
+    }, [isVisible]);
 
     // Day of year logic for consistent daily rotation
     const dailyIndex = useMemo(() => {
@@ -32,14 +39,12 @@ export const LandingOverlay: React.FC<LandingOverlayProps> = ({ isVisible, onDis
     const handleShuffle = (e: React.MouseEvent) => {
         e.stopPropagation();
         setIsShuffling(true);
-        // Animate shuffle
         let count = 0;
         const interval = setInterval(() => {
             setSelectedIndex(prev => (prev + 1) % FEATURED_MOLECULES.length);
             count++;
             if (count > 5) {
                 clearInterval(interval);
-                // Pick a new random index that is different from current
                 let newIndex = Math.floor(Math.random() * FEATURED_MOLECULES.length);
                 while (newIndex === selectedIndex && FEATURED_MOLECULES.length > 1) {
                     newIndex = Math.floor(Math.random() * FEATURED_MOLECULES.length);
@@ -57,20 +62,29 @@ export const LandingOverlay: React.FC<LandingOverlayProps> = ({ isVisible, onDis
             setIsFadingOut(false);
         } else {
             setIsFadingOut(true);
-            const timer = setTimeout(() => setShouldRender(false), 500); // Match CSS transition
+            const timer = setTimeout(() => setShouldRender(false), 500);
             return () => clearTimeout(timer);
         }
     }, [isVisible]);
 
     if (!shouldRender) return null;
 
+    const timeAgo = (ts: number) => {
+        const m = Math.floor((Date.now() - ts) / 60000);
+        if (m < 1) return 'just now';
+        if (m < 60) return `${m}m ago`;
+        const h = Math.floor(m / 60);
+        if (h < 24) return `${h}h ago`;
+        return `${Math.floor(h / 24)}d ago`;
+    };
+
     return (
         <div className={clsx(
             "fixed inset-0 z-[100] flex flex-col md:flex-row items-center justify-center md:justify-between p-6 md:p-12 transition-opacity duration-500",
             isFadingOut ? "opacity-0 pointer-events-none" : "opacity-100",
             "bg-gradient-to-br from-black/90 via-black/80 to-transparent backdrop-blur-sm"
         )}>
-            {/* Background Interaction Layer (Click to dismiss if clicking empty space) */}
+            {/* Background Interaction Layer */}
             <div className="absolute inset-0 z-0" onClick={onDismiss} />
 
             {/* Logo */}
@@ -111,7 +125,7 @@ export const LandingOverlay: React.FC<LandingOverlayProps> = ({ isVisible, onDis
                         </button>
                     </div>
 
-                    <div className="pt-8 flex items-center justify-center md:justify-start gap-6 text-sm text-gray-500 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-500">
+                    <div className="pt-4 flex items-center justify-center md:justify-start gap-6 text-sm text-gray-500 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-500">
                         <button onClick={onUpload} className="hover:text-white transition-colors flex items-center gap-2">
                             <Upload size={16} /> Upload File
                         </button>
@@ -120,11 +134,34 @@ export const LandingOverlay: React.FC<LandingOverlayProps> = ({ isVisible, onDis
                             <Dna size={16} /> Load Example (2B3P)
                         </button>
                     </div>
+
+                    {/* ── Recently Viewed ── */}
+                    {recentStructures.length > 0 && (
+                        <div className="pt-2 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-700">
+                            <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
+                                <Clock size={12} />
+                                <span className="font-semibold uppercase tracking-wider">Recently Viewed</span>
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                                {recentStructures.map(r => (
+                                    <button
+                                        key={r.id}
+                                        onClick={() => { onLoadPdb(r.pdbId ?? r.id); onDismiss(); }}
+                                        className="group flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-full text-xs text-gray-300 hover:text-white transition-all"
+                                    >
+                                        <Dna size={11} className="text-blue-400 opacity-70 group-hover:opacity-100" />
+                                        <span className="font-medium truncate max-w-[120px]">{r.name}</span>
+                                        <span className="text-gray-600 shrink-0">{timeAgo(r.timestamp)}</span>
+                                        <ChevronRight size={10} className="text-gray-600 group-hover:text-gray-400 group-hover:translate-x-0.5 transition-transform" />
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
                 </div>
 
                 {/* FEATURED CARD (Right) */}
                 <div className="relative pointer-events-auto w-full max-w-md animate-in fade-in slide-in-from-right-8 duration-1000 delay-500 hidden md:block">
-                    {/* Glass Card - Enlarged */}
                     <div className="bg-black/40 backdrop-blur-xl border border-white/10 p-8 rounded-3xl shadow-2xl relative overflow-hidden group hover:border-white/20 transition-colors transform hover:-translate-y-2 duration-500">
                         <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity scale-150">
                             <Activity size={180} />
diff --git a/src/lib/recentStructures.ts b/src/lib/recentStructures.ts
@@ -0,0 +1,37 @@
+/**
+ * Manages a "recently viewed structures" list in localStorage.
+ * Stores up to MAX_RECENT entries with name, pdbId/url, and timestamp.
+ */
+
+const KEY = 'quercus_recent_structures';
+const MAX_RECENT = 5;
+
+export interface RecentStructure {
+    id: string;            // unique key (pdbId or uuid)
+    name: string;          // display name
+    pdbId?: string;        // if loaded by PDB ID
+    fileType?: string;     // 'pdb', 'cif', etc.
+    timestamp: number;     // ms since epoch
+}
+
+export function getRecentStructures(): RecentStructure[] {
+    try {
+        const raw = localStorage.getItem(KEY);
+        if (!raw) return [];
+        return JSON.parse(raw) as RecentStructure[];
+    } catch {
+        return [];
+    }
+}
+
+export function addRecentStructure(entry: Omit<RecentStructure, 'timestamp'>): void {
+    try {
+        const existing = getRecentStructures().filter(r => r.id !== entry.id);
+        const updated = [{ ...entry, timestamp: Date.now() }, ...existing].slice(0, MAX_RECENT);
+        localStorage.setItem(KEY, JSON.stringify(updated));
+    } catch { /* ignore storage errors */ }
+}
+
+export function clearRecentStructures(): void {
+    localStorage.removeItem(KEY);
+}
