[DO NOT MERGE] OTA deploy preview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.90.0",
+  "version": "1.90.1",
   "private": true,
   "engines": {
     "node": ">=18"

src/components/FeedInterstitials.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import {View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
-import {AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
+import {useGate} from '#/lib/statsig/statsig'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
+import {FeedDescriptor} from '#/state/queries/post-feed'
 import {useProfilesQuery} from '#/state/queries/profile'
+import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows'
 import {useSession} from '#/state/session'
 import {useProgressGuide} from '#/state/shell/progress-guide'
 import * as userActionHistory from '#/state/userActionHistory'
@@ -173,14 +176,63 @@ function useExperimentalSuggestedUsersQuery() {
   }
 }
 
-export function SuggestedFollows() {
-  const t = useTheme()
-  const {_} = useLingui()
+export function SuggestedFollows({feed}: {feed: FeedDescriptor}) {
+  const gate = useGate()
+  const [feedType, feedUri] = feed.split('|')
+  if (feedType === 'author') {
+    if (gate('show_follow_suggestions_in_profile')) {
+      return <SuggestedFollowsProfile did={feedUri} />
+    } else {
+      return null
+    }
+  } else {
+    return <SuggestedFollowsHome />
+  }
+}
+
+export function SuggestedFollowsProfile({did}: {did: string}) {
+  const {
+    isLoading: isSuggestionsLoading,
+    data,
+    error,
+  } = useSuggestedFollowsByActorQuery({
+    did,
+  })
+  return (
+    <ProfileGrid
+      isSuggestionsLoading={isSuggestionsLoading}
+      profiles={data?.suggestions ?? []}
+      error={error}
+    />
+  )
+}
+
+export function SuggestedFollowsHome() {
   const {
     isLoading: isSuggestionsLoading,
     profiles,
     error,
   } = useExperimentalSuggestedUsersQuery()
+  return (
+    <ProfileGrid
+      isSuggestionsLoading={isSuggestionsLoading}
+      profiles={profiles}
+      error={error}
+    />
+  )
+}
+
+export function ProfileGrid({
+  isSuggestionsLoading,
+  error,
+  profiles,
+}: {
+  isSuggestionsLoading: boolean
+  profiles: AppBskyActorDefs.ProfileViewDetailed[]
+  error: Error | null
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const navigation = useNavigation<NavigationProp>()
   const {gtMobile} = useBreakpoints()

src/lib/api/feed-manip.ts

@@ -81,7 +81,15 @@ export class FeedViewPostsSlice {
       isParentBlocked,
       isParentNotFound,
     })
-    if (!reply || reason) {
+    if (!reply) {
+      if (post.record.reply) {
+        // This reply wasn't properly hydrated by the AppView.
+        this.isOrphan = true
+        this.items[0].isParentNotFound = true
+      }
+      return
+    }
+    if (reason) {
       return
     }
     if (
@@ -392,27 +400,20 @@ export class FeedTuner {
       slices: FeedViewPostsSlice[],
       _dryRun: boolean,
     ): FeedViewPostsSlice[] => {
-      const candidateSlices = slices.slice()
-
       // early return if no languages have been specified
       if (!preferredLangsCode2.length || preferredLangsCode2.length === 0) {
         return slices
       }
 
-      for (let i = 0; i < slices.length; i++) {
-        let hasPreferredLang = false
-        for (const item of slices[i].items) {
+      const candidateSlices = slices.filter(slice => {
+        for (const item of slice.items) {
           if (isPostInLanguage(item.post, preferredLangsCode2)) {
-            hasPreferredLang = true
-            break
+            return true
           }
         }
-
         // if item does not fit preferred language, remove it
-        if (!hasPreferredLang) {
-          candidateSlices.splice(i, 1)
-        }
-      }
+        return false
+      })
 
       // if the language filter cleared out the entire page, return the original set
       // so that something always shows

src/lib/custom-animations/CountWheel.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import {View} from 'react-native'
+import Animated, {
+  Easing,
+  LayoutAnimationConfig,
+  useReducedMotion,
+  withTiming,
+} from 'react-native-reanimated'
+
+import {decideShouldRoll} from 'lib/custom-animations/util'
+import {s} from 'lib/styles'
+import {formatCount} from 'view/com/util/numeric/format'
+import {Text} from 'view/com/util/text/Text'
+import {atoms as a, useTheme} from '#/alf'
+
+const animationConfig = {
+  duration: 400,
+  easing: Easing.out(Easing.cubic),
+}
+
+function EnteringUp() {
+  'worklet'
+  const animations = {
+    opacity: withTiming(1, animationConfig),
+    transform: [{translateY: withTiming(0, animationConfig)}],
+  }
+  const initialValues = {
+    opacity: 0,
+    transform: [{translateY: 18}],
+  }
+  return {
+    animations,
+    initialValues,
+  }
+}
+
+function EnteringDown() {
+  'worklet'
+  const animations = {
+    opacity: withTiming(1, animationConfig),
+    transform: [{translateY: withTiming(0, animationConfig)}],
+  }
+  const initialValues = {
+    opacity: 0,
+    transform: [{translateY: -18}],
+  }
+  return {
+    animations,
+    initialValues,
+  }
+}
+
+function ExitingUp() {
+  'worklet'
+  const animations = {
+    opacity: withTiming(0, animationConfig),
+    transform: [
+      {
+        translateY: withTiming(-18, animationConfig),
+      },
+    ],
+  }
+  const initialValues = {
+    opacity: 1,
+    transform: [{translateY: 0}],
+  }
+  return {
+    animations,
+    initialValues,
+  }
+}
+
+function ExitingDown() {
+  'worklet'
+  const animations = {
+    opacity: withTiming(0, animationConfig),
+    transform: [{translateY: withTiming(18, animationConfig)}],
+  }
+  const initialValues = {
+    opacity: 1,
+    transform: [{translateY: 0}],
+  }
+  return {
+    animations,
+    initialValues,
+  }
+}
+
+export function CountWheel({
+  likeCount,
+  big,
+  isLiked,
+}: {
+  likeCount: number
+  big?: boolean
+  isLiked: boolean
+}) {
+  const t = useTheme()
+  const shouldAnimate = !useReducedMotion()
+  const shouldRoll = decideShouldRoll(isLiked, likeCount)
+
+  // Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting
+  // animation
+  // The initial entering/exiting animations will get skipped, since these will happen on screen mounts and would
+  // be unnecessary
+  const [key, setKey] = React.useState(0)
+  const [prevCount, setPrevCount] = React.useState(likeCount)
+  const prevIsLiked = React.useRef(isLiked)
+  const formattedCount = formatCount(likeCount)
+  const formattedPrevCount = formatCount(prevCount)
+
+  React.useEffect(() => {
+    if (isLiked === prevIsLiked.current) {
+      return
+    }
+
+    const newPrevCount = isLiked ? likeCount - 1 : likeCount + 1
+    setKey(prev => prev + 1)
+    setPrevCount(newPrevCount)
+    prevIsLiked.current = isLiked
+  }, [isLiked, likeCount])
+
+  const enteringAnimation =
+    shouldAnimate && shouldRoll
+      ? isLiked
+        ? EnteringUp
+        : EnteringDown
+      : undefined
+  const exitingAnimation =
+    shouldAnimate && shouldRoll
+      ? isLiked
+        ? ExitingUp
+        : ExitingDown
+      : undefined
+
+  return (
+    <LayoutAnimationConfig skipEntering skipExiting>
+      {likeCount > 0 ? (
+        <View style={[a.justify_center]}>
+          <Animated.View entering={enteringAnimation} key={key}>
+            <Text
+              testID="likeCount"
+              style={[
+                big ? a.text_md : {fontSize: 15},
+                a.user_select_none,
+                isLiked
+                  ? [a.font_bold, s.likeColor]
+                  : {color: t.palette.contrast_500},
+              ]}>
+              {formattedCount}
+            </Text>
+          </Animated.View>
+          {shouldAnimate && (likeCount > 1 || !isLiked) ? (
+            <Animated.View
+              entering={exitingAnimation}
+              // Add 2 to the key so there are never duplicates
+              key={key + 2}
+              style={[a.absolute, {width: 50, opacity: 0}]}
+              aria-disabled={true}>
+              <Text
+                style={[
+                  big ? a.text_md : {fontSize: 15},
+                  a.user_select_none,
+                  isLiked
+                    ? [a.font_bold, s.likeColor]
+                    : {color: t.palette.contrast_500},
+                ]}>
+                {formattedPrevCount}
+              </Text>
+            </Animated.View>
+          ) : null}
+        </View>
+      ) : null}
+    </LayoutAnimationConfig>
+  )
+}