Merge pull request #202 from tooot-app/main

Release v3.2

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://www.buymeacoffee.com/xmflsct']

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '35 4 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

app.config.ts

@@ -8,6 +8,7 @@ export default (): ExpoConfig => ({
   name: 'tooot',
   description: 'tooot for Mastodon',
   slug: 'tooot',
+  scheme: 'tooot',
   version: toootVersion,
   privacy: 'hidden',
   assetBundlePatterns: ['assets/*'],

fastlane/Fastfile

@@ -108,7 +108,7 @@ private_lane :build_ios do
       silent: true
     )
     upload_to_app_store( ipa: IPA_FILE, app_version: VERSION )
-    download_dsyms
+    download_dsyms( version: VERSION, build_number: BUILD_NUMBER, wait_for_dsym_processing: true )
     sentry_upload_dsym(
       org_slug: ENV["SENTRY_ORGANIZATION"],
       project_slug: ENV["SENTRY_PROJECT"],

package.json

@@ -3,7 +3,7 @@
   "versions": {
     "native": "220102",
     "major": 3,
-    "minor": 1,
+    "minor": 2,
     "patch": 0,
     "expo": "44.0.0"
   },

src/Screens.tsx

@@ -9,6 +9,7 @@ import ScreenAnnouncements from '@screens/Announcements'
 import ScreenCompose from '@screens/Compose'
 import ScreenImagesViewer from '@screens/ImagesViewer'
 import ScreenTabs from '@screens/Tabs'
+import initQuery from '@utils/initQuery'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import pushUseConnect from '@utils/push/useConnect'
 import pushUseReceive from '@utils/push/useReceive'
@@ -21,11 +22,12 @@ import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { themes } from '@utils/styles/themes'
 import * as Analytics from 'expo-firebase-analytics'
+import * as Linking from 'expo-linking'
 import { addScreenshotListener } from 'expo-screen-capture'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
-import { onlineManager, useQueryClient } from 'react-query'
+import { useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
@@ -51,11 +53,9 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   useEffect(() => {
     switch (isConnected) {
       case true:
-        onlineManager.setOnline(isConnected)
         removeMessage()
         break
       case false:
-        onlineManager.setOnline(isConnected)
         displayMessage({
           mode,
           type: 'error',
@@ -73,9 +73,9 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
     (prev, next) => prev.length === next.length
   )
   const queryClient = useQueryClient()
-  pushUseConnect({ mode, t, instances, dispatch })
-  pushUseReceive({ queryClient, instances })
-  pushUseRespond({ queryClient, instances, dispatch })
+  pushUseConnect({ t, instances })
+  pushUseReceive({ instances })
+  pushUseRespond({ instances })
 
   // Prevent screenshot alert
   useEffect(() => {
@@ -146,6 +146,39 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
     routeRef.current = currentRoute
   }, [])
 
+  // Deep linking for compose
+  const [deeplinked, setDeeplinked] = useState(false)
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      setDeeplinked(true)
+
+      const initialUrl = await Linking.parseInitialURLAsync()
+
+      if (initialUrl.path) {
+        const paths = initialUrl.path.split('/')
+
+        if (paths && paths.length) {
+          const instanceIndex = instances.findIndex(
+            instance => paths[0] === `@${instance.account.acct}@${instance.uri}`
+          )
+          if (instanceIndex !== -1 && instanceActive !== instanceIndex) {
+            initQuery({
+              instance: instances[instanceIndex],
+              prefetch: { enabled: true }
+            })
+          }
+        }
+      }
+
+      if (initialUrl.hostname === 'compose') {
+        navigationRef.navigate('Screen-Compose')
+      }
+    }
+    if (!deeplinked) {
+      getUrlAsync()
+    }
+  }, [instanceActive, instances, deeplinked])
+
   return (
     <>
       <StatusBar

src/components/Timeline.tsx

@@ -1,7 +1,10 @@
 import ComponentSeparator from '@components/Separator'
 import { useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
+import {
+  getInstanceActive,
+  updateInstanceTimelineLookback
+} from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useCallback, useRef } from 'react'
@@ -10,13 +13,14 @@ import {
   FlatListProps,
   Platform,
   RefreshControl,
-  StyleSheet
+  StyleSheet,
+  ViewabilityConfigCallbackPairs
 } from 'react-native'
 import Animated, {
   useAnimatedScrollHandler,
   useSharedValue
 } from 'react-native-reanimated'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TimelineEmpty from './Timeline/Empty'
 import TimelineFooter from './Timeline/Footer'
 import TimelineRefresh, {
@@ -31,6 +35,7 @@ export interface Props {
   queryKey: QueryKeyTimeline
   disableRefresh?: boolean
   disableInfinity?: boolean
+  lookback?: Extract<App.Pages, 'Following' | 'Local' | 'LocalPublic'>
   customProps: Partial<FlatListProps<any>> &
     Pick<FlatListProps<any>, 'renderItem'>
 }
@@ -40,11 +45,9 @@ const Timeline: React.FC<Props> = ({
   queryKey,
   disableRefresh = false,
   disableInfinity = false,
+  lookback,
   customProps
 }) => {
-  // Switching account update timeline
-  useSelector(getInstanceActive)
-
   const { theme } = useTheme()
 
   const {
@@ -69,7 +72,7 @@ const Timeline: React.FC<Props> = ({
   })
 
   const flattenData = data?.pages
-    ? data.pages.flatMap(page => [...page.body])
+    ? data.pages?.flatMap(page => [...page.body])
     : []
 
   const ItemSeparatorComponent = useCallback(
@@ -124,7 +127,35 @@ const Timeline: React.FC<Props> = ({
     }
   })
 
+  const dispatch = useDispatch()
+  const viewabilityPairs = useRef<ViewabilityConfigCallbackPairs>([
+    {
+      viewabilityConfig: {
+        minimumViewTime: 10,
+        viewAreaCoveragePercentThreshold: 10
+      },
+      onViewableItemsChanged: ({ viewableItems }) => {
+        lookback &&
+          dispatch(
+            updateInstanceTimelineLookback({
+              [lookback]: {
+                queryKey,
+                ids: viewableItems.map(item => item.key).slice(0, 3)
+              }
+            })
+          )
+      }
+    }
+  ])
+
   useScrollToTop(flRef)
+  useSelector(getInstanceActive, (prev, next) => {
+    if (prev !== next) {
+      flRef.current?.scrollToOffset({ offset: 0, animated: false })
+    }
+    return prev === next
+  })
+
   return (
     <>
       <TimelineRefresh
@@ -135,7 +166,6 @@ const Timeline: React.FC<Props> = ({
         disableRefresh={disableRefresh}
       />
       <AnimatedFlatList
-        // @ts-ignore
         ref={customFLRef || flRef}
         scrollEventThrottle={16}
         onScroll={onScroll}
@@ -157,6 +187,9 @@ const Timeline: React.FC<Props> = ({
         maintainVisibleContentPosition={{
           minIndexForVisible: 0
         }}
+        {...(lookback && {
+          viewabilityConfigCallbackPairs: viewabilityPairs.current
+        })}
         {...androidRefreshControl}
         {...customProps}
       />

src/components/Timeline/Default.tsx

@@ -50,7 +50,7 @@ const TimelineDefault: React.FC<Props> = ({
 
   const actualStatus = item.reblog ? item.reblog : item
 
-  const ownAccount = actualStatus.account.id === instanceAccount?.id
+  const ownAccount = actualStatus.account?.id === instanceAccount?.id
 
   if (
     !highlighted &&

src/components/Timeline/Lookback.tsx

@@ -0,0 +1,37 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+
+const TimelineLookback = React.memo(
+  () => {
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
+    return (
+      <View style={[styles.base, { backgroundColor: theme.backgroundDefault }]}>
+        <Text
+          style={[StyleConstants.FontStyle.S, { color: theme.primaryDefault }]}
+        >
+          {t('lookback.message')}
+        </Text>
+      </View>
+    )
+  },
+  () => true
+)
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: StyleConstants.Spacing.S
+  },
+  text: {
+    ...StyleConstants.FontStyle.S
+  }
+})
+
+export default TimelineLookback

src/components/Timeline/Shared/Attachment.tsx

@@ -108,10 +108,10 @@ const TimelineAttachment = React.memo(
               )
             default:
               if (
-                attachment.preview_url.endsWith('.jpg') ||
-                attachment.preview_url.endsWith('.jpeg') ||
-                attachment.preview_url.endsWith('.png') ||
-                attachment.preview_url.endsWith('.gif') ||
+                attachment.preview_url?.endsWith('.jpg') ||
+                attachment.preview_url?.endsWith('.jpeg') ||
+                attachment.preview_url?.endsWith('.png') ||
+                attachment.preview_url?.endsWith('.gif') ||
                 attachment.remote_url?.endsWith('.jpg') ||
                 attachment.remote_url?.endsWith('.jpeg') ||
                 attachment.remote_url?.endsWith('.png') ||

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -60,11 +60,9 @@ const AttachmentVideo: React.FC<Props> = ({
 
   const appState = useRef(AppState.currentState)
   useEffect(() => {
-    AppState.addEventListener('change', _handleAppStateChange)
+    const appState = AppState.addEventListener('change', _handleAppStateChange)
 
-    return () => {
-      AppState.removeEventListener('change', _handleAppStateChange)
-    }
+    return () => appState.remove()
   }, [])
   const _handleAppStateChange = async (nextAppState: AppStateStatus) => {
     if (appState.current.match(/active/) && nextAppState.match(/inactive/)) {

src/i18n/en/components/timeline.json

@@ -11,6 +11,9 @@
   "end": {
     "message": "The end, what about a cup of <0 />"
   },
+  "lookback": {
+    "message": "Last read at"
+  },
   "refresh": {
     "fetchPreviousPage": "Newer from here",
     "refetch": "To latest"

src/i18n/zh-Hans/components/timeline.json

@@ -11,6 +11,9 @@
   "end": {
     "message": "居然刷到底了，喝杯 <0 /> 吧"
   },
+  "lookback": {
+    "message": "上次阅读至"
+  },
   "refresh": {
     "fetchPreviousPage": "较新于此的嘟嘟",
     "refetch": "最新的嘟嘟"

src/screens/Compose.tsx

@@ -333,7 +333,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                   ]
                 )
               } else {
-                Sentry.Native.captureException(error)
+                Sentry.Native.captureMessage('Compose posting', error)
                 haptics('Error')
                 composeDispatch({ type: 'posting', payload: false })
                 Alert.alert(t('heading.right.alert.default.title'), undefined, [

src/screens/Compose/EditAttachment/Submit.tsx

@@ -42,34 +42,38 @@ const ComposeEditAttachmentSubmit: React.FC<Props> = ({ index }) => {
         ) {
           formData.append(
             'focus',
-            `${theAttachment.meta?.focus?.x || 0},${-theAttachment.meta?.focus
-              ?.y || 0}`
+            `${theAttachment.meta?.focus?.x || 0},${
+              -theAttachment.meta?.focus?.y || 0
+            }`
           )
         }
 
-        apiInstance<Mastodon.Attachment>({
-          method: 'put',
-          url: `media/${theAttachment.id}`,
-          body: formData
-        })
-          .then(() => {
-            haptics('Success')
-            navigation.goBack()
-          })
-          .catch(() => {
-            setIsSubmitting(false)
-            haptics('Error')
-            Alert.alert(
-              t('content.editAttachment.header.right.failed.title'),
-              undefined,
-              [
-                {
-                  text: t('content.editAttachment.header.right.failed.button'),
-                  style: 'cancel'
-                }
-              ]
-            )
+        theAttachment?.id &&
+          apiInstance<Mastodon.Attachment>({
+            method: 'put',
+            url: `media/${theAttachment.id}`,
+            body: formData
           })
+            .then(() => {
+              haptics('Success')
+              navigation.goBack()
+            })
+            .catch(() => {
+              setIsSubmitting(false)
+              haptics('Error')
+              Alert.alert(
+                t('content.editAttachment.header.right.failed.title'),
+                undefined,
+                [
+                  {
+                    text: t(
+                      'content.editAttachment.header.right.failed.button'
+                    ),
+                    style: 'cancel'
+                  }
+                ]
+              )
+            })
       }}
     />
   )

src/screens/ImagesViewer.tsx

@@ -8,7 +8,6 @@ import {
   RootStackScreenProps
 } from '@utils/navigation/navigators'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { findIndex } from 'lodash'
 import React, { RefObject, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Share, StatusBar, View } from 'react-native'
@@ -120,7 +119,7 @@ const ScreenImagesViewer = ({
 
   const { mode } = useTheme()
 
-  const initialIndex = findIndex(imageUrls, ['id', id])
+  const initialIndex = imageUrls.findIndex(image => image.id === id)
   const [currentIndex, setCurrentIndex] = useState(initialIndex)
 
   const messageRef = useRef<FlashMessage>(null)

src/screens/Tabs/Local.tsx

@@ -8,9 +8,11 @@ import {
   TabLocalStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
 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 +45,25 @@ 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 <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/Me/Switch.tsx

@@ -3,11 +3,11 @@ import Button from '@components/Button'
 import haptics from '@components/haptics'
 import ComponentInstance from '@components/Instance'
 import { useNavigation } from '@react-navigation/native'
+import initQuery from '@utils/initQuery'
 import {
   getInstanceActive,
   getInstances,
-  Instance,
-  updateInstanceActive
+  Instance
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -21,8 +21,7 @@ import {
   View
 } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
-import { useQueryClient } from 'react-query'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
 interface Props {
   instance: Instance
@@ -30,9 +29,7 @@ interface Props {
 }
 
 const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
-  const queryClient = useQueryClient()
   const navigation = useNavigation()
-  const dispatch = useDispatch()
 
   return (
     <Button
@@ -45,8 +42,7 @@ const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
       onPress={() => {
         haptics('Light')
         analytics('switch_existing_press')
-        dispatch(updateInstanceActive(instance))
-        queryClient.clear()
+        initQuery({ instance, prefetch: { enabled: true } })
         navigation.goBack()
       }}
     />

src/screens/Tabs/Public.tsx

@@ -9,11 +9,13 @@ import {
   TabPublicStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
 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 +28,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 +72,32 @@ 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 <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 }} />
       },
       []
     )

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

@@ -95,6 +95,3 @@ const styles = StyleSheet.create({
 })
 
 export default AccountInformationFields
-function htmlToText (note: string): any {
-  throw new Error('Function not implemented.')
-}

src/screens/Tabs/Shared/Toot.tsx

@@ -3,7 +3,6 @@ import TimelineDefault from '@components/Timeline/Default'
 import { useNavigation } from '@react-navigation/native'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { findIndex } from 'lodash'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList } from 'react-native'
 import { InfiniteQueryObserver, useQueryClient } from 'react-query'
@@ -40,7 +39,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
         }
         if (!scrolled.current) {
           scrolled.current = true
-          const pointer = findIndex(flattenData, ['id', toot.id])
+          const pointer = flattenData.findIndex(({ id }) => id === toot.id)
           try {
             pointer < flattenData.length &&
               setTimeout(() => {

src/startup/netInfo.ts

@@ -1,63 +1,91 @@
 import apiInstance from '@api/instance'
 import NetInfo from '@react-native-community/netinfo'
 import { store } from '@root/store'
+import initQuery from '@utils/initQuery'
+import { getPreviousTab } from '@utils/slices/contextsSlice'
 import removeInstance from '@utils/slices/instances/remove'
 import {
   getInstance,
   updateInstanceAccount
 } from '@utils/slices/instancesSlice'
+import { onlineManager } from 'react-query'
 import log from './log'
 
 const netInfo = async (): Promise<{
-  connected: boolean
+  connected?: boolean
   corrupted?: string
-}> => {
+} | void> => {
   log('log', 'netInfo', 'initializing')
 
   const netInfo = await NetInfo.fetch()
   const instance = getInstance(store.getState())
 
+  onlineManager.setEventListener(setOnline => {
+    return NetInfo.addEventListener(state => {
+      setOnline(
+        typeof state.isConnected === 'boolean' ? state.isConnected : undefined
+      )
+    })
+  })
+
   if (netInfo.isConnected) {
     log('log', 'netInfo', 'network connected')
     if (instance) {
       log('log', 'netInfo', 'checking locally stored credentials')
-      return apiInstance<Mastodon.Account>({
-        method: 'get',
-        url: `accounts/verify_credentials`
-      })
-        .then(res => {
-          log('log', 'netInfo', 'local credential check passed')
-          if (res.body.id !== instance.account.id) {
-            log('error', 'netInfo', 'local id does not match remote id')
-            store.dispatch(removeInstance(instance))
-            return Promise.resolve({ connected: true, corruputed: '' })
-          } else {
-            store.dispatch(
-              updateInstanceAccount({
-                acct: res.body.acct,
-                avatarStatic: res.body.avatar_static
-              })
-            )
-            return Promise.resolve({ connected: true })
-          }
-        })
-        .catch(error => {
-          log('error', 'netInfo', 'local credential check failed')
-          if (error.status && error.status == 401) {
-            store.dispatch(removeInstance(instance))
-          }
-          return Promise.resolve({
-            connected: true,
-            corrupted: error.data.error
+
+      let resVerify: Mastodon.Account
+      try {
+        resVerify = await apiInstance<Mastodon.Account>({
+          method: 'get',
+          url: `accounts/verify_credentials`
+        }).then(res => res.body)
+      } catch (error: any) {
+        log('error', 'netInfo', 'local credential check failed')
+        if (error.status && error.status == 401) {
+          store.dispatch(removeInstance(instance))
+        }
+        return Promise.resolve({ corrupted: error.data.error })
+      }
+
+      log('log', 'netInfo', 'local credential check passed')
+      if (resVerify.id !== instance.account.id) {
+        log('error', 'netInfo', 'local id does not match remote id')
+        store.dispatch(removeInstance(instance))
+        return Promise.resolve({ connected: true, corruputed: '' })
+      } else {
+        store.dispatch(
+          updateInstanceAccount({
+            acct: resVerify.acct,
+            avatarStatic: resVerify.avatar_static
           })
-        })
+        )
+
+        if (instance.timelinesLookback) {
+          const previousTab = getPreviousTab(store.getState())
+          let loadPage:
+            | Extract<App.Pages, 'Following' | 'Local' | 'LocalPublic'>
+            | undefined = undefined
+          if (previousTab === 'Tab-Local') {
+            loadPage = 'Following'
+          } else if (previousTab === 'Tab-Public') {
+            loadPage = 'LocalPublic'
+          }
+
+          await initQuery({
+            instance,
+            prefetch: { enabled: true, page: loadPage }
+          })
+        }
+
+        return Promise.resolve({ connected: true })
+      }
     } else {
       log('log', 'netInfo', 'no local credential found')
-      return Promise.resolve({ connected: true })
+      return Promise.resolve()
     }
   } else {
     log('warn', 'netInfo', 'network not connected')
-    return Promise.resolve({ connected: true })
+    return Promise.resolve()
   }
 }
 

src/store.ts

@@ -26,7 +26,7 @@ const instancesPersistConfig = {
   key: 'instances',
   prefix,
   storage: secureStorage,
-  version: 6,
+  version: 7,
   // @ts-ignore
   migrate: createMigrate(instancesMigration)
 }

src/utils/initQuery.ts

@@ -0,0 +1,32 @@
+import queryClient from '@helpers/queryClient'
+import { store } from '@root/store'
+import { prefetchTimelineQuery } from './queryHooks/timeline'
+import { Instance, updateInstanceActive } from './slices/instancesSlice'
+
+const initQuery = async ({
+  instance,
+  prefetch
+}: {
+  instance: Instance
+  prefetch?: { enabled: boolean; page?: 'Following' | 'LocalPublic' }
+}) => {
+  store.dispatch(updateInstanceActive(instance))
+  await queryClient.resetQueries()
+
+  if (prefetch?.enabled && instance.timelinesLookback) {
+    if (
+      prefetch.page &&
+      instance.timelinesLookback[prefetch.page]?.ids?.length > 0
+    ) {
+      await prefetchTimelineQuery(instance.timelinesLookback[prefetch.page])
+    }
+
+    for (const page of Object.keys(instance.timelinesLookback)) {
+      if (page !== prefetch.page) {
+        prefetchTimelineQuery(instance.timelinesLookback[page])
+      }
+    }
+  }
+}
+
+export default initQuery

src/utils/migrations/contexts/migration.ts

@@ -1,4 +1,5 @@
 import { ContextsV0 } from './v0'
+import { ContextsV1 } from './v1'
 
 const contextsMigration = {
   1: (state: ContextsV0) => {
@@ -10,6 +11,11 @@ const contextsMigration = {
         announcements: { shown: false, unread: 0 }
       }
     })
+  },
+  2: (state: ContextsV1) => {
+    // @ts-ignore
+    delete state.mePage
+    return state
   }
 }
 

src/utils/migrations/contexts/v1.ts

@@ -0,0 +1,17 @@
+export type ContextsV1 = {
+  storeReview: {
+    context: Readonly<number>
+    current: number
+    shown: boolean
+  }
+  publicRemoteNotice: {
+    context: Readonly<number>
+    current: number
+    hidden: boolean
+  }
+  previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
+}

src/utils/migrations/instances/migration.ts

@@ -1,6 +1,7 @@
 import { InstanceV3 } from './v3'
 import { InstanceV4 } from './v4'
 import { InstanceV5 } from './v5'
+import { InstanceV6 } from './v6'
 
 const instancesMigration = {
   4: (state: InstanceV3) => {
@@ -54,6 +55,20 @@ const instancesMigration = {
         return { ...instance, configuration: undefined }
       })
     }
+  },
+  7: (state: InstanceV6) => {
+    return {
+      instances: state.instances.map(instance => {
+        return {
+          ...instance,
+          timelinesLookback: {},
+          mePage: {
+            lists: { shown: false },
+            announcements: { shown: false, unread: 0 }
+          }
+        }
+      })
+    }
   }
 }
 

src/utils/migrations/instances/v6.ts

@@ -0,0 +1,66 @@
+import { ComposeStateDraft } from '@screens/Compose/utils/types'
+
+type Instance = {
+  active: boolean
+  appData: {
+    clientId: string
+    clientSecret: string
+  }
+  url: string
+  token: string
+  uri: Mastodon.Instance['uri']
+  urls: Mastodon.Instance['urls']
+  account: {
+    id: Mastodon.Account['id']
+    acct: Mastodon.Account['acct']
+    avatarStatic: Mastodon.Account['avatar_static']
+    preferences: Mastodon.Preferences
+  }
+  max_toot_chars?: number // To be deprecated in v4
+  configuration?: Mastodon.Instance['configuration']
+  filters: Mastodon.Filter[]
+  notifications_filter: {
+    follow: boolean
+    favourite: boolean
+    reblog: boolean
+    mention: boolean
+    poll: boolean
+    follow_request: boolean
+  }
+  push: {
+    global: { loading: boolean; value: boolean }
+    decode: { loading: boolean; value: boolean }
+    alerts: {
+      follow: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['follow']
+      }
+      favourite: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['favourite']
+      }
+      reblog: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['reblog']
+      }
+      mention: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['mention']
+      }
+      poll: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['poll']
+      }
+    }
+    keys: {
+      auth?: string
+      public?: string // legacy
+      private?: string // legacy
+    }
+  }
+  drafts: ComposeStateDraft[]
+}
+
+export type InstanceV6 = {
+  instances: Instance[]
+}

src/utils/push/useConnect.ts

@@ -2,30 +2,32 @@ import apiGeneral from '@api/general'
 import apiTooot from '@api/tooot'
 import { displayMessage } from '@components/Message'
 import navigationRef from '@helpers/navigationRef'
-import { Dispatch } from '@reduxjs/toolkit'
 import { isDevelopment } from '@utils/checkEnvironment'
 import { disableAllPushes, Instance } from '@utils/slices/instancesSlice'
+import { useTheme } from '@utils/styles/ThemeManager'
 import * as Notifications from 'expo-notifications'
 import { useEffect } from 'react'
 import { TFunction } from 'react-i18next'
+import { useDispatch } from 'react-redux'
 
 export interface Params {
-  mode: 'light' | 'dark'
   t: TFunction<'screens'>
   instances: Instance[]
-  dispatch: Dispatch<any>
 }
 
-const pushUseConnect = ({ mode, t, instances, dispatch }: Params) => {
+const pushUseConnect = ({ t, instances }: Params) => {
+  const dispatch = useDispatch()
+  const { mode } = useTheme()
+
   return useEffect(() => {
     const connect = async () => {
       const expoToken = isDevelopment
-      ? 'DEVELOPMENT_TOKEN_1'
-      : (
-          await Notifications.getExpoPushTokenAsync({
-            experienceId: '@xmflsct/tooot'
-          })
-        ).data
+        ? 'DEVELOPMENT_TOKEN_1'
+        : (
+            await Notifications.getExpoPushTokenAsync({
+              experienceId: '@xmflsct/tooot'
+            })
+          ).data
 
       apiTooot({
         method: 'get',

src/utils/push/useReceive.ts

@@ -1,19 +1,18 @@
 import { displayMessage } from '@components/Message'
+import queryClient from '@helpers/queryClient'
+import initQuery from '@utils/initQuery'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { Instance, updateInstanceActive } from '@utils/slices/instancesSlice'
 import * as Notifications from 'expo-notifications'
-import { findIndex } from 'lodash'
 import { useEffect } from 'react'
-import { QueryClient } from 'react-query'
 import { useDispatch } from 'react-redux'
 import pushUseNavigate from './useNavigate'
 
 export interface Params {
-  queryClient: QueryClient
   instances: Instance[]
 }
 
-const pushUseReceive = ({ queryClient, instances }: Params) => {
+const pushUseReceive = ({ instances }: Params) => {
   const dispatch = useDispatch()
 
   return useEffect(() => {
@@ -30,8 +29,7 @@ const pushUseReceive = ({ queryClient, instances }: Params) => {
           accountId: string
         }
 
-        const notificationIndex = findIndex(
-          instances,
+        const notificationIndex = instances.findIndex(
           instance =>
             instance.url === payloadData.instanceUrl &&
             instance.account.id === payloadData.accountId
@@ -42,7 +40,10 @@ const pushUseReceive = ({ queryClient, instances }: Params) => {
           description: notification.request.content.body!,
           onPress: () => {
             if (notificationIndex !== -1) {
-              dispatch(updateInstanceActive(instances[notificationIndex]))
+              initQuery({
+                instance: instances[notificationIndex],
+                prefetch: { enabled: true }
+              })
             }
             pushUseNavigate(payloadData.notification_id)
           }

src/utils/push/useRespond.ts

@@ -1,19 +1,19 @@
-import { Dispatch } from '@reduxjs/toolkit'
+import queryClient from '@helpers/queryClient'
+import initQuery from '@utils/initQuery'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { Instance, updateInstanceActive } from '@utils/slices/instancesSlice'
+import { Instance } from '@utils/slices/instancesSlice'
 import * as Notifications from 'expo-notifications'
-import { findIndex } from 'lodash'
 import { useEffect } from 'react'
-import { QueryClient } from 'react-query'
+import { useDispatch } from 'react-redux'
 import pushUseNavigate from './useNavigate'
 
 export interface Params {
-  queryClient: QueryClient
   instances: Instance[]
-  dispatch: Dispatch<any>
 }
 
-const pushUseRespond = ({ queryClient, instances, dispatch }: Params) => {
+const pushUseRespond = ({ instances }: Params) => {
+  const dispatch = useDispatch()
+
   return useEffect(() => {
     const subscription = Notifications.addNotificationResponseReceivedListener(
       ({ notification }) => {
@@ -28,14 +28,16 @@ const pushUseRespond = ({ queryClient, instances, dispatch }: Params) => {
           accountId: string
         }
 
-        const notificationIndex = findIndex(
-          instances,
+        const notificationIndex = instances.findIndex(
           instance =>
             instance.url === payloadData.instanceUrl &&
             instance.account.id === payloadData.accountId
         )
         if (notificationIndex !== -1) {
-          dispatch(updateInstanceActive(instances[notificationIndex]))
+          initQuery({
+            instance: instances[notificationIndex],
+            prefetch: { enabled: true }
+          })
         }
         pushUseNavigate(payloadData.notification_id)
       }

src/utils/queryHooks/timeline.ts

@@ -2,7 +2,10 @@ import apiInstance, { InstanceResponse } from '@api/instance'
 import haptics from '@components/haptics'
 import queryClient from '@helpers/queryClient'
 import { store } from '@root/store'
-import { getInstanceNotificationsFilter } from '@utils/slices/instancesSlice'
+import {
+  getInstanceNotificationsFilter,
+  updateInstanceTimelineLookback
+} from '@utils/slices/instancesSlice'
 import { AxiosError } from 'axios'
 import { uniqBy } from 'lodash'
 import {
@@ -194,9 +197,7 @@ const useTimelineQuery = ({
   ...queryKeyParams
 }: QueryKeyTimeline[1] & {
   options?: UseInfiniteQueryOptions<
-    InstanceResponse<
-      Mastodon.Status[] | Mastodon.Notification[] | Mastodon.Conversation[]
-    >,
+    InstanceResponse<Mastodon.Status[]>,
     AxiosError
   >
 }) => {
@@ -209,6 +210,53 @@ const useTimelineQuery = ({
   })
 }
 
+const prefetchTimelineQuery = async ({
+  ids,
+  queryKey
+}: {
+  ids: Mastodon.Status['id'][]
+  queryKey: QueryKeyTimeline
+}): Promise<Mastodon.Status['id'] | undefined> => {
+  let page: string = ''
+  let local: boolean = false
+  switch (queryKey[1].page) {
+    case 'Following':
+      page = 'home'
+      break
+    case 'Local':
+      page = 'public'
+      local = true
+      break
+    case 'LocalPublic':
+      page = 'public'
+      break
+  }
+
+  for (const id of ids) {
+    const statuses = await apiInstance<Mastodon.Status[]>({
+      method: 'get',
+      url: `timelines/${page}`,
+      params: {
+        min_id: id,
+        limit: 1,
+        ...(local && { local: 'true' })
+      }
+    })
+    if (statuses.body.length) {
+      await queryClient.prefetchInfiniteQuery(queryKey, props =>
+        queryFunction({
+          ...props,
+          queryKey,
+          pageParam: {
+            max_id: statuses.body[0].id
+          }
+        })
+      )
+      return id
+    }
+  }
+}
+
 // --- Separator ---
 
 enum MapPropertyToUrl {
@@ -388,4 +436,4 @@ const useTimelineMutation = ({
   })
 }
 
-export { useTimelineQuery, useTimelineMutation }
+export { prefetchTimelineQuery, useTimelineQuery, useTimelineMutation }

src/utils/queryHooks/timeline/updateStatusProperty.ts

@@ -1,5 +1,4 @@
 import queryClient from '@helpers/queryClient'
-import { findIndex } from 'lodash'
 import { InfiniteData } from 'react-query'
 import {
   MutationVarsTimelineUpdateStatusProperty,
@@ -37,7 +36,9 @@ const updateStatusProperty = ({
               'boolean'
             ) {
               const items = page.body as Mastodon.Conversation[]
-              const tootIndex = findIndex(items, ['last_status.id', id])
+              const tootIndex = items.findIndex(
+                ({ last_status }) => last_status?.id === id
+              )
               if (tootIndex >= 0) {
                 foundToot = true
                 updateConversation({ item: items[tootIndex], payload })
@@ -47,17 +48,18 @@ const updateStatusProperty = ({
               typeof (page.body as Mastodon.Notification[])[0].type === 'string'
             ) {
               const items = page.body as Mastodon.Notification[]
-              const tootIndex = findIndex(items, ['status.id', id])
+              const tootIndex = items.findIndex(
+                ({ status }) => status?.id === id
+              )
               if (tootIndex >= 0) {
                 foundToot = true
                 updateNotification({ item: items[tootIndex], payload })
               }
             } else {
               const items = page.body as Mastodon.Status[]
-              const tootIndex = findIndex(items, [
-                reblog ? 'reblog.id' : 'id',
-                id
-              ])
+              const tootIndex = reblog
+                ? items.findIndex(({ reblog }) => reblog?.id === id)
+                : items.findIndex(toot => toot.id === id)
               // if favouriets page and notifications page, remove the item instead
               if (tootIndex >= 0) {
                 foundToot = true
@@ -90,7 +92,9 @@ const updateStatusProperty = ({
                 'boolean'
               ) {
                 const items = page.body as Mastodon.Conversation[]
-                const tootIndex = findIndex(items, ['last_status.id', id])
+                const tootIndex = items.findIndex(
+                  ({ last_status }) => last_status?.id === id
+                )
                 if (tootIndex >= 0) {
                   foundToot = true
                   updateConversation({ item: items[tootIndex], payload })
@@ -101,17 +105,18 @@ const updateStatusProperty = ({
                 'string'
               ) {
                 const items = page.body as Mastodon.Notification[]
-                const tootIndex = findIndex(items, ['status.id', id])
+                const tootIndex = items.findIndex(
+                  ({ status }) => status?.id === id
+                )
                 if (tootIndex >= 0) {
                   foundToot = true
                   updateNotification({ item: items[tootIndex], payload })
                 }
               } else {
                 const items = page.body as Mastodon.Status[]
-                const tootIndex = findIndex(items, [
-                  reblog ? 'reblog.id' : 'id',
-                  id
-                ])
+                const tootIndex = reblog
+                  ? items.findIndex(({ reblog }) => reblog?.id === id)
+                  : items.findIndex(toot => toot.id === id)
                 // if favouriets page and notifications page, remove the item instead
                 if (tootIndex >= 0) {
                   foundToot = true

src/utils/slices/contextsSlice.ts

@@ -17,10 +17,6 @@ export type ContextsState = {
     hidden: boolean
   }
   previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
-  mePage: {
-    lists: { shown: boolean }
-    announcements: { shown: boolean; unread: number }
-  }
 }
 
 export const contextsInitialState = {
@@ -36,11 +32,7 @@ export const contextsInitialState = {
     current: 0,
     hidden: false
   },
-  previousTab: 'Tab-Me',
-  mePage: {
-    lists: { shown: false },
-    announcements: { shown: false, unread: 0 }
-  }
+  previousTab: 'Tab-Me'
 }
 
 const contextsSlice = createSlice({
@@ -69,12 +61,6 @@ const contextsSlice = createSlice({
       action: PayloadAction<ContextsState['previousTab']>
     ) => {
       state.previousTab = action.payload
-    },
-    updateContextMePage: (
-      state,
-      action: PayloadAction<Partial<ContextsState['mePage']>>
-    ) => {
-      state.mePage = { ...state.mePage, ...action.payload }
     }
   }
 })
@@ -82,13 +68,11 @@ const contextsSlice = createSlice({
 export const getPublicRemoteNotice = (state: RootState) =>
   state.contexts.publicRemoteNotice
 export const getPreviousTab = (state: RootState) => state.contexts.previousTab
-export const getMePage = (state: RootState) => state.contexts.mePage
 export const getContexts = (state: RootState) => state.contexts
 
 export const {
   updateStoreReview,
   updatePublicRemoteNotice,
-  updatePreviousTab,
-  updateContextMePage
+  updatePreviousTab
 } = contextsSlice.actions
 export default contextsSlice.reducer

src/utils/slices/instances/add.ts

@@ -101,6 +101,11 @@ const addInstance = createAsyncThunk(
           },
           keys: { auth: undefined, public: undefined, private: undefined }
         },
+        timelinesLookback: {},
+        mePage: {
+          lists: { shown: false },
+          announcements: { shown: false, unread: 0 }
+        },
         drafts: []
       }
     })

src/utils/slices/instancesSlice.ts

@@ -2,7 +2,7 @@ import analytics from '@components/analytics'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { RootState } from '@root/store'
 import { ComposeStateDraft } from '@screens/Compose/utils/types'
-import { findIndex } from 'lodash'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import addInstance from './instances/add'
 import removeInstance from './instances/remove'
 import { updateAccountPreferences } from './instances/updateAccountPreferences'
@@ -70,6 +70,16 @@ export type Instance = {
       private?: string // legacy
     }
   }
+  timelinesLookback?: {
+    [key: string]: {
+      queryKey: QueryKeyTimeline
+      ids: Mastodon.Status['id'][]
+    }
+  }
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
   drafts: ComposeStateDraft[]
 }
 
@@ -119,10 +129,9 @@ const instancesSlice = createSlice({
       action: PayloadAction<ComposeStateDraft>
     ) => {
       const activeIndex = findInstanceActive(instances)
-      const draftIndex = findIndex(instances[activeIndex].drafts, [
-        'timestamp',
-        action.payload.timestamp
-      ])
+      const draftIndex = instances[activeIndex].drafts.findIndex(
+        ({ timestamp }) => timestamp === action.payload.timestamp
+      )
       if (draftIndex === -1) {
         instances[activeIndex].drafts.unshift(action.payload)
       } else {
@@ -154,6 +163,26 @@ const instancesSlice = createSlice({
         newInstance.push.global.value = false
         return newInstance
       })
+    },
+    updateInstanceTimelineLookback: (
+      { instances },
+      action: PayloadAction<Instance['timelinesLookback']>
+    ) => {
+      const activeIndex = findInstanceActive(instances)
+      instances[activeIndex].timelinesLookback = {
+        ...instances[activeIndex].timelinesLookback,
+        ...action.payload
+      }
+    },
+    updateInstanceMePage: (
+      { instances },
+      action: PayloadAction<Partial<Instance['mePage']>>
+    ) => {
+      const activeIndex = findInstanceActive(instances)
+      instances[activeIndex].mePage = {
+        ...instances[activeIndex].mePage,
+        ...action.payload
+      }
     }
   },
   extraReducers: builder => {
@@ -354,6 +383,13 @@ export const getInstanceNotificationsFilter = ({
 export const getInstancePush = ({ instances: { instances } }: RootState) =>
   instances[findInstanceActive(instances)]?.push
 
+export const getInstanceTimelinesLookback = ({
+  instances: { instances }
+}: RootState) => instances[findInstanceActive(instances)]?.timelinesLookback
+
+export const getInstanceMePage = ({ instances: { instances } }: RootState) =>
+  instances[findInstanceActive(instances)]?.mePage
+
 export const getInstanceDrafts = ({ instances: { instances } }: RootState) =>
   instances[findInstanceActive(instances)]?.drafts
 
@@ -364,7 +400,9 @@ export const {
   updateInstanceDraft,
   removeInstanceDraft,
   clearPushLoading,
-  disableAllPushes
+  disableAllPushes,
+  updateInstanceTimelineLookback,
+  updateInstanceMePage
 } = instancesSlice.actions
 
 export default instancesSlice.reducer