Experiment with #558

src/components/Timeline/Conversation.tsx

@@ -98,7 +98,6 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
         </View>
 
         {conversation.last_status ? (
-          <>
           <View
             style={{
               paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
@@ -107,10 +106,9 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
           >
             <TimelineContent />
             <TimelinePoll />
-            </View>
 
             <TimelineActions />
-          </>
+          </View>
         ) : null}
       </Pressable>
     </StatusContext.Provider>

src/components/Timeline/Default.tsx

@@ -103,8 +103,9 @@ const TimelineDefault: React.FC<Props> = ({
           paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
           paddingLeft: highlighted
             ? 0
-            : (disableDetails ? StyleConstants.Avatar.XS : StyleConstants.Avatar.M) +
+            : (disableDetails || isConversation
-              StyleConstants.Spacing.S,
+                ? StyleConstants.Avatar.XS
+                : StyleConstants.Avatar.M) + StyleConstants.Spacing.S,
           ...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
         }}
       >
@@ -115,9 +116,9 @@ const TimelineDefault: React.FC<Props> = ({
         <TimelineFullConversation />
         <TimelineTranslate />
         <TimelineFeedback />
-      </View>
 
         <TimelineActions />
+      </View>
     </>
   )
 

src/components/Timeline/Notifications.tsx

@@ -47,10 +47,6 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
   const spoilerHidden = notification.status?.spoiler_text?.length
     ? !instanceAccount.preferences?.['reading:expand:spoilers'] && !spoilerExpanded
     : false
-  const copiableContent = useRef<{ content: string; complete: boolean }>({
-    content: '',
-    complete: false
-  })
 
   const { colors } = useTheme()
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
@@ -101,11 +97,11 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
               <TimelineAttachment />
               <TimelineCard />
               <TimelineFullConversation />
+
+              <TimelineActions />
             </View>
           ) : null}
         </View>
-
-        <TimelineActions />
       </>
     )
   }

src/components/Timeline/Shared/Actions.tsx

@@ -263,11 +263,6 @@ const TimelineActions: React.FC = () => {
   }, [status.bookmarked])
 
   return (
-    <View
-      style={{
-        paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-      }}
-    >
     <View style={{ flexDirection: 'row' }}>
       <Pressable
         {...(highlighted
@@ -320,7 +315,6 @@ const TimelineActions: React.FC = () => {
         children={childrenBookmark}
       />
     </View>
-    </View>
   )
 }
 

src/components/Timeline/Shared/Avatar.tsx

@@ -48,8 +48,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
       style={{
         borderRadius: StyleConstants.Avatar.M,
         overflow: 'hidden',
-        marginRight: StyleConstants.Spacing.S,
+        marginRight: StyleConstants.Spacing.S
-        marginLeft: isConversation ? StyleConstants.Avatar.M - StyleConstants.Avatar.XS : undefined
       }}
     />
   )

src/screens/Tabs/Me/SettingsFontsize.tsx

@@ -5,11 +5,7 @@ import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
 import { useAppDispatch } from '@root/store'
 import { TabMeStackScreenProps } from '@utils/navigation/navigators'
-import {
+import { changeFontsize, getSettingsFontsize, SettingsState } from '@utils/slices/settingsSlice'
-  changeFontsize,
-  getSettingsFontsize,
-  SettingsState
-} from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -34,9 +30,7 @@ export const mapFontsizeToName = (size: SettingsState['fontsize']) => {
   }
 }
 
-const TabMeSettingsFontsize: React.FC<
+const TabMeSettingsFontsize: React.FC<TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>> = () => {
-  TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>
-> = () => {
   const { colors, theme } = useTheme()
   const { t } = useTranslation('screenTabs')
   const initialSize = useSelector(getSettingsFontsize)
@@ -86,8 +80,7 @@ const TabMeSettingsFontsize: React.FC<
               marginBottom: StyleConstants.Spacing.M,
               fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
               lineHeight: adaptiveScale(StyleConstants.Font.LineHeight.M, size),
-              color:
+              color: initialSize === size ? colors.primaryDefault : colors.secondary,
-                initialSize === size ? colors.primaryDefault : colors.secondary,
               borderWidth: StyleSheet.hairlineWidth,
               borderColor: colors.border
             }}

src/screens/Tabs/Shared/Toot.tsx

@@ -5,8 +5,10 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList } from 'react-native'
+import { FlatList, View } from 'react-native'
 import { InfiniteQueryObserver, useQueryClient } from '@tanstack/react-query'
+import ComponentSeparator from '@components/Separator'
+import { StyleConstants } from '@utils/styles/constants'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   navigation,
@@ -98,94 +100,49 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
       queryKey={queryKey}
       queryOptions={{ staleTime: 0, refetchOnMount: true }}
       customProps={{
-        renderItem: ({ item }) => {
+        ItemSeparatorComponent: ({ leadingItem }) => {
+          const levels = {
+            current:
+              replyLevels.current.find(reply => reply.id === leadingItem.in_reply_to_id)?.level || 0
+          }
           return (
+            <ComponentSeparator
+              extraMarginLeft={
+                toot.id === leadingItem.id
+                  ? 0
+                  : StyleConstants.Avatar.XS +
+                    StyleConstants.Spacing.S +
+                    Math.max(0, levels.current - 1) * 8
+              }
+            />
+          )
+        },
+        renderItem: ({ item, index }) => {
+          const levels = {
+            previous:
+              replyLevels.current.find(
+                reply => reply.id === data.current?.[index - 1]?.in_reply_to_id
+              )?.level || 0,
+            current:
+              replyLevels.current.find(reply => reply.id === item.in_reply_to_id)?.level || 0,
+            next:
+              replyLevels.current.find(
+                reply => reply.id === data.current?.[index + 1]?.in_reply_to_id
+              )?.level || 0
+          }
+
+          return (
+            <View style={{ marginLeft: Math.max(0, levels.current - 1) * StyleConstants.Spacing.S }}>
               <TimelineDefault
                 item={item}
                 queryKey={queryKey}
                 rootQueryKey={rootQueryKey}
                 highlighted={toot.id === item.id}
+                isConversation={toot.id !== item.id}
               />
+            </View>
           )
         },
-        // renderItem: ({ item, index }) => {
-        //   const levels = {
-        //     previous:
-        //       replyLevels.current.find(
-        //         reply => reply.id === data.current?.[index - 1]?.in_reply_to_id
-        //       )?.level || 0,
-        //     current:
-        //       replyLevels.current.find(reply => reply.id === item.in_reply_to_id)?.level || 0,
-        //     next:
-        //       replyLevels.current.find(
-        //         reply => reply.id === data.current?.[index + 1]?.in_reply_to_id
-        //       )?.level || 0
-        //   }
-
-        //   return (
-        //     <>
-        //       <TimelineDefault
-        //         item={item}
-        //         queryKey={queryKey}
-        //         rootQueryKey={rootQueryKey}
-        //         highlighted={toot.id === item.id}
-        //         isConversation={toot.id !== item.id}
-        //       />
-        //       {Array.from(Array(levels.current)).map((_, i) => {
-        //         if (index < highlightIndex.current) return null
-        //         if (
-        //           levels.previous + 1 === levels.current ||
-        //           (levels.previous && levels.current && levels.previous === levels.current)
-        //         ) {
-        //           return (
-        //             <View
-        //               key={i}
-        //               style={{
-        //                 position: 'absolute',
-        //                 top: 0,
-        //                 left: StyleConstants.Spacing.Global.PagePadding / 2 + 8 * i,
-        //                 height:
-        //                   levels.current === levels.next
-        //                     ? StyleConstants.Spacing.Global.PagePadding
-        //                     : StyleConstants.Spacing.Global.PagePadding + StyleConstants.Avatar.XS,
-        //                 borderLeftColor: colors.border,
-        //                 borderLeftWidth: 1
-        //               }}
-        //             />
-        //           )
-        //         } else {
-        //           return null
-        //         }
-        //       })}
-        //       {Array.from(Array(levels.next)).map((_, i) => {
-        //         if (index < highlightIndex.current) return null
-        //         if (
-        //           levels.current + 1 === levels.next ||
-        //           (levels.current && levels.next && levels.current === levels.next)
-        //         ) {
-        //           return (
-        //             <View
-        //               key={i}
-        //               style={{
-        //                 position: 'absolute',
-        //                 top:
-        //                   levels.current + 1 === levels.next && levels.next > i + 1
-        //                     ? StyleConstants.Spacing.Global.PagePadding + StyleConstants.Avatar.XS
-        //                     : StyleConstants.Spacing.Global.PagePadding,
-        //                 left: StyleConstants.Spacing.Global.PagePadding / 2 + 8 * i,
-        //                 height: 200,
-        //                 borderLeftColor: colors.border,
-        //                 borderLeftWidth: 1
-        //               }}
-        //             />
-        //           )
-        //         } else {
-        //           return null
-        //         }
-        //       })}
-        //     </>
-        //   )
-        // },
         onScrollToIndexFailed: error => {
           const offset = error.averageItemLength * error.index
           flRef.current?.scrollToOffset({ offset })