515 lines
16 KiB
TypeScript
515 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo, useRef, useEffect, useCallback } from "react";
|
|
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";
|
|
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;
|
|
definition: string;
|
|
definition_html: string;
|
|
};
|
|
|
|
type Props = {
|
|
entries: GlossaryEntry[];
|
|
activeLetter: string;
|
|
letters: string[];
|
|
letterCounts: Record<string, number>;
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Normalize for search
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function normalizeForSearch(text: string): string {
|
|
return text
|
|
.normalize("NFD")
|
|
.replace(/[\u0300-\u036f]/g, "")
|
|
.toLowerCase();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Letter Navigation — horizontal row matching disciples pattern
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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;
|
|
|
|
return (
|
|
<Link
|
|
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>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sidebar (desktop) — shows terms for active letter only
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function TermSidebar({
|
|
terms,
|
|
activeTerm,
|
|
filteredTerms,
|
|
onSelectTerm,
|
|
}: {
|
|
terms: string[];
|
|
activeTerm: string;
|
|
filteredTerms: string[] | null;
|
|
onSelectTerm: (term: string) => void;
|
|
}) {
|
|
const activeRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
activeRef.current?.scrollIntoView({ block: "nearest" });
|
|
}, [activeTerm]);
|
|
|
|
const displayTerms = filteredTerms ?? terms;
|
|
|
|
return (
|
|
<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">
|
|
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
|
|
Terms
|
|
</h2>
|
|
<nav className="flex flex-col gap-0.5">
|
|
{displayTerms.map((term) => {
|
|
const isActive = term === activeTerm;
|
|
return (
|
|
<button
|
|
key={term}
|
|
ref={isActive ? activeRef : undefined}
|
|
onClick={() => onSelectTerm(term)}
|
|
className={cn(
|
|
"px-2 py-1.5 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",
|
|
)}
|
|
title={term}
|
|
>
|
|
{term}
|
|
</button>
|
|
);
|
|
})}
|
|
{displayTerms.length === 0 && (
|
|
<p className="px-2 py-4 text-sm text-muted-foreground">No matches</p>
|
|
)}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Mobile drawer
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function TermMobileNav({
|
|
terms,
|
|
activeTerm,
|
|
filteredTerms,
|
|
onSelectTerm,
|
|
activeLetter,
|
|
}: {
|
|
terms: string[];
|
|
activeTerm: string;
|
|
filteredTerms: string[] | null;
|
|
onSelectTerm: (term: string) => void;
|
|
activeLetter: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const displayTerms = filteredTerms ?? terms;
|
|
|
|
return (
|
|
<Drawer open={open} onOpenChange={setOpen} direction="left">
|
|
<DrawerTrigger
|
|
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>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function GlossaryClient({
|
|
entries,
|
|
activeLetter,
|
|
letters,
|
|
letterCounts,
|
|
}: Props) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [query, setQuery] = useState("");
|
|
|
|
// 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
|
|
const allTerms = useMemo(() => entries.map((e) => e.term), [entries]);
|
|
|
|
// Term → entry index map
|
|
const termIndex = useMemo(() => {
|
|
const map = new Map<string, number>();
|
|
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]);
|
|
|
|
// Update URL with ?term= when active term changes (for OG + shareable links)
|
|
useEffect(() => {
|
|
const url = new URL(window.location.href);
|
|
if (activeTerm) {
|
|
url.searchParams.set("term", activeTerm);
|
|
} else {
|
|
url.searchParams.delete("term");
|
|
}
|
|
window.history.replaceState({}, "", url.toString());
|
|
}, [activeTerm]);
|
|
|
|
const handleSelectTerm = useCallback((term: string) => {
|
|
setActiveTerm(term);
|
|
contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{/* Sticky header */}
|
|
<header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
|
|
<div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
← 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>
|
|
</>
|
|
);
|
|
}
|