notif tabs scroll restoration

src/routes/notifications.tsx

···
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
 import * as React from "react";
+import { useEffect, useLayoutEffect } from "react";
 
 import defaultpfp from "~/../public/favicon.png";
 import { Header } from "~/components/Header";
···
   UniversalPostRendererATURILoader,
 } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { constellationURLAtom, imgCDNAtom, isAtTopAtom } from "~/utils/atoms";
+import {
+  constellationURLAtom,
+  imgCDNAtom,
+  isAtTopAtom,
+  notificationsScrollAtom,
+} from "~/utils/atoms";
 import {
   useInfiniteQueryAuthorFeed,
   useQueryConstellation,
···
 });
 
 export default function NotificationsTabs() {
-  const [activeTab, setActiveTab] = React.useState("mentions");
+  const [notifState, setNotifState] = useAtom(notificationsScrollAtom);
+  const activeTab = notifState.activeTab;
   const [isAtTop] = useAtom(isAtTopAtom);
-
-  const scrollPositions = React.useRef<Record<string, number>>({});
 
   const handleValueChange = (newTab: string) => {
-    scrollPositions.current[activeTab] = window.scrollY;
-    setActiveTab(newTab);
+    console.log(newTab);
+    setNotifState((prev) => {
+      const wow = {
+        ...prev,
+        scrollPositions: {
+          ...prev.scrollPositions,
+          [prev.activeTab]: window.scrollY,
+        },
+        activeTab: newTab,
+      };
+      //console.log(wow);
+      return wow;
+    });
   };
 
-  React.useEffect(() => {
-    const savedY = scrollPositions.current[activeTab] ?? 0;
-    window.scrollTo(0, savedY);
-  }, [activeTab]);
+  useLayoutEffect(() => {
+    return () => {
+      setNotifState((prev) => {
+        const wow = {
+          ...prev,
+          scrollPositions: {
+            ...prev.scrollPositions,
+            [activeTab]: window.scrollY,
+          },
+        };
+        //console.log(wow);
+        return wow;
+      });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <TabsPrimitive.Root
···
     );
   }, [infiniteMentionsData]);
 
+  const [notifState] = useAtom(notificationsScrollAtom);
+  const activeTab = notifState.activeTab;
+  useEffect(() => {
+    const savedY = notifState.scrollPositions[activeTab] ?? 0;
+    window.scrollTo(0, savedY);
+  }, [activeTab, notifState.scrollPositions]);
+
   if (isLoading) return <LoadingState text="Loading mentions..." />;
   if (isError) return <ErrorState error={error} />;
 
···
     );
   }, [infiniteFollowsData]);
 
+  const [notifState] = useAtom(notificationsScrollAtom);
+  const activeTab = notifState.activeTab;
+  useEffect(() => {
+    const savedY = notifState.scrollPositions[activeTab] ?? 0;
+    window.scrollTo(0, savedY);
+  }, [activeTab, notifState.scrollPositions]);
+
   if (isLoading) return <LoadingState text="Loading mentions..." />;
   if (isError) return <ErrorState error={error} />;
 
···
     () => postsData?.pages.flatMap((page) => page.records) ?? [],
     [postsData]
   );
+
+  const [notifState] = useAtom(notificationsScrollAtom);
+  const activeTab = notifState.activeTab;
+  useEffect(() => {
+    const savedY = notifState.scrollPositions[activeTab] ?? 0;
+    window.scrollTo(0, savedY);
+  }, [activeTab, notifState.scrollPositions]);
 
   return (
     <>

src/utils/atoms.ts

···
   {}
 );
 
+type NotificationsScrollState = {
+  activeTab: string;
+  scrollPositions: Record<string, number>;
+};
+export const notificationsScrollAtom = atom<NotificationsScrollState>({
+  activeTab: "mentions",
+  scrollPositions: {},
+});
+
 export const likedPostsAtom = atomWithStorage<Record<string, string>>(
   "likedPosts",
   {}