Table of Contents

1'use client'
2 
3import { useState, useEffect, useRef, useCallback, type RefObject } from 'react'
4import { motion, AnimatePresence, useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { playHoverSound, playClickSound } from '@/lib/sound'
7import { CircularProgress } from './circular-progress'
8 
9export interface TOCSection {
10  id: string
11  title: string
12  level?: number
13}
14 
15interface TableOfContentsProps {
16  sections: TOCSection[]
17  scrollOffset?: number
18  showAfterScroll?: number
19  scrollContainer?: RefObject<HTMLElement | null>
20  className?: string
21}
22 
23export function TableOfContents({
24  sections,
25  scrollOffset = 120,
26  showAfterScroll = 300,
27  scrollContainer,
28  className,
29}: TableOfContentsProps) {
30  const [isExpanded, setIsExpanded] = useState(false)
31  const [isVisible, setIsVisible] = useState(false)
32  const [activeId, setActiveId] = useState<string>('')
33  const [scrollProgress, setScrollProgress] = useState(0)
34  const containerRef = useRef<HTMLDivElement>(null)
35  const rafRef = useRef<number>(0)
36  const prefersReduced = useReducedMotion()
37 
38  useEffect(() => {
39    let ticking = false
40    const el = scrollContainer?.current
41 
42    const getScrollTop = () => (el ? el.scrollTop : window.scrollY)
43    const getScrollHeight = () =>
44      el
45        ? el.scrollHeight - el.clientHeight
46        : document.documentElement.scrollHeight - window.innerHeight
47 
48    const handleScroll = () => {
49      if (!ticking) {
50        rafRef.current = requestAnimationFrame(() => {
51          const scrollTop = getScrollTop()
52          const height = getScrollHeight()
53          const scrolled = height > 0 ? (scrollTop / height) * 100 : 0
54 
55          setScrollProgress(scrolled)
56          setIsVisible(scrollTop > showAfterScroll)
57          ticking = false
58        })
59        ticking = true
60      }
61    }
62 
63    const target = el || window
64    target.addEventListener('scroll', handleScroll, { passive: true })
65    handleScroll()
66 
67    return () => {
68      target.removeEventListener('scroll', handleScroll)
69      cancelAnimationFrame(rafRef.current)
70    }
71  }, [showAfterScroll, scrollContainer])
72 
73  useEffect(() => {
74    const root = scrollContainer?.current ?? null
75    const observer = new IntersectionObserver(
76      (entries) => {
77        const visible = entries
78          .filter((e) => e.isIntersecting)
79          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
80 
81        if (visible.length > 0) {
82          setActiveId(visible[0].target.id)
83        }
84// … truncated