feat: add ability to remove individual recent searches

app/page.tsx

@@ -72,7 +72,7 @@ export default function LandingPage() {
   const [svgContent, setSvgContent] = useState<string | null>(null);
   const [svgState, setSvgState] = useState<'idle' | 'loading' | 'loaded'>('idle');
   const guideRef = useRef<HTMLDivElement>(null);
-  const { searches, addSearch, clearSearches } = useRecentSearches();
+  const { searches, addSearch, removeSearch, clearSearches } = useRecentSearches();
   const trimmedUsername = username.trim();
   const hasUsername = trimmedUsername.length > 0;
 
@@ -281,13 +281,24 @@ export default function LandingPage() {
             <div className="flex flex-wrap items-center gap-2 mb-6 mt-3">
               <span className="text-xs text-[#A1A1AA]">Recent:</span>
               {searches.map((s) => (
-                <button
+                <div
                   key={s}
-                  onClick={() => setUsername(s)}
-                  className="rounded-full border border-[rgba(255,255,255,0.08)] bg-[#111] px-3 py-1 text-xs text-white/70 transition-all hover:border-[rgba(255,255,255,0.2)] hover:text-white"
+                  className="flex items-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.08)] bg-[#111] pl-3 pr-2 py-1 transition-all hover:border-[rgba(255,255,255,0.2)]"
                 >
-                  {s}
-                </button>
+                  <button
+                    onClick={() => setUsername(s)}
+                    className="text-xs text-white/90 hover:text-white"
+                  >
+                    {s}
+                  </button>
+                  <button
+                    onClick={() => removeSearch(s)}
+                    className="rounded-full flex items-center justify-center h-4 w-4 text-white/50 hover:bg-white/20 hover:text-white transition-colors text-[10px]"
+                    title="Remove this search"
+                  >
+                    ✕
+                  </button>
+                </div>
               ))}
               <button
                 onClick={clearSearches}

hooks/useRecentSearches.ts

@@ -78,10 +78,24 @@ export function useRecentSearches() {
     writeStorage(null);
   };
 
+  /**
+   * Removes a specific search query from the recent searches list.
+   *
+   * @param query - The search query to remove.
+   */
+  const removeSearch = (query: string) => {
+    setState((prev) => {
+      const filtered = prev.searches.filter((s) => s !== query);
+      writeStorage(filtered.length > 0 ? filtered : null);
+      return { ...prev, searches: filtered };
+    });
+  };
+
   // Return empty searches until after hydration to prevent SSR/client mismatch.
   return {
     searches: state.mounted ? state.searches : [],
     addSearch,
+    removeSearch,
     clearSearches,
   };
 }