apps/web/src/hooks/use-highlight-scroll.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

import { useEffect, useState, useRef } from "react";

export function useHighlightScroll(
  highlightId: string | null,
  onClearHighlight: () => void,
  highlightDuration = 1000
) {
  const [highlightedId, setHighlightedId] = useState<string | null>(null);
  const elementRefs = useRef<Map<string, HTMLElement>>(new Map());

  const registerElement = (id: string, element: HTMLElement | null) => {
    if (element) {
      elementRefs.current.set(id, element);
    } else {
      elementRefs.current.delete(id);
    }
  };

  useEffect(() => {
    if (!highlightId) return;

    setHighlightedId(highlightId);

    const target = elementRefs.current.get(highlightId);
    target?.scrollIntoView({ block: "center" });

    const timeout = setTimeout(() => {
      setHighlightedId(null);
      onClearHighlight();
    }, highlightDuration);

    return () => clearTimeout(timeout);
  }, [highlightId, onClearHighlight, highlightDuration]);

  return { highlightedId, registerElement };
}