Merge branch 'main' into candidate

src/components/Parse/HTML.tsx

@@ -15,7 +15,7 @@ import { ElementType, parseDocument } from 'htmlparser2'
 import i18next from 'i18next'
 import React, { useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable, Text, TextStyleIOS, View } from 'react-native'
+import { Platform, Pressable, Text, View } from 'react-native'
 
 export interface Props {
   content: string
@@ -78,8 +78,8 @@ const ParseHTML: React.FC<Props> = ({
         return node.data
       case ElementType.Tag:
         if (node.name === 'span') {
-          if (node.attribs.class?.includes('invisible')) return ''
+          if (node.attribs.class?.includes('invisible') && !showFullLink) return ''
-          if (node.attribs.class?.includes('ellipsis'))
+          if (node.attribs.class?.includes('ellipsis') && !showFullLink)
             return node.children.map(child => unwrapNode(child)).join('') + '...'
         }
         return node.children.map(child => unwrapNode(child)).join('')
@@ -87,15 +87,26 @@ const ParseHTML: React.FC<Props> = ({
         return ''
     }
   }
-  const startingOfText = useRef<boolean>(false)
+  const openingMentions = useRef<boolean>(true)
   const renderNode = (node: ChildNode, index: number) => {
     switch (node.type) {
       case ElementType.Text:
-        node.data.trim().length && (startingOfText.current = true) // Removing empty spaces appeared between tags and mentions
+        let content: string = node.data
+        if (openingMentions.current) {
+          if (node.data.trim().length) {
+            openingMentions.current = false // Removing empty spaces appeared between tags and mentions
+            content = excludeMentions?.current.length
+              ? node.data.replace(new RegExp(/^\s+/), '')
+              : node.data
+          } else {
+            content = node.data.trim()
+          }
+        }
+
         return (
           <ParseEmojis
             key={index}
-            content={node.data.replace(new RegExp(/^\s+/), '')}
+            content={content}
             emojis={status?.emojis || emojis}
             size={size}
             adaptiveSize={adaptiveSize}
@@ -108,6 +119,7 @@ const ParseHTML: React.FC<Props> = ({
             const href = node.attribs.href
             if (classes) {
               if (classes.includes('hashtag')) {
+                openingMentions.current = false
                 const tag = href.match(new RegExp(/\/tags?\/(.*)/, 'i'))?.[1].toLowerCase()
                 const paramsHashtag = (params as { hashtag: Mastodon.Tag['name'] } | undefined)
                   ?.hashtag
@@ -142,7 +154,6 @@ const ParseHTML: React.FC<Props> = ({
                 )
                 if (
                   matchedMention &&
-                  !startingOfText.current &&
                   excludeMentions?.current.find(eM => eM.id === matchedMention.id)
                 ) {
                   return null
@@ -165,6 +176,7 @@ const ParseHTML: React.FC<Props> = ({
               }
             }
 
+            openingMentions.current = false
             const content = node.children.map(child => unwrapNode(child)).join('')
             const shouldBeTag = status?.tags?.find(tag => `#${tag.name}` === content)
             return (
@@ -182,7 +194,7 @@ const ParseHTML: React.FC<Props> = ({
                     }
                   }
                 }}
-                children={content !== href ? content : showFullLink ? href : content}
+                children={content}
               />
             )
             break

src/components/Timeline/Default.tsx

@@ -37,6 +37,7 @@ export interface Props {
   disableDetails?: boolean
   disableOnPress?: boolean
   isConversation?: boolean
+  isRemote?: boolean
 }
 
 // When the poll is long
@@ -47,7 +48,8 @@ const TimelineDefault: React.FC<Props> = ({
   highlighted = false,
   disableDetails = false,
   disableOnPress = false,
-  isConversation = false
+  isConversation = false,
+  isRemote = false
 }) => {
   const status = item.reblog ? item.reblog : item
   const rawContent = useRef<string[]>([])
@@ -175,7 +177,8 @@ const TimelineDefault: React.FC<Props> = ({
         inThread: queryKey?.[1].page === 'Toot',
         disableDetails,
         disableOnPress,
-        isConversation
+        isConversation,
+        isRemote
       }}
     >
       {disableOnPress ? (

src/components/Timeline/Shared/Context.tsx

@@ -21,6 +21,7 @@ type StatusContextType = {
   disableDetails?: boolean
   disableOnPress?: boolean
   isConversation?: boolean
+  isRemote?: boolean
 }
 const StatusContext = createContext<StatusContextType>({} as StatusContextType)
 

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -17,7 +17,7 @@ import HeaderSharedReplies from './HeaderShared/Replies'
 import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 const TimelineHeaderDefault: React.FC = () => {
-  const { queryKey, rootQueryKey, status, highlighted, disableDetails, rawContent } =
+  const { queryKey, rootQueryKey, status, highlighted, disableDetails, rawContent, isRemote } =
     useContext(StatusContext)
   if (!status) return null
 
@@ -58,6 +58,14 @@ const TimelineHeaderDefault: React.FC = () => {
               : { marginTop: StyleConstants.Spacing.XS, marginBottom: StyleConstants.Spacing.S })
           }}
         >
+          {isRemote ? (
+            <Icon
+              name='Wifi'
+              size={StyleConstants.Font.Size.M}
+              color={colors.secondary}
+              style={{ marginRight: StyleConstants.Spacing.S }}
+            />
+          ) : null}
           <HeaderSharedCreated
             created_at={status.created_at}
             edited_at={status.edited_at}

src/components/Timeline/Shared/HeaderShared/Replies.tsx

@@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { Fragment, useContext } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import StatusContext from '../Context'
 
 const HeaderSharedReplies: React.FC = () => {
@@ -11,7 +11,7 @@ const HeaderSharedReplies: React.FC = () => {
   if (!isConversation) return null
 
   const navigation = useNavigation<any>()
-  const { t } = useTranslation('componentTimeline')
+  const { t } = useTranslation(['common', 'componentTimeline'])
   const { colors } = useTheme()
 
   const mentionsBeginning = rawContent?.current?.[0]
@@ -26,25 +26,27 @@ const HeaderSharedReplies: React.FC = () => {
   return excludeMentions?.current.length ? (
     <CustomText
       fontStyle='S'
-      style={{
+      style={{ flex: 1, marginLeft: StyleConstants.Spacing.S, color: colors.secondary }}
-        marginLeft: StyleConstants.Spacing.S,
+      numberOfLines={1}
-        flexDirection: 'row',
-        color: colors.secondary
-      }}
     >
-      <>
+      <Trans
-        {t('shared.header.shared.replies')}
+        ns='componentTimeline'
-        {excludeMentions.current.map((mention, index) => (
+        i18nKey='shared.header.shared.replies'
-          <Fragment key={index}>
+        components={[
-            {' '}
+          <>
-            <CustomText
+            {excludeMentions.current.map((mention, index) => (
-              style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
+              <Fragment key={index}>
-              children={`@${mention.username}`}
+                {index > 0 ? t('common:separator') : null}
-              onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
+                <CustomText
-            />
+                  style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
-          </Fragment>
+                  children={`@${mention.username}`}
-        ))}
+                  onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
-      </>
+                />
+              </Fragment>
+            ))}
+          </>
+        ]}
+      />
     </CustomText>
   ) : null
 }

src/i18n/en/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "Follow user",
       "action_true": "Unfollow user"
     },
-    "inLists": "Manage user of lists",
+    "inLists": "Lists containing user",
     "showBoosts": {
       "action_false": "Show user's boosts",
       "action_true": "Hide users's boosts"

src/i18n/en/components/timeline.json

@@ -122,7 +122,7 @@
         "muted": {
           "accessibilityLabel": "Toot muted"
         },
-        "replies": "Replies",
+        "replies": "Replies <0 />",
         "visibility": {
           "direct": {
             "accessibilityLabel": "Toot is a direct message"

src/screens/ImageViewer/index.tsx

@@ -4,7 +4,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
 import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Dimensions,
@@ -50,6 +50,13 @@ const ScreenImagesViewer = ({
 
   const isZoomed = useSharedValue(false)
 
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      setCurrentIndex(viewableItems[0]?.index || 0)
+    },
+    []
+  )
+
   return (
     <View style={{ backgroundColor: 'black' }}>
       <StatusBar hidden />
@@ -107,7 +114,7 @@ const ScreenImagesViewer = ({
         />
       </View>
       <LongPressGestureHandler
-        onEnded={() => {
+        onActivated={() => {
           showActionSheetWithOptions(
             {
               options: [
@@ -207,9 +214,7 @@ const ScreenImagesViewer = ({
               />
             )
           }}
-          onViewableItemsChanged={({ viewableItems }: { viewableItems: ViewToken[] }) => {
+          onViewableItemsChanged={onViewableItemsChanged}
-            setCurrentIndex(viewableItems[0]?.index || 0)
-          }}
           viewabilityConfig={{
             itemVisiblePercentThreshold: 50
           }}

src/screens/Tabs/Public/Root.tsx

@@ -83,7 +83,10 @@ const Root: React.FC<NativeStackScreenProps<TabPublicStackParamList, 'Tab-Public
       swipeEnabled
       renderScene={renderScene}
       renderTabBar={() => null}
-      onIndexChange={index => setSegment(index)}
+      onIndexChange={index => {
+        setSegment(index)
+        setGlobalStorage('app.prev_public_segment', segments[index])
+      }}
       navigationState={{ index: segment, routes }}
       initialLayout={{ width: Dimensions.get('window').width }}
     />

src/screens/Tabs/Shared/Account/Information/Fields.tsx

@@ -1,4 +1,3 @@
-import Icon from '@components/Icon'
 import { ParseHTML } from '@components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -18,10 +17,39 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
   const { colors } = useTheme()
 
   return (
-    <View style={[styles.fields, { borderTopColor: colors.border }]}>
+    <View
+      style={{
+        borderTopWidth: StyleSheet.hairlineWidth,
+        marginBottom: StyleConstants.Spacing.M,
+        borderTopColor: colors.border
+      }}
+    >
       {account.fields.map((field, index) => (
-        <View key={index} style={[styles.field, { borderBottomColor: colors.border }]}>
+        <View
-          <View style={[styles.fieldLeft, { borderRightColor: colors.border }]}>
+          key={index}
+          style={[
+            {
+              flex: 1,
+              flexDirection: 'row',
+              borderBottomWidth: StyleSheet.hairlineWidth,
+              paddingTop: StyleConstants.Spacing.S,
+              paddingBottom: StyleConstants.Spacing.S,
+              borderBottomColor: colors.border
+            },
+            field.verified_at ? { backgroundColor: 'rgba(0, 255, 0, 0.035)' } : undefined
+          ]}
+        >
+          <View
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              borderRightWidth: 1,
+              paddingLeft: StyleConstants.Spacing.S,
+              paddingRight: StyleConstants.Spacing.S,
+              borderRightColor: colors.border
+            }}
+          >
             <ParseHTML
               content={field.name}
               size={'S'}
@@ -30,16 +58,15 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
               numberOfLines={5}
               selectable
             />
-            {field.verified_at ? (
-              <Icon
-                name='CheckCircle'
-                size={StyleConstants.Font.Size.M}
-                color={colors.primaryDefault}
-                style={styles.fieldCheck}
-              />
-            ) : null}
           </View>
-          <View style={styles.fieldRight}>
+          <View
+            style={{
+              flex: 2,
+              justifyContent: 'center',
+              paddingLeft: StyleConstants.Spacing.S,
+              paddingRight: StyleConstants.Spacing.S
+            }}
+          >
             <ParseHTML
               content={field.value}
               size={'S'}
@@ -55,33 +82,4 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
   )
 }
 
-const styles = StyleSheet.create({
-  fields: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    marginBottom: StyleConstants.Spacing.M
-  },
-  field: {
-    flex: 1,
-    flexDirection: 'row',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    paddingTop: StyleConstants.Spacing.S,
-    paddingBottom: StyleConstants.Spacing.S
-  },
-  fieldLeft: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRightWidth: 1,
-    paddingLeft: StyleConstants.Spacing.S,
-    paddingRight: StyleConstants.Spacing.S
-  },
-  fieldCheck: { marginLeft: StyleConstants.Spacing.XS },
-  fieldRight: {
-    flex: 2,
-    justifyContent: 'center',
-    paddingLeft: StyleConstants.Spacing.S,
-    paddingRight: StyleConstants.Spacing.S
-  }
-})
-
 export default AccountInformationFields

src/screens/Tabs/Shared/Toot.tsx

@@ -1,14 +1,20 @@
+import Button from '@components/Button'
 import { HeaderLeft } from '@components/Header'
+import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
+import { useQuery } from '@tanstack/react-query'
+import apiGeneral from '@utils/api/general'
+import apiInstance from '@utils/api/instance'
+import { getHost } from '@utils/helpers/urlMatcher'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
-import { QueryKeyTimeline, useTootQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, View } from 'react-native'
+import { Circle } from 'react-native-animated-spinkit'
 import { Path, Svg } from 'react-native-svg'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
@@ -18,74 +24,271 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   }
 }) => {
   const { colors } = useTheme()
-  const { t } = useTranslation('screenTabs')
+  const { t } = useTranslation(['componentTimeline', 'screenTabs'])
+
+  const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
 
   useEffect(() => {
     navigation.setOptions({
-      title: t('shared.toot.name'),
+      headerTitle: () => (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {hasRemoteContent ? (
+            <Icon
+              name='Wifi'
+              size={StyleConstants.Font.Size.M}
+              color={colors.primaryDefault}
+              style={{ marginRight: StyleConstants.Spacing.S }}
+            />
+          ) : null}
+          <CustomText
+            style={{ color: colors.primaryDefault }}
+            fontSize='L'
+            fontWeight='Bold'
+            numberOfLines={1}
+            children={t('screenTabs:shared.toot.name')}
+          />
+        </View>
+      ),
       headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
     })
-  }, [])
+  }, [hasRemoteContent])
 
   const flRef = useRef<FlatList>(null)
   const scrolled = useRef(false)
 
-  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
+  const finalData = useRef<(Mastodon.Status & { _level?: number; _remote?: boolean })[]>([
-  const { data } = useTootQuery({
+    { ...toot, _level: 0, _remote: false }
-    ...queryKey[1],
+  ])
-    options: {
+  const highlightIndex = useRef<number>(0)
-      meta: { toot },
+  const queryLocal = useQuery(
+    ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
+    async () => {
+      const context = await apiInstance<{
+        ancestors: Mastodon.Status[]
+        descendants: Mastodon.Status[]
+      }>({
+        method: 'get',
+        url: `statuses/${toot.id}/context`
+      })
+
+      const statuses: (Mastodon.Status & { _level?: number })[] = [
+        ...context.body.ancestors,
+        toot,
+        ...context.body.descendants
+      ]
+
+      const highlight = context.body.ancestors.length
+      highlightIndex.current = highlight
+
+      for (const [index, status] of statuses.entries()) {
+        if (index < highlight || status.id === toot.id) {
+          statuses[index]._level = 0
+          continue
+        }
+
+        const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
+        statuses[index]._level = (repliedLevel || 0) + 1
+      }
+
+      return { pages: [{ body: statuses }] }
+    },
+    {
+      staleTime: 0,
+      refetchOnMount: true,
       onSuccess: data => {
-        if (data.body.length < 1) {
+        if (data.pages[0].body.length < 1) {
           navigation.goBack()
           return
         }
 
-        if (!scrolled.current) {
+        if (finalData.current.length < data.pages[0].body.length) {
-          scrolled.current = true
+          // if the remote has been loaded first
-          const pointer = data.body.findIndex(({ id }) => id === toot.id)
+          finalData.current = data.pages[0].body
-          if (pointer < 1) return
+
-          const length = flRef.current?.props.data?.length
+          if (!scrolled.current) {
-          if (!length) return
+            scrolled.current = true
-          try {
+            const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
-            setTimeout(() => {
+            if (pointer < 1) return
-              try {
+            const length = flRef.current?.props.data?.length
-                flRef.current?.scrollToIndex({
+            if (!length) return
-                  index: pointer,
+            try {
-                  viewOffset: 100
+              setTimeout(() => {
-                })
+                try {
-              } catch {}
+                  flRef.current?.scrollToIndex({
-            }, 500)
+                    index: pointer,
-          } catch (error) {
+                    viewOffset: 100
-            return
+                  })
+                } catch {}
+              }, 500)
+            } catch (error) {
+              return
+            }
           }
         }
       }
     }
-  })
+  )
+  useQuery(
+    ['Timeline', { page: 'Toot', toot: toot.id, remote: true }],
+    async () => {
+      let context:
+        | {
+            ancestors: Mastodon.Status[]
+            descendants: Mastodon.Status[]
+          }
+        | undefined
+
+      try {
+        const domain = getHost(toot.url || toot.uri)
+        if (!domain?.length) {
+          throw new Error()
+        }
+        const id = (toot.url || toot.uri).match(new RegExp(/\/([0-9]+)$/))?.[1]
+        if (!id?.length) {
+          throw new Error()
+        }
+
+        context = await apiGeneral<{
+          ancestors: Mastodon.Status[]
+          descendants: Mastodon.Status[]
+        }>({
+          method: 'get',
+          domain,
+          url: `api/v1/statuses/${id}/context`
+        }).then(res => res.body)
+      } catch {}
+
+      if (!context) {
+        throw new Error()
+      }
+
+      const statuses: (Mastodon.Status & { _level?: number })[] = [
+        ...context.ancestors,
+        toot,
+        ...context.descendants
+      ]
+
+      const highlight = context.ancestors.length
+      highlightIndex.current = highlight
+
+      for (const [index, status] of statuses.entries()) {
+        if (index < highlight || status.id === toot.id) {
+          statuses[index]._level = 0
+          continue
+        }
+
+        const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
+        statuses[index]._level = (repliedLevel || 0) + 1
+      }
+
+      return { pages: [{ body: statuses }] }
+    },
+    {
+      enabled: toot.account.acct !== toot.account.username, // When on the same instance, these two values are the same
+      staleTime: 0,
+      refetchOnMount: false,
+      onSuccess: data => {
+        if (finalData.current.length < 1 && data.pages[0].body.length < 1) {
+          navigation.goBack()
+          return
+        }
+
+        if (finalData.current?.length < data.pages[0].body.length) {
+          finalData.current = data.pages[0].body.map(remote => {
+            const localMatch = finalData.current?.find(local => local.uri === remote.uri)
+            return localMatch ? { ...localMatch, _remote: false } : { ...remote, _remote: true }
+          })
+          setHasRemoteContent(true)
+        }
+
+        scrolled.current = true
+        const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
+        if (pointer < 1) return
+        const length = flRef.current?.props.data?.length
+        if (!length) return
+        try {
+          setTimeout(() => {
+            try {
+              flRef.current?.scrollToIndex({
+                index: pointer,
+                viewOffset: 100
+              })
+            } catch {}
+          }, 500)
+        } catch (error) {
+          return
+        }
+      }
+    }
+  )
+
+  const empty = () => {
+    switch (queryLocal.status) {
+      case 'error':
+        return (
+          <>
+            <Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
+            <CustomText
+              fontStyle='M'
+              style={{
+                marginTop: StyleConstants.Spacing.S,
+                marginBottom: StyleConstants.Spacing.L,
+                color: colors.primaryDefault
+              }}
+            >
+              {t('componentTimeline:empty.error.message')}
+            </CustomText>
+            <Button
+              type='text'
+              content={t('componentTimeline:empty.error.button')}
+              onPress={() => queryLocal.refetch()}
+            />
+          </>
+        )
+      case 'success':
+        return (
+          <>
+            <Icon
+              name='Smartphone'
+              size={StyleConstants.Font.Size.L}
+              color={colors.primaryDefault}
+            />
+            <CustomText
+              fontStyle='M'
+              style={{
+                marginTop: StyleConstants.Spacing.S,
+                marginBottom: StyleConstants.Spacing.L,
+                color: colors.secondary
+              }}
+            >
+              {t('componentTimeline:empty.success.message')}
+            </CustomText>
+          </>
+        )
+    }
+  }
 
   const heights = useRef<(number | undefined)[]>([])
+  const MAX_LEVEL = 10
+  const ARC = StyleConstants.Avatar.XS / 4
 
   return (
     <FlatList
       ref={flRef}
       scrollEventThrottle={16}
       windowSize={7}
-      data={data?.body}
+      data={finalData.current}
       renderItem={({ item, index }) => {
-        const MAX_LEVEL = 10
+        const prev = finalData.current?.[index - 1]?._level || 0
-        const ARC = StyleConstants.Avatar.XS / 4
-
-        const prev = data?.body[index - 1]?._level || 0
         const curr = item._level
-        const next = data?.body[index + 1]?._level || 0
+        const next = finalData.current?.[index + 1]?._level || 0
 
         return (
           <View
             style={{
               paddingLeft:
-                index > (data?.highlightIndex || 0)
+                index > highlightIndex.current
-                  ? Math.min(item._level, MAX_LEVEL) * StyleConstants.Spacing.S
+                  ? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
                   : undefined
             }}
             onLayout={({
@@ -96,10 +299,11 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
           >
             <TimelineDefault
               item={item}
-              queryKey={queryKey}
+              queryKey={['Timeline', { page: 'Toot', toot: toot.id }]}
               rootQueryKey={rootQueryKey}
               highlighted={toot.id === item.id}
               isConversation={toot.id !== item.id}
+              isRemote={item._remote}
             />
             {curr > 1 || next > 1
               ? [...new Array(curr)].map((_, i) => {
@@ -206,11 +410,12 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
           <>
             <ComponentSeparator
               extraMarginLeft={
-                toot.id === leadingItem.id
+                leadingItem.id === toot.id
                   ? 0
                   : StyleConstants.Avatar.XS +
                     StyleConstants.Spacing.S +
-                    Math.max(0, leadingItem._level - 1) * 8
+                    Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) *
+                      StyleConstants.Spacing.S
               }
             />
             {leadingItem._level > 1
@@ -232,7 +437,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
         const offset = error.averageItemLength * error.index
         flRef.current?.scrollToOffset({ offset })
         try {
-          error.index < (data?.body.length || 0) &&
+          error.index < (finalData.current.length || 0) &&
             setTimeout(
               () =>
                 flRef.current?.scrollToIndex({
@@ -243,6 +448,33 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
             )
         } catch {}
       }}
+      ListEmptyComponent={
+        <View
+          style={{
+            flex: 1,
+            minHeight: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: colors.backgroundDefault
+          }}
+        >
+          {empty()}
+        </View>
+      }
+      ListFooterComponent={
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            backgroundColor: colors.backgroundDefault,
+            marginHorizontal: StyleConstants.Spacing.M
+          }}
+        >
+          {queryLocal.isFetching ? (
+            <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+          ) : null}
+        </View>
+      }
     />
   )
 }

src/utils/queryHooks/timeline.ts

@@ -19,67 +19,6 @@ import deleteItem from './timeline/deleteItem'
 import editItem from './timeline/editItem'
 import updateStatusProperty from './timeline/updateStatusProperty'
 
-const queryFunctionToot = async ({ queryKey, meta }: QueryFunctionContext<QueryKeyTimeline>) => {
-  // @ts-ignore
-  const id = queryKey[1].toot
-  const target =
-    (meta?.toot as Mastodon.Status) ||
-    undefined ||
-    (await apiInstance<Mastodon.Status>({
-      method: 'get',
-      url: `statuses/${id}`
-    }).then(res => res.body))
-  const context = await apiInstance<{
-    ancestors: Mastodon.Status[]
-    descendants: Mastodon.Status[]
-  }>({
-    method: 'get',
-    url: `statuses/${id}/context`
-  })
-
-  const statuses: (Mastodon.Status & { _level?: number })[] = [
-    ...context.body.ancestors,
-    target,
-    ...context.body.descendants
-  ]
-
-  const highlightIndex = context.body.ancestors.length
-
-  for (const [index, status] of statuses.entries()) {
-    if (index < highlightIndex || status.id === id) {
-      statuses[index]._level = 0
-      continue
-    }
-
-    const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
-    statuses[index]._level = (repliedLevel || 0) + 1
-  }
-
-  return { body: statuses, highlightIndex }
-}
-
-const useTootQuery = ({
-  options,
-  ...queryKeyParams
-}: QueryKeyTimeline[1] & {
-  options?: UseQueryOptions<
-    {
-      body: (Mastodon.Status & { _level: number })[]
-      highlightIndex: number
-    },
-    AxiosError
-  >
-}) => {
-  const queryKey: QueryKeyTimeline = ['Timeline', { ...queryKeyParams }]
-  return useQuery(queryKey, queryFunctionToot, {
-    staleTime: 0,
-    refetchOnMount: true,
-    ...options
-  })
-}
-
-/* ----- */
-
 export type QueryKeyTimeline = [
   'Timeline',
   (
@@ -501,4 +440,4 @@ const useTimelineMutation = ({
   })
 }
 
-export { useTootQuery, useTimelineQuery, useTimelineMutation }
+export { useTimelineQuery, useTimelineMutation }