feat: Added Trending Searches section to homepage with real-time popula…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/Home.tsx"
- "frontend/src/App.css"

GSD-Task: S04/T01

frontend/src/App.css

@@ -3269,6 +3269,53 @@ a.app-footer__repo:hover {
   margin: 1.5rem 0 0.5rem;
 }
 
+/* ── Trending Searches ──────────────────────────────────────────────────── */
+
+.home-trending {
+  max-width: 36rem;
+  margin: 0 auto 1rem;
+  padding: 1rem 1.5rem;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.625rem;
+  text-align: center;
+}
+
+.home-trending__title {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 0.75rem;
+  font-weight: 600;
+}
+
+.home-trending__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.pill--trending {
+  display: inline-block;
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  background: var(--color-pill-bg);
+  color: var(--color-pill-text);
+  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+  text-decoration: none;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+.pill--trending:hover {
+  border-color: var(--color-accent);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+}
+
 /* ── Admin Reports ──────────────────────────────────────────────────────── */
 
 .admin-reports {

frontend/src/api/public-client.ts

@@ -317,6 +317,22 @@ export async function fetchStats(): Promise<StatsResponse> {
   return request<StatsResponse>(`${BASE}/stats`);
 }
 
+// ── Popular Searches ─────────────────────────────────────────────────────────
+
+export interface PopularSearchItem {
+  query: string;
+  count: number;
+}
+
+export interface PopularSearchesResponse {
+  items: PopularSearchItem[];
+  cached: boolean;
+}
+
+export async function fetchPopularSearches(): Promise<PopularSearchesResponse> {
+  return request<PopularSearchesResponse>(`${BASE}/search/popular`);
+}
+
 // ── Topics ───────────────────────────────────────────────────────────────────
 
 export async function fetchTopics(): Promise<TopicCategory[]> {

frontend/src/pages/Home.tsx

@@ -16,8 +16,10 @@ import {
   fetchTopics,
   fetchRandomTechnique,
   fetchStats,
+  fetchPopularSearches,
   type TechniqueListItem,
   type StatsResponse,
+  type PopularSearchItem,
 } from "../api/public-client";
 
 export default function Home() {
@@ -29,6 +31,7 @@ export default function Home() {
   const [randomLoading, setRandomLoading] = useState(false);
   const [randomError, setRandomError] = useState(false);
   const [stats, setStats] = useState<StatsResponse | null>(null);
+  const [trending, setTrending] = useState<PopularSearchItem[] | null>(null);
   const navigate = useNavigate();
 
   const handleRandomTechnique = async () => {
@@ -115,6 +118,24 @@ export default function Home() {
     };
   }, []);
 
+  // Load trending searches
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const data = await fetchPopularSearches();
+        if (!cancelled && data.items.length > 0) {
+          setTrending(data.items);
+        }
+      } catch {
+        // optional section — silently ignore
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   return (
     <div className="home">
       {/* Hero search */}
@@ -209,6 +230,25 @@ export default function Home() {
         </section>
       )}
 
+      {/* Trending Searches */}
+      {trending && trending.length > 0 && (
+        <section className="home-trending card-stagger" style={{ '--stagger-index': 3 } as React.CSSProperties}>
+          <h2 className="home-trending__title">Trending Searches</h2>
+          <div className="home-trending__list">
+            {trending.map((item, i) => (
+              <Link
+                key={item.query}
+                to={`/search?q=${encodeURIComponent(item.query)}`}
+                className="pill pill--trending card-stagger"
+                style={{ '--stagger-index': i } as React.CSSProperties}
+              >
+                {item.query}
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
       {/* Random technique discovery */}
       <div className="home-random">
         <button