reusable tabs

src/components/ReusableTabRoute.tsx

···
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { useAtom } from "jotai";
+import { useEffect, useLayoutEffect } from "react";
+
+import { isAtTopAtom, reusableTabRouteScrollAtom } from "~/utils/atoms";
+
+/**
+ * Please wrap your Route in a div, do not return a top-level fragment,
+ * it will break navigation scroll restoration
+ */
+export function ReusableTabRoute({
+  route,
+  tabs,
+}: {
+  route: string;
+  tabs: Record<string, React.ReactNode>;
+}) {
+  const [reusableTabState, setReusableTabState] = useAtom(
+    reusableTabRouteScrollAtom
+  );
+  const [isAtTop] = useAtom(isAtTopAtom);
+
+  const routeState = reusableTabState?.[route] ?? {
+    activeTab: Object.keys(tabs)[0],
+    scrollPositions: {},
+  };
+  const activeTab = routeState.activeTab;
+
+  const handleValueChange = (newTab: string) => {
+    setReusableTabState((prev) => {
+      const current = prev?.[route] ?? routeState;
+      return {
+        ...prev,
+        [route]: {
+          ...current,
+          scrollPositions: {
+            ...current.scrollPositions,
+            [current.activeTab]: window.scrollY,
+          },
+          activeTab: newTab,
+        },
+      };
+    });
+  };
+
+  // // todo, warning experimental, usually this doesnt work,
+  // // like at all, and i usually do this for each tab
+  // useLayoutEffect(() => {
+  //   const savedScroll = routeState.scrollPositions[activeTab] ?? 0;
+  //   window.scrollTo({ top: savedScroll });
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [activeTab, route]);
+
+  useLayoutEffect(() => {
+    return () => {
+      setReusableTabState((prev) => {
+        const current = prev?.[route] ?? routeState;
+        return {
+          ...prev,
+          [route]: {
+            ...current,
+            scrollPositions: {
+              ...current.scrollPositions,
+              [current.activeTab]: window.scrollY,
+            },
+          },
+        };
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TabsPrimitive.Root
+      value={activeTab}
+      onValueChange={handleValueChange}
+      className={`w-full`}
+    >
+      <TabsPrimitive.List
+        className={`flex sticky top-[52px] bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-[9] border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}
+      >
+        {Object.entries(tabs).map(([key]) => (
+          <TabsPrimitive.Trigger key={key} value={key} className="m3tab">
+            {key}
+          </TabsPrimitive.Trigger>
+        ))}
+      </TabsPrimitive.List>
+
+      {Object.entries(tabs).map(([key, node]) => (
+        <TabsPrimitive.Content key={key} value={key} className="flex-1 min-h-[80dvh]">
+          {activeTab === key && node}
+        </TabsPrimitive.Content>
+      ))}
+    </TabsPrimitive.Root>
+  );
+}
+
+export function useReusableTabScrollRestore(route: string) {
+  const [reusableTabState] = useAtom(
+    reusableTabRouteScrollAtom
+  );
+
+  const routeState = reusableTabState?.[route];
+  const activeTab = routeState?.activeTab;
+
+  useEffect(() => {
+    const savedScroll = activeTab ? routeState?.scrollPositions[activeTab] ?? 0 : 0;
+    //window.scrollTo(0, savedScroll);
+    window.scrollTo({ top: savedScroll });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+
+/*
+
+  const [notifState] = useAtom(notificationsScrollAtom);
+  const activeTab = notifState.activeTab;
+  useEffect(() => {
+    const savedY = notifState.scrollPositions[activeTab] ?? 0;
+    window.scrollTo(0, savedY);
+  }, [activeTab, notifState.scrollPositions]);
+
+ */

src/utils/atoms.ts

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