v3: fixed journal view not scrolling, fixed some user profile layout bugs, increase thumbnail size on the index

src/hooks/useInfiniteScroll.ts

@@ -1,7 +1,16 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
 
+/**
+ * Observe a sentinel element and call `onLoadMore` when it scrolls into view.
+ *
+ * The sentinel is tracked via a state-backed callback ref rather than a plain
+ * `useRef` so the observer re-attaches whenever the underlying DOM node
+ * changes — e.g. when the index page swaps the active feed tab and a fresh
+ * sentinel `<div>` mounts in place of the old one. A static ref would keep
+ * observing the now-detached node and silently stop loading more.
+ */
 export function useInfiniteScroll(onLoadMore: () => void, enabled: boolean) {
-  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);
 
   const handleIntersect = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -13,14 +22,13 @@ export function useInfiniteScroll(onLoadMore: () => void, enabled: boolean) {
   );
 
   useEffect(() => {
-    const el = sentinelRef.current;
-    if (!el) return;
+    if (!sentinel) return;
     const observer = new IntersectionObserver(handleIntersect, {
       rootMargin: "200px",
     });
-    observer.observe(el);
+    observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [handleIntersect]);
+  }, [handleIntersect, sentinel]);
 
-  return sentinelRef;
+  return setSentinel;
 }