Merge remote-tracking branch 'origin' into eric/app-864-integrate-post-tags-into-app

* origin:
  Disable events on hidden bars (#1686)
  Fix profile layout shift (#1690)
  Don't re-render bars when showing/hiding them (#1691)
  Fix crash when scrolling down on the web (#1684)
  Make shell hide/show animation smoother (#1683)
  Fix layout shift for multi-image posts (#1673)
  bskyweb: add rate limiting to reduce DoSability
  use new zeed-dom version (#1671)
  1.53

app.config.js

@@ -6,7 +6,7 @@ module.exports = function () {
       slug: 'bluesky',
       scheme: 'bluesky',
       owner: 'blueskysocial',
-      version: '1.52.0',
+      version: '1.53.0',
       runtimeVersion: {
         policy: 'appVersion',
       },
@@ -19,7 +19,7 @@ module.exports = function () {
         backgroundColor: '#ffffff',
       },
       ios: {
-        buildNumber: '2',
+        buildNumber: '1',
         supportsTablet: false,
         bundleIdentifier: 'xyz.blueskyweb.app',
         config: {
@@ -43,7 +43,7 @@ module.exports = function () {
         backgroundColor: '#ffffff',
       },
       android: {
-        versionCode: 41,
+        versionCode: 42,
         adaptiveIcon: {
           foregroundImage: './assets/adaptive-icon.png',
           backgroundColor: '#ffffff',

bskyweb/cmd/bskyweb/server.go

@@ -91,6 +91,11 @@ func serve(cctx *cli.Context) error {
 	}
 
 	e.HideBanner = true
+	e.Renderer = NewRenderer("templates/", &bskyweb.TemplateFS, debug)
+	e.HTTPErrorHandler = server.errorHandler
+
+	e.IPExtractor = echo.ExtractIPFromXFFHeader()
+
 	// SECURITY: Do not modify without due consideration.
 	e.Use(middleware.SecureWithConfig(middleware.SecureConfig{
 		ContentTypeNosniff: "nosniff",
@@ -106,8 +111,23 @@ func serve(cctx *cli.Context) error {
 			return strings.HasPrefix(c.Request().URL.Path, "/static")
 		},
 	}))
-	e.Renderer = NewRenderer("templates/", &bskyweb.TemplateFS, debug)
+	e.Use(middleware.RateLimiterWithConfig(middleware.RateLimiterConfig{
-	e.HTTPErrorHandler = server.errorHandler
+		Skipper: middleware.DefaultSkipper,
+		Store: middleware.NewRateLimiterMemoryStoreWithConfig(
+			middleware.RateLimiterMemoryStoreConfig{
+				Rate:      10,              // requests per second
+				Burst:     30,              // allow bursts
+				ExpiresIn: 3 * time.Minute, // garbage collect entries older than 3 minutes
+			},
+		),
+		IdentifierExtractor: func(ctx echo.Context) (string, error) {
+			id := ctx.RealIP()
+			return id, nil
+		},
+		DenyHandler: func(c echo.Context, identifier string, err error) error {
+			return c.String(http.StatusTooManyRequests, "Your request has been rate limited. Please try again later. Contact security@bsky.app if you believe this was a mistake.\n")
+		},
+	}))
 
 	// redirect trailing slash to non-trailing slash.
 	// all of our current endpoints have no trailing slash.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "private": true,
   "scripts": {
     "prepare": "is-ci || husky install",
@@ -217,7 +217,7 @@
   },
   "resolutions": {
     "@types/react": "^18",
-    "**/zeed-dom": "estrattonbailey/zeed-dom#publish"
+    "**/zeed-dom": "0.10.9"
   },
   "jest": {
     "preset": "jest-expo/ios",

src/lib/hooks/useMinimalShellMode.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {autorun} from 'mobx'
 import {useStores} from 'state/index'
 import {Animated} from 'react-native'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
@@ -7,26 +8,29 @@ export function useMinimalShellMode() {
   const store = useStores()
   const minimalShellInterp = useAnimatedValue(0)
   const footerMinimalShellTransform = {
-    transform: [{translateY: Animated.multiply(minimalShellInterp, 100)}],
+    opacity: Animated.subtract(1, minimalShellInterp),
+    transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}],
   }
 
   React.useEffect(() => {
-    if (store.shell.minimalShellMode) {
+    return autorun(() => {
-      Animated.timing(minimalShellInterp, {
+      if (store.shell.minimalShellMode) {
-        toValue: 1,
+        Animated.timing(minimalShellInterp, {
-        duration: 100,
+          toValue: 1,
-        useNativeDriver: true,
+          duration: 150,
-        isInteraction: false,
+          useNativeDriver: true,
-      }).start()
+          isInteraction: false,
-    } else {
+        }).start()
-      Animated.timing(minimalShellInterp, {
+      } else {
-        toValue: 0,
+        Animated.timing(minimalShellInterp, {
-        duration: 100,
+          toValue: 0,
-        useNativeDriver: true,
+          duration: 150,
-        isInteraction: false,
+          useNativeDriver: true,
-      }).start()
+          isInteraction: false,
-    }
+        }).start()
-  }, [minimalShellInterp, store.shell.minimalShellMode])
+      }
+    })
+  }, [minimalShellInterp, store])
 
   return {footerMinimalShellTransform}
 }

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
 import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
@@ -22,15 +23,18 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
   const interp = useAnimatedValue(0)
 
   React.useEffect(() => {
-    Animated.timing(interp, {
+    return autorun(() => {
-      toValue: store.shell.minimalShellMode ? 1 : 0,
+      Animated.timing(interp, {
-      duration: 100,
+        toValue: store.shell.minimalShellMode ? 1 : 0,
-      useNativeDriver: true,
+        duration: 150,
-      isInteraction: false,
+        useNativeDriver: true,
-    }).start()
+        isInteraction: false,
-  }, [interp, store.shell.minimalShellMode])
+      }).start()
+    })
+  }, [interp, store])
   const transform = {
-    transform: [{translateY: Animated.multiply(interp, -100)}],
+    opacity: Animated.subtract(1, interp),
+    transform: [{translateY: Animated.multiply(interp, -50)}],
   }
 
   const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
@@ -45,7 +49,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
   )
 
   return (
-    <Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
+    <Animated.View
+      style={[
+        pal.view,
+        pal.border,
+        styles.tabBar,
+        transform,
+        store.shell.minimalShellMode && styles.disabled,
+      ]}>
       <View style={[pal.view, styles.topBar]}>
         <View style={[pal.view]}>
           <TouchableOpacity
@@ -113,4 +124,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 21,
   },
+  disabled: {
+    pointerEvents: 'none',
+  },
 })

src/view/com/util/ViewHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
@@ -154,22 +155,24 @@ const Container = observer(function ContainerImpl({
   const interp = useAnimatedValue(0)
 
   React.useEffect(() => {
-    if (store.shell.minimalShellMode) {
+    return autorun(() => {
-      Animated.timing(interp, {
+      if (store.shell.minimalShellMode) {
-        toValue: 1,
+        Animated.timing(interp, {
-        duration: 100,
+          toValue: 1,
-        useNativeDriver: true,
+          duration: 100,
-        isInteraction: false,
+          useNativeDriver: true,
-      }).start()
+          isInteraction: false,
-    } else {
+        }).start()
-      Animated.timing(interp, {
+      } else {
-        toValue: 0,
+        Animated.timing(interp, {
-        duration: 100,
+          toValue: 0,
-        useNativeDriver: true,
+          duration: 100,
-        isInteraction: false,
+          useNativeDriver: true,
-      }).start()
+          isInteraction: false,
-    }
+        }).start()
-  }, [interp, store.shell.minimalShellMode])
+      }
+    })
+  }, [interp, store])
   const transform = {
     transform: [{translateY: Animated.multiply(interp, -100)}],
   }

src/view/com/util/ViewSelector.tsx

@@ -144,8 +144,6 @@ export function Selector({
   items: string[]
   onSelect?: (index: number) => void
 }) {
-  const [height, setHeight] = useState(0)
-
   const pal = usePalette('default')
   const borderColor = useColorSchemeStyle(
     {borderColor: colors.black},
@@ -160,22 +158,13 @@ export function Selector({
     <View
       style={{
         width: '100%',
-        position: 'relative',
-        overflow: 'hidden',
-        height,
         backgroundColor: pal.colors.background,
       }}>
       <ScrollView
         testID="selector"
         horizontal
-        showsHorizontalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}>
-        style={{position: 'absolute'}}>
+        <View style={[pal.view, styles.outer]}>
-        <View
-          style={[pal.view, styles.outer]}
-          onLayout={e => {
-            const {height: layoutHeight} = e.nativeEvent.layout
-            setHeight(layoutHeight || 60)
-          }}>
           {items.map((item, i) => {
             const selected = i === selectedIndex
             return (

src/view/com/util/fab/FABInner.tsx

@@ -1,5 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {observer} from 'mobx-react-lite'
+import {autorun} from 'mobx'
 import {Animated, StyleSheet, TouchableWithoutFeedback} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {gradients} from 'lib/styles'
@@ -25,13 +26,15 @@ export const FABInner = observer(function FABInnerImpl({
   const store = useStores()
   const interp = useAnimatedValue(0)
   React.useEffect(() => {
-    Animated.timing(interp, {
+    return autorun(() => {
-      toValue: store.shell.minimalShellMode ? 0 : 1,
+      Animated.timing(interp, {
-      duration: 100,
+        toValue: store.shell.minimalShellMode ? 0 : 1,
-      useNativeDriver: true,
+        duration: 100,
-      isInteraction: false,
+        useNativeDriver: true,
-    }).start()
+        isInteraction: false,
-  }, [interp, store.shell.minimalShellMode])
+      }).start()
+    })
+  }, [interp, store])
   const transform = isTablet
     ? undefined
     : {

src/view/com/util/images/Gallery.tsx

@@ -23,19 +23,19 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onLongPress,
 }) => {
   const image = images[index]
-
   return (
-    <View>
+    <View style={styles.fullWidth}>
       <Pressable
         onPress={onPress ? () => onPress(index) : undefined}
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
+        style={styles.fullWidth}
         accessibilityRole="button"
         accessibilityLabel={image.alt || 'Image'}
         accessibilityHint="">
         <Image
           source={{uri: image.thumb}}
-          style={imageStyle}
+          style={[styles.image, imageStyle]}
           accessible={true}
           accessibilityLabel={image.alt}
           accessibilityHint=""
@@ -54,14 +54,21 @@ export const GalleryItem: FC<GalleryItemProps> = ({
 }
 
 const styles = StyleSheet.create({
+  fullWidth: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    borderRadius: 4,
+  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,
     paddingHorizontal: 6,
     paddingVertical: 3,
     position: 'absolute',
-    left: 6,
+    left: 8,
-    bottom: 6,
+    bottom: 8,
   },
   alt: {
     color: 'white',

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -1,13 +1,5 @@
-import React, {useMemo, useState} from 'react'
+import React from 'react'
-import {
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-  LayoutChangeEvent,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {ImageStyle} from 'expo-image'
-import {Dimensions} from 'lib/media/types'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {GalleryItem} from './Gallery'
 
@@ -20,21 +12,11 @@ interface ImageLayoutGridProps {
 }
 
 export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
-  const [containerInfo, setContainerInfo] = useState<Dimensions | undefined>()
-
-  const onLayout = (evt: LayoutChangeEvent) => {
-    const {width, height} = evt.nativeEvent.layout
-    setContainerInfo({
-      width,
-      height,
-    })
-  }
-
   return (
-    <View style={style} onLayout={onLayout}>
+    <View style={style}>
-      {containerInfo ? (
+      <View style={styles.container}>
-        <ImageLayoutGridInner {...props} containerInfo={containerInfo} />
+        <ImageLayoutGridInner {...props} />
-      ) : undefined}
+      </View>
     </View>
   )
 }
@@ -44,70 +26,80 @@ interface ImageLayoutGridInnerProps {
   onPress?: (index: number) => void
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
-  containerInfo: Dimensions
 }
 
-function ImageLayoutGridInner({
+function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
-  containerInfo,
-  ...props
-}: ImageLayoutGridInnerProps) {
   const count = props.images.length
-  const size1 = useMemo<ImageStyle>(() => {
-    if (count === 3) {
-      const size = (containerInfo.width - 10) / 3
-      return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
-    } else {
-      const size = (containerInfo.width - 5) / 2
-      return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
-    }
-  }, [count, containerInfo])
-  const size2 = React.useMemo<ImageStyle>(() => {
-    if (count === 3) {
-      const size = ((containerInfo.width - 10) / 3) * 2 + 5
-      return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
-    } else {
-      const size = (containerInfo.width - 5) / 2
-      return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
-    }
-  }, [count, containerInfo])
 
   switch (count) {
     case 2:
       return (
         <View style={styles.flexRow}>
-          <GalleryItem index={0} {...props} imageStyle={size1} />
+          <View style={styles.smallItem}>
-          <GalleryItem index={1} {...props} imageStyle={size1} />
+            <GalleryItem {...props} index={0} imageStyle={styles.image} />
+          </View>
+          <View style={styles.smallItem}>
+            <GalleryItem {...props} index={1} imageStyle={styles.image} />
+          </View>
         </View>
       )
+
     case 3:
       return (
         <View style={styles.flexRow}>
-          <GalleryItem index={0} {...props} imageStyle={size2} />
+          <View style={{flex: 2, aspectRatio: 1}}>
-          <View style={styles.flexColumn}>
+            <GalleryItem {...props} index={0} imageStyle={styles.image} />
-            <GalleryItem index={1} {...props} imageStyle={size1} />
+          </View>
-            <GalleryItem index={2} {...props} imageStyle={size1} />
+          <View style={{flex: 1}}>
+            <View style={styles.smallItem}>
+              <GalleryItem {...props} index={1} imageStyle={styles.image} />
+            </View>
+            <View style={styles.smallItem}>
+              <GalleryItem {...props} index={2} imageStyle={styles.image} />
+            </View>
           </View>
         </View>
       )
+
     case 4:
       return (
         <View style={styles.flexRow}>
-          <View style={styles.flexColumn}>
+          <View style={{flex: 1}}>
-            <GalleryItem index={0} {...props} imageStyle={size1} />
+            <View style={styles.smallItem}>
-            <GalleryItem index={2} {...props} imageStyle={size1} />
+              <GalleryItem {...props} index={0} imageStyle={styles.image} />
+            </View>
+            <View style={styles.smallItem}>
+              <GalleryItem {...props} index={2} imageStyle={styles.image} />
+            </View>
           </View>
-          <View style={styles.flexColumn}>
+          <View style={{flex: 1}}>
-            <GalleryItem index={1} {...props} imageStyle={size1} />
+            <View style={styles.smallItem}>
-            <GalleryItem index={3} {...props} imageStyle={size1} />
+              <GalleryItem {...props} index={1} imageStyle={styles.image} />
+            </View>
+            <View style={styles.smallItem}>
+              <GalleryItem {...props} index={3} imageStyle={styles.image} />
+            </View>
           </View>
         </View>
       )
+
     default:
       return null
   }
 }
 
+// This is used to compute margins (rather than flexbox gap) due to Yoga bugs:
+// https://github.com/facebook/yoga/issues/1418
+const IMAGE_GAP = 5
+
 const styles = StyleSheet.create({
-  flexRow: {flexDirection: 'row', gap: 5},
+  container: {
-  flexColumn: {flexDirection: 'column', gap: 5},
+    marginHorizontal: -IMAGE_GAP / 2,
+    marginVertical: -IMAGE_GAP / 2,
+  },
+  flexRow: {flexDirection: 'row'},
+  smallItem: {flex: 1, aspectRatio: 1},
+  image: {
+    margin: IMAGE_GAP / 2,
+  },
 })

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -10,6 +10,10 @@ import {colors} from 'lib/styles'
 import {HITSLOP_20} from 'lib/constants'
 import {isWeb} from 'platform/detection'
 import {clamp} from 'lib/numbers'
+import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity)
 
 export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
   onPress,
@@ -30,15 +34,18 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
     ? 50
     : (minMode || isDesktop ? 16 : 60) +
       (isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
+  const animatedStyle = useAnimatedStyle(() => ({
+    bottom: withTiming(bottom, {duration: 150}),
+  }))
   return (
-    <TouchableOpacity
+    <AnimatedTouchableOpacity
       style={[
         styles.loadLatest,
         isDesktop && styles.loadLatestDesktop,
         isTablet && styles.loadLatestTablet,
         pal.borderDark,
         pal.view,
-        {bottom},
+        animatedStyle,
       ]}
       onPress={onPress}
       hitSlop={HITSLOP_20}
@@ -47,7 +54,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
       accessibilityHint="">
       <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
       {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
-    </TouchableOpacity>
+    </AnimatedTouchableOpacity>
   )
 })
 
@@ -67,14 +74,12 @@ const styles = StyleSheet.create({
   loadLatestTablet: {
     // @ts-ignore web only
     left: '50vw',
-    // @ts-ignore web only -prf
+    transform: [{translateX: -282}],
-    transform: 'translateX(-282px)',
   },
   loadLatestDesktop: {
     // @ts-ignore web only
     left: '50vw',
-    // @ts-ignore web only -prf
+    transform: [{translateX: -382}],
-    transform: 'translateX(-382px)',
   },
   indicator: {
     position: 'absolute',

src/view/shell/bottom-bar/BottomBar.tsx

@@ -87,6 +87,7 @@ export const BottomBar = observer(function BottomBarImpl({
         pal.border,
         {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
         footerMinimalShellTransform,
+        store.shell.minimalShellMode && styles.disabled,
       ]}>
       <Btn
         testID="bottomBarHomeBtn"

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -65,4 +65,7 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 100,
   },
+  disabled: {
+    pointerEvents: 'none',
+  },
 })

yarn.lock

@@ -19218,9 +19218,10 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zeed-dom@^0.9.19, zeed-dom@estrattonbailey/zeed-dom#publish:
+zeed-dom@0.10.9, zeed-dom@^0.9.19:
-  version "0.10.8"
+  version "0.10.9"
-  resolved "https://codeload.github.com/estrattonbailey/zeed-dom/tar.gz/aad32339dc2473b75aa0a90d8baee21c40a1e914"
+  resolved "https://registry.yarnpkg.com/zeed-dom/-/zeed-dom-0.10.9.tgz#b3eb5d9b7cf1be17e1fb3a708379df5edce195be"
+  integrity sha512-qQQ7Wu7IJ3Vo/LjeKWj97A2Hi17di4ZdmgNZj6AWbDbpt3hvO4EMfjYVA2/2unLYT+XpmMq5fqaLqCeU7Im83A==
   dependencies:
     css-what "^6.1.0"