v2: global player, infinite scroll, image picker, threaded comments

src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export function useInfiniteScroll(onLoadMore: () => void, enabled: boolean) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  const handleIntersect = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (entries[0].isIntersecting && enabled) {
+        onLoadMore();
+      }
+    },
+    [onLoadMore, enabled],
+  );
+
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin: "200px",
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleIntersect]);
+
+  return sentinelRef;
+}