MVP last read position

src/screens/Tabs/Local.tsx

@@ -1,16 +1,21 @@
 import analytics from '@components/analytics'
 import { HeaderCenter, HeaderRight } from '@components/Header'
+import ComponentSeparator from '@components/Separator'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
+import TimelineLookback from '@components/Timeline/Lookback'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import {
   ScreenTabsScreenProps,
   TabLocalStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
+import { useSelector } from 'react-redux'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabLocalStackParamList>()
@@ -43,13 +48,35 @@ const TabLocal = React.memo(
       [i18n.language]
     )
 
-    const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
-    const renderItem = useCallback(
-      ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
-      []
+    const timelinesLookback = useSelector(
+      getInstanceTimelinesLookback,
+      () => true
     )
+    const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
+    const renderItem = useCallback(({ item }) => {
+      if (timelinesLookback?.['Following']?.ids?.[0] === item.id) {
+        return (
+          <>
+            <TimelineLookback />
+            <ComponentSeparator
+              extraMarginLeft={
+                StyleConstants.Avatar.M + StyleConstants.Spacing.S
+              }
+            />
+            <TimelineDefault item={item} queryKey={queryKey} />
+          </>
+        )
+      }
+      return <TimelineDefault item={item} queryKey={queryKey} />
+    }, [])
     const children = useCallback(
-      () => <Timeline queryKey={queryKey} customProps={{ renderItem }} />,
+      () => (
+        <Timeline
+          queryKey={queryKey}
+          lookback='Following'
+          customProps={{ renderItem }}
+        />
+      ),
       []
     )
 

src/screens/Tabs/Me/Root/Collections.tsx

@@ -2,7 +2,10 @@ import { MenuContainer, MenuRow } from '@components/Menu'
 import { useNavigation } from '@react-navigation/native'
 import { useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { useListsQuery } from '@utils/queryHooks/lists'
-import { getMePage, updateContextMePage } from '@utils/slices/contextsSlice'
+import {
+  getInstanceMePage,
+  updateInstanceMePage
+} from '@utils/slices/instancesSlice'
 import { getInstancePush } from '@utils/slices/instancesSlice'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,10 +16,7 @@ const Collections: React.FC = () => {
   const navigation = useNavigation<any>()
 
   const dispatch = useDispatch()
-  const mePage = useSelector(
-    getMePage,
-    (a, b) => a.announcements.unread === b.announcements.unread
-  )
+  const mePage = useSelector(getInstanceMePage)
 
   const listsQuery = useListsQuery({
     options: {
@@ -26,7 +26,7 @@ const Collections: React.FC = () => {
   useEffect(() => {
     if (listsQuery.isSuccess) {
       dispatch(
-        updateContextMePage({
+        updateInstanceMePage({
           lists: { shown: listsQuery.data?.length ? true : false }
         })
       )
@@ -42,7 +42,7 @@ const Collections: React.FC = () => {
   useEffect(() => {
     if (announcementsQuery.isSuccess) {
       dispatch(
-        updateContextMePage({
+        updateInstanceMePage({
           announcements: {
             shown: announcementsQuery.data?.length ? true : false,
             unread: announcementsQuery.data.filter(

src/screens/Tabs/Me/Settings/Dev.tsx

@@ -7,7 +7,7 @@ import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Text } from 'react-native'
+import { DevSettings, Text } from 'react-native'
 import { useSelector } from 'react-redux'
 
 const SettingsDev: React.FC = () => {
@@ -68,7 +68,9 @@ const SettingsDev: React.FC = () => {
           marginBottom: StyleConstants.Spacing.Global.PagePadding
         }}
         destructive
-        onPress={() => persistor.purge()}
+        onPress={() => {
+          persistor.purge().then(() => DevSettings.reload())
+        }}
       />
       <Button
         type='text'

src/screens/Tabs/Public.tsx

@@ -1,7 +1,9 @@
 import analytics from '@components/analytics'
 import { HeaderRight } from '@components/Header'
+import ComponentSeparator from '@components/Separator'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
+import TimelineLookback from '@components/Timeline/Lookback'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import {
@@ -9,11 +11,14 @@ import {
   TabPublicStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, StyleSheet } from 'react-native'
 import { TabView } from 'react-native-tab-view'
+import { useSelector } from 'react-redux'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabPublicStackParamList>()
@@ -26,7 +31,7 @@ const TabPublic = React.memo(
     const [segment, setSegment] = useState(0)
     const pages: {
       title: string
-      key: App.Pages
+      key: Extract<App.Pages, 'Local' | 'LocalPublic'>
     }[] = [
       {
         title: t('tabs.public.segments.left'),
@@ -70,19 +75,42 @@ const TabPublic = React.memo(
 
     const routes = pages.map(p => ({ key: p.key }))
 
+    const timelinesLookback = useSelector(
+      getInstanceTimelinesLookback,
+      () => true
+    )
     const renderScene = useCallback(
       ({
         route: { key: page }
       }: {
         route: {
-          key: App.Pages
+          key: Extract<App.Pages, 'Local' | 'LocalPublic'>
         }
       }) => {
         const queryKey: QueryKeyTimeline = ['Timeline', { page }]
-        const renderItem = ({ item }: any) => (
-          <TimelineDefault item={item} queryKey={queryKey} />
+        const renderItem = ({ item }: any) => {
+          if (timelinesLookback?.[page]?.ids?.[0] === item.id) {
+            return (
+              <>
+                <TimelineLookback />
+                <ComponentSeparator
+                  extraMarginLeft={
+                    StyleConstants.Avatar.M + StyleConstants.Spacing.S
+                  }
+                />
+                <TimelineDefault item={item} queryKey={queryKey} />
+              </>
+            )
+          }
+          return <TimelineDefault item={item} queryKey={queryKey} />
+        }
+        return (
+          <Timeline
+            queryKey={queryKey}
+            lookback={page}
+            customProps={{ renderItem }}
+          />
         )
-        return <Timeline queryKey={queryKey} customProps={{ renderItem }} />
       },
       []
     )