Threads v2 cleanup (#8902)

* Delete root PostThread component

* Remove PostThreadItem, migrate DebugMod to use new components

* Remove other unused components

* Move PostThreadFollowBtn to new home

* Move PostThreadComposePrompt to new home

* Remove gate

* Keep naming in DebugMod

* rm v1 prefs

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/lib/statsig/gates.ts

@@ -8,7 +8,6 @@ export type Gate =
   | 'old_postonboarding'
   | 'onboarding_add_video_feed'
   | 'post_follow_profile_suggested_accounts'
-  | 'post_threads_v2_unspecced'
   | 'remove_show_latest_button'
   | 'test_gate_1'
   | 'test_gate_2'

src/screens/PostThread/components/ThreadComposePrompt.tsx

@@ -14,7 +14,7 @@ import {transparentifyColor} from '#/alf/util/colorGeneration'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
-export function PostThreadComposePrompt({
+export function ThreadComposePrompt({
   onPressCompose,
   style,
 }: {

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -32,9 +32,9 @@ import {useSession} from '#/state/session'
 import {type OnPostSuccessData} from '#/state/shell/composer'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {type PostSource} from '#/state/unstable-post-source'
-import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {ThreadItemAnchorFollowButton} from '#/screens/PostThread/components/ThreadItemAnchorFollowButton'
 import {
   LINEAR_AVI_WIDTH,
   OUTER_SPACE,
@@ -367,7 +367,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
           </Link>
           {showFollowButton && (
             <View collapsable={false}>
-              <PostThreadFollowBtn did={post.author.did} />
+              <ThreadItemAnchorFollowButton did={post.author.did} />
             </View>
           )}
         </View>

src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx

@@ -17,7 +17,7 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 
-export function PostThreadFollowBtn({did}: {did: string}) {
+export function ThreadItemAnchorFollowButton({did}: {did: string}) {
   const {data: profile, isLoading} = useProfileQuery({did})
 
   // We will never hit this - the profile will always be cached or loaded above

src/screens/PostThread/index.tsx

@@ -12,9 +12,9 @@ import {useSession} from '#/state/session'
 import {type OnPostSuccessData} from '#/state/shell/composer'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useUnstablePostSource} from '#/state/unstable-post-source'
-import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt'
 import {List, type ListMethods} from '#/view/com/util/List'
 import {HeaderDropdown} from '#/screens/PostThread/components/HeaderDropdown'
+import {ThreadComposePrompt} from '#/screens/PostThread/components/ThreadComposePrompt'
 import {ThreadError} from '#/screens/PostThread/components/ThreadError'
 import {
   ThreadItemAnchor,
@@ -455,7 +455,7 @@ export function PostThread({uri}: {uri: string}) {
         return (
           <View>
             {gtMobile && (
-              <PostThreadComposePrompt onPressCompose={onReplyToAnchor} />
+              <ThreadComposePrompt onPressCompose={onReplyToAnchor} />
             )}
           </View>
         )
@@ -586,7 +586,7 @@ function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) {
 
   return (
     <Animated.View style={[a.fixed, a.left_0, a.right_0, animatedStyle]}>
-      <PostThreadComposePrompt onPressCompose={onPressReply} />
+      <ThreadComposePrompt onPressCompose={onPressReply} />
     </Animated.View>
   )
 }

src/screens/Settings/ThreadPreferences.tsx

@@ -6,11 +6,6 @@ import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
-import {useGate} from '#/lib/statsig/statsig'
-import {
-  usePreferencesQuery,
-  useSetThreadViewPreferencesMutation,
-} from '#/state/queries/preferences'
 import {
   normalizeSort,
   normalizeView,
@@ -18,7 +13,6 @@ import {
 } from '#/state/queries/preferences/useThreadPreferences'
 import {atoms as a, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
-import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
 import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
 import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
 import {Tree_Stroke2_Corner0_Rounded as TreeIcon} from '#/components/icons/Tree'
@@ -28,16 +22,6 @@ import * as SettingsList from './components/SettingsList'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
 export function ThreadPreferencesScreen({}: Props) {
-  const gate = useGate()
-
-  return gate('post_threads_v2_unspecced') ? (
-    <ThreadPreferencesV2 />
-  ) : (
-    <ThreadPreferencesV1 />
-  )
-}
-
-export function ThreadPreferencesV2() {
   const t = useTheme()
   const {_} = useLingui()
   const {
@@ -150,145 +134,3 @@ export function ThreadPreferencesV2() {
     </Layout.Screen>
   )
 }
-
-export function ThreadPreferencesV1() {
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const {data: preferences} = usePreferencesQuery()
-  const {mutate: setThreadViewPrefs, variables} =
-    useSetThreadViewPreferencesMutation()
-
-  const sortReplies = variables?.sort ?? preferences?.threadViewPrefs?.sort
-
-  const prioritizeFollowedUsers = Boolean(
-    variables?.prioritizeFollowedUsers ??
-      preferences?.threadViewPrefs?.prioritizeFollowedUsers,
-  )
-  const treeViewEnabled = Boolean(
-    variables?.lab_treeViewEnabled ??
-      preferences?.threadViewPrefs?.lab_treeViewEnabled,
-  )
-
-  return (
-    <Layout.Screen testID="threadPreferencesScreen">
-      <Layout.Header.Outer>
-        <Layout.Header.BackButton />
-        <Layout.Header.Content>
-          <Layout.Header.TitleText>
-            <Trans>Thread Preferences</Trans>
-          </Layout.Header.TitleText>
-        </Layout.Header.Content>
-        <Layout.Header.Slot />
-      </Layout.Header.Outer>
-      <Layout.Content>
-        <SettingsList.Container>
-          <SettingsList.Group>
-            <SettingsList.ItemIcon icon={BubblesIcon} />
-            <SettingsList.ItemText>
-              <Trans>Sort replies</Trans>
-            </SettingsList.ItemText>
-            <View style={[a.w_full, a.gap_md]}>
-              <Text style={[a.flex_1, t.atoms.text_contrast_medium]}>
-                <Trans>Sort replies to the same post by:</Trans>
-              </Text>
-              <Toggle.Group
-                label={_(msg`Sort replies by`)}
-                type="radio"
-                values={sortReplies ? [sortReplies] : []}
-                onChange={values => setThreadViewPrefs({sort: values[0]})}>
-                <View style={[a.gap_sm, a.flex_1]}>
-                  <Toggle.Item name="hotness" label={_(msg`Hot replies first`)}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText>
-                      <Trans>Hot replies first</Trans>
-                    </Toggle.LabelText>
-                  </Toggle.Item>
-                  <Toggle.Item
-                    name="oldest"
-                    label={_(msg`Oldest replies first`)}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText>
-                      <Trans>Oldest replies first</Trans>
-                    </Toggle.LabelText>
-                  </Toggle.Item>
-                  <Toggle.Item
-                    name="newest"
-                    label={_(msg`Newest replies first`)}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText>
-                      <Trans>Newest replies first</Trans>
-                    </Toggle.LabelText>
-                  </Toggle.Item>
-                  <Toggle.Item
-                    name="most-likes"
-                    label={_(msg`Most-liked replies first`)}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText>
-                      <Trans>Most-liked first</Trans>
-                    </Toggle.LabelText>
-                  </Toggle.Item>
-                  <Toggle.Item
-                    name="random"
-                    label={_(msg`Random (aka "Poster's Roulette")`)}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText>
-                      <Trans>Random (aka "Poster's Roulette")</Trans>
-                    </Toggle.LabelText>
-                  </Toggle.Item>
-                </View>
-              </Toggle.Group>
-            </View>
-          </SettingsList.Group>
-          <SettingsList.Group>
-            <SettingsList.ItemIcon icon={PersonGroupIcon} />
-            <SettingsList.ItemText>
-              <Trans>Prioritize your Follows</Trans>
-            </SettingsList.ItemText>
-            <Toggle.Item
-              type="checkbox"
-              name="prioritize-follows"
-              label={_(msg`Prioritize your Follows`)}
-              value={prioritizeFollowedUsers}
-              onChange={value =>
-                setThreadViewPrefs({
-                  prioritizeFollowedUsers: value,
-                })
-              }
-              style={[a.w_full, a.gap_md]}>
-              <Toggle.LabelText style={[a.flex_1]}>
-                <Trans>
-                  Show replies by people you follow before all other replies
-                </Trans>
-              </Toggle.LabelText>
-              <Toggle.Platform />
-            </Toggle.Item>
-          </SettingsList.Group>
-          <SettingsList.Divider />
-          <SettingsList.Group>
-            <SettingsList.ItemIcon icon={BeakerIcon} />
-            <SettingsList.ItemText>
-              <Trans>Experimental</Trans>
-            </SettingsList.ItemText>
-            <Toggle.Item
-              type="checkbox"
-              name="threaded-mode"
-              label={_(msg`Threaded mode`)}
-              value={treeViewEnabled}
-              onChange={value =>
-                setThreadViewPrefs({
-                  lab_treeViewEnabled: value,
-                })
-              }
-              style={[a.w_full, a.gap_md]}>
-              <Toggle.LabelText style={[a.flex_1]}>
-                <Trans>Show replies as threaded</Trans>
-              </Toggle.LabelText>
-              <Toggle.Platform />
-            </Toggle.Item>
-          </SettingsList.Group>
-        </SettingsList.Container>
-      </Layout.Content>
-    </Layout.Screen>
-  )
-}

src/screens/VideoFeed/index.tsx

@@ -80,9 +80,9 @@ import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useSetLightStatusBar} from '#/state/shell/light-status-bar'
-import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt'
 import {List} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {ThreadComposePrompt} from '#/screens/PostThread/components/ThreadComposePrompt'
 import {Header} from '#/screens/VideoFeed/components/Header'
 import {atoms as a, ios, platform, ThemeProvider, useTheme} from '#/alf'
 import {setSystemUITheme} from '#/alf/util/systemUI'
@@ -883,7 +883,7 @@ function Overlay({
               player={player}
               seekingAnimationSV={seekingAnimationSV}
               scrollGesture={scrollGesture}>
-              <PostThreadComposePrompt
+              <ThreadComposePrompt
                 onPressCompose={onPressReply}
                 style={[a.pt_md, a.pb_sm]}
               />

src/view/com/post-thread/PostThread.tsx

@@ -1,910 +0,0 @@
-import React, {memo, useRef, useState} from 'react'
-import {useWindowDimensions, View} from 'react-native'
-import {runOnJS, useAnimatedStyle} from 'react-native-reanimated'
-import Animated from 'react-native-reanimated'
-import {
-  AppBskyFeedDefs,
-  type AppBskyFeedThreadgate,
-  moderatePost,
-} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {HITSLOP_10} from '#/lib/constants'
-import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
-import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {useSetTitle} from '#/lib/hooks/useSetTitle'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {ScrollProvider} from '#/lib/ScrollContext'
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {cleanError} from '#/lib/strings/errors'
-import {isAndroid, isNative, isWeb} from '#/platform/detection'
-import {useFeedFeedback} from '#/state/feed-feedback'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {
-  fillThreadModerationCache,
-  sortThread,
-  type ThreadBlocked,
-  type ThreadModerationCache,
-  type ThreadNode,
-  type ThreadNotFound,
-  type ThreadPost,
-  usePostThreadQuery,
-} from '#/state/queries/post-thread'
-import {useSetThreadViewPreferencesMutation} from '#/state/queries/preferences'
-import {usePreferencesQuery} from '#/state/queries/preferences'
-import {useSession} from '#/state/session'
-import {useShellLayout} from '#/state/shell/shell-layout'
-import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
-import {useUnstablePostSource} from '#/state/unstable-post-source'
-import {List, type ListMethods} from '#/view/com/util/List'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
-import {Header} from '#/components/Layout'
-import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
-import * as Menu from '#/components/Menu'
-import {Text} from '#/components/Typography'
-import {PostThreadComposePrompt} from './PostThreadComposePrompt'
-import {PostThreadItem} from './PostThreadItem'
-import {PostThreadLoadMore} from './PostThreadLoadMore'
-import {PostThreadShowHiddenReplies} from './PostThreadShowHiddenReplies'
-
-// FlatList maintainVisibleContentPosition breaks if too many items
-// are prepended. This seems to be an optimal number based on *shrug*.
-const PARENTS_CHUNK_SIZE = 15
-
-const MAINTAIN_VISIBLE_CONTENT_POSITION = {
-  // We don't insert any elements before the root row while loading.
-  // So the row we want to use as the scroll anchor is the first row.
-  minIndexForVisible: 0,
-}
-
-const REPLY_PROMPT = {_reactKey: '__reply__'}
-const LOAD_MORE = {_reactKey: '__load_more__'}
-const SHOW_HIDDEN_REPLIES = {_reactKey: '__show_hidden_replies__'}
-const SHOW_MUTED_REPLIES = {_reactKey: '__show_muted_replies__'}
-
-enum HiddenRepliesState {
-  Hide,
-  Show,
-  ShowAndOverridePostHider,
-}
-
-type YieldedItem =
-  | ThreadPost
-  | ThreadBlocked
-  | ThreadNotFound
-  | typeof SHOW_HIDDEN_REPLIES
-  | typeof SHOW_MUTED_REPLIES
-type RowItem =
-  | YieldedItem
-  // TODO: TS doesn't actually enforce it's one of these, it only enforces matching shape.
-  | typeof REPLY_PROMPT
-  | typeof LOAD_MORE
-
-type ThreadSkeletonParts = {
-  parents: YieldedItem[]
-  highlightedPost: ThreadNode
-  replies: YieldedItem[]
-}
-
-const keyExtractor = (item: RowItem) => {
-  return item._reactKey
-}
-
-export function PostThread({uri}: {uri: string}) {
-  const {hasSession, currentAccount} = useSession()
-  const {_} = useLingui()
-  const t = useTheme()
-  const {isMobile} = useWebMediaQueries()
-  const initialNumToRender = useInitialNumToRender()
-  const {height: windowHeight} = useWindowDimensions()
-  const [hiddenRepliesState, setHiddenRepliesState] = React.useState(
-    HiddenRepliesState.Hide,
-  )
-  const headerRef = React.useRef<View | null>(null)
-  const anchorPostSource = useUnstablePostSource(uri)
-  const feedFeedback = useFeedFeedback(anchorPostSource?.feed, hasSession)
-
-  const {data: preferences} = usePreferencesQuery()
-  const {
-    isFetching,
-    isError: isThreadError,
-    error: threadError,
-    refetch,
-    data: {thread, threadgate} = {},
-    dataUpdatedAt: fetchedAt,
-  } = usePostThreadQuery(uri)
-
-  // The original source of truth for these are the server settings.
-  const serverPrefs = preferences?.threadViewPrefs
-  const serverPrioritizeFollowedUsers =
-    serverPrefs?.prioritizeFollowedUsers ?? true
-  const serverTreeViewEnabled = serverPrefs?.lab_treeViewEnabled ?? false
-  const serverSortReplies = serverPrefs?.sort ?? 'hotness'
-
-  // However, we also need these to work locally for PWI (without persistence).
-  // So we're mirroring them locally.
-  const prioritizeFollowedUsers = serverPrioritizeFollowedUsers
-  const [treeViewEnabled, setTreeViewEnabled] = useState(serverTreeViewEnabled)
-  const [sortReplies, setSortReplies] = useState(serverSortReplies)
-
-  // We'll reset the local state if new server state flows down to us.
-  const [prevServerPrefs, setPrevServerPrefs] = useState(serverPrefs)
-  if (prevServerPrefs !== serverPrefs) {
-    setPrevServerPrefs(serverPrefs)
-    setTreeViewEnabled(serverTreeViewEnabled)
-    setSortReplies(serverSortReplies)
-  }
-
-  // And we'll update the local state when mutating the server prefs.
-  const {mutate: mutateThreadViewPrefs} = useSetThreadViewPreferencesMutation()
-  function updateTreeViewEnabled(newTreeViewEnabled: boolean) {
-    setTreeViewEnabled(newTreeViewEnabled)
-    if (hasSession) {
-      mutateThreadViewPrefs({lab_treeViewEnabled: newTreeViewEnabled})
-    }
-  }
-  function updateSortReplies(newSortReplies: string) {
-    setSortReplies(newSortReplies)
-    if (hasSession) {
-      mutateThreadViewPrefs({sort: newSortReplies})
-    }
-  }
-
-  const treeView = React.useMemo(
-    () => treeViewEnabled && hasBranchingReplies(thread),
-    [treeViewEnabled, thread],
-  )
-
-  const rootPost = thread?.type === 'post' ? thread.post : undefined
-  const rootPostRecord = thread?.type === 'post' ? thread.record : undefined
-  const threadgateRecord = threadgate?.record as
-    | AppBskyFeedThreadgate.Record
-    | undefined
-  const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
-    threadgateRecord,
-  })
-
-  const moderationOpts = useModerationOpts()
-  const isNoPwi = React.useMemo(() => {
-    const mod =
-      rootPost && moderationOpts
-        ? moderatePost(rootPost, moderationOpts)
-        : undefined
-    return !!mod
-      ?.ui('contentList')
-      .blurs.find(
-        cause =>
-          cause.type === 'label' &&
-          cause.labelDef.identifier === '!no-unauthenticated',
-      )
-  }, [rootPost, moderationOpts])
-
-  // Values used for proper rendering of parents
-  const ref = useRef<ListMethods>(null)
-  const highlightedPostRef = useRef<View | null>(null)
-  const [maxParents, setMaxParents] = React.useState(
-    isWeb ? Infinity : PARENTS_CHUNK_SIZE,
-  )
-  const [maxReplies, setMaxReplies] = React.useState(50)
-
-  useSetTitle(
-    rootPost && !isNoPwi
-      ? `${sanitizeDisplayName(
-          rootPost.author.displayName || `@${rootPost.author.handle}`,
-        )}: "${rootPostRecord!.text}"`
-      : '',
-  )
-
-  // On native, this is going to start out `true`. We'll toggle it to `false` after the initial render if flushed.
-  // This ensures that the first render contains no parents--even if they are already available in the cache.
-  // We need to delay showing them so that we can use maintainVisibleContentPosition to keep the main post on screen.
-  // On the web this is not necessary because we can synchronously adjust the scroll in onContentSizeChange instead.
-  const [deferParents, setDeferParents] = React.useState(isNative)
-
-  const currentDid = currentAccount?.did
-  const threadModerationCache = React.useMemo(() => {
-    const cache: ThreadModerationCache = new WeakMap()
-    if (thread && moderationOpts) {
-      fillThreadModerationCache(cache, thread, moderationOpts)
-    }
-    return cache
-  }, [thread, moderationOpts])
-
-  const [justPostedUris, setJustPostedUris] = React.useState(
-    () => new Set<string>(),
-  )
-
-  const [fetchedAtCache] = React.useState(() => new Map<string, number>())
-  const [randomCache] = React.useState(() => new Map<string, number>())
-  const skeleton = React.useMemo(() => {
-    if (!thread) return null
-    return createThreadSkeleton(
-      sortThread(
-        thread,
-        {
-          // Prefer local state as the source of truth.
-          sort: sortReplies,
-          lab_treeViewEnabled: treeViewEnabled,
-          prioritizeFollowedUsers,
-        },
-        threadModerationCache,
-        currentDid,
-        justPostedUris,
-        threadgateHiddenReplies,
-        fetchedAtCache,
-        fetchedAt,
-        randomCache,
-      ),
-      currentDid,
-      treeView,
-      threadModerationCache,
-      hiddenRepliesState !== HiddenRepliesState.Hide,
-      threadgateHiddenReplies,
-    )
-  }, [
-    thread,
-    prioritizeFollowedUsers,
-    sortReplies,
-    treeViewEnabled,
-    currentDid,
-    treeView,
-    threadModerationCache,
-    hiddenRepliesState,
-    justPostedUris,
-    threadgateHiddenReplies,
-    fetchedAtCache,
-    fetchedAt,
-    randomCache,
-  ])
-
-  const error = React.useMemo(() => {
-    if (AppBskyFeedDefs.isNotFoundPost(thread)) {
-      return {
-        title: _(msg`Post not found`),
-        message: _(msg`The post may have been deleted.`),
-      }
-    } else if (skeleton?.highlightedPost.type === 'blocked') {
-      return {
-        title: _(msg`Post hidden`),
-        message: _(
-          msg`You have blocked the author or you have been blocked by the author.`,
-        ),
-      }
-    } else if (threadError?.message.startsWith('Post not found')) {
-      return {
-        title: _(msg`Post not found`),
-        message: _(msg`The post may have been deleted.`),
-      }
-    } else if (isThreadError) {
-      return {
-        message: threadError ? cleanError(threadError) : undefined,
-      }
-    }
-
-    return null
-  }, [thread, skeleton?.highlightedPost, isThreadError, _, threadError])
-
-  // construct content
-  const posts = React.useMemo(() => {
-    if (!skeleton) return []
-
-    const {parents, highlightedPost, replies} = skeleton
-    let arr: RowItem[] = []
-    if (highlightedPost.type === 'post') {
-      // We want to wait for parents to load before rendering.
-      // If you add something here, you'll need to update both
-      // maintainVisibleContentPosition and onContentSizeChange
-      // to "hold onto" the correct row instead of the first one.
-
-      /*
-       * This is basically `!!parents.length`, see notes on `isParentLoading`
-       */
-      if (!highlightedPost.ctx.isParentLoading && !deferParents) {
-        // When progressively revealing parents, rendering a placeholder
-        // here will cause scrolling jumps. Don't add it unless you test it.
-        // QT'ing this thread is a great way to test all the scrolling hacks:
-        // https://bsky.app/profile/samuel.bsky.team/post/3kjqhblh6qk2o
-
-        // Everything is loaded
-        let startIndex = Math.max(0, parents.length - maxParents)
-        for (let i = startIndex; i < parents.length; i++) {
-          arr.push(parents[i])
-        }
-      }
-      arr.push(highlightedPost)
-      if (!highlightedPost.post.viewer?.replyDisabled) {
-        arr.push(REPLY_PROMPT)
-      }
-      for (let i = 0; i < replies.length; i++) {
-        arr.push(replies[i])
-        if (i === maxReplies) {
-          break
-        }
-      }
-    }
-    return arr
-  }, [skeleton, deferParents, maxParents, maxReplies])
-
-  // This is only used on the web to keep the post in view when its parents load.
-  // On native, we rely on `maintainVisibleContentPosition` instead.
-  const didAdjustScrollWeb = useRef<boolean>(false)
-  const onContentSizeChangeWeb = React.useCallback(() => {
-    // only run once
-    if (didAdjustScrollWeb.current) {
-      return
-    }
-    // wait for loading to finish
-    if (thread?.type === 'post' && !!thread.parent) {
-      // Measure synchronously to avoid a layout jump.
-      const postNode = highlightedPostRef.current
-      const headerNode = headerRef.current
-      if (postNode && headerNode) {
-        let pageY = (postNode as any as Element).getBoundingClientRect().top
-        pageY -= (headerNode as any as Element).getBoundingClientRect().height
-        pageY = Math.max(0, pageY)
-        ref.current?.scrollToOffset({
-          animated: false,
-          offset: pageY,
-        })
-      }
-      didAdjustScrollWeb.current = true
-    }
-  }, [thread])
-
-  // On native, we reveal parents in chunks. Although they're all already
-  // loaded and FlatList already has its own virtualization, unfortunately FlatList
-  // has a bug that causes the content to jump around if too many items are getting
-  // prepended at once. It also jumps around if items get prepended during scroll.
-  // To work around this, we prepend rows after scroll bumps against the top and rests.
-  const needsBumpMaxParents = React.useRef(false)
-  const onStartReached = React.useCallback(() => {
-    if (skeleton?.parents && maxParents < skeleton.parents.length) {
-      needsBumpMaxParents.current = true
-    }
-  }, [maxParents, skeleton?.parents])
-  const bumpMaxParentsIfNeeded = React.useCallback(() => {
-    if (!isNative) {
-      return
-    }
-    if (needsBumpMaxParents.current) {
-      needsBumpMaxParents.current = false
-      setMaxParents(n => n + PARENTS_CHUNK_SIZE)
-    }
-  }, [])
-  const onScrollToTop = bumpMaxParentsIfNeeded
-  const onMomentumEnd = React.useCallback(() => {
-    'worklet'
-    runOnJS(bumpMaxParentsIfNeeded)()
-  }, [bumpMaxParentsIfNeeded])
-
-  const onEndReached = React.useCallback(() => {
-    if (isFetching || posts.length < maxReplies) return
-    setMaxReplies(prev => prev + 50)
-  }, [isFetching, maxReplies, posts.length])
-
-  const onPostReply = React.useCallback(
-    (postUri: string | undefined) => {
-      refetch()
-      if (postUri) {
-        setJustPostedUris(set => {
-          const nextSet = new Set(set)
-          nextSet.add(postUri)
-          return nextSet
-        })
-      }
-    },
-    [refetch],
-  )
-
-  const {openComposer} = useOpenComposer()
-  const onReplyToAnchor = React.useCallback(() => {
-    if (thread?.type !== 'post') {
-      return
-    }
-    if (anchorPostSource) {
-      feedFeedback.sendInteraction({
-        item: thread.post.uri,
-        event: 'app.bsky.feed.defs#interactionReply',
-        feedContext: anchorPostSource.post.feedContext,
-        reqId: anchorPostSource.post.reqId,
-      })
-    }
-    openComposer({
-      replyTo: {
-        uri: thread.post.uri,
-        cid: thread.post.cid,
-        text: thread.record.text,
-        author: thread.post.author,
-        embed: thread.post.embed,
-        moderation: threadModerationCache.get(thread),
-        langs: thread.record.langs,
-      },
-      onPost: onPostReply,
-    })
-  }, [
-    openComposer,
-    thread,
-    onPostReply,
-    threadModerationCache,
-    anchorPostSource,
-    feedFeedback,
-  ])
-
-  const canReply = !error && rootPost && !rootPost.viewer?.replyDisabled
-  const hasParents =
-    skeleton?.highlightedPost?.type === 'post' &&
-    (skeleton.highlightedPost.ctx.isParentLoading ||
-      Boolean(skeleton?.parents && skeleton.parents.length > 0))
-
-  const renderItem = ({item, index}: {item: RowItem; index: number}) => {
-    if (item === REPLY_PROMPT && hasSession) {
-      return (
-        <View>
-          {!isMobile && (
-            <PostThreadComposePrompt onPressCompose={onReplyToAnchor} />
-          )}
-        </View>
-      )
-    } else if (item === SHOW_HIDDEN_REPLIES || item === SHOW_MUTED_REPLIES) {
-      return (
-        <PostThreadShowHiddenReplies
-          type={item === SHOW_HIDDEN_REPLIES ? 'hidden' : 'muted'}
-          onPress={() =>
-            setHiddenRepliesState(
-              item === SHOW_HIDDEN_REPLIES
-                ? HiddenRepliesState.Show
-                : HiddenRepliesState.ShowAndOverridePostHider,
-            )
-          }
-          hideTopBorder={index === 0}
-        />
-      )
-    } else if (isThreadNotFound(item)) {
-      return (
-        <View
-          style={[
-            a.p_lg,
-            index !== 0 && a.border_t,
-            t.atoms.border_contrast_low,
-            t.atoms.bg_contrast_25,
-          ]}>
-          <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
-            <Trans>Deleted post.</Trans>
-          </Text>
-        </View>
-      )
-    } else if (isThreadBlocked(item)) {
-      return (
-        <View
-          style={[
-            a.p_lg,
-            index !== 0 && a.border_t,
-            t.atoms.border_contrast_low,
-            t.atoms.bg_contrast_25,
-          ]}>
-          <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
-            <Trans>Blocked post.</Trans>
-          </Text>
-        </View>
-      )
-    } else if (isThreadPost(item)) {
-      const prev = isThreadPost(posts[index - 1])
-        ? (posts[index - 1] as ThreadPost)
-        : undefined
-      const next = isThreadPost(posts[index + 1])
-        ? (posts[index + 1] as ThreadPost)
-        : undefined
-      const showChildReplyLine = (next?.ctx.depth || 0) > item.ctx.depth
-      const showParentReplyLine =
-        (item.ctx.depth < 0 && !!item.parent) || item.ctx.depth > 1
-      const hasUnrevealedParents =
-        index === 0 && skeleton?.parents && maxParents < skeleton.parents.length
-
-      if (!treeView && prev && item.ctx.hasMoreSelfThread) {
-        return <PostThreadLoadMore post={prev.post} />
-      }
-
-      return (
-        <View
-          ref={item.ctx.isHighlightedPost ? highlightedPostRef : undefined}
-          onLayout={deferParents ? () => setDeferParents(false) : undefined}>
-          <PostThreadItem
-            post={item.post}
-            record={item.record}
-            threadgateRecord={threadgateRecord ?? undefined}
-            moderation={threadModerationCache.get(item)}
-            treeView={treeView}
-            depth={item.ctx.depth}
-            prevPost={prev}
-            nextPost={next}
-            isHighlightedPost={item.ctx.isHighlightedPost}
-            hasMore={item.ctx.hasMore}
-            showChildReplyLine={showChildReplyLine}
-            showParentReplyLine={showParentReplyLine}
-            hasPrecedingItem={showParentReplyLine || !!hasUnrevealedParents}
-            overrideBlur={
-              hiddenRepliesState ===
-                HiddenRepliesState.ShowAndOverridePostHider &&
-              item.ctx.depth > 0
-            }
-            onPostReply={onPostReply}
-            hideTopBorder={index === 0 && !item.ctx.isParentLoading}
-            anchorPostSource={anchorPostSource}
-          />
-        </View>
-      )
-    }
-    return null
-  }
-
-  if (!thread || !preferences || error) {
-    return (
-      <ListMaybePlaceholder
-        isLoading={!error}
-        isError={Boolean(error)}
-        noEmpty
-        onRetry={refetch}
-        errorTitle={error?.title}
-        errorMessage={error?.message}
-      />
-    )
-  }
-
-  return (
-    <>
-      <Header.Outer headerRef={headerRef}>
-        <Header.BackButton />
-        <Header.Content>
-          <Header.TitleText>
-            <Trans context="description">Post</Trans>
-          </Header.TitleText>
-        </Header.Content>
-        <Header.Slot>
-          <ThreadMenu
-            sortReplies={sortReplies}
-            treeViewEnabled={treeViewEnabled}
-            setSortReplies={updateSortReplies}
-            setTreeViewEnabled={updateTreeViewEnabled}
-          />
-        </Header.Slot>
-      </Header.Outer>
-
-      <ScrollProvider onMomentumEnd={onMomentumEnd}>
-        <List
-          ref={ref}
-          data={posts}
-          renderItem={renderItem}
-          keyExtractor={keyExtractor}
-          onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
-          onStartReached={onStartReached}
-          onEndReached={onEndReached}
-          onEndReachedThreshold={2}
-          onScrollToTop={onScrollToTop}
-          /**
-           * @see https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition
-           */
-          maintainVisibleContentPosition={
-            isNative && hasParents
-              ? MAINTAIN_VISIBLE_CONTENT_POSITION
-              : undefined
-          }
-          desktopFixedHeight
-          removeClippedSubviews={isAndroid ? false : undefined}
-          ListFooterComponent={
-            <ListFooter
-              // Using `isFetching` over `isFetchingNextPage` is done on purpose here so we get the loader on
-              // initial render
-              isFetchingNextPage={isFetching}
-              error={cleanError(threadError)}
-              onRetry={refetch}
-              // 300 is based on the minimum height of a post. This is enough extra height for the `maintainVisPos` to
-              // work without causing weird jumps on web or glitches on native
-              height={windowHeight - 200}
-            />
-          }
-          initialNumToRender={initialNumToRender}
-          windowSize={11}
-          sideBorders={false}
-        />
-      </ScrollProvider>
-      {isMobile && canReply && hasSession && (
-        <MobileComposePrompt onPressReply={onReplyToAnchor} />
-      )}
-    </>
-  )
-}
-
-let ThreadMenu = ({
-  sortReplies,
-  treeViewEnabled,
-  setSortReplies,
-  setTreeViewEnabled,
-}: {
-  sortReplies: string
-  treeViewEnabled: boolean
-  setSortReplies: (newValue: string) => void
-  setTreeViewEnabled: (newValue: boolean) => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  return (
-    <Menu.Root>
-      <Menu.Trigger label={_(msg`Thread options`)}>
-        {({props}) => (
-          <Button
-            label={_(msg`Thread options`)}
-            size="small"
-            variant="ghost"
-            color="secondary"
-            shape="round"
-            hitSlop={HITSLOP_10}
-            {...props}>
-            <ButtonIcon icon={SettingsSlider} size="md" />
-          </Button>
-        )}
-      </Menu.Trigger>
-      <Menu.Outer>
-        <Menu.LabelText>
-          <Trans>Show replies as</Trans>
-        </Menu.LabelText>
-        <Menu.Group>
-          <Menu.Item
-            label={_(msg`Linear`)}
-            onPress={() => {
-              setTreeViewEnabled(false)
-            }}>
-            <Menu.ItemText>
-              <Trans>Linear</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={!treeViewEnabled} />
-          </Menu.Item>
-          <Menu.Item
-            label={_(msg`Threaded`)}
-            onPress={() => {
-              setTreeViewEnabled(true)
-            }}>
-            <Menu.ItemText>
-              <Trans>Threaded</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={treeViewEnabled} />
-          </Menu.Item>
-        </Menu.Group>
-        <Menu.Divider />
-        <Menu.LabelText>
-          <Trans>Reply sorting</Trans>
-        </Menu.LabelText>
-        <Menu.Group>
-          <Menu.Item
-            label={_(msg`Hot replies first`)}
-            onPress={() => {
-              setSortReplies('hotness')
-            }}>
-            <Menu.ItemText>
-              <Trans>Hot replies first</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={sortReplies === 'hotness'} />
-          </Menu.Item>
-          <Menu.Item
-            label={_(msg`Oldest replies first`)}
-            onPress={() => {
-              setSortReplies('oldest')
-            }}>
-            <Menu.ItemText>
-              <Trans>Oldest replies first</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={sortReplies === 'oldest'} />
-          </Menu.Item>
-          <Menu.Item
-            label={_(msg`Newest replies first`)}
-            onPress={() => {
-              setSortReplies('newest')
-            }}>
-            <Menu.ItemText>
-              <Trans>Newest replies first</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={sortReplies === 'newest'} />
-          </Menu.Item>
-          <Menu.Item
-            label={_(msg`Most-liked replies first`)}
-            onPress={() => {
-              setSortReplies('most-likes')
-            }}>
-            <Menu.ItemText>
-              <Trans>Most-liked replies first</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={sortReplies === 'most-likes'} />
-          </Menu.Item>
-          <Menu.Item
-            label={_(msg`Random (aka "Poster's Roulette")`)}
-            onPress={() => {
-              setSortReplies('random')
-            }}>
-            <Menu.ItemText>
-              <Trans>Random (aka "Poster's Roulette")</Trans>
-            </Menu.ItemText>
-            <Menu.ItemRadio selected={sortReplies === 'random'} />
-          </Menu.Item>
-        </Menu.Group>
-      </Menu.Outer>
-    </Menu.Root>
-  )
-}
-ThreadMenu = memo(ThreadMenu)
-
-function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) {
-  const {footerHeight} = useShellLayout()
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      bottom: footerHeight.get(),
-    }
-  })
-
-  return (
-    <Animated.View style={[a.fixed, a.left_0, a.right_0, animatedStyle]}>
-      <PostThreadComposePrompt onPressCompose={onPressReply} />
-    </Animated.View>
-  )
-}
-
-function isThreadPost(v: unknown): v is ThreadPost {
-  return !!v && typeof v === 'object' && 'type' in v && v.type === 'post'
-}
-
-function isThreadNotFound(v: unknown): v is ThreadNotFound {
-  return !!v && typeof v === 'object' && 'type' in v && v.type === 'not-found'
-}
-
-function isThreadBlocked(v: unknown): v is ThreadBlocked {
-  return !!v && typeof v === 'object' && 'type' in v && v.type === 'blocked'
-}
-
-function createThreadSkeleton(
-  node: ThreadNode,
-  currentDid: string | undefined,
-  treeView: boolean,
-  modCache: ThreadModerationCache,
-  showHiddenReplies: boolean,
-  threadgateRecordHiddenReplies: Set<string>,
-): ThreadSkeletonParts | null {
-  if (!node) return null
-
-  return {
-    parents: Array.from(flattenThreadParents(node, !!currentDid)),
-    highlightedPost: node,
-    replies: Array.from(
-      flattenThreadReplies(
-        node,
-        currentDid,
-        treeView,
-        modCache,
-        showHiddenReplies,
-        threadgateRecordHiddenReplies,
-      ),
-    ),
-  }
-}
-
-function* flattenThreadParents(
-  node: ThreadNode,
-  hasSession: boolean,
-): Generator<YieldedItem, void> {
-  if (node.type === 'post') {
-    if (node.parent) {
-      yield* flattenThreadParents(node.parent, hasSession)
-    }
-    if (!node.ctx.isHighlightedPost) {
-      yield node
-    }
-  } else if (node.type === 'not-found') {
-    yield node
-  } else if (node.type === 'blocked') {
-    yield node
-  }
-}
-
-// The enum is ordered to make them easy to merge
-enum HiddenReplyType {
-  None = 0,
-  Muted = 1,
-  Hidden = 2,
-}
-
-function* flattenThreadReplies(
-  node: ThreadNode,
-  currentDid: string | undefined,
-  treeView: boolean,
-  modCache: ThreadModerationCache,
-  showHiddenReplies: boolean,
-  threadgateRecordHiddenReplies: Set<string>,
-): Generator<YieldedItem, HiddenReplyType> {
-  if (node.type === 'post') {
-    // dont show pwi-opted-out posts to logged out users
-    if (!currentDid && hasPwiOptOut(node)) {
-      return HiddenReplyType.None
-    }
-
-    // handle blurred items
-    if (node.ctx.depth > 0) {
-      const modui = modCache.get(node)?.ui('contentList')
-      if (modui?.blur || modui?.filter) {
-        if (!showHiddenReplies || node.ctx.depth > 1) {
-          if ((modui.blurs[0] || modui.filters[0]).type === 'muted') {
-            return HiddenReplyType.Muted
-          }
-          return HiddenReplyType.Hidden
-        }
-      }
-
-      if (!showHiddenReplies) {
-        const hiddenByThreadgate = threadgateRecordHiddenReplies.has(
-          node.post.uri,
-        )
-        const authorIsViewer = node.post.author.did === currentDid
-        if (hiddenByThreadgate && !authorIsViewer) {
-          return HiddenReplyType.Hidden
-        }
-      }
-    }
-
-    if (!node.ctx.isHighlightedPost) {
-      yield node
-    }
-
-    if (node.replies?.length) {
-      let hiddenReplies = HiddenReplyType.None
-      for (const reply of node.replies) {
-        let hiddenReply = yield* flattenThreadReplies(
-          reply,
-          currentDid,
-          treeView,
-          modCache,
-          showHiddenReplies,
-          threadgateRecordHiddenReplies,
-        )
-        if (hiddenReply > hiddenReplies) {
-          hiddenReplies = hiddenReply
-        }
-        if (!treeView && !node.ctx.isHighlightedPost) {
-          break
-        }
-      }
-
-      // show control to enable hidden replies
-      if (node.ctx.depth === 0) {
-        if (hiddenReplies === HiddenReplyType.Muted) {
-          yield SHOW_MUTED_REPLIES
-        } else if (hiddenReplies === HiddenReplyType.Hidden) {
-          yield SHOW_HIDDEN_REPLIES
-        }
-      }
-    }
-  } else if (node.type === 'not-found') {
-    yield node
-  } else if (node.type === 'blocked') {
-    yield node
-  }
-  return HiddenReplyType.None
-}
-
-function hasPwiOptOut(node: ThreadPost) {
-  return !!node.post.author.labels?.find(l => l.val === '!no-unauthenticated')
-}
-
-function hasBranchingReplies(node?: ThreadNode) {
-  if (!node) {
-    return false
-  }
-  if (node.type !== 'post') {
-    return false
-  }
-  if (!node.replies) {
-    return false
-  }
-  if (node.replies.length === 1) {
-    return hasBranchingReplies(node.replies[0])
-  }
-  return true
-}

src/view/com/post-thread/PostThreadLoadMore.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react'
-import {View} from 'react-native'
-import {AppBskyFeedDefs, AtUri} from '@atproto/api'
-import {Trans} from '@lingui/macro'
-
-import {makeProfileLink} from '#/lib/routes/links'
-import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
-import {Link} from '../util/Link'
-import {UserAvatar} from '../util/UserAvatar'
-
-export function PostThreadLoadMore({post}: {post: AppBskyFeedDefs.PostView}) {
-  const t = useTheme()
-
-  const postHref = React.useMemo(() => {
-    const urip = new AtUri(post.uri)
-    return makeProfileLink(post.author, 'post', urip.rkey)
-  }, [post.uri, post.author])
-
-  return (
-    <Link
-      href={postHref}
-      style={[a.flex_row, a.align_center, a.py_md, {paddingHorizontal: 14}]}
-      hoverStyle={[t.atoms.bg_contrast_25]}>
-      <View style={[a.flex_row]}>
-        <View
-          style={{
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 34,
-            height: 34,
-            borderRadius: 18,
-            backgroundColor: t.atoms.bg.backgroundColor,
-            marginRight: -20,
-          }}>
-          <UserAvatar
-            avatar={post.author.avatar}
-            size={30}
-            type={post.author.associated?.labeler ? 'labeler' : 'user'}
-          />
-        </View>
-        <View
-          style={{
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 34,
-            height: 34,
-            borderRadius: 18,
-            backgroundColor: t.atoms.bg.backgroundColor,
-          }}>
-          <UserAvatar
-            avatar={post.author.avatar}
-            size={30}
-            type={post.author.associated?.labeler ? 'labeler' : 'user'}
-          />
-        </View>
-      </View>
-      <View style={[a.px_sm]}>
-        <Text style={[{color: t.palette.primary_500}, a.text_md]}>
-          <Trans>Continue thread...</Trans>
-        </Text>
-      </View>
-    </Link>
-  )
-}

src/view/com/post-thread/PostThreadShowHiddenReplies.tsx

@@ -1,62 +0,0 @@
-import {View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {atoms as a, useTheme} from '#/alf'
-import {Button} from '#/components/Button'
-import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {Text} from '#/components/Typography'
-
-export function PostThreadShowHiddenReplies({
-  type,
-  onPress,
-  hideTopBorder,
-}: {
-  type: 'hidden' | 'muted'
-  onPress: () => void
-  hideTopBorder?: boolean
-}) {
-  const {_} = useLingui()
-  const t = useTheme()
-  const label =
-    type === 'muted' ? _(msg`Show muted replies`) : _(msg`Show hidden replies`)
-
-  return (
-    <Button onPress={onPress} label={label}>
-      {({hovered, pressed}) => (
-        <View
-          style={[
-            a.flex_1,
-            a.flex_row,
-            a.align_center,
-            a.gap_sm,
-            a.py_lg,
-            a.px_xl,
-            !hideTopBorder && a.border_t,
-            t.atoms.border_contrast_low,
-            hovered || pressed ? t.atoms.bg_contrast_25 : t.atoms.bg,
-          ]}>
-          <View
-            style={[
-              t.atoms.bg_contrast_25,
-              a.align_center,
-              a.justify_center,
-              {
-                width: 26,
-                height: 26,
-                borderRadius: 13,
-                marginRight: 4,
-              },
-            ]}>
-            <EyeSlash size="sm" fill={t.atoms.text_contrast_medium.color} />
-          </View>
-          <Text
-            style={[t.atoms.text_contrast_medium, a.flex_1, a.leading_snug]}
-            numberOfLines={1}>
-            {label}
-          </Text>
-        </View>
-      )}
-    </Button>
-  )
-}

src/view/screens/DebugMod.tsx

@@ -31,8 +31,11 @@ import {
   groupNotifications,
   shouldFilterNotif,
 } from '#/state/queries/notifications/util'
+import {threadPost} from '#/state/queries/usePostThread/views'
 import {useSession} from '#/state/session'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
+import {ThreadItemAnchor} from '#/screens/PostThread/components/ThreadItemAnchor'
+import {ThreadItemPost} from '#/screens/PostThread/components/ThreadItemPost'
 import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -49,7 +52,6 @@ import * as ProfileCard from '#/components/ProfileCard'
 import {H1, H3, P, Text} from '#/components/Typography'
 import {ScreenHider} from '../../components/moderation/ScreenHider'
 import {NotificationFeedItem} from '../com/notifications/NotificationFeedItem'
-import {PostThreadItem} from '../com/post-thread/PostThreadItem'
 import {PostFeedItem} from '../com/posts/PostFeedItem'
 
 const LABEL_VALUES: (keyof typeof LABELS)[] = Object.keys(
@@ -519,13 +521,13 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
                   <MockPostFeedItem post={post} moderation={postModeration} />
 
                   <Heading title="Post" subtitle="viewed directly" />
-                  <MockPostThreadItem post={post} moderation={postModeration} />
+                  <MockPostThreadItem post={post} moderationOpts={modOpts} />
 
                   <Heading title="Post" subtitle="reply in thread" />
                   <MockPostThreadItem
                     post={post}
-                    moderation={postModeration}
+                    moderationOpts={modOpts}
-                    reply
+                    isReply
                   />
                 </>
               )}
@@ -837,28 +839,33 @@ function MockPostFeedItem({
 
 function MockPostThreadItem({
   post,
-  moderation,
+  moderationOpts,
-  reply,
+  isReply,
 }: {
   post: AppBskyFeedDefs.PostView
-  moderation: ModerationDecision
+  moderationOpts: ModerationOpts
-  reply?: boolean
+  isReply?: boolean
 }) {
-  return (
+  const thread = threadPost({
-    <PostThreadItem
+    uri: post.uri,
-      // @ts-ignore
+    depth: isReply ? 1 : 0,
-      post={post}
+    value: {
-      record={post.record as AppBskyFeedPost.Record}
+      $type: 'app.bsky.unspecced.defs#threadItemPost',
-      moderation={moderation}
+      post,
-      depth={reply ? 1 : 0}
+      moreParents: false,
-      isHighlightedPost={!reply}
+      moreReplies: 0,
-      treeView={false}
+      opThread: false,
-      prevPost={undefined}
+      hiddenByThreadgate: false,
-      nextPost={undefined}
+      mutedByViewer: false,
-      hasPrecedingItem={false}
+    },
-      overrideBlur={false}
+    moderationOpts,
-      onPostReply={() => {}}
+    threadgateHiddenReplies: new Set<string>(),
-    />
+  })
+
+  return isReply ? (
+    <ThreadItemPost item={thread} />
+  ) : (
+    <ThreadItemAnchor item={thread} />
   )
 }
 

src/view/screens/PostThread.tsx

@@ -5,17 +5,14 @@ import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
-import {useGate} from '#/lib/statsig/statsig'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread'
 import {PostThread} from '#/screens/PostThread'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export function PostThreadScreen({route}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
-  const gate = useGate()
 
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -28,11 +25,7 @@ export function PostThreadScreen({route}: Props) {
 
   return (
     <Layout.Screen testID="postThreadScreen">
-      {gate('post_threads_v2_unspecced') || __DEV__ ? (
+      <PostThread uri={uri} />
-        <PostThread uri={uri} />
-      ) : (
-        <PostThreadComponent uri={uri} />
-      )}
     </Layout.Screen>
   )
 }