feat: implement reveal in media feature

1 files changed, 36 insertions, 0 deletions

diff --git a/apps/web/src/hooks/use-highlight-scroll.ts b/apps/web/src/hooks/use-highlight-scroll.ts
new file mode 100644
index 00000000..241bffb2
--- /dev/null
+++ b/apps/web/src/hooks/use-highlight-scroll.ts
@@ -0,0 +1,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 };

+}