danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add table of contents for chapter navigation

Browse source 
Added table of contents modal for documents with multiple chapters:

New Features:
- TableOfContents component with modal dialog
- List icon button in chapter navigation bar
- Click any chapter to jump directly to it
- Current chapter highlighted in the list
- Scrollable list for books with many chapters
- Clean modal UI with transitions

Benefits:
- Quick navigation for large documents with many chapters
- Better UX for series/textbooks with 10+ chapters
- No need to click Previous/Next repeatedly
- Shows all chapter titles at a glance

Technical Details:
- Uses Headless UI Dialog for accessibility
- Integrates with existing goToChapter function
- Matches existing design system and styling
- Added to HTMLViewer chapter navigation bar
This commit is contained in:
Claude 2026-01-11 05:16:57 +00:00
parent 48b3a010fc
commit b65ebd1d51
No known key found for this signature in database
2 changed files with 138 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/HTMLViewer.tsx
View file

@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useHTML } from '@/contexts/HTMLContext';
import { DocumentSkeleton } from '@/components/DocumentSkeleton';
import { TableOfContents } from '@/components/TableOfContents';
interface HTMLViewerProps {
className?: string;
@ -19,6 +20,7 @@ export function HTMLViewer({ className = '' }: HTMLViewerProps) {
totalChapters,
goToNextChapter,
goToPreviousChapter,
goToChapter,
} = useHTML();
const containerRef = useRef<HTMLDivElement>(null);
@ -48,13 +50,20 @@ export function HTMLViewer({ className = '' }: HTMLViewerProps) {
Previous
</button>
<div className="flex items-center gap-2">
<span className="text-sm text-foreground font-medium">
{currentChapter?.title || `Chapter ${currentChapterIndex + 1}`}
</span>
<span className="text-xs text-muted">
({currentChapterIndex + 1} of {totalChapters})
</span>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<span className="text-sm text-foreground font-medium">
{currentChapter?.title || `Chapter ${currentChapterIndex + 1}`}
</span>
<span className="text-xs text-muted">
({currentChapterIndex + 1} of {totalChapters})
</span>
</div>
<TableOfContents
chapters={chapters}
currentChapterIndex={currentChapterIndex}
onChapterSelect={goToChapter}
/>
</div>
<button

122
src/components/TableOfContents.tsx Normal file
View file

@ -0,0 +1,122 @@
'use client';
import { Fragment, useState } from 'react';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { ListIcon } from '@/components/icons/Icons';
import type { Chapter } from '@/lib/chapterDetection';
interface TableOfContentsProps {
chapters: Chapter[];
currentChapterIndex: number;
onChapterSelect: (index: number) => void;
}
export function TableOfContents({ chapters, currentChapterIndex, onChapterSelect }: TableOfContentsProps) {
const [isOpen, setIsOpen] = useState(false);
const handleChapterClick = (index: number) => {
onChapterSelect(index);
setIsOpen(false);
};
return (
<>
{/* Table of Contents Button */}
<button
onClick={() => setIsOpen(true)}
className="inline-flex items-center px-3 py-1 text-sm rounded-md border border-muted bg-base text-foreground hover:bg-offbase transition-all duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
aria-label="Table of contents"
title="Table of contents"
>
<ListIcon className="w-4 h-4" />
</button>
{/* Table of Contents Modal */}
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
role={undefined}
className="relative z-50"
onClose={() => setIsOpen(false)}
>
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 overlay-dim backdrop-blur-sm" />
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<DialogPanel role='dialog' className="w-full max-w-2xl transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle
as="h3"
className="text-lg font-semibold leading-6 text-foreground mb-4"
>
Table of Contents
</DialogTitle>
{/* Chapters List */}
<div className="mt-4 max-h-[60vh] overflow-y-auto">
<div className="space-y-2">
{chapters.map((chapter, index) => (
<button
key={index}
onClick={() => handleChapterClick(index)}
className={`w-full text-left px-4 py-3 rounded-lg transition-all duration-200 ease-in-out
${index === currentChapterIndex
? 'bg-accent text-background font-medium'
: 'bg-offbase text-foreground hover:bg-muted hover:text-accent hover:scale-[1.02]'
}`}
>
<div className="flex items-center justify-between">
<div className="flex-1">
<div className="font-medium">
{chapter.title}
</div>
</div>
<div className="text-sm opacity-70 ml-2">
{index + 1} / {chapters.length}
</div>
</div>
</button>
))}
</div>
</div>
{/* Close Button */}
<div className="mt-6 flex justify-end">
<button
type="button"
className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm
font-medium text-foreground hover:bg-offbase focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
onClick={() => setIsOpen(false)}
>
Close
</button>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</Transition>
</>
);
}