feat(recent-searches): add ability to remove individual recent searches (JhaSourav07#786)

## Description



## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [ ] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

## Checklist before requesting a review:

- [ ] I have read the `CONTRIBUTING.md` file.
- [ ] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [ ] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [ ] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [ ] I have started the repo.
- [ ] I have made sure that i have only one commit to merge in this PR.
- [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: Daksh7785

app/page.test.tsx

@@ -50,17 +50,24 @@ vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: any) => <>{children}</>,
 }));
 
+const mockRecentSearches = {
+  searches: ['octocat', 'torvalds'] as string[],
+  addSearch: vi.fn(),
+  clearSearches: vi.fn(),
+  removeSearch: vi.fn(),
+};
+
 vi.mock('@/hooks/useRecentSearches', () => ({
-  useRecentSearches: () => ({
-    searches: ['octocat', 'torvalds'],
-    addSearch: vi.fn(),
-    clearSearches: vi.fn(),
-  }),
+  useRecentSearches: () => mockRecentSearches,
 }));
 
 describe('LandingPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockRecentSearches.searches = ['octocat', 'torvalds'];
+    mockRecentSearches.addSearch = vi.fn();
+    mockRecentSearches.clearSearches = vi.fn();
+    mockRecentSearches.removeSearch = vi.fn();
 
     // Mock fetch so the SVG preview useEffect resolves without a real network call.
     // Returns a minimal valid SVG so dangerouslySetInnerHTML has something to render.
@@ -233,4 +240,21 @@ describe('LandingPage', () => {
 
     expect(screen.queryByLabelText('Clear input')).toBeNull();
   });
+
+  it('renders recent searches and handles individual deletion', () => {
+    mockRecentSearches.searches = ['octocat', 'jhasourav07'];
+    render(<LandingPage />);
+
+    expect(screen.getByText('octocat')).toBeDefined();
+    expect(screen.getByText('jhasourav07')).toBeDefined();
+
+    const deleteButtons = screen.getAllByLabelText(/Remove/);
+    expect(deleteButtons.length).toBe(2);
+
+    fireEvent.click(deleteButtons[0]);
+    expect(mockRecentSearches.removeSearch).toHaveBeenCalledWith('octocat');
+
+    // Cleanup
+    mockRecentSearches.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, clearSearches, removeSearch } = useRecentSearches();
   const trimmedUsername = username.trim();
   const hasUsername = trimmedUsername.length > 0;
 
@@ -281,13 +281,26 @@ 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
+                <span
                   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="inline-flex items-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.08)] bg-[#111] pl-3 pr-2 py-1 text-xs text-white/70 transition-all hover:border-[rgba(255,255,255,0.2)] hover:text-white group/pill"
                 >
-                  {s}
-                </button>
+                  <button
+                    type="button"
+                    onClick={() => setUsername(s)}
+                    className="transition-colors hover:text-white"
+                  >
+                    {s}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => removeSearch(s)}
+                    className="rounded-full p-0.5 text-white/40 hover:bg-white/10 hover:text-white transition-all flex items-center justify-center"
+                    aria-label={`Remove ${s} from recent searches`}
+                  >
+                    <X size={10} />
+                  </button>
+                </span>
               ))}
               <button
                 onClick={clearSearches}

hooks/useRecentSearches.test.ts

@@ -79,6 +79,20 @@ describe('useRecentSearches', () => {
     expect(removeItemSpy).toHaveBeenCalledWith(STORAGE_KEY);
   });
 
+  it('removes an individual search', () => {
+    const { result } = renderHook(() => useRecentSearches());
+    act(() => {
+      result.current.addSearch('torvalds');
+    });
+    act(() => {
+      result.current.addSearch('gaearon');
+    });
+    act(() => {
+      result.current.removeSearch('torvalds');
+    });
+    expect(result.current.searches).toEqual(['gaearon']);
+  });
+
   it('persists searches across remounts', () => {
     const { result, unmount } = renderHook(() => useRecentSearches());
     act(() => {

hooks/useRecentSearches.ts

@@ -82,10 +82,19 @@ export function useRecentSearches() {
     }));
   };
 
+  const removeSearch = (query: string): void => {
+    setState((prev) => {
+      const filtered = prev.searches.filter((s) => s !== query);
+      writeStorage(filtered);
+      return { ...prev, searches: filtered };
+    });
+  };
+
   // Return empty searches until after hydration to prevent SSR/client mismatch.
   return {
     searches: state.mounted ? state.searches : [],
     addSearch,
     clearSearches,
+    removeSearch,
   };
 }