diff --git a/frontend/src/App.css b/frontend/src/App.css index 56ce400..25eeb32 100644 --- a/frontend/src/App.css +++ b/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 { diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts index d1d2572..954874a 100644 --- a/frontend/src/api/public-client.ts +++ b/frontend/src/api/public-client.ts @@ -317,6 +317,22 @@ export async function fetchStats(): Promise { return request(`${BASE}/stats`); } +// ── Popular Searches ───────────────────────────────────────────────────────── + +export interface PopularSearchItem { + query: string; + count: number; +} + +export interface PopularSearchesResponse { + items: PopularSearchItem[]; + cached: boolean; +} + +export async function fetchPopularSearches(): Promise { + return request(`${BASE}/search/popular`); +} + // ── Topics ─────────────────────────────────────────────────────────────────── export async function fetchTopics(): Promise { diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 97fbaa6..6449c63 100644 --- a/frontend/src/pages/Home.tsx +++ b/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(null); + const [trending, setTrending] = useState(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 (
{/* Hero search */} @@ -209,6 +230,25 @@ export default function Home() { )} + {/* Trending Searches */} + {trending && trending.length > 0 && ( +
+

Trending Searches

+
+ {trending.map((item, i) => ( + + {item.query} + + ))} +
+
+ )} + {/* Random technique discovery */}