From 4d052c4d741211ca3cf2058e300461da0a208697 Mon Sep 17 00:00:00 2001
From: "whey.party" <RileyMarsh1337@proton.me>
Date: Thu, 12 Feb 2026 07:48:27 +0700
Subject: [PATCH] (unused) experimental sticky

---
 src/components/ReusableTabRoute.tsx | 73 ++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/components/ReusableTabRoute.tsx b/src/components/ReusableTabRoute.tsx
index f8ab464..2efe2c3 100644
--- a/src/components/ReusableTabRoute.tsx
+++ b/src/components/ReusableTabRoute.tsx
@@ -1,6 +1,6 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { useAtom } from "jotai";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import { isAtTopAtom, reusableTabRouteScrollAtom } from "~/utils/atoms";
 
@@ -70,28 +70,35 @@ export function ReusableTabRoute({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  //const { sentinelRef, isStuck } = useSticky(52);
+  //bg-gray-100 dark:bg-gray-900
+
   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`}
+    <>
+      <TabsPrimitive.Root
+        value={activeTab}
+        onValueChange={handleValueChange}
+        className={`w-full`}
       >
-        {Object.entries(tabs).map(([key]) => (
-          <TabsPrimitive.Trigger key={key} value={key} className="m3tab">
-            {key}
-          </TabsPrimitive.Trigger>
+        {/* <div ref={sentinelRef} className="h-[0.000000001px]" /> */}
+        <TabsPrimitive.List
+          className={`flex sticky top-[52px] bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] sm:dark:bg-gray-950 sm:bg-white z-[9] border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none 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.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>
+      </TabsPrimitive.Root>
+    </>
+    
   );
 }
 
@@ -121,4 +128,28 @@ export function useReusableTabScrollRestore(route: string) {
     window.scrollTo(0, savedY);
   }, [activeTab, notifState.scrollPositions]);
 
- */
\ No newline at end of file
+ */
+
+
+
+export function useSticky(top: number = 0) {
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const [isStuck, setIsStuck] = useState(false);
+
+  useEffect(() => {
+    if (!sentinelRef.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsStuck(!entry.isIntersecting),
+      {
+        rootMargin: `-${top}px 0px 0px 0px`,
+        threshold: 0,
+      }
+    );
+
+    observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [top]);
+
+  return { sentinelRef, isStuck };
+}
\ No newline at end of file
-- 
2.51.2