From e4cc7ea40971e4134159427eec3540362f1ea1f5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 7 Dec 2023 05:50:58 +0000
Subject: [PATCH] More scroll

---
 src/view/com/pager/PagerWithHeader.tsx | 30 ++++++++++++++++----------
 src/view/com/util/Views.web.tsx        | 13 ++++++-----
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 22e2d86b17..80aa5dfc58 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -22,6 +22,7 @@ import {TabBar} from './TabBar'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {isWeb} from '#/platform/detection'
 
 const SCROLLED_DOWN_LIMIT = 200
 
@@ -257,21 +258,28 @@ let PagerTabBar = ({
   return (
     <Animated.View
       pointerEvents="box-none"
-      style={[
-        isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
-        headerTransform,
-      ]}>
+      style={
+        isWeb
+          ? []
+          : [
+              isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
+              headerTransform,
+            ]
+      }>
       <View onLayout={onHeaderOnlyLayout} pointerEvents="box-none">
         {renderHeader?.()}
       </View>
       <View
         onLayout={onTabBarLayout}
-        style={{
-          // Render it immediately to measure it early since its size doesn't depend on the content.
-          // However, keep it invisible until the header above stabilizes in order to prevent jumps.
-          opacity: isHeaderReady ? 1 : 0,
-          pointerEvents: isHeaderReady ? 'auto' : 'none',
-        }}>
+        style={[
+          {
+            // Render it immediately to measure it early since its size doesn't depend on the content.
+            // However, keep it invisible until the header above stabilizes in order to prevent jumps.
+            opacity: isHeaderReady ? 1 : 0,
+            pointerEvents: isHeaderReady ? 'auto' : 'none',
+          },
+          isWeb ? {position: 'sticky', top: 0} : null,
+        ]}>
         <TabBar
           testID={testID}
           items={items}
@@ -315,7 +323,7 @@ function PagerItem({
   }
 
   return renderTab({
-    headerHeight,
+    headerHeight: isWeb ? 0 : headerHeight,
     isFocused,
     isScrolledDown,
     onScroll: scrollHandler,
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 7e6ccfc2ae..fcc234aa0c 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -120,13 +120,13 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     ref,
     () => ({
       scrollToTop() {
-        console.log('yeahh')
+        window.scrollTo({top: 0})
       },
       scrollToOffset({animated, offset}) {
-        nativeRef.current.scrollTo({
-          x: 0,
-          y: offset,
-          animated,
+        window.scrollTo({
+          left: 0,
+          top: offset,
+          behavior: animated ? 'smooth' : 'instant',
         })
       },
     }),
@@ -134,6 +134,9 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
   )
 
   React.useEffect(() => {
+    if (!onScroll) {
+      return
+    }
     function handleScroll(e) {
       onScroll.current.worklet({
         ...e.nativeEvent,