Trim dead code from both forks

src/view/com/pager/TabBar.tsx

@@ -3,7 +3,6 @@ import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
@@ -31,7 +30,6 @@ export function TabBar({
 }: TabBarProps) {
   const pal = usePalette('default')
   const scrollElRef = useRef<ScrollView>(null)
-  const itemRefs = useRef<Array<Element>>([])
   const [itemXs, setItemXs] = useState<number[]>([])
   const indicatorStyle = useMemo(
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
@@ -41,57 +39,12 @@ export function TabBar({
   const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
-    if (isNative) {
+    // On native, the primary interaction is swiping.
-      // On native, the primary interaction is swiping.
+    // We adjust the scroll little by little on every tab change.
-      // We adjust the scroll little by little on every tab change.
+    // Scroll into view but keep the end of the previous item visible.
-      // Scroll into view but keep the end of the previous item visible.
+    let x = itemXs[selectedPage] || 0
-      let x = itemXs[selectedPage] || 0
+    x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
-      x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
+    scrollElRef.current?.scrollTo({x})
-      scrollElRef.current?.scrollTo({x})
-    } else {
-      // On the web, the primary interaction is tapping.
-      // Scrolling under tap feels disorienting so only adjust the scroll offset
-      // when tapping on an item out of view--and we adjust by almost an entire page.
-      const parent = scrollElRef?.current?.getScrollableNode?.()
-      if (!parent) {
-        return
-      }
-      const parentRect = parent.getBoundingClientRect()
-      if (!parentRect) {
-        return
-      }
-      const {
-        left: parentLeft,
-        right: parentRight,
-        width: parentWidth,
-      } = parentRect
-      const child = itemRefs.current[selectedPage]
-      if (!child) {
-        return
-      }
-      const childRect = child.getBoundingClientRect?.()
-      if (!childRect) {
-        return
-      }
-      const {left: childLeft, right: childRight, width: childWidth} = childRect
-      let dx = 0
-      if (childRight >= parentRight) {
-        dx += childRight - parentRight
-        dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      } else if (childLeft <= parentLeft) {
-        dx -= parentLeft - childLeft
-        dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      }
-      let x = parent.scrollLeft + dx
-      x = Math.max(0, x)
-      x = Math.min(x, parent.scrollWidth - parentWidth)
-      if (dx !== 0) {
-        parent.scroll({
-          left: x,
-          behavior: 'smooth',
-        })
-      }
-    }
   }, [scrollElRef, itemXs, selectedPage, styles])
 
   const onPressItem = useCallback(
@@ -134,7 +87,6 @@ export function TabBar({
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              ref={node => (itemRefs.current[i] = node as any)}
               onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}

src/view/com/pager/TabBar.web.tsx

@@ -1,9 +1,8 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef} from 'react'
-import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
+import {ScrollView, StyleSheet, View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
@@ -32,7 +31,6 @@ export function TabBar({
   const pal = usePalette('default')
   const scrollElRef = useRef<ScrollView>(null)
   const itemRefs = useRef<Array<Element>>([])
-  const [itemXs, setItemXs] = useState<number[]>([])
   const indicatorStyle = useMemo(
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
@@ -41,58 +39,49 @@ export function TabBar({
   const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
-    if (isNative) {
+    // On the web, the primary interaction is tapping.
-      // On native, the primary interaction is swiping.
+    // Scrolling under tap feels disorienting so only adjust the scroll offset
-      // We adjust the scroll little by little on every tab change.
+    // when tapping on an item out of view--and we adjust by almost an entire page.
-      // Scroll into view but keep the end of the previous item visible.
+    const parent = scrollElRef?.current?.getScrollableNode?.()
-      let x = itemXs[selectedPage] || 0
+    if (!parent) {
-      x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
+      return
-      scrollElRef.current?.scrollTo({x})
-    } else {
-      // On the web, the primary interaction is tapping.
-      // Scrolling under tap feels disorienting so only adjust the scroll offset
-      // when tapping on an item out of view--and we adjust by almost an entire page.
-      const parent = scrollElRef?.current?.getScrollableNode?.()
-      if (!parent) {
-        return
-      }
-      const parentRect = parent.getBoundingClientRect()
-      if (!parentRect) {
-        return
-      }
-      const {
-        left: parentLeft,
-        right: parentRight,
-        width: parentWidth,
-      } = parentRect
-      const child = itemRefs.current[selectedPage]
-      if (!child) {
-        return
-      }
-      const childRect = child.getBoundingClientRect?.()
-      if (!childRect) {
-        return
-      }
-      const {left: childLeft, right: childRight, width: childWidth} = childRect
-      let dx = 0
-      if (childRight >= parentRight) {
-        dx += childRight - parentRight
-        dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      } else if (childLeft <= parentLeft) {
-        dx -= parentLeft - childLeft
-        dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      }
-      let x = parent.scrollLeft + dx
-      x = Math.max(0, x)
-      x = Math.min(x, parent.scrollWidth - parentWidth)
-      if (dx !== 0) {
-        parent.scroll({
-          left: x,
-          behavior: 'smooth',
-        })
-      }
     }
-  }, [scrollElRef, itemXs, selectedPage, styles])
+    const parentRect = parent.getBoundingClientRect()
+    if (!parentRect) {
+      return
+    }
+    const {
+      left: parentLeft,
+      right: parentRight,
+      width: parentWidth,
+    } = parentRect
+    const child = itemRefs.current[selectedPage]
+    if (!child) {
+      return
+    }
+    const childRect = child.getBoundingClientRect?.()
+    if (!childRect) {
+      return
+    }
+    const {left: childLeft, right: childRight, width: childWidth} = childRect
+    let dx = 0
+    if (childRight >= parentRight) {
+      dx += childRight - parentRight
+      dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+    } else if (childLeft <= parentLeft) {
+      dx -= parentLeft - childLeft
+      dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+    }
+    let x = parent.scrollLeft + dx
+    x = Math.max(0, x)
+    x = Math.min(x, parent.scrollWidth - parentWidth)
+    if (dx !== 0) {
+      parent.scroll({
+        left: x,
+        behavior: 'smooth',
+      })
+    }
+  }, [scrollElRef, selectedPage, styles])
 
   const onPressItem = useCallback(
     (index: number) => {
@@ -104,19 +93,6 @@ export function TabBar({
     [onSelect, selectedPage, onPressSelected],
   )
 
-  // calculates the x position of each item on mount and on layout change
-  const onItemLayout = React.useCallback(
-    (e: LayoutChangeEvent, index: number) => {
-      const x = e.nativeEvent.layout.x
-      setItemXs(prev => {
-        const Xs = [...prev]
-        Xs[index] = x
-        return Xs
-      })
-    },
-    [],
-  )
-
   return (
     <View
       testID={testID}
@@ -135,7 +111,6 @@ export function TabBar({
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
               ref={node => (itemRefs.current[i] = node as any)}
-              onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}
               onPress={() => onPressItem(i)}