From 756a7c7caaeada4fff9a51f2ec4fe2968ac3b01e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 18 Aug 2025 10:54:28 +0200
Subject: feat: implement reveal in media feature

---
 apps/web/src/hooks/use-highlight-scroll.ts | 36 ++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 apps/web/src/hooks/use-highlight-scroll.ts

(limited to 'apps/web/src/hooks')

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 };
+}
-- 
cgit v1.3.1