feat: add search result highlighting and recent searches (#28) (#73)

Author: gauravsurtani

frontend/src/components/SearchDialog.tsx

@@ -2,10 +2,70 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Search, X, Loader2 } from "lucide-react";
+import { Search, SearchX, X, Loader2, Clock, Trash2 } from "lucide-react";
 import { getPosts } from "@/lib/api";
 import type { Post } from "@/lib/types";
 
+const RECENT_SEARCHES_KEY = "tbc-recent-searches";
+const MAX_RECENT_SEARCHES = 5;
+
+function getRecentSearches(): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(RECENT_SEARCHES_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.slice(0, MAX_RECENT_SEARCHES) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentSearch(query: string): void {
+  const trimmed = query.trim();
+  if (!trimmed) return;
+  const existing = getRecentSearches();
+  const filtered = existing.filter((s) => s.toLowerCase() !== trimmed.toLowerCase());
+  const updated = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES);
+  localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+}
+
+function removeRecentSearch(query: string): string[] {
+  const existing = getRecentSearches();
+  const updated = existing.filter((s) => s !== query);
+  localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+  return updated;
+}
+
+function clearAllRecentSearches(): void {
+  localStorage.removeItem(RECENT_SEARCHES_KEY);
+}
+
+function HighlightedText({ text, query }: { text: string; query: string }) {
+  if (!query.trim()) return <>{text}</>;
+
+  const escapedQuery = query.trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escapedQuery})`, "gi");
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark
+            key={i}
+            className="bg-[var(--color-accent)]/25 text-inherit rounded-sm px-0.5"
+          >
+            {part}
+          </mark>
+        ) : (
+          <span key={i}>{part}</span>
+        ),
+      )}
+    </>
+  );
+}
+
 interface SearchDialogProps {
   open: boolean;
   onClose: () => void;
@@ -18,12 +78,16 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
   const [results, setResults] = useState<Post[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
 
   useEffect(() => {
     if (open) {
       setQuery("");
       setResults([]);
       setSelectedIndex(0);
+      setHasSearched(false);
+      setRecentSearches(getRecentSearches());
       requestAnimationFrame(() => inputRef.current?.focus());
     }
   }, [open]);
@@ -32,6 +96,7 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
     if (!query.trim()) {
       setResults([]);
       setLoading(false);
+      setHasSearched(false);
       return;
     }
 
@@ -41,8 +106,10 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
         const data = await getPosts({ search: query.trim(), limit: 8 });
         setResults(data.posts);
         setSelectedIndex(0);
+        setHasSearched(true);
       } catch {
         setResults([]);
+        setHasSearched(true);
       } finally {
         setLoading(false);
       }
@@ -53,30 +120,58 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
 
   const navigateToResult = useCallback(
     (post: Post) => {
+      saveRecentSearch(query);
       onClose();
       router.push(`/post/${post.id}`);
     },
-    [onClose, router],
+    [onClose, router, query],
   );
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      const showingRecent = !query.trim() && recentSearches.length > 0;
+
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+        const maxIndex = showingRecent ? recentSearches.length - 1 : results.length - 1;
+        setSelectedIndex((i) => Math.min(i + 1, maxIndex));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedIndex((i) => Math.max(i - 1, 0));
-      } else if (e.key === "Enter" && results[selectedIndex]) {
+      } else if (e.key === "Enter") {
         e.preventDefault();
-        navigateToResult(results[selectedIndex]);
+        if (showingRecent && recentSearches[selectedIndex]) {
+          setQuery(recentSearches[selectedIndex]);
+        } else if (results[selectedIndex]) {
+          navigateToResult(results[selectedIndex]);
+        }
       }
     },
-    [results, selectedIndex, navigateToResult],
+    [results, selectedIndex, navigateToResult, query, recentSearches],
   );
 
+  const handleRemoveRecent = useCallback((searchTerm: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const updated = removeRecentSearch(searchTerm);
+    setRecentSearches(updated);
+    setSelectedIndex(0);
+  }, []);
+
+  const handleClearAll = useCallback(() => {
+    clearAllRecentSearches();
+    setRecentSearches([]);
+    setSelectedIndex(0);
+  }, []);
+
+  const handleRecentClick = useCallback((searchTerm: string) => {
+    setQuery(searchTerm);
+  }, []);
+
   if (!open) return null;
 
+  const showRecentSearches = !query.trim() && recentSearches.length > 0;
+  const showNoResults = query.trim() && hasSearched && !loading && results.length === 0;
+
   return (
     <div
       className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]"
@@ -108,6 +203,59 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
             <X size={16} />
           </button>
         </div>
+
+        {showRecentSearches && (
+          <div className="py-2">
+            <div className="flex items-center justify-between px-4 py-1.5">
+              <span className="text-xs font-medium text-[var(--color-text-muted)] uppercase tracking-wider">
+                Recent Searches
+              </span>
+              <button
+                onClick={handleClearAll}
+                className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-error)] transition-colors"
+              >
+                Clear all
+              </button>
+            </div>
+            <ul>
+              {recentSearches.map((term, i) => (
+                <li key={term}>
+                  <button
+                    onClick={() => handleRecentClick(term)}
+                    onMouseEnter={() => setSelectedIndex(i)}
+                    className={`w-full text-left px-4 py-2 flex items-center gap-3 transition-colors ${
+                      i === selectedIndex
+                        ? "bg-[var(--color-bg-hover)]"
+                        : "hover:bg-[var(--color-bg-hover)]"
+                    }`}
+                  >
+                    <Clock size={14} className="shrink-0 text-[var(--color-text-muted)]" />
+                    <span className="flex-1 text-sm text-[var(--color-text-primary)] truncate">
+                      {term}
+                    </span>
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(e) => handleRemoveRecent(term, e)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.stopPropagation();
+                          const updated = removeRecentSearch(term);
+                          setRecentSearches(updated);
+                          setSelectedIndex(0);
+                        }
+                      }}
+                      className="shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-error)] transition-colors p-0.5 rounded"
+                    >
+                      <Trash2 size={12} />
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
         {results.length > 0 && (
           <ul className="max-h-80 overflow-y-auto py-2">
             {results.map((post, i) => (
@@ -121,7 +269,9 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
                       : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]"
                   }`}
                 >
-                  <span className="text-sm font-medium line-clamp-1">{post.title}</span>
+                  <span className="text-sm font-medium line-clamp-1">
+                    <HighlightedText text={post.title} query={query} />
+                  </span>
                   <span
                     className={`text-xs ${
                       i === selectedIndex
@@ -136,11 +286,19 @@ export default function SearchDialog({ open, onClose }: SearchDialogProps) {
             ))}
           </ul>
         )}
-        {query.trim() && !loading && results.length === 0 && (
-          <div className="px-4 py-8 text-center text-sm text-[var(--color-text-muted)]">
-            No posts found for &ldquo;{query}&rdquo;
+
+        {showNoResults && (
+          <div className="px-4 py-8 flex flex-col items-center gap-2 text-center">
+            <SearchX size={32} className="text-[var(--color-text-muted)]" />
+            <p className="text-sm font-medium text-[var(--color-text-primary)]">
+              No results found for &ldquo;{query}&rdquo;
+            </p>
+            <p className="text-xs text-[var(--color-text-muted)]">
+              Try different keywords or check spelling
+            </p>
           </div>
         )}
+
         <div className="px-4 py-2 border-t border-[var(--color-border)] flex items-center gap-4 text-xs text-[var(--color-text-muted)]">
           <span><kbd className="px-1.5 py-0.5 bg-[var(--color-bg-hover)] rounded text-[10px] font-mono">Esc</kbd> to close</span>
           <span><kbd className="px-1.5 py-0.5 bg-[var(--color-bg-hover)] rounded text-[10px] font-mono">&uarr;&darr;</kbd> to navigate</span>