feat(history): Add Recent History dropdown to search bar

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -27,11 +27,13 @@ import { ToastContainer } from './components/Toast';
 import { useToast } from './hooks/useToast';
 import { FavoritesPanel } from './components/FavoritesPanel';
 import { useFavorites } from './hooks/useFavorites';
+import { useHistory } from './hooks/useHistory';
 
 function App() {
   const viewerRef = useRef<ProteinViewerRef>(null);
   const { toasts, removeToast, success, error, info } = useToast();
   const { favorites, toggleFavorite, removeFavorite, isFavorite } = useFavorites();
+  const { history, addToHistory } = useHistory();
   // Parse Global URL State Once
   const initialUrlState = parseURLState();
 
@@ -387,7 +389,13 @@ function App() {
       // Optional logic: if mixed, maybe prompt or simple notification?
       // For now, we leave it to user unless it's the *only* thing (handled above)
     }
-  }, [showLigands, initialUrlState.showLigands]);
+    // Add to Recent History
+    if (dataSource === 'pdb' && pdbId) {
+      addToHistory(pdbId, 'pdb');
+    } else if (dataSource === 'pubchem' && pdbId) {
+      addToHistory(pdbId, 'pubchem');
+    }
+  }, [showLigands, initialUrlState.showLigands, pdbId, dataSource, addToHistory]);
 
   const [proteinTitle, setProteinTitle] = useState<string | null>(null);
 
@@ -1357,6 +1365,7 @@ function App() {
             onToggleFavorite={() => toggleFavorite(pdbId, dataSource, proteinTitle || undefined)}
             isFavorite={isFavorite(pdbId, dataSource)}
             onOpenFavorites={() => setIsFavoritesOpen(true)}
+            history={history}
           />
         );
       })()}

src/components/Controls.tsx

@@ -31,10 +31,12 @@ import {
     Wrench,
     Share2,
     ScanSearch, // Added Icon
-    Star
+    Star,
+    Clock
 } from 'lucide-react';
 import type { RepresentationType, ColoringType, ChainInfo, CustomColorRule, Snapshot, Movie, ColorPalette, PDBMetadata } from '../types';
 import type { DataSource } from '../utils/pdbUtils';
+import type { HistoryItem } from '../hooks/useHistory';
 import { formatChemicalId } from '../utils/pdbUtils';
 import { findMotifs } from '../utils/searchUtils';
 import type { MotifMatch } from '../utils/searchUtils';
@@ -323,6 +325,9 @@ interface ControlsProps {
     setShowIons?: (show: boolean) => void;
     onStartTour?: () => void;
 
+    // History
+    history?: HistoryItem[];
+
     // UI State Lifted Info
     openSections?: Record<string, boolean>;
     onToggleSection?: (section: string) => void;
@@ -405,12 +410,14 @@ export const Controls: React.FC<ControlsProps> = ({
     onToggleMobileSidebar,
     onToggleFavorite,
     isFavorite,
-    onOpenFavorites
+    onOpenFavorites,
+    history = []
 }) => {
     // Motif Search State
     const [searchPattern, setSearchPattern] = useState('');
     const [searchResults, setSearchResults] = useState<MotifMatch[]>([]);
     const [isSearching, setIsSearching] = useState(false);
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
 
 
     const handleSearch = () => {
@@ -688,12 +695,42 @@ export const Controls: React.FC<ControlsProps> = ({
                                         type="text"
                                         value={localPdbId}
                                         onChange={(e) => setLocalPdbId(e.target.value)}
+                                        onFocus={() => setIsSearchFocused(true)}
+                                        onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
                                         placeholder={
                                             dataSource === 'pubchem' ? "Search PubChem CID (e.g. 2244)" :
                                                 "Search PDB ID (e.g. 1crn)"
                                         }
                                         className={`w-full rounded-lg pl-9 pr-3 py-2 border outline-none transition-all ${inputBg}`}
                                     />
+                                    {isSearchFocused && history && history.length > 0 && !localPdbId && (
+                                        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-neutral-800 rounded-lg shadow-xl border border-neutral-200 dark:border-neutral-700 z-50 overflow-hidden">
+                                            <div className="px-3 py-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider bg-neutral-50 dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-700 flex items-center gap-2">
+                                                <Clock className="w-3 h-3" />
+                                                Recent History
+                                            </div>
+                                            <div className="max-h-60 overflow-y-auto">
+                                                {history.slice(0, 10).map((item) => (
+                                                    <button
+                                                        key={`${item.id}-${item.dataSource}-${item.timestamp}`}
+                                                        type="button"
+                                                        onClick={() => {
+                                                            setLocalPdbId(item.id);
+                                                            setDataSource(item.dataSource);
+                                                            setPdbId(item.id);
+                                                            setIsSearchFocused(false);
+                                                        }}
+                                                        className="w-full text-left px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 flex items-center justify-between group border-b border-neutral-100 dark:border-neutral-800 last:border-0"
+                                                    >
+                                                        <span className="font-mono font-medium">{item.id}</span>
+                                                        <span className="text-[10px] text-neutral-400 group-hover:text-neutral-500 bg-neutral-100 dark:bg-neutral-900 px-1.5 py-0.5 rounded border border-neutral-200 dark:border-neutral-700">
+                                                            {item.dataSource === 'pdb' ? 'PDB' : 'CHEM'}
+                                                        </span>
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                                 {onToggleFavorite && (
                                     <button

src/hooks/useHistory.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export interface HistoryItem {
+    id: string;
+    dataSource: 'pdb' | 'pubchem';
+    timestamp: number;
+}
+
+const STORAGE_KEY = 'protein-viewer-history';
+const MAX_HISTORY = 10;
+
+export function useHistory() {
+    const [history, setHistory] = useState<HistoryItem[]>(() => {
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            return stored ? JSON.parse(stored) : [];
+        } catch {
+            return [];
+        }
+    });
+
+    // Persist to localStorage whenever history changes
+    useEffect(() => {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
+        } catch (e) {
+            console.error('Failed to save history:', e);
+        }
+    }, [history]);
+
+    const addToHistory = useCallback((id: string, dataSource: 'pdb' | 'pubchem') => {
+        setHistory(prev => {
+            // Remove existing entry for this ID/Source to prevent duplicates
+            const filtered = prev.filter(item => !(item.id === id && item.dataSource === dataSource));
+
+            // Add new item to the top
+            const newItem: HistoryItem = {
+                id,
+                dataSource,
+                timestamp: Date.now()
+            };
+
+            // Combine and slice to max length
+            return [newItem, ...filtered].slice(0, MAX_HISTORY);
+        });
+    }, []);
+
+    const clearHistory = useCallback(() => {
+        setHistory([]);
+    }, []);
+
+    return {
+        history,
+        addToHistory,
+        clearHistory
+    };
+}