sticky tab improvements

src/components/swipeable-tabs.tsx

@@ -1,6 +1,6 @@
 import { FloatingIndicator, UnstyledButton, Box, Text, ScrollArea } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect, ReactNode, useRef } from "react";
 
 interface TabItem {
   label: string;
@@ -11,13 +11,20 @@ interface SwipeableTabsProps {
   tabs: TabItem[];
   defaultTab?: number;
   onTabChange?: (index: number, tab: TabItem) => void;
+  scrollPosition?: { x: number; y: number };
 }
 
-function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps) {
+function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: SwipeableTabsProps) {
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [embla, setEmbla] = useState<any>(null);
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [controlsRefs, setControlsRefs] = useState<Record<number, HTMLSpanElement | null>>({});
+  const [isSticky, setIsSticky] = useState(false);
+  const tabsRef = useRef<HTMLDivElement | null>(null);
+  const originalPositionRef = useRef<number | null>(null);
+  const slideRefs = useRef<Record<number, HTMLDivElement | null>>({});
+  const [activeSlideHeight, setActiveSlideHeight] = useState<number | 'auto'>('auto');
+  const stickyThreshold = 0;
 
   useEffect(() => {
     if (!embla) return;
@@ -25,6 +32,13 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
     const onSelect = () => {
       const newIndex = embla.selectedScrollSnap();
       setActiveTab(newIndex);
+      
+      // Update height based on active slide content
+      const activeSlideRef = slideRefs.current[newIndex];
+      if (activeSlideRef) {
+        const height = activeSlideRef.scrollHeight;
+        setActiveSlideHeight(height);
+      }
     };
 
     embla.on("select", onSelect);
@@ -34,6 +48,49 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
     };
   }, [embla]);
 
+  // Update height when activeTab changes
+  useEffect(() => {
+    const activeSlideRef = slideRefs.current[activeTab];
+    if (activeSlideRef) {
+      const height = activeSlideRef.scrollHeight;
+      setActiveSlideHeight(height);
+    }
+  }, [activeTab]);
+
+  useEffect(() => {
+    if (scrollPosition) {
+      setIsSticky(scrollPosition.y > stickyThreshold);
+      return;
+    }
+
+    const scrollWrapper = document.getElementById('scroll-wrapper');
+    let viewport = scrollWrapper!.querySelector('.mantine-ScrollArea-viewport') as HTMLElement;
+
+    const handleScroll = () => {
+      if (!tabsRef.current) return;
+      
+      const scrollTop = viewport.scrollTop;
+      const viewportRect = viewport.getBoundingClientRect();
+      
+      if (originalPositionRef.current === null && !isSticky) {
+        const tabsRect = tabsRef.current.getBoundingClientRect();
+        originalPositionRef.current = tabsRect.top - viewportRect.top + scrollTop;
+      }  
+
+      setIsSticky(
+        originalPositionRef.current !== null 
+          && scrollTop >= (originalPositionRef.current - viewportRect.top - stickyThreshold)
+      );
+    };
+
+    handleScroll();
+    viewport.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => {
+      viewport.removeEventListener('scroll', handleScroll);
+    };
+  }, [stickyThreshold, isSticky, scrollPosition]);
+
   const handleTabChange = (index: number) => {
     if (index !== activeTab && index >= 0 && index < tabs.length) {
       setActiveTab(index);
@@ -47,14 +104,30 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
     setControlsRefs(controlsRefs);
   };
 
+  const setSlideRef = (index: number) => (node: HTMLDivElement | null) => {
+    slideRefs.current[index] = node;
+  };
+
   return (
     <Box>
+      {isSticky && (
+        <Box style={{ height: '60px' }} /> 
+      )}
       <Box
-        ref={setRootRef}
-        pos="relative"
+        ref={(node) => {
+          setRootRef(node);
+          tabsRef.current = node;
+        }}
+        pos={isSticky ? "fixed" : "relative"}
         style={{
           display: 'flex',
           marginBottom: 'var(--mantine-spacing-md)',
+          top: isSticky ? 0 : 'auto',
+          left: isSticky ? 0 : 'auto',
+          right: isSticky ? 0 : 'auto',
+          zIndex: 100,
+          backgroundColor: 'var(--mantine-color-body)',
+          transition: 'all 200ms ease',
         }}
       >
         <FloatingIndicator
@@ -79,7 +152,7 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
                 ? 'var(--mantine-color-blue-6)' 
                 : 'var(--mantine-color-text)',
               fontWeight: activeTab === index ? 600 : 400,
-              transition: 'color 200ms ease, font-weight 200ms ease',
+              transition: 'color 200ms ease',
               backgroundColor: 'transparent',
               border: 'none',
               borderRadius: 0,
@@ -109,12 +182,21 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
         slideSize="100%"
         initialSlide={activeTab}
         style={{
-          overflow: 'hidden'
+          overflow: 'hidden',
+          height: activeSlideHeight === 'auto' ? 'auto' : `${activeSlideHeight}px`,
+          transition: 'height 300ms ease'
         }}
       >
         {tabs.map((tab, index) => (
-          <Carousel.Slide key={`${tab.label}-content-${index}`}>
-            <Box>
+          <Carousel.Slide key={`${tab.label}-content-${index}`} style={{ height: 'auto' }}>
+            <Box 
+              ref={setSlideRef(index)}
+              style={{ 
+                minHeight: 'fit-content', 
+                height: 'auto',
+                visibility: index === activeTab ? 'visible' : 'hidden'
+              }}
+            >
               {tab.content}
             </Box>
           </Carousel.Slide>