All files / web/src/components/toys/euclid/hooks useCitationPopover.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState, useRef, useEffect, useCallback } from 'react'

interface UseCitationPopoverOptions {
  isMobile: boolean
}

export function useCitationPopover({ isMobile }: UseCitationPopoverOptions) {
  const [activeCitation, setActiveCitation] = useState<{ key: string; rect: DOMRect } | null>(null)
  const citationShowTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const citationHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const popoverHoveredRef = useRef(false)

  const handleCitationPointerEnter = useCallback(
    (key: string, e: React.PointerEvent) => {
      if (isMobile) return
      if (citationHideTimerRef.current) clearTimeout(citationHideTimerRef.current)
      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
      citationShowTimerRef.current = setTimeout(() => {
        setActiveCitation({ key, rect })
      }, 200)
    },
    [isMobile]
  )

  const handleCitationPointerLeave = useCallback(() => {
    if (isMobile) return
    if (citationShowTimerRef.current) clearTimeout(citationShowTimerRef.current)
    citationHideTimerRef.current = setTimeout(() => {
      if (!popoverHoveredRef.current) setActiveCitation(null)
    }, 300)
  }, [isMobile])

  const handleCitationPointerDown = useCallback(
    (key: string, e: React.PointerEvent) => {
      if (!isMobile) return
      e.preventDefault()
      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
      setActiveCitation({ key, rect })
    },
    [isMobile]
  )

  // Mobile: dismiss popover when press ends anywhere
  useEffect(() => {
    if (!isMobile) return
    const dismiss = () => setActiveCitation(null)
    window.addEventListener('pointerup', dismiss)
    window.addEventListener('pointercancel', dismiss)
    return () => {
      window.removeEventListener('pointerup', dismiss)
      window.removeEventListener('pointercancel', dismiss)
    }
  }, [isMobile])

  return {
    activeCitation,
    setActiveCitation,
    popoverHoveredRef,
    citationShowTimerRef,
    citationHideTimerRef,
    handleCitationPointerEnter,
    handleCitationPointerLeave,
    handleCitationPointerDown,
  }
}