Extract shell state into separate context (#1824)

* WIP

* Add shell state

* Integrate new shell state for drawer and minimal shell mode

* Replace isDrawerSwipeDisabled

* Split shell state into separate contexts to avoid needless re-renders

* Fix typo

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/screens/AppPasswords.tsx

@@ -16,20 +16,22 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
 export const AppPasswords = withAuthRequired(
   observer(function AppPasswordsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen} = useAnalytics()
     const {isTabletOrDesktop} = useWebMediaQueries()
 
     useFocusEffect(
       React.useCallback(() => {
         screen('AppPasswords')
-        store.shell.setMinimalShellMode(false)
-      }, [screen, store]),
+        setMinimalShellMode(false)
+      }, [screen, setMinimalShellMode]),
     )
 
     const onAdd = React.useCallback(async () => {

src/view/screens/CommunityGuidelines.tsx

@@ -5,10 +5,10 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -16,12 +16,12 @@ type Props = NativeStackScreenProps<
 >
 export const CommunityGuidelinesScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/CopyrightPolicy.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'>
 export const CopyrightPolicyScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/Feeds.tsx

@@ -27,12 +27,14 @@ import {FeedSourceModel} from 'state/models/content/feed-source'
 import {FlatList} from 'view/com/util/Views'
 import {useFocusEffect} from '@react-navigation/native'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 export const FeedsScreen = withAuthRequired(
   observer<Props>(function FeedsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
     const myFeeds = store.me.myFeeds
     const [query, setQuery] = React.useState<string>('')
@@ -43,14 +45,14 @@ export const FeedsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         myFeeds.setup()
 
         const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh())
         return () => {
           softResetSub.remove()
         }
-      }, [store, myFeeds]),
+      }, [store, myFeeds, setMinimalShellMode]),
     )
     React.useEffect(() => {
       // watch for changes to saved/pinned feeds

src/view/screens/Home.tsx

@@ -14,6 +14,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedPage} from 'view/com/feeds/FeedPage'
+import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 
 export const POLL_FREQ = 30e3 // 30sec
 
@@ -21,6 +22,8 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
   observer(function HomeScreenImpl({}: Props) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
     const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([])
@@ -61,21 +64,21 @@ export const HomeScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
-        store.shell.setIsDrawerSwipeDisabled(selectedPage > 0)
+        setMinimalShellMode(false)
+        setDrawerSwipeDisabled(selectedPage > 0)
         return () => {
-          store.shell.setIsDrawerSwipeDisabled(false)
+          setDrawerSwipeDisabled(false)
         }
-      }, [store, selectedPage]),
+      }, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
     )
 
     const onPageSelected = React.useCallback(
       (index: number) => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         setSelectedPage(index)
-        store.shell.setIsDrawerSwipeDisabled(index > 0)
+        setDrawerSwipeDisabled(index > 0)
       },
-      [store, setSelectedPage],
+      [setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
     )
 
     const onPressSelected = React.useCallback(() => {

src/view/screens/LanguageSettings.tsx

@@ -18,6 +18,7 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
 import {LANGUAGES} from 'lib/../locale/languages'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
@@ -28,12 +29,13 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
   const store = useStores()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen, track} = useAnalytics()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
       screen('Settings')
-      store.shell.setMinimalShellMode(false)
-    }, [screen, store]),
+      setMinimalShellMode(false)
+    }, [screen, setMinimalShellMode]),
   )
 
   const onPressContentLanguages = React.useCallback(() => {

src/view/screens/Lists.tsx

@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
 export const ListsScreen = withAuthRequired(
   observer(function ListsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile} = useWebMediaQueries()
     const navigation = useNavigation<NavigationProp>()
 
@@ -32,9 +34,9 @@ export const ListsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         listsLists.refresh()
-      }, [store, listsLists]),
+      }, [listsLists, setMinimalShellMode]),
     )
 
     const onPressNewList = React.useCallback(() => {

src/view/screens/Log.tsx

@@ -5,26 +5,26 @@ import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ScrollView} from '../com/util/Views'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {getEntries} from '#/logger/logDump'
 import {ago} from 'lib/strings/time'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 export const LogScreen = observer(function Log({}: NativeStackScreenProps<
   CommonNavigatorParams,
   'Log'
 >) {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const [expanded, setExpanded] = React.useState<string[]>([])
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   const toggler = (id: string) => () => {

src/view/screens/Moderation.tsx

@@ -17,20 +17,22 @@ import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
 export const ModerationScreen = withAuthRequired(
   observer(function Moderation({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen, track} = useAnalytics()
     const {isTabletOrDesktop} = useWebMediaQueries()
 
     useFocusEffect(
       React.useCallback(() => {
         screen('Moderation')
-        store.shell.setMinimalShellMode(false)
-      }, [screen, store]),
+        setMinimalShellMode(false)
+      }, [screen, setMinimalShellMode]),
     )
 
     const onPressContentFiltering = React.useCallback(() => {

src/view/screens/ModerationBlockedAccounts.tsx

@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationBlockedAccounts = withAuthRequired(
   observer(function ModerationBlockedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
     const blockedAccounts = useMemo(
@@ -41,9 +43,9 @@ export const ModerationBlockedAccounts = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('BlockedAccounts')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         blockedAccounts.refresh()
-      }, [screen, store, blockedAccounts]),
+      }, [screen, setMinimalShellMode, blockedAccounts]),
     )
 
     const onRefresh = React.useCallback(() => {

src/view/screens/ModerationModlists.tsx

@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'>
 export const ModerationModlistsScreen = withAuthRequired(
   observer(function ModerationModlistsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile} = useWebMediaQueries()
     const navigation = useNavigation<NavigationProp>()
 
@@ -32,9 +34,9 @@ export const ModerationModlistsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         mutelists.refresh()
-      }, [store, mutelists]),
+      }, [mutelists, setMinimalShellMode]),
     )
 
     const onPressNewList = React.useCallback(() => {

src/view/screens/ModerationMutedAccounts.tsx

@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationMutedAccounts = withAuthRequired(
   observer(function ModerationMutedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
     const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store])
@@ -38,9 +40,9 @@ export const ModerationMutedAccounts = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('MutedAccounts')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         mutedAccounts.refresh()
-      }, [screen, store, mutedAccounts]),
+      }, [screen, setMinimalShellMode, mutedAccounts]),
     )
 
     const onRefresh = React.useCallback(() => {

src/view/screens/NotFound.tsx

@@ -10,18 +10,18 @@ import {Text} from '../com/util/text/Text'
 import {Button} from 'view/com/util/forms/Button'
 import {NavigationProp} from 'lib/routes/types'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 export const NotFoundScreen = () => {
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   const canGoBack = navigation.canGoBack()

src/view/screens/Notifications.tsx

@@ -21,6 +21,7 @@ import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {isWeb} from 'platform/detection'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
@@ -29,8 +30,8 @@ type Props = NativeStackScreenProps<
 export const NotificationsScreen = withAuthRequired(
   observer(function NotificationsScreenImpl({}: Props) {
     const store = useStores()
-    const [onMainScroll, isScrolledDown, resetMainScroll] =
-      useOnMainScroll(store)
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
     const scrollElRef = React.useRef<FlatList>(null)
     const {screen} = useAnalytics()
     const pal = usePalette('default')
@@ -60,7 +61,7 @@ export const NotificationsScreen = withAuthRequired(
     // =
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         logger.debug('NotificationsScreen: Updating feed')
         const softResetSub = store.onScreenSoftReset(onPressLoadLatest)
         store.me.notifications.update()
@@ -70,7 +71,7 @@ export const NotificationsScreen = withAuthRequired(
           softResetSub.remove()
           store.me.notifications.markAllRead()
         }
-      }, [store, screen, onPressLoadLatest]),
+      }, [store, screen, onPressLoadLatest, setMinimalShellMode]),
     )
 
     useTabFocusEffect(

src/view/screens/PostLikedBy.tsx

@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
 export const PostLikedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/PostRepostedBy.tsx

@@ -5,19 +5,19 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
 export const PostRepostedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/PostThread.tsx

@@ -15,6 +15,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {clamp} from 'lodash'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {logger} from '#/logger'
+import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
 
 const SHELL_FOOTER_HEIGHT = 44
 
@@ -22,6 +23,8 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export const PostThreadScreen = withAuthRequired(
   observer(function PostThreadScreenImpl({route}: Props) {
     const store = useStores()
+    const minimalShellMode = useMinimalShellMode()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const safeAreaInsets = useSafeAreaInsets()
     const {name, rkey} = route.params
     const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -33,7 +36,7 @@ export const PostThreadScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         const threadCleanup = view.registerListeners()
 
         InteractionManager.runAfterInteractions(() => {
@@ -47,7 +50,7 @@ export const PostThreadScreen = withAuthRequired(
         return () => {
           threadCleanup()
         }
-      }, [store, view]),
+      }, [view, setMinimalShellMode]),
     )
 
     const onPressReply = React.useCallback(() => {
@@ -80,7 +83,7 @@ export const PostThreadScreen = withAuthRequired(
             treeView={!!store.preferences.thread.lab_treeViewEnabled}
           />
         </View>
-        {isMobile && !store.shell.minimalShellMode && (
+        {isMobile && !minimalShellMode && (
           <View
             style={[
               styles.prompt,

src/view/screens/PrivacyPolicy.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'>
 export const PrivacyPolicyScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/Profile.tsx

@@ -30,11 +30,13 @@ import {FeedSourceModel} from 'state/models/content/feed-source'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {combinedDisplayName} from 'lib/strings/display-names'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(
   observer(function ProfileScreenImpl({route}: Props) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen, track} = useAnalytics()
     const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
     const name = route.params.name === 'me' ? store.me.did : route.params.name
@@ -69,7 +71,7 @@ export const ProfileScreen = withAuthRequired(
       React.useCallback(() => {
         const softResetSub = store.onScreenSoftReset(onSoftReset)
         let aborted = false
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         const feedCleanup = uiState.feed.registerListeners()
         if (!hasSetup) {
           uiState.setup().then(() => {
@@ -84,7 +86,7 @@ export const ProfileScreen = withAuthRequired(
           feedCleanup()
           softResetSub.remove()
         }
-      }, [store, onSoftReset, uiState, hasSetup]),
+      }, [store, onSoftReset, uiState, hasSetup, setMinimalShellMode]),
     )
 
     // events

src/view/screens/ProfileFeedLikedBy.tsx

@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeedLikedBy'>
 export const ProfileFeedLikedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileFollowers.tsx

@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
-import {useStores} from 'state/index'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
 export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileFollows.tsx

@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
-import {useStores} from 'state/index'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
 export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileList.tsx

@@ -45,6 +45,7 @@ import {makeProfileLink, makeListLink} from 'lib/routes/links'
 import {ComposeIcon2} from 'lib/icons'
 import {ListItems} from 'view/com/lists/ListItems'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@@ -105,6 +106,7 @@ export const ProfileListScreenInner = observer(
     listOwnerDid,
   }: Props & {listOwnerDid: string}) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {rkey} = route.params
     const feedSectionRef = React.useRef<SectionRef>(null)
     const aboutSectionRef = React.useRef<SectionRef>(null)
@@ -124,13 +126,13 @@ export const ProfileListScreenInner = observer(
 
     useFocusEffect(
       useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         list.loadMore(true).then(() => {
           if (list.isCuratelist) {
             feed.setup()
           }
         })
-      }, [store, list, feed]),
+      }, [setMinimalShellMode, list, feed]),
     )
 
     const onPressAddUser = useCallback(() => {

src/view/screens/SavedFeeds.tsx

@@ -27,6 +27,7 @@ import * as Toast from 'view/com/util/Toast'
 import {Haptics} from 'lib/haptics'
 import {TextLink} from 'view/com/util/Link'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 const HITSLOP_TOP = {
   top: 20,
@@ -48,6 +49,7 @@ export const SavedFeeds = withAuthRequired(
     const store = useStores()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
+    const setMinimalShellMode = useSetMinimalShellMode()
 
     const savedFeeds = useMemo(() => {
       const model = new SavedFeedsModel(store)
@@ -57,9 +59,9 @@ export const SavedFeeds = withAuthRequired(
     useFocusEffect(
       useCallback(() => {
         screen('SavedFeeds')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         savedFeeds.refresh()
-      }, [screen, store, savedFeeds]),
+      }, [screen, setMinimalShellMode, savedFeeds]),
     )
 
     return (

src/view/screens/SearchMobile.tsx

@@ -27,15 +27,18 @@ import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {isAndroid, isIOS} from 'platform/detection'
+import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 
 type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
 export const SearchScreen = withAuthRequired(
   observer<Props>(function SearchScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const setIsDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
     const scrollViewRef = React.useRef<ScrollView>(null)
     const flatListRef = React.useRef<FlatList>(null)
-    const [onMainScroll] = useOnMainScroll(store)
+    const [onMainScroll] = useOnMainScroll()
     const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
     const [query, setQuery] = React.useState<string>('')
     const autocompleteView = React.useMemo<UserAutocompleteModel>(
@@ -75,8 +78,8 @@ export const SearchScreen = withAuthRequired(
       setQuery('')
       autocompleteView.setActive(false)
       setSearchUIModel(undefined)
-      store.shell.setIsDrawerSwipeDisabled(false)
-    }, [setQuery, autocompleteView, store])
+      setIsDrawerSwipeDisabled(false)
+    }, [setQuery, autocompleteView, setIsDrawerSwipeDisabled])
 
     const onSubmitQuery = React.useCallback(() => {
       if (query.length === 0) {
@@ -86,8 +89,8 @@ export const SearchScreen = withAuthRequired(
       const model = new SearchUIModel(store)
       model.fetch(query)
       setSearchUIModel(model)
-      store.shell.setIsDrawerSwipeDisabled(true)
-    }, [query, setSearchUIModel, store])
+      setIsDrawerSwipeDisabled(true)
+    }, [query, setSearchUIModel, store, setIsDrawerSwipeDisabled])
 
     const onSoftReset = React.useCallback(() => {
       scrollViewRef.current?.scrollTo({x: 0, y: 0})
@@ -102,7 +105,7 @@ export const SearchScreen = withAuthRequired(
           softResetSub.remove()
         }
 
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         autocompleteView.setup()
         if (!foafs.hasData) {
           foafs.fetch()
@@ -112,7 +115,14 @@ export const SearchScreen = withAuthRequired(
         }
 
         return cleanup
-      }, [store, autocompleteView, foafs, suggestedActors, onSoftReset]),
+      }, [
+        store,
+        autocompleteView,
+        foafs,
+        suggestedActors,
+        onSoftReset,
+        setMinimalShellMode,
+      ]),
     )
 
     const onPress = useCallback(() => {

src/view/screens/Settings.tsx

@@ -46,6 +46,7 @@ import Clipboard from '@react-native-clipboard/clipboard'
 import {makeProfileLink} from 'lib/routes/links'
 import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 // TEMPORARY (APP-700)
 // remove after backend testing finishes
@@ -58,6 +59,7 @@ export const SettingsScreen = withAuthRequired(
   observer(function Settings({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const navigation = useNavigation<NavigationProp>()
     const {isMobile} = useWebMediaQueries()
     const {screen, track} = useAnalytics()
@@ -88,8 +90,8 @@ export const SettingsScreen = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('Settings')
-        store.shell.setMinimalShellMode(false)
-      }, [screen, store]),
+        setMinimalShellMode(false)
+      }, [screen, setMinimalShellMode]),
     )
 
     const onPressAddAccount = React.useCallback(() => {

src/view/screens/Support.tsx

@@ -3,23 +3,23 @@ import {View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {CenteredView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {HELP_DESK_URL} from 'lib/constants'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'>
 export const SupportScreen = (_props: Props) => {
-  const store = useStores()
   const pal = usePalette('default')
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/TermsOfService.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'>
 export const TermsOfServiceScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
   )
 
   return (