feat: add search

PROJECT_CONTEXT.md

@@ -17,6 +17,7 @@ Content is sourced from the pre-1980s Vedabase, extracted and indexed into Mongo
 - **vaul** for mobile drawer navigation
 - **Go BFF API** — all data fetched via `lib/bff.ts` HTTP client calling the Go BFF server (no direct database access)
 - **framer-motion** for audio player animations (spring enter/exit, minimize/expand transitions, audio wave bars)
+- **Typesense** (via BFF) — typo-tolerant full-text search across all content
 - **Python 3** with BeautifulSoup4 + `indic-transliteration` for HTML extraction scripts
 
 ---
@@ -69,9 +70,13 @@ knowledgebase/
 │   │   ├── place/[place]/page.tsx → Place listing
 │   │   ├── type/[type]/page.tsx → Type listing (lecture/conversation), year sidebar
 │   │   └── [slug]/page.tsx     → Individual transcription reading page
+│   ├── search/                 → Search page (server + client components)
+│   │   ├── page.tsx            → Server component (URL-driven state)
+│   │   └── search-content.tsx  → Client component (input, filters, results)
 │   └── api/
 │       ├── og/route.tsx        → Dynamic OG image generator (Noto Sans, Prabhupāda image)
 │       ├── books/              → Book/verse API routes
+│       ├── search/route.ts     → BFF search proxy (Typesense via /api/v1/search)
 │       └── glossary/route.ts   → Glossary API
 ├── components/
 │   ├── ui/                     → shadcn components (button, card, badge, tooltip, input, drawer)
@@ -86,6 +91,7 @@ knowledgebase/
 │   ├── page-header.tsx         → Shared header with ReadingSettings (max-w-5xl)
 │   ├── reading-settings.tsx    → Theme/font/size/justify accessibility panel
 │   ├── mobile-nav.tsx          → Left-slide drawer for mobile sidebar navigation
+│   ├── header-search.tsx       → Header search button with framer-motion expand animation
 │   ├── site-footer.tsx         → Global footer (About + Home links)
 │   ├── audio-player/           → Site-wide floating audio player
 │   │   ├── audio-context.tsx   → React context + provider, manages <audio> element
@@ -542,6 +548,23 @@ SSR and DS have parent chapters with sub-chapters stored as individual `prose_ch
 - Implemented in all 24+ reader pages via shared `MobileNav` component
 
 ### Search
+
+**Search** (`/search` page) — Typo-tolerant, diacritic-insensitive full-text search across all content.
+
+- **Powered by Typesense** via the BFF (`/api/v1/search` proxied through `/api/search`)
+- **9 indexed content types** combined into 8 user-facing filters: Books (verses + prose), Letters, Transcriptions, Glossary, Essays, Journals, Magazines, Other Documents
+- **Multi-select filters** — click multiple type tabs to combine (e.g., Books + Letters); "All" deselects everything
+- **URL state sync** — `/search?q=surrender&type=books,letters` is shareable and bookmarkable
+- **Header search button** — `HeaderSearchButton` component on every page header expands into a search input on click; press `/` from anywhere to trigger
+- **300ms debounce** on input
+- **Highlighted snippets** — matched text wrapped in `<mark>` tags
+- **Typo tolerance** — "Krishna", "Krsna", "Krishn" all find Kṛṣṇa results
+- **Diacritic insensitivity** — `_ascii` shadow fields indexed alongside originals (e.g., "Yashodanandana" matches "Yaśodanandana")
+- **Prefix matching** — partial words like "sarv dharman parit" match `sarva-dharmān parityajya`
+- **Clickable result cards** — entire card navigates to the source page
+- Files: `app/search/page.tsx`, `app/search/search-content.tsx`, `app/api/search/route.ts`, `components/header-search.tsx`
+
+### Per-Page Filters
 - Books page: diacritic-aware search (typing "Krsna" matches "Kṛṣṇa")
 - Glossary page: full-text search across terms and definitions
 - Uses Unicode NFD normalization + manual IAST character stripping
@@ -620,6 +643,8 @@ ALLOW_RTF=true                         # Enable RTF viewer (development only)
 NEXT_PUBLIC_SITE_URL=https://prabhupadasays.org  # Public site URL for OG images
 ```
 
+> No new vars are needed for the frontend search feature — search goes through the BFF, which has `TYPESENSE_URL` and `TYPESENSE_API_KEY` configured server-side.
+
 ---
 
 ## How to Run
@@ -776,4 +801,6 @@ Content block formats: `"paragraph"` (body text), `"verse"` (centered italic), `
 
 7. **Empty transcriptions** — 30 entries have no English text content (Hindi/Bengali recordings); the UI shows "No transcription available" with the audio player still accessible
 
-8. **Audio player z-index** — Player is hidden when text selection toolbar is active on mobile to avoid overlap
+8. **Audio player z-index** — Player is hidden when text selection toolbar is active on mobile to avoid overlap
+
+9. **Search depends on Typesense** — Search depends on Typesense being available via the BFF; if Typesense is down, search will return empty results but the rest of the site is unaffected.

app/api/search/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BFF_BASE = process.env.BFF_URL || "http://localhost:8080";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const q = searchParams.get("q") || "";
+  const type = searchParams.get("type") || "all";
+  const page = searchParams.get("page") || "1";
+  const limit = searchParams.get("limit") || "20";
+
+  if (!q.trim()) {
+    return NextResponse.json({
+      query: "",
+      type,
+      results: [],
+      total: 0,
+      page: 1,
+      limit: 20,
+      total_pages: 0,
+    });
+  }
+
+  try {
+    const url = new URL("/api/v1/search", BFF_BASE);
+    url.searchParams.set("q", q);
+    url.searchParams.set("type", type);
+    url.searchParams.set("page", page);
+    url.searchParams.set("limit", limit);
+
+    const res = await fetch(url.toString(), {
+      headers: { Accept: "application/json" },
+    });
+
+    if (!res.ok) {
+      return NextResponse.json(
+        {
+          query: q,
+          type,
+          results: [],
+          total: 0,
+          page: Number(page),
+          limit: Number(limit),
+          total_pages: 0,
+        },
+        { status: res.status },
+      );
+    }
+
+    const data = await res.json();
+    // Unwrap BFF envelope: { data: { ... } } → { ... }
+    const payload = data.data ?? data;
+    return NextResponse.json(payload);
+  } catch {
+    return NextResponse.json(
+      {
+        query: q,
+        type,
+        results: [],
+        total: 0,
+        page: Number(page),
+        limit: Number(limit),
+        total_pages: 0,
+      },
+      { status: 502 },
+    );
+  }
+}

app/glossary/glossary-client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useMemo, useRef, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { Search, X, Menu, ChevronLeft, ChevronRight } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -291,8 +291,28 @@ export function GlossaryClient({
   letterCounts,
 }: Props) {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [query, setQuery] = useState("");
-  const [activeTermRaw, setActiveTerm] = useState(entries[0]?.term || "");
+
+  // Initial active term: prefer ?term= URL param, then fall back to first entry
+  const initialTerm = useMemo(() => {
+    const termParam = searchParams.get("term");
+    if (termParam) {
+      // Match case-insensitively and ignore diacritics
+      const normalize = (s: string) =>
+        s
+          .toLowerCase()
+          .normalize("NFD")
+          .replace(/[\u0300-\u036f]/g, "");
+      const normalizedParam = normalize(termParam);
+      const match = entries.find((e) => normalize(e.term) === normalizedParam);
+      if (match) return match.term;
+    }
+    return entries[0]?.term || "";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [activeTermRaw, setActiveTerm] = useState(initialTerm);
   const contentRef = useRef<HTMLDivElement>(null);
 
   // All term names

app/search/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { buildOgMeta } from "@/lib/og";
+import { SearchContent } from "./search-content";
+
+export function generateMetadata(): Metadata {
+  return buildOgMeta({
+    title: "Search",
+    detail: "Search across all content",
+    quote:
+      "Search across Śrīla Prabhupāda's books, letters, lectures, conversations, and more.",
+  });
+}
+
+export default function SearchPage() {
+  return <SearchContent />;
+}

app/search/search-content.tsx

@@ -0,0 +1,665 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef, Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import {
+  Search,
+  Loader2,
+  BookOpen,
+  Mail,
+  Mic,
+  BookA,
+  PenLine,
+  NotebookPen,
+  Newspaper,
+  FileStack,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface SearchResult {
+  collection: string;
+  id: string;
+  title: string;
+  snippet: string;
+  url: string;
+  meta: Record<string, string | undefined>;
+}
+
+interface SearchResponse {
+  query: string;
+  type: string;
+  results: SearchResult[];
+  total: number;
+  page: number;
+  limit: number;
+  total_pages: number;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const CONTENT_TABS = [
+  { label: "All", value: "all" },
+  { label: "Books", value: "books" },
+  { label: "Letters", value: "letters" },
+  { label: "Transcriptions", value: "transcriptions" },
+  { label: "Glossary", value: "glossary" },
+  { label: "Essays", value: "essays" },
+  { label: "Journals", value: "journals" },
+  { label: "Magazines", value: "magazines" },
+  { label: "Other Documents", value: "other_documents" },
+] as const;
+
+// Maps a frontend tab value to the actual BFF collection name(s).
+// "books" expands to verses + prose for the API call.
+const TAB_TO_COLLECTIONS: Record<string, string[]> = {
+  books: ["verses", "prose"],
+};
+
+function tabsToBffType(tabs: Set<string>): string {
+  if (tabs.size === 0) return "all";
+  const collections: string[] = [];
+  for (const tab of tabs) {
+    const expanded = TAB_TO_COLLECTIONS[tab];
+    if (expanded) {
+      collections.push(...expanded);
+    } else {
+      collections.push(tab);
+    }
+  }
+  return collections.join(",");
+}
+
+function bffTypeToTabs(typeParam: string): Set<string> {
+  if (!typeParam || typeParam === "all") return new Set<string>();
+  const collections = typeParam
+    .split(",")
+    .map((t) => t.trim())
+    .filter(Boolean);
+  const tabs = new Set<string>();
+  for (const col of collections) {
+    // If this collection is part of an expanded tab, use the tab name
+    let mapped = false;
+    for (const [tab, expanded] of Object.entries(TAB_TO_COLLECTIONS)) {
+      if (expanded.includes(col)) {
+        tabs.add(tab);
+        mapped = true;
+        break;
+      }
+    }
+    if (!mapped) tabs.add(col);
+  }
+  return tabs;
+}
+
+const COLLECTION_CONFIG: Record<
+  string,
+  { label: string; icon: typeof BookOpen; color: string }
+> = {
+  verses: {
+    label: "Verse",
+    icon: BookOpen,
+    color: "bg-primary/10 text-primary",
+  },
+  prose: {
+    label: "Prose",
+    icon: BookOpen,
+    color: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
+  },
+  letters: {
+    label: "Letter",
+    icon: Mail,
+    color: "bg-green-500/10 text-green-700 dark:text-green-400",
+  },
+  transcriptions: {
+    label: "Transcript",
+    icon: Mic,
+    color: "bg-purple-500/10 text-purple-700 dark:text-purple-400",
+  },
+  glossary: {
+    label: "Glossary",
+    icon: BookA,
+    color: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
+  },
+  essays: {
+    label: "Essay",
+    icon: PenLine,
+    color: "bg-teal-500/10 text-teal-700 dark:text-teal-400",
+  },
+  journals: {
+    label: "Journal",
+    icon: NotebookPen,
+    color: "bg-orange-500/10 text-orange-700 dark:text-orange-400",
+  },
+  magazines: {
+    label: "Magazine",
+    icon: Newspaper,
+    color: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
+  },
+  other_documents: {
+    label: "Document",
+    icon: FileStack,
+    color: "bg-muted text-muted-foreground",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Debounce hook
+// ---------------------------------------------------------------------------
+
+function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debounced;
+}
+
+// ---------------------------------------------------------------------------
+// Inner search component (uses useSearchParams)
+// ---------------------------------------------------------------------------
+
+function SearchInner() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Read initial state from URL
+  const initialQuery = searchParams.get("q") || "";
+  const initialType = searchParams.get("type") || "all";
+  const initialPage = parseInt(searchParams.get("page") || "1", 10);
+
+  const [inputValue, setInputValue] = useState(initialQuery);
+  // selectedTypes holds tab values (e.g., "books", "letters") — not raw collection names.
+  const [selectedTypes, setSelectedTypes] = useState<Set<string>>(() =>
+    bffTypeToTabs(initialType),
+  );
+  const [currentPage, setCurrentPage] = useState(initialPage);
+
+  // Convert selected tabs to the BFF type param ("books" → "verses,prose")
+  const activeTypeParam = tabsToBffType(selectedTypes);
+  // For URL: keep the tab-friendly form ("books") instead of the expanded form
+  const urlTypeParam =
+    selectedTypes.size === 0 ? "all" : Array.from(selectedTypes).join(",");
+  const [data, setData] = useState<SearchResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(!!initialQuery);
+
+  const debouncedQuery = useDebouncedValue(inputValue, 300);
+
+  // Sync URL when state changes
+  const pushUrl = useCallback(
+    (q: string, typeParam: string, page: number) => {
+      const params = new URLSearchParams();
+      if (q.trim()) params.set("q", q.trim());
+      if (typeParam !== "all") params.set("type", typeParam);
+      if (page > 1) params.set("page", String(page));
+      const qs = params.toString();
+      router.replace(`/search${qs ? `?${qs}` : ""}`, { scroll: false });
+    },
+    [router],
+  );
+
+  // Fetch search results
+  useEffect(() => {
+    const query = debouncedQuery.trim();
+    if (!query) {
+      setData(null);
+      setHasSearched(false);
+      pushUrl("", urlTypeParam, 1);
+      return;
+    }
+
+    setHasSearched(true);
+    setIsLoading(true);
+    pushUrl(query, urlTypeParam, currentPage);
+
+    const controller = new AbortController();
+
+    const params = new URLSearchParams({
+      q: query,
+      type: activeTypeParam,
+      page: String(currentPage),
+      limit: "20",
+    });
+
+    fetch(`/api/search?${params.toString()}`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((json: SearchResponse) => {
+        // Defensive: ensure results is always an array (BFF may return null)
+        setData({ ...json, results: json.results ?? [] });
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name !== "AbortError") {
+          setIsLoading(false);
+          setData({
+            query,
+            type: activeTypeParam,
+            results: [],
+            total: 0,
+            page: 1,
+            limit: 20,
+            total_pages: 0,
+          });
+        }
+      });
+
+    return () => controller.abort();
+  }, [debouncedQuery, activeTypeParam, urlTypeParam, currentPage, pushUrl]);
+
+  // Reset page to 1 when query or type changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedQuery, activeTypeParam]);
+
+  // Auto-focus the input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleTypeChange = (type: string) => {
+    if (type === "all") {
+      // "All" clears all individual selections
+      setSelectedTypes(new Set());
+    } else {
+      setSelectedTypes((prev) => {
+        const next = new Set(prev);
+        if (next.has(type)) {
+          // Deselect — if nothing left, goes back to "all"
+          next.delete(type);
+        } else {
+          next.add(type);
+        }
+        return next;
+      });
+    }
+  };
+
+  const isTypeActive = (type: string): boolean => {
+    if (type === "all") return selectedTypes.size === 0;
+    return selectedTypes.has(type);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Home
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
+        <p className="mt-1 text-muted-foreground">
+          Search across all of Śrīla Prabhupāda&apos;s books, letters, lectures,
+          and more
+        </p>
+      </PageHeader>
+
+      <main className="max-w-5xl mx-auto px-6 py-8">
+        {/* Search Input */}
+        <div className="relative">
+          <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground pointer-events-none" />
+          <Input
+            ref={inputRef}
+            type="search"
+            placeholder="Search for verses, letters, lectures, terms..."
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="h-14 pl-12 pr-4 text-lg rounded-xl"
+          />
+          {isLoading && (
+            <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground animate-spin" />
+          )}
+        </div>
+
+        {/* Content Type Tabs */}
+        <div className="mt-6 flex flex-wrap gap-2">
+          {CONTENT_TABS.map((tab) => {
+            const active = isTypeActive(tab.value);
+            return (
+              <button
+                key={tab.value}
+                onClick={() => handleTypeChange(tab.value)}
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+                  active
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
+                )}
+              >
+                {tab.label}
+                {data &&
+                  active &&
+                  selectedTypes.size <= 1 &&
+                  data.total > 0 && (
+                    <span
+                      className={cn(
+                        "ml-1 inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none",
+                        "bg-primary-foreground/20 text-primary-foreground",
+                      )}
+                    >
+                      {data.total.toLocaleString()}
+                    </span>
+                  )}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Results Area */}
+        <div className="mt-8">
+          {/* Loading */}
+          {isLoading && (
+            <div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
+              <Loader2 className="size-5 animate-spin" />
+              <span>Searching…</span>
+            </div>
+          )}
+
+          {/* No query */}
+          {!isLoading && !hasSearched && (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Search className="size-12 text-muted-foreground/40 mb-4" />
+              <p className="text-lg text-muted-foreground">
+                Search across all of Śrīla Prabhupāda&apos;s books, letters,
+                lectures, and more
+              </p>
+            </div>
+          )}
+
+          {/* No results */}
+          {!isLoading && hasSearched && data && data.results.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Search className="size-12 text-muted-foreground/40 mb-4" />
+              <p className="text-lg text-muted-foreground">
+                No results found for &ldquo;{debouncedQuery}&rdquo;.
+                <br />
+                <span className="text-sm">
+                  Try a different search term or content type.
+                </span>
+              </p>
+            </div>
+          )}
+
+          {/* Results */}
+          {!isLoading && data && data.results.length > 0 && (
+            <>
+              {/* Results count + top pagination */}
+              <div className="mb-4 flex items-center justify-between flex-wrap gap-3">
+                <p className="text-sm text-muted-foreground">
+                  {data.total.toLocaleString()}{" "}
+                  {data.total === 1 ? "result" : "results"} for &ldquo;
+                  {data.query}&rdquo;
+                </p>
+                {data.total_pages > 1 && (
+                  <PaginationControls
+                    page={data.page}
+                    totalPages={data.total_pages}
+                    onPageChange={handlePageChange}
+                    compact
+                  />
+                )}
+              </div>
+
+              {/* Result list */}
+              <div className="space-y-3">
+                {data.results.map((result, i) => (
+                  <ResultCard
+                    key={`${result.collection}-${result.id || i}`}
+                    result={result}
+                  />
+                ))}
+              </div>
+
+              {/* Bottom pagination */}
+              {data.total_pages > 1 && (
+                <div className="mt-8">
+                  <PaginationControls
+                    page={data.page}
+                    totalPages={data.total_pages}
+                    total={data.total}
+                    onPageChange={handlePageChange}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Pagination Controls
+// ---------------------------------------------------------------------------
+
+function PaginationControls({
+  page,
+  totalPages,
+  total,
+  onPageChange,
+  compact = false,
+}: {
+  page: number;
+  totalPages: number;
+  total?: number;
+  onPageChange: (page: number) => void;
+  compact?: boolean;
+}) {
+  if (compact) {
+    return (
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        <span className="text-xs text-muted-foreground tabular-nums">
+          {page} / {totalPages}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(page + 1)}
+          aria-label="Next page"
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <Button
+        variant="outline"
+        size="default"
+        disabled={page <= 1}
+        onClick={() => onPageChange(page - 1)}
+      >
+        <ChevronLeft className="size-4" />
+        Previous
+      </Button>
+
+      <span className="text-sm text-muted-foreground">
+        Page {page} of {totalPages}
+        {total != null && ` · ${total.toLocaleString()} results`}
+      </span>
+
+      <Button
+        variant="outline"
+        size="default"
+        disabled={page >= totalPages}
+        onClick={() => onPageChange(page + 1)}
+      >
+        Next
+        <ChevronRight className="size-4" />
+      </Button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Result Card
+// ---------------------------------------------------------------------------
+
+function ResultCard({ result }: { result: SearchResult }) {
+  const config = COLLECTION_CONFIG[result.collection] || {
+    label: result.collection,
+    icon: FileStack,
+    color: "bg-muted text-muted-foreground",
+  };
+  const Icon = config.icon;
+
+  return (
+    <Link href={result.url} className="block group">
+      <Card className="transition-all group-hover:shadow-md group-hover:ring-foreground/20 cursor-pointer">
+        <CardContent className="flex flex-col gap-2">
+          {/* Collection badge */}
+          <div className="flex items-center gap-2">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                config.color,
+              )}
+            >
+              <Icon className="size-3" />
+              {config.label}
+            </span>
+          </div>
+
+          {/* Title */}
+          <p className="text-base font-semibold text-foreground group-hover:text-primary transition-colors leading-snug">
+            {result.title}
+          </p>
+
+          {/* Snippet with highlighted matches */}
+          <p
+            className="text-sm text-muted-foreground leading-relaxed [&_mark]:bg-yellow-200/80 [&_mark]:text-foreground [&_mark]:rounded-sm [&_mark]:px-0.5 dark:[&_mark]:bg-yellow-500/30"
+            dangerouslySetInnerHTML={{ __html: result.snippet }}
+          />
+
+          {/* Meta information */}
+          <ResultMeta result={result} />
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Result Meta — varies by collection
+// ---------------------------------------------------------------------------
+
+function ResultMeta({ result }: { result: SearchResult }) {
+  const { collection, meta } = result;
+
+  if (!meta || Object.keys(meta).length === 0) return null;
+
+  let items: string[] = [];
+
+  switch (collection) {
+    case "verses":
+      if (meta.book) items.push(meta.book);
+      if (meta.reference) items.push(meta.reference);
+      break;
+    case "letters":
+      if (meta.date) items.push(meta.date);
+      if (meta.location) items.push(meta.location);
+      break;
+    case "transcriptions":
+      if (meta.type) items.push(meta.type);
+      if (meta.date) items.push(meta.date);
+      if (meta.place) items.push(meta.place);
+      break;
+    case "glossary":
+      if (meta.term) items.push(meta.term);
+      break;
+    case "prose":
+    case "essays":
+    case "journals":
+    case "magazines":
+    case "other_documents":
+      if (meta.book) items.push(meta.book);
+      break;
+    default:
+      // Show all meta values
+      items = Object.values(meta).filter(Boolean) as string[];
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {items.map((item, i) => (
+        <Badge key={i} variant="secondary" className="text-xs font-normal">
+          {item}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Exported wrapper with Suspense boundary
+// ---------------------------------------------------------------------------
+
+export function SearchContent() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-background">
+          <PageHeader>
+            <Link
+              href="/"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              &larr; Home
+            </Link>
+            <h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
+            <p className="mt-1 text-muted-foreground">
+              Search across all of Śrīla Prabhupāda&apos;s books, letters,
+              lectures, and more
+            </p>
+          </PageHeader>
+          <main className="max-w-5xl mx-auto px-6 py-8">
+            <div className="flex items-center justify-center py-16 text-muted-foreground">
+              <Loader2 className="size-5 animate-spin" />
+            </div>
+          </main>
+        </div>
+      }
+    >
+      <SearchInner />
+    </Suspense>
+  );
+}

components/header-search.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * HeaderSearchButton — a search icon in the page header that expands
+ * into a full search input on click. Typing a query and pressing Enter
+ * (or clicking the search icon again) navigates to /search?q=...
+ *
+ * The expansion/collapse is animated with framer-motion.
+ * Pressing Escape or clicking outside collapses the input.
+ * Keyboard shortcut: "/" focuses the search from anywhere on the page.
+ */
+export function HeaderSearchButton() {
+  const [expanded, setExpanded] = useState(false);
+  const [query, setQuery] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  // Focus input when expanded
+  useEffect(() => {
+    if (expanded && inputRef.current) {
+      // Small delay to let the animation start before focusing
+      const timer = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [expanded]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!expanded) return;
+
+    function handleClick(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setExpanded(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [expanded]);
+
+  // Global "/" shortcut to open search
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      // Don't trigger if user is typing in an input/textarea
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      if (e.key === "/") {
+        e.preventDefault();
+        setExpanded(true);
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = query.trim();
+    if (trimmed) {
+      router.push(`/search?q=${encodeURIComponent(trimmed)}`);
+      setExpanded(false);
+      setQuery("");
+    } else {
+      router.push("/search");
+      setExpanded(false);
+    }
+  }, [query, router]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setExpanded(false);
+        setQuery("");
+      }
+    },
+    [handleSubmit],
+  );
+
+  return (
+    <div ref={containerRef} className="relative flex items-center">
+      <AnimatePresence mode="wait">
+        {expanded ? (
+          <motion.div
+            key="search-input"
+            initial={{ width: 36, opacity: 0.8 }}
+            animate={{ width: 280, opacity: 1 }}
+            exit={{ width: 36, opacity: 0.8 }}
+            transition={{ type: "spring", damping: 25, stiffness: 350 }}
+            className="flex items-center gap-2 h-9 rounded-lg border border-border bg-background px-3 overflow-hidden"
+          >
+            <button
+              type="button"
+              onClick={handleSubmit}
+              aria-label="Search"
+              className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Search className="size-4" />
+            </button>
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search..."
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none min-w-0"
+            />
+            <button
+              type="button"
+              onClick={() => {
+                setExpanded(false);
+                setQuery("");
+              }}
+              aria-label="Close search"
+              className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <X className="size-3.5" />
+            </button>
+          </motion.div>
+        ) : (
+          <motion.button
+            key="search-icon"
+            initial={{ opacity: 0.8, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0.8, scale: 0.9 }}
+            transition={{ duration: 0.15 }}
+            type="button"
+            onClick={() => setExpanded(true)}
+            aria-label="Search (press /)"
+            title="Search (press /)"
+            className={cn(
+              "size-9 inline-flex items-center justify-center rounded-lg",
+              "text-muted-foreground hover:text-foreground hover:bg-muted",
+              "transition-colors outline-none",
+              "focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <Search className="size-[18px]" />
+          </motion.button>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/page-header.tsx

@@ -1,4 +1,5 @@
 import { ReadingSettings } from "@/components/reading-settings";
+import { HeaderSearchButton } from "@/components/header-search";
 import { cn } from "@/lib/utils";
 
 export function PageHeader({
@@ -20,7 +21,8 @@ export function PageHeader({
     >
       <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
         <div className="flex-1 min-w-0">{children}</div>
-        <div className="shrink-0 pt-1">
+        <div className="shrink-0 pt-1 flex items-center gap-1.5">
+          <HeaderSearchButton />
           <ReadingSettings />
         </div>
       </div>

lib/api.ts

@@ -397,5 +397,17 @@ export async function getProseChapter(
  * Get all glossary entries, ordered alphabetically by term.
  */
 export async function getAllGlossaryEntries(): Promise<GlossaryRecord[]> {
-  return bffList<GlossaryRecord>("/glossary", { tags: ["glossary"] });
+  const raw = await bffList<{
+    id: string;
+    term: string;
+    definition: string;
+    definition_html: string;
+  }>("/glossary", { tags: ["glossary"] });
+
+  return raw.map((entry) => ({
+    id: entry.id,
+    term: entry.term,
+    definition: entry.definition,
+    definitionHtml: entry.definition_html ?? entry.definition,
+  }));
 }

lib/books.ts

@@ -287,8 +287,38 @@ export async function getSidebarItems(code: string): Promise<SidebarItem[]> {
     }
   }
 
+  // Hierarchical books (SVA, SSR, DS) — chapters have nested subChapters
+  const hasHierarchical =
+    meta.chapters &&
+    meta.chapters.length > 0 &&
+    meta.chapters.some((ch) => ch.subChapters && ch.subChapters.length > 0);
+
+  if (hasHierarchical && meta.chapters) {
+    for (const ch of meta.chapters) {
+      // Parent chapter heading (not navigable on its own)
+      items.push({
+        slug: `parent-${ch.number}`,
+        label: `${ch.number}. ${ch.title}`,
+        type: "parent",
+        chapter: ch.number,
+        parentChapter: ch.number,
+      });
+      // Sub-chapters
+      if (ch.subChapters) {
+        for (const sub of ch.subChapters) {
+          items.push({
+            slug: sub.slug,
+            label: sub.title,
+            type: "sub-chapter",
+            chapter: ch.number,
+            parentChapter: ch.number,
+          });
+        }
+      }
+    }
+  }
   // Chapters — if parts exist, group chapters under part headers
-  if (
+  else if (
     meta.parts &&
     meta.parts.length > 0 &&
     meta.chapters &&