fix: update glossary UI

app/glossary/[letter]/page.tsx

@@ -0,0 +1,106 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getAllGlossaryEntries } from "@/lib/api";
+import { buildOgMeta } from "@/lib/og";
+import { GlossaryClient } from "../glossary-client";
+
+// ---------------------------------------------------------------------------
+// Diacritic → base letter mapping
+// ---------------------------------------------------------------------------
+
+const DIACRITIC_TO_BASE: Record<string, string> = {
+  Ā: "A", Ä: "A",
+  Ī: "I", É: "I",
+  Ū: "U", Ü: "U",
+  Ṛ: "R", Ṝ: "R",
+  Ś: "S", Ç: "S", Ṣ: "S",
+  Ñ: "N", Ṇ: "N", Ṅ: "N",
+  Ṭ: "T",
+  Ḍ: "D",
+  Ḥ: "H",
+};
+
+function getBaseLetter(term: string): string {
+  if (!term) return "?";
+  const first = term[0].toUpperCase();
+  return DIACRITIC_TO_BASE[first] || first;
+}
+
+// ---------------------------------------------------------------------------
+// Metadata
+// ---------------------------------------------------------------------------
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ letter: string }>;
+}): Promise<Metadata> {
+  const { letter } = await params;
+  const l = letter.toUpperCase();
+  return buildOgMeta({
+    title: `Glossary — ${l}`,
+    detail: `Sanskrit & Vedic terms starting with ${l}`,
+    quote:
+      "A comprehensive glossary of Sanskrit and Vedic terms from the books of Śrīla Prabhupāda.",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export default async function GlossaryLetterPage({
+  params,
+}: {
+  params: Promise<{ letter: string }>;
+}) {
+  const { letter: rawLetter } = await params;
+  const activeLetter = rawLetter.toUpperCase();
+
+  // Validate — single letter A-Z
+  if (!/^[A-Z]$/.test(activeLetter)) notFound();
+
+  // Fetch all entries (cached by Next.js request dedup within a single render)
+  const allEntries = await getAllGlossaryEntries();
+
+  // Group all entries by base letter
+  const byLetter: Record<string, typeof allEntries> = {};
+  for (const entry of allEntries) {
+    const base = getBaseLetter(entry.term);
+    if (!byLetter[base]) byLetter[base] = [];
+    byLetter[base].push(entry);
+  }
+
+  // All available letters (sorted)
+  const letters = Object.keys(byLetter).sort();
+
+  // Entries for the active letter
+  const letterEntries = byLetter[activeLetter] || [];
+  if (letterEntries.length === 0) notFound();
+
+  // Prepare client data — only the active letter's entries
+  const clientEntries = letterEntries.map((e) => ({
+    term: e.term,
+    definition: e.definition,
+    definition_html: e.definitionHtml,
+  }));
+
+  // Letter counts for the nav
+  const letterCounts: Record<string, number> = {};
+  for (const [l, entries] of Object.entries(byLetter)) {
+    letterCounts[l] = entries.length;
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <GlossaryClient
+        entries={clientEntries}
+        activeLetter={activeLetter}
+        letters={letters}
+        letterCounts={letterCounts}
+      />
+    </div>
+  );
+}

app/glossary/glossary-client.tsx

@@ -1,11 +1,25 @@
 "use client";
 
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
-import { Search, X } from "lucide-react";
+import Link from "next/link";
+import { Search, X, Menu, ChevronLeft, ChevronRight } from "lucide-react";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { ReadingSettings } from "@/components/reading-settings";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
 
 type GlossaryEntry = {
   term: string;
@@ -13,42 +27,17 @@ type GlossaryEntry = {
   definition_html: string;
 };
 
-type GlossaryData = {
+type Props = {
-  title: string;
-  description: string;
-  totalEntries: number;
-  letters: string[];
   entries: GlossaryEntry[];
+  activeLetter: string;
+  letters: string[];
+  letterCounts: Record<string, number>;
 };
 
-// Map diacritical first characters to base letters for grouping
+// ---------------------------------------------------------------------------
-const DIACRITIC_TO_BASE: Record<string, string> = {
+// Normalize for search
-  Ā: "A",
+// ---------------------------------------------------------------------------
-  Ä: "A",
-  Ī: "I",
-  É: "I",
-  Ū: "U",
-  Ü: "U",
-  Ṛ: "R",
-  Ṝ: "R",
-  Ś: "S",
-  Ç: "S",
-  Ṣ: "S",
-  Ñ: "N",
-  Ṇ: "N",
-  Ṅ: "N",
-  Ṭ: "T",
-  Ḍ: "D",
-  Ḥ: "H",
-};
 
-function getBaseLetter(term: string): string {
-  if (!term) return "?";
-  const first = term[0].toUpperCase();
-  return DIACRITIC_TO_BASE[first] || first;
-}
-
-// Normalize a string for search matching (strip diacritics, lowercase)
 function normalizeForSearch(text: string): string {
   return text
     .normalize("NFD")
@@ -56,249 +45,437 @@ function normalizeForSearch(text: string): string {
     .toLowerCase();
 }
 
-export function GlossaryClient({ data }: { data: GlossaryData }) {
+// ---------------------------------------------------------------------------
-  const [query, setQuery] = useState("");
+// Letter Navigation — horizontal row matching disciples pattern
-  const [activeLetter, setActiveLetter] = useState<string | null>(null);
+// ---------------------------------------------------------------------------
-  const letterRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-  const normalizedQuery = useMemo(() => normalizeForSearch(query), [query]);
+function LetterNav({
+  letters,
+  activeLetter,
+  letterCounts,
+}: {
+  letters: string[];
+  activeLetter: string;
+  letterCounts: Record<string, number>;
+}) {
+  return (
+    <nav className="flex flex-wrap gap-1 justify-center">
+      {letters.map((letter) => {
+        const count = letterCounts[letter] ?? 0;
+        const isActive = letter === activeLetter;
+        const isEmpty = count === 0;
 
-  // Group entries by letter
-  const groupedEntries = useMemo(() => {
-    const groups: Record<string, GlossaryEntry[]> = {};
-    for (const entry of data.entries) {
-      const letter = getBaseLetter(entry.term);
-      if (!groups[letter]) groups[letter] = [];
-      groups[letter].push(entry);
-    }
-    return groups;
-  }, [data.entries]);
-
-  // Filtered entries
-  const filteredGroups = useMemo(() => {
-    if (!normalizedQuery) return groupedEntries;
-
-    const result: Record<string, GlossaryEntry[]> = {};
-    for (const [letter, entries] of Object.entries(groupedEntries)) {
-      const filtered = entries.filter((e) => {
-        const normTerm = normalizeForSearch(e.term);
-        const normDef = normalizeForSearch(e.definition);
         return (
-          normTerm.includes(normalizedQuery) ||
+          <Link
-          normDef.includes(normalizedQuery)
+            key={letter}
+            href={`/glossary/${letter.toLowerCase()}`}
+            className={cn(
+              "relative flex flex-col items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors min-w-9",
+              isActive
+                ? "bg-primary text-primary-foreground shadow-sm"
+                : isEmpty
+                  ? "text-muted-foreground/40 cursor-default"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            <span className="leading-none">{letter}</span>
+          </Link>
         );
-      });
+      })}
-      if (filtered.length > 0) {
+    </nav>
-        result[letter] = filtered;
-      }
-    }
-    return result;
-  }, [groupedEntries, normalizedQuery]);
-
-  const filteredCount = useMemo(
-    () => Object.values(filteredGroups).reduce((sum, g) => sum + g.length, 0),
-    [filteredGroups],
   );
+}
 
-  const sortedLetters = useMemo(
+// ---------------------------------------------------------------------------
-    () => Object.keys(filteredGroups).sort(),
+// Sidebar (desktop) — shows terms for active letter only
-    [filteredGroups],
+// ---------------------------------------------------------------------------
-  );
 
-  // Scroll to letter
+function TermSidebar({
-  function scrollToLetter(letter: string) {
+  terms,
-    setActiveLetter(letter);
+  activeTerm,
-    const el = letterRefs.current[letter];
+  filteredTerms,
-    if (el) {
+  onSelectTerm,
-      el.scrollIntoView({ behavior: "smooth", block: "start" });
+}: {
-    }
+  terms: string[];
-  }
+  activeTerm: string;
+  filteredTerms: string[] | null;
+  onSelectTerm: (term: string) => void;
+}) {
+  const activeRef = useRef<HTMLButtonElement>(null);
 
-  // Track active letter on scroll via IntersectionObserver
   useEffect(() => {
-    const observer = new IntersectionObserver(
+    activeRef.current?.scrollIntoView({ block: "nearest" });
-      (entries) => {
+  }, [activeTerm]);
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const letter = entry.target.getAttribute("data-letter");
-            if (letter) setActiveLetter(letter);
-          }
-        }
-      },
-      { rootMargin: "-20% 0px -70% 0px" },
-    );
 
-    const sections = document.querySelectorAll("[data-letter]");
+  const displayTerms = filteredTerms ?? terms;
-    sections.forEach((el) => observer.observe(el));
-
-    return () => observer.disconnect();
-  }, [sortedLetters]);
 
   return (
-    <div className="flex flex-col gap-6">
+    <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
-      {/* Search bar */}
+      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
-      <div className="sticky top-0 z-10 bg-background py-4">
+        Terms
-        <div className="relative">
+      </h2>
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+      <nav className="flex flex-col gap-0.5">
-          <Input
+        {displayTerms.map((term) => {
-            type="text"
+          const isActive = term === activeTerm;
-            placeholder="Search glossary…"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            className="pl-10 pr-10"
-          />
-          {query && (
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              className="absolute right-2 top-1/2 -translate-y-1/2"
-              onClick={() => setQuery("")}
-              aria-label="Clear search"
-            >
-              <X className="size-3.5" />
-            </Button>
-          )}
-        </div>
-        <p className="mt-2 text-sm text-muted-foreground">
-          {query
-            ? `${filteredCount.toLocaleString()} result${filteredCount !== 1 ? "s" : ""} for "${query}"`
-            : `${data.totalEntries.toLocaleString()} entries`}
-        </p>
-      </div>
-
-      {/* Letter navigation */}
-      <div className="flex flex-wrap gap-1">
-        {data.letters.map((letter) => {
-          const hasResults = letter in filteredGroups;
           return (
             <button
-              key={letter}
+              key={term}
-              disabled={!hasResults}
+              ref={isActive ? activeRef : undefined}
-              onClick={() => scrollToLetter(letter)}
+              onClick={() => onSelectTerm(term)}
-              className={`inline-flex items-center justify-center size-8 rounded-md text-sm font-medium transition-colors ${
+              className={cn(
-                activeLetter === letter
+                "px-2 py-1.5 rounded-md text-sm transition-colors truncate text-left",
-                  ? "bg-primary/10 text-primary"
+                isActive
-                  : hasResults
+                  ? "bg-primary/10 text-primary font-medium"
-                    ? "text-foreground hover:bg-muted"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                    : "text-muted-foreground/40 cursor-not-allowed"
+              )}
-              }`}
+              title={term}
             >
-              {letter}
+              {term}
             </button>
           );
         })}
-      </div>
+        {displayTerms.length === 0 && (
-
+          <p className="px-2 py-4 text-sm text-muted-foreground">No matches</p>
-      {/* Entries grouped by letter */}
-      <div ref={scrollContainerRef} className="space-y-8">
-        {sortedLetters.length === 0 && (
-          <div className="text-center py-12 text-muted-foreground">
-            No entries match your search.
-          </div>
         )}
+      </nav>
+    </aside>
+  );
+}
 
-        {sortedLetters.map((letter) => (
+// ---------------------------------------------------------------------------
-          <div
+// Mobile drawer
-            key={letter}
+// ---------------------------------------------------------------------------
-            ref={(el) => {
-              letterRefs.current[letter] = el;
-            }}
-            data-letter={letter}
-            className="scroll-mt-40"
-          >
-            {/* Letter heading */}
-            <div className="sticky top-[92px] md:top-[84px] z-5 bg-background py-2 border-b border-border mb-3">
-              <Badge variant="secondary" className="text-base px-3 py-0.5">
-                {letter}
-              </Badge>
-              <span className="ml-2 text-sm text-muted-foreground">
-                {filteredGroups[letter].length} entr
-                {filteredGroups[letter].length === 1 ? "y" : "ies"}
-              </span>
-            </div>
 
-            {/* Entry cards */}
+function TermMobileNav({
-            <div className="space-y-2 px-1">
+  terms,
-              {filteredGroups[letter].map((entry) => (
+  activeTerm,
-                <Card key={entry.term} size="sm">
+  filteredTerms,
-                  <CardContent className="py-3">
+  onSelectTerm,
-                    <dt className="font-semibold text-foreground">
+  activeLetter,
-                      {highlightMatch(entry.term, query)}
+}: {
-                    </dt>
+  terms: string[];
-                    <dd
+  activeTerm: string;
-                      className="mt-1 text-base text-foreground leading-relaxed"
+  filteredTerms: string[] | null;
-                      dangerouslySetInnerHTML={{
+  onSelectTerm: (term: string) => void;
-                        __html: query
+  activeLetter: string;
-                          ? highlightHtml(entry.definition_html, query)
+}) {
-                          : entry.definition_html,
+  const [open, setOpen] = useState(false);
-                      }}
+  const displayTerms = filteredTerms ?? terms;
-                    />
+
-                  </CardContent>
+  return (
-                </Card>
+    <Drawer open={open} onOpenChange={setOpen} direction="left">
-              ))}
+      <DrawerTrigger
-            </div>
+        className={cn(
+          buttonVariants({ variant: "outline", size: "sm" }),
+          "lg:hidden gap-1.5",
+        )}
+      >
+        <Menu className="size-4" />
+        <span className="hidden sm:inline">Terms</span>
+      </DrawerTrigger>
+      <DrawerContent direction="left" className="h-full">
+        <DrawerHeader className="text-left border-b border-border pb-4 mb-2">
+          <DrawerTitle>Glossary — {activeLetter}</DrawerTitle>
+        </DrawerHeader>
+        <nav className="overflow-y-auto px-4 pb-6 pt-2">
+          <div className="flex flex-col gap-0.5">
+            {displayTerms.map((term) => {
+              const isActive = term === activeTerm;
+              return (
+                <DrawerClose key={term} asChild>
+                  <button
+                    onClick={() => {
+                      onSelectTerm(term);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      "px-2 py-2 rounded-md text-sm transition-colors truncate text-left",
+                      isActive
+                        ? "bg-primary/10 text-primary font-medium"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    )}
+                  >
+                    {term}
+                  </button>
+                </DrawerClose>
+              );
+            })}
           </div>
-        ))}
+        </nav>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Prev / Next nav — matches BbdNav pattern
+// ---------------------------------------------------------------------------
+
+function TermNav({
+  prev,
+  next,
+  terms,
+  activeTerm,
+  filteredTerms,
+  onSelectTerm,
+  activeLetter,
+}: {
+  prev: string | null;
+  next: string | null;
+  terms: string[];
+  activeTerm: string;
+  filteredTerms: string[] | null;
+  onSelectTerm: (term: string) => void;
+  activeLetter: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2">
+        <TermMobileNav
+          terms={terms}
+          activeTerm={activeTerm}
+          filteredTerms={filteredTerms}
+          onSelectTerm={onSelectTerm}
+          activeLetter={activeLetter}
+        />
+
+        {prev ? (
+          <button
+            onClick={() => onSelectTerm(prev)}
+            className={cn(
+              buttonVariants({ variant: "outline", size: "sm" }),
+              "gap-1.5",
+            )}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="hidden sm:inline truncate max-w-[180px]">
+              {prev}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </button>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
       </div>
+
+      {next ? (
+        <button
+          onClick={() => onSelectTerm(next)}
+          className={cn(
+            buttonVariants({ variant: "outline", size: "sm" }),
+            "gap-1.5",
+          )}
+        >
+          <span className="hidden sm:inline truncate max-w-[180px]">
+            {next}
+          </span>
+          <span className="sm:hidden">Next</span>
+          <ChevronRight className="size-4" />
+        </button>
+      ) : (
+        <div />
+      )}
     </div>
   );
 }
 
-/**
+// ---------------------------------------------------------------------------
- * Highlight matching parts of plain text (for the term).
+// Main component
- */
+// ---------------------------------------------------------------------------
-function highlightMatch(text: string, query: string): React.ReactNode {
-  if (!query) return text;
 
-  const normalizedText = normalizeForSearch(text);
+export function GlossaryClient({
-  const normalizedQuery = normalizeForSearch(query);
+  entries,
-  const index = normalizedText.indexOf(normalizedQuery);
+  activeLetter,
+  letters,
+  letterCounts,
+}: Props) {
+  const [query, setQuery] = useState("");
+  const [activeTermRaw, setActiveTerm] = useState(entries[0]?.term || "");
+  const contentRef = useRef<HTMLDivElement>(null);
 
-  if (index === -1) return text;
+  // All term names
+  const allTerms = useMemo(() => entries.map((e) => e.term), [entries]);
 
-  // Map the index in normalized text back to original text
+  // Term → entry index map
-  const before = text.slice(0, index);
+  const termIndex = useMemo(() => {
-  const match = text.slice(index, index + query.length);
+    const map = new Map<string, number>();
-  const after = text.slice(index + query.length);
+    entries.forEach((e, i) => map.set(e.term, i));
+    return map;
+  }, [entries]);
+
+  // Search filter
+  const searchResults = useMemo(() => {
+    if (!query.trim()) return null;
+    const q = normalizeForSearch(query.trim());
+    return entries
+      .filter((e) => {
+        const normTerm = normalizeForSearch(e.term);
+        const normDef = normalizeForSearch(e.definition);
+        return normTerm.includes(q) || normDef.includes(q);
+      })
+      .map((e) => e.term);
+  }, [entries, query]);
+
+  // Safe activeTerm — if search is active and current term isn't in results, use first result
+  const activeTerm = useMemo(() => {
+    if (
+      searchResults &&
+      searchResults.length > 0 &&
+      !searchResults.includes(activeTermRaw)
+    ) {
+      return searchResults[0];
+    }
+    return activeTermRaw;
+  }, [searchResults, activeTermRaw]);
+
+  // Navigation list — search results or all terms
+  const navList = useMemo(() => {
+    return searchResults ?? allTerms;
+  }, [searchResults, allTerms]);
+
+  // Prev / next within nav list
+  const currentIdx = navList.indexOf(activeTerm);
+  const prev = currentIdx > 0 ? navList[currentIdx - 1] : null;
+  const next =
+    currentIdx >= 0 && currentIdx < navList.length - 1
+      ? navList[currentIdx + 1]
+      : null;
+
+  // Active entry data
+  const activeEntry = useMemo(() => {
+    const idx = termIndex.get(activeTerm);
+    return idx !== undefined ? entries[idx] : null;
+  }, [entries, termIndex, activeTerm]);
+
+  const handleSelectTerm = useCallback((term: string) => {
+    setActiveTerm(term);
+    contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
 
   return (
     <>
-      {before}
+      {/* Sticky header */}
-      <mark className="bg-primary/20 text-foreground rounded-sm px-0.5">
+      <header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
-        {match}
+        <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
-      </mark>
+          <div className="flex-1 min-w-0">
-      {after}
+            <Link
+              href="/"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              &larr; Home
+            </Link>
+            <h1 className="mt-3 text-2xl font-bold text-foreground">
+              <span className="text-primary">Glossary: </span>
+              {activeEntry?.term || activeLetter}
+            </h1>
+          </div>
+          <div className="shrink-0 pt-1">
+            <ReadingSettings />
+          </div>
+        </div>
+      </header>
+
+      {/* Letter navigation row */}
+      <div className="border-b border-border bg-card px-6 py-3">
+        <div className="max-w-5xl mx-auto">
+          <LetterNav
+            letters={letters}
+            activeLetter={activeLetter}
+            letterCounts={letterCounts}
+          />
+        </div>
+      </div>
+
+      {/* Sidebar + Main */}
+      <div className="max-w-5xl mx-auto flex">
+        {/* Sidebar — terms for active letter */}
+        <TermSidebar
+          terms={allTerms}
+          activeTerm={activeTerm}
+          filteredTerms={searchResults}
+          onSelectTerm={handleSelectTerm}
+        />
+
+        {/* Main content */}
+        <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
+          {/* Search bar */}
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder={`Search within ${activeLetter}...`}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="pl-10 pr-10"
+            />
+            {query && (
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                className="absolute right-2 top-1/2 -translate-y-1/2"
+                onClick={() => setQuery("")}
+                aria-label="Clear search"
+              >
+                <X className="size-3.5" />
+              </Button>
+            )}
+          </div>
+
+          {/* Top nav */}
+          <TermNav
+            prev={prev}
+            next={next}
+            terms={allTerms}
+            activeTerm={activeTerm}
+            filteredTerms={searchResults}
+            onSelectTerm={handleSelectTerm}
+            activeLetter={activeLetter}
+          />
+
+          {/* Search hint */}
+          {searchResults && (
+            <p className="text-sm text-muted-foreground">
+              {searchResults.length === 0
+                ? "No entries match your search."
+                : `${searchResults.length} result${searchResults.length !== 1 ? "s" : ""} for "${query}"`}
+            </p>
+          )}
+
+          {/* Single entry view */}
+          {activeEntry ? (
+            <Card>
+              <CardContent className="py-8 px-6 sm:px-8">
+                <div className="space-y-4">
+                  <h2 className="text-2xl font-bold text-foreground">
+                    {activeEntry.term}
+                  </h2>
+                  <div
+                    className="text-base text-foreground leading-relaxed"
+                    dangerouslySetInnerHTML={{
+                      __html: activeEntry.definition_html,
+                    }}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="py-12 text-center text-muted-foreground">
+              <p className="text-lg font-medium">No entry selected</p>
+            </div>
+          )}
+
+          {/* Bottom nav */}
+          <TermNav
+            prev={prev}
+            next={next}
+            terms={allTerms}
+            activeTerm={activeTerm}
+            filteredTerms={searchResults}
+            onSelectTerm={handleSelectTerm}
+            activeLetter={activeLetter}
+          />
+        </main>
+      </div>
     </>
   );
 }
-
-/**
- * Highlight matching parts inside an HTML string (for definitions).
- * Only highlights within text nodes, not inside HTML tags.
- */
-function highlightHtml(html: string, query: string): string {
-  if (!query) return html;
-
-  const normalizedQuery = normalizeForSearch(query);
-  if (!normalizedQuery) return html;
-
-  // Split by HTML tags, only highlight in text nodes
-  const parts = html.split(/(<[^>]+>)/);
-  return parts
-    .map((part) => {
-      // Skip HTML tags
-      if (part.startsWith("<")) return part;
-
-      // Try to find and highlight match in text content
-      const normalizedPart = normalizeForSearch(part);
-      const index = normalizedPart.indexOf(normalizedQuery);
-      if (index === -1) return part;
-
-      const before = part.slice(0, index);
-      const match = part.slice(index, index + query.length);
-      const after = part.slice(index + query.length);
-      return `${before}<mark class="bg-primary/20 text-foreground rounded-sm px-0.5">${match}</mark>${after}`;
-    })
-    .join("");
-}

app/glossary/page.tsx

@@ -1,8 +1,5 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import { redirect } from "next/navigation";
-import { PageHeader } from "@/components/page-header";
-import { GlossaryClient } from "./glossary-client";
-import { getAllGlossaryEntries } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 
 export function generateMetadata(): Metadata {
@@ -14,48 +11,7 @@ export function generateMetadata(): Metadata {
   });
 }
 
-export default async function GlossaryPage() {
+// Redirect /glossary to /glossary/a
-  const entries = await getAllGlossaryEntries();
+export default function GlossaryPage() {
-
+  redirect("/glossary/a");
-  const letters = Array.from(
-    new Set(
-      entries
-        .map((e) => e.term.charAt(0).toUpperCase())
-        .filter((ch) => ch.length > 0),
-    ),
-  ).sort();
-
-  const data = {
-    title: "Glossary",
-    description:
-      "Sanskrit and Bengali terms used in the books of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda.",
-    totalEntries: entries.length,
-    letters,
-    entries: entries.map((e) => ({
-      term: e.term,
-      definition: e.definition,
-      definition_html: e.definitionHtml,
-    })),
-  };
-
-  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">
-          {data.title}
-        </h1>
-        <p className="mt-1 text-muted-foreground">{data.description}</p>
-      </PageHeader>
-
-      <main className="max-w-5xl mx-auto px-6 py-8">
-        <GlossaryClient data={data} />
-      </main>
-    </div>
-  );
 }