Merge branch 'main' into internationalization

2023-11-07 16:14:52 -08:00
parent 80944a8779 96d8faf4b0
commit a3851b27ce
73 changed files with 972 additions and 449 deletions
@@ -1,10 +1,3 @@
 jest.mock('sentry-expo', () => ({
  init: () => jest.fn(),
-  Native: {
-    ReactNativeTracing: jest.fn().mockImplementation(() => ({
-      start: jest.fn(),
-      stop: jest.fn(),
-    })),
-    ReactNavigationInstrumentation: jest.fn(),
-  },
 }))
@@ -176,8 +176,8 @@
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  {% block html_head_extra -%}{%- endblock %}
-  <meta name="application-name" name="Bluesky">
-  <meta name="generator" name="bskyweb">
+  <meta name="application-name" content="Bluesky">
+  <meta name="generator" content="bskyweb">
 </head>
 <body>
 {%- block body_all %}
@@ -10,7 +10,8 @@ import {QueryClientProvider} from '@tanstack/react-query'

 import 'view/icons'

-import {withSentry} from 'lib/sentry'
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
@@ -20,10 +21,12 @@ import * as analytics from 'lib/analytics/analytics'
 import * as Toast from 'view/com/util/Toast'
 import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
+import {Provider as ShellStateProvider} from 'state/shell'

 SplashScreen.preventAutoHideAsync()

-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
  const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
    undefined,
  )
@@ -46,7 +49,7 @@ const App = observer(function AppImpl() {
  }
  return (
    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={rootStore.shell.colorMode}>
+      <ThemeProvider theme={colorMode}>
        <RootSiblingParent>
          <analytics.Provider>
            <RootStoreProvider value={rootStore}>
@@ -62,4 +65,22 @@ const App = observer(function AppImpl() {
  )
 })

-export default withSentry(App)
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ShellStateProvider>
+      <InnerApp />
+    </ShellStateProvider>
+  )
+}
+
+export default App
@@ -8,6 +8,8 @@ import {RootSiblingParent} from 'react-native-root-siblings'

 import 'view/icons'

+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import * as analytics from 'lib/analytics/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from 'view/shell/index'
@@ -17,8 +19,10 @@ import {queryClient} from 'lib/react-query'
 import {i18n} from '@lingui/core'
 import {I18nProvider} from '@lingui/react'
 import {defaultLocale, dynamicActivate} from './locale/i18n'
+import {Provider as ShellStateProvider} from 'state/shell'

-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
  const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
    undefined,
  )
@@ -39,7 +43,7 @@ const App = observer(function AppImpl() {

  return (
    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={rootStore.shell.colorMode}>
+      <ThemeProvider theme={colorMode}>
        <RootSiblingParent>
          <analytics.Provider>
            <RootStoreProvider value={rootStore}>
@@ -57,4 +61,22 @@ const App = observer(function AppImpl() {
  )
 })

+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ShellStateProvider>
+      <InnerApp />
+    </ShellStateProvider>
+  )
+}
+
 export default App
@@ -34,7 +34,6 @@ import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from './state'
-import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
@@ -478,12 +477,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
        )
        console.log(`Time to first paint: ${initMs} ms`)
        logModuleInitTrace()
-
-        // Register the navigation container with the Sentry instrumentation (only works on native)
-        if (isNative) {
-          const routingInstrumentation = getRoutingInstrumentation()
-          routingInstrumentation.registerNavigationContainer(navigationRef)
-        }
      }}>
      {children}
    </NavigationContainer>
@@ -6,6 +6,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {AccountData} from 'state/models/session'
 import {reset as resetNavigation} from '../../Navigation'
 import * as Toast from 'view/com/util/Toast'
+import {useSetDrawerOpen} from '#/state/shell/drawer-open'

 export function useAccountSwitcher(): [
  boolean,
@@ -13,8 +14,8 @@ export function useAccountSwitcher(): [
  (acct: AccountData) => Promise<void>,
 ] {
  const {track} = useAnalytics()
-
  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const [isSwitching, setIsSwitching] = useState(false)
  const navigation = useNavigation<NavigationProp>()

@@ -23,6 +24,7 @@ export function useAccountSwitcher(): [
      track('Settings:SwitchAccountButtonClicked')
      setIsSwitching(true)
      const success = await store.session.resumeSession(acct)
+      setDrawerOpen(false)
      store.shell.closeAllActiveElements()
      if (success) {
        resetNavigation()
@@ -34,7 +36,7 @@ export function useAccountSwitcher(): [
        store.session.clear()
      }
    },
-    [track, setIsSwitching, navigation, store],
+    [track, setIsSwitching, navigation, store, setDrawerOpen],
  )

  return [isSwitching, setIsSwitching, onPressSwitchAccount]
@@ -1,6 +1,5 @@
 import React from 'react'
 import {autorun} from 'mobx'
-import {useStores} from 'state/index'
 import {
  Easing,
  interpolate,
@@ -9,8 +8,10 @@ import {
  withTiming,
 } from 'react-native-reanimated'

+import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
+
 export function useMinimalShellMode() {
-  const store = useStores()
+  const minimalShellMode = useMinimalShellModeState()
  const minimalShellInterp = useSharedValue(0)
  const footerMinimalShellTransform = useAnimatedStyle(() => {
    return {
@@ -38,7 +39,7 @@ export function useMinimalShellMode() {

  React.useEffect(() => {
    return autorun(() => {
-      if (store.shell.minimalShellMode) {
+      if (minimalShellMode) {
        minimalShellInterp.value = withTiming(1, {
          duration: 125,
          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -50,9 +51,10 @@ export function useMinimalShellMode() {
        })
      }
    })
-  }, [minimalShellInterp, store.shell.minimalShellMode])
+  }, [minimalShellInterp, minimalShellMode])

  return {
+    minimalShellMode,
    footerMinimalShellTransform,
    headerMinimalShellTransform,
    fabMinimalShellTransform,
@@ -1,8 +1,8 @@
 import {useState, useCallback, useRef} from 'react'
 import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
-import {RootStoreModel} from 'state/index'
 import {s} from 'lib/styles'
 import {useWebMediaQueries} from './useWebMediaQueries'
+import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell'

 const Y_LIMIT = 10

@@ -19,12 +19,12 @@ export type OnScrollCb = (
 ) => void
 export type ResetCb = () => void

-export function useOnMainScroll(
-  store: RootStoreModel,
-): [OnScrollCb, boolean, ResetCb] {
+export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
  let lastY = useRef(0)
  let [isScrolledDown, setIsScrolledDown] = useState(false)
  const {dyLimitUp, dyLimitDown} = useDeviceLimits()
+  const minimalShellMode = useMinimalShellMode()
+  const setMinimalShellMode = useSetMinimalShellMode()

  return [
    useCallback(
@@ -33,13 +33,10 @@ export function useOnMainScroll(
        const dy = y - (lastY.current || 0)
        lastY.current = y

-        if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
-          store.shell.setMinimalShellMode(true)
-        } else if (
-          store.shell.minimalShellMode &&
-          (dy < dyLimitUp * -1 || y <= Y_LIMIT)
-        ) {
-          store.shell.setMinimalShellMode(false)
+        if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
+          setMinimalShellMode(true)
+        } else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
+          setMinimalShellMode(false)
        }

        if (
@@ -54,13 +51,19 @@ export function useOnMainScroll(
          setIsScrolledDown(false)
        }
      },
-      [store.shell, dyLimitDown, dyLimitUp, isScrolledDown],
+      [
+        dyLimitDown,
+        dyLimitUp,
+        isScrolledDown,
+        minimalShellMode,
+        setMinimalShellMode,
+      ],
    ),
    isScrolledDown,
    useCallback(() => {
      setIsScrolledDown(false)
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
      lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
-    }, [store, setIsScrolledDown]),
+    }, [setIsScrolledDown, setMinimalShellMode]),
  ]
 }
@@ -1,19 +0,0 @@
-import {isAndroid} from 'platform/detection'
-import {BackHandler} from 'react-native'
-import {RootStoreModel} from 'state/index'
-
-export function init(store: RootStoreModel) {
-  // only register back handler on android, otherwise it throws an error
-  if (isAndroid) {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        return store.shell.closeAnyActiveElement()
-      },
-    )
-    return () => {
-      backHandler.remove()
-    }
-  }
-  return () => {}
-}
@@ -1,52 +1,8 @@
-import {isNative, isWeb} from 'platform/detection'
-import {FC} from 'react'
-import * as Sentry from 'sentry-expo'
+import {init} from 'sentry-expo'

-// Sentry Initialization
-
-export const getRoutingInstrumentation = () => {
-  return new Sentry.Native.ReactNavigationInstrumentation() // initialize this in `onReady` prop of NavigationContainer
-}
-
-Sentry.init({
+init({
  dsn: 'https://05bc3789bf994b81bd7ce20c86ccd3ae@o4505071687041024.ingest.sentry.io/4505071690514432',
  enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
  debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
  environment: __DEV__ ? 'development' : 'production', // Set the environment
-  // @ts-ignore exists but not in types, see https://docs.sentry.io/platforms/react-native/configuration/options/#enableAutoPerformanceTracking
-  enableAutoPerformanceTracking: true, // Enable auto performance tracking
-  tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
-  _experiments: {
-    // The sampling rate for profiling is relative to TracesSampleRate.
-    // In this case, we'll capture profiles for 50% of transactions.
-    profilesSampleRate: 0.5,
-  },
-  integrations: isNative
-    ? [
-        new Sentry.Native.ReactNativeTracing({
-          shouldCreateSpanForRequest: url => {
-            // Do not create spans for outgoing requests to a `/logs` endpoint as it is too noisy due to expo
-            return !url.match(/\/logs$/)
-          },
-          routingInstrumentation: getRoutingInstrumentation(),
-        }),
-      ]
-    : [], // no integrations for web, yet
 })
-
-// if web, use Browser client, otherwise use Native client
-export function getSentryClient() {
-  if (isWeb) {
-    return Sentry.Browser
-  }
-  return Sentry.Native
-}
-
-// wrap root App component with Sentry for automatic touch event tracking and performance monitoring
-export function withSentry(Component: FC) {
-  if (isWeb) {
-    return Component // .wrap is not required or available for web
-  }
-  const sentryClient = getSentryClient()
-  return sentryClient.wrap(Component)
-}
@@ -164,6 +164,7 @@ export const s = StyleSheet.create({
  flexRow: {flexDirection: 'row'},
  flexCol: {flexDirection: 'column'},
  flex1: {flex: 1},
+  flexGrow1: {flexGrow: 1},
  alignCenter: {alignItems: 'center'},
  alignBaseline: {alignItems: 'baseline'},

@@ -142,7 +142,8 @@ export class FeedSourceModel {
  }

  async unsave() {
-    if (this.type !== 'feed-generator') {
+    // TODO TEMPORARY — see PRF's comment in content/list.ts togglePin
+    if (this.type !== 'feed-generator' && this.type !== 'list') {
      return
    }
    try {
@@ -179,7 +180,13 @@ export class FeedSourceModel {
        name: this.displayName,
        uri: this.uri,
      })
-      return this.rootStore.preferences.removePinnedFeed(this.uri)
+
+      if (this.type === 'list') {
+        // TODO TEMPORARY — see PRF's comment in content/list.ts togglePin
+        return this.unsave()
+      } else {
+        return this.rootStore.preferences.removePinnedFeed(this.uri)
+      }
    }
  }

@@ -361,7 +361,7 @@ export class ListModel {
        name: this.data?.name || '',
        uri: this.uri,
      })
-      // TEMPORARY
+      // TODO TEMPORARY
      // lists are temporarily piggybacking on the saved/pinned feeds preferences
      // we'll eventually replace saved feeds with the bookmarks API
      // until then, we need to unsave lists instead of just unpin them
@@ -74,7 +74,6 @@ export class RootStoreModel {
      session: this.session.serialize(),
      me: this.me.serialize(),
      onboarding: this.onboarding.serialize(),
-      shell: this.shell.serialize(),
      preferences: this.preferences.serialize(),
      invitedUsers: this.invitedUsers.serialize(),
      mutedThreads: this.mutedThreads.serialize(),
@@ -99,9 +98,6 @@ export class RootStoreModel {
      if (hasProp(v, 'session')) {
        this.session.hydrate(v.session)
      }
-      if (hasProp(v, 'shell')) {
-        this.shell.hydrate(v.shell)
-      }
      if (hasProp(v, 'preferences')) {
        this.preferences.hydrate(v.preferences)
      }
@@ -38,12 +38,18 @@ export class SavedFeedsModel {
    return this.hasLoaded && !this.hasContent
  }

-  get pinned() {
-    return this.all.filter(feed => feed.isPinned)
+  get pinned(): FeedSourceModel[] {
+    return this.rootStore.preferences.savedFeeds
+      .filter(feed => this.rootStore.preferences.isPinnedFeed(feed))
+      .map(uri => this.all.find(f => f.uri === uri))
+      .filter(Boolean) as FeedSourceModel[]
  }

-  get unpinned() {
-    return this.all.filter(feed => !feed.isPinned)
+  get unpinned(): FeedSourceModel[] {
+    return this.rootStore.preferences.savedFeeds
+      .filter(feed => !this.rootStore.preferences.isPinnedFeed(feed))
+      .map(uri => this.all.find(f => f.uri === uri))
+      .filter(Boolean) as FeedSourceModel[]
  }

  get pinnedFeedNames() {
@@ -2,13 +2,11 @@ import {AppBskyEmbedRecord, AppBskyActorDefs, ModerationUI} from '@atproto/api'
 import {RootStoreModel} from '../root-store'
 import {makeAutoObservable, runInAction} from 'mobx'
 import {ProfileModel} from '../content/profile'
-import {isObj, hasProp} from 'lib/type-guards'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import {ImageModel} from '../media/image'
 import {ListModel} from '../content/list'
 import {GalleryModel} from '../media/gallery'
 import {StyleProp, ViewStyle} from 'react-native'
-import {isWeb} from 'platform/detection'

 export type ColorMode = 'system' | 'light' | 'dark'

@@ -265,10 +263,6 @@ export interface ComposerOpts {
 }

 export class ShellUiModel {
-  colorMode: ColorMode = 'system'
-  minimalShellMode = false
-  isDrawerOpen = false
-  isDrawerSwipeDisabled = false
  isModalActive = false
  activeModals: Modal[] = []
  isLightboxActive = false
@@ -279,44 +273,13 @@ export class ShellUiModel {

  constructor(public rootStore: RootStoreModel) {
    makeAutoObservable(this, {
-      serialize: false,
      rootStore: false,
-      hydrate: false,
    })

    this.setupClock()
    this.setupLoginModals()
  }

-  serialize(): unknown {
-    return {
-      colorMode: this.colorMode,
-    }
-  }
-
-  hydrate(v: unknown) {
-    if (isObj(v)) {
-      if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) {
-        this.setColorMode(v.colorMode)
-      }
-    }
-  }
-
-  setColorMode(mode: ColorMode) {
-    this.colorMode = mode
-
-    if (isWeb && typeof window !== 'undefined') {
-      const html = window.document.documentElement
-      // remove any other color mode classes
-      html.className = html.className.replace(/colorMode--\w+/g, '')
-      html.classList.add(`colorMode--${mode}`)
-    }
-  }
-
-  setMinimalShellMode(v: boolean) {
-    this.minimalShellMode = v
-  }
-
  /**
   * returns true if something was closed
   * (used by the android hardware back btn)
@@ -334,10 +297,6 @@ export class ShellUiModel {
      this.closeComposer()
      return true
    }
-    if (this.isDrawerOpen) {
-      this.closeDrawer()
-      return true
-    }
    return false
  }

@@ -354,21 +313,6 @@ export class ShellUiModel {
    if (this.isComposerActive) {
      this.closeComposer()
    }
-    if (this.isDrawerOpen) {
-      this.closeDrawer()
-    }
-  }
-
-  openDrawer() {
-    this.isDrawerOpen = true
-  }
-
-  closeDrawer() {
-    this.isDrawerOpen = false
-  }
-
-  setIsDrawerSwipeDisabled(v: boolean) {
-    this.isDrawerSwipeDisabled = v
  }

  openModal(modal: Modal) {
@@ -0,0 +1,6 @@
+export default class BroadcastChannel {
+  constructor(public name: string) {}
+  postMessage(_data: any) {}
+  close() {}
+  onmessage: (event: MessageEvent) => void = () => {}
+}
@@ -0,0 +1 @@
+export default BroadcastChannel
@@ -0,0 +1,91 @@
+import EventEmitter from 'eventemitter3'
+import {logger} from '#/logger'
+import {defaults, Schema} from '#/state/persisted/schema'
+import {migrate} from '#/state/persisted/legacy'
+import * as store from '#/state/persisted/store'
+import BroadcastChannel from '#/state/persisted/broadcast'
+
+export type {Schema} from '#/state/persisted/schema'
+export {defaults as schema} from '#/state/persisted/schema'
+
+const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL')
+const UPDATE_EVENT = 'BSKY_UPDATE'
+
+let _state: Schema = defaults
+const _emitter = new EventEmitter()
+
+/**
+ * Initializes and returns persisted data state, so that it can be passed to
+ * the Provider.
+ */
+export async function init() {
+  logger.debug('persisted state: initializing')
+
+  broadcast.onmessage = onBroadcastMessage
+
+  try {
+    await migrate() // migrate old store
+    const stored = await store.read() // check for new store
+    if (!stored) await store.write(defaults) // opt: init new store
+    _state = stored || defaults // return new store
+  } catch (e) {
+    logger.error('persisted state: failed to load root state from storage', {
+      error: e,
+    })
+    // AsyncStorage failured, but we can still continue in memory
+    return defaults
+  }
+}
+
+export function get<K extends keyof Schema>(key: K): Schema[K] {
+  return _state[key]
+}
+
+export async function write<K extends keyof Schema>(
+  key: K,
+  value: Schema[K],
+): Promise<void> {
+  try {
+    _state[key] = value
+    await store.write(_state)
+    // must happen on next tick, otherwise the tab will read stale storage data
+    setTimeout(() => broadcast.postMessage({event: UPDATE_EVENT}), 0)
+    logger.debug(`persisted state: wrote root state to storage`)
+  } catch (e) {
+    logger.error(`persisted state: failed writing root state to storage`, {
+      error: e,
+    })
+  }
+}
+
+export function onUpdate(cb: () => void): () => void {
+  _emitter.addListener('update', cb)
+  return () => _emitter.removeListener('update', cb)
+}
+
+async function onBroadcastMessage({data}: MessageEvent) {
+  // validate event
+  if (typeof data === 'object' && data.event === UPDATE_EVENT) {
+    try {
+      // read next state, possibly updated by another tab
+      const next = await store.read()
+
+      if (next) {
+        logger.debug(`persisted state: handling update from broadcast channel`)
+        _state = next
+        _emitter.emit('update')
+      } else {
+        logger.error(
+          `persisted state: handled update update from broadcast channel, but found no data`,
+        )
+      }
+    } catch (e) {
+      logger.error(
+        `persisted state: failed handling update from broadcast channel`,
+        {
+          error: e,
+        },
+      )
+    }
+  }
+}
@@ -0,0 +1,137 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+import {logger} from '#/logger'
+import {defaults, Schema} from '#/state/persisted/schema'
+import {write, read} from '#/state/persisted/store'
+
+/**
+ * The shape of the serialized data from our legacy Mobx store.
+ */
+type LegacySchema = {
+  shell: {
+    colorMode: 'system' | 'light' | 'dark'
+  }
+  session: {
+    data: {
+      service: string
+      did: `did:plc:${string}`
+    }
+    accounts: {
+      service: string
+      did: `did:plc:${string}`
+      refreshJwt: string
+      accessJwt: string
+      handle: string
+      email: string
+      displayName: string
+      aviUrl: string
+      emailConfirmed: boolean
+    }[]
+  }
+  me: {
+    did: `did:plc:${string}`
+    handle: string
+    displayName: string
+    description: string
+    avatar: string
+  }
+  onboarding: {
+    step: string
+  }
+  preferences: {
+    primaryLanguage: string
+    contentLanguages: string[]
+    postLanguage: string
+    postLanguageHistory: string[]
+    contentLabels: {
+      nsfw: string
+      nudity: string
+      suggestive: string
+      gore: string
+      hate: string
+      spam: string
+      impersonation: string
+    }
+    savedFeeds: string[]
+    pinnedFeeds: string[]
+    requireAltTextEnabled: boolean
+  }
+  invitedUsers: {
+    seenDids: string[]
+    copiedInvites: string[]
+  }
+  mutedThreads: {uris: string[]}
+  reminders: {lastEmailConfirm: string}
+}
+
+const DEPRECATED_ROOT_STATE_STORAGE_KEY = 'root'
+
+export function transform(legacy: LegacySchema): Schema {
+  return {
+    colorMode: legacy.shell?.colorMode || defaults.colorMode,
+    session: {
+      accounts: legacy.session.accounts || defaults.session.accounts,
+      currentAccount:
+        legacy.session.accounts.find(a => a.did === legacy.session.data.did) ||
+        defaults.session.currentAccount,
+    },
+    reminders: {
+      lastEmailConfirmReminder:
+        legacy.reminders.lastEmailConfirm ||
+        defaults.reminders.lastEmailConfirmReminder,
+    },
+    languagePrefs: {
+      primaryLanguage:
+        legacy.preferences.primaryLanguage ||
+        defaults.languagePrefs.primaryLanguage,
+      contentLanguages:
+        legacy.preferences.contentLanguages ||
+        defaults.languagePrefs.contentLanguages,
+      postLanguage:
+        legacy.preferences.postLanguage || defaults.languagePrefs.postLanguage,
+      postLanguageHistory:
+        legacy.preferences.postLanguageHistory ||
+        defaults.languagePrefs.postLanguageHistory,
+    },
+    requireAltTextEnabled:
+      legacy.preferences.requireAltTextEnabled ||
+      defaults.requireAltTextEnabled,
+    mutedThreads: legacy.mutedThreads.uris || defaults.mutedThreads,
+    invitedUsers: {
+      seenDids: legacy.invitedUsers.seenDids || defaults.invitedUsers.seenDids,
+      copiedInvites:
+        legacy.invitedUsers.copiedInvites ||
+        defaults.invitedUsers.copiedInvites,
+    },
+    onboarding: {
+      step: legacy.onboarding.step || defaults.onboarding.step,
+    },
+  }
+}
+
+/**
+ * Migrates legacy persisted state to new store if new store doesn't exist in
+ * local storage AND old storage exists.
+ */
+export async function migrate() {
+  logger.debug('persisted state: migrate')
+
+  try {
+    const rawLegacyData = await AsyncStorage.getItem(
+      DEPRECATED_ROOT_STATE_STORAGE_KEY,
+    )
+    const alreadyMigrated = Boolean(await read())
+
+    if (!alreadyMigrated && rawLegacyData) {
+      logger.debug('persisted state: migrating legacy storage')
+      const legacyData = JSON.parse(rawLegacyData)
+      const newData = transform(legacyData)
+      await write(newData)
+      logger.debug('persisted state: migrated legacy storage')
+    }
+  } catch (e) {
+    logger.error('persisted state: error migrating legacy storage', {
+      error: String(e),
+    })
+  }
+}
@@ -0,0 +1,68 @@
+import {z} from 'zod'
+import {deviceLocales} from '#/platform/detection'
+
+// only data needed for rendering account page
+const accountSchema = z.object({
+  service: z.string(),
+  did: z.string(),
+  refreshJwt: z.string().optional(),
+  accessJwt: z.string().optional(),
+  handle: z.string(),
+  displayName: z.string(),
+  aviUrl: z.string(),
+})
+
+export const schema = z.object({
+  colorMode: z.enum(['system', 'light', 'dark']),
+  session: z.object({
+    accounts: z.array(accountSchema),
+    currentAccount: accountSchema.optional(),
+  }),
+  reminders: z.object({
+    lastEmailConfirmReminder: z.string().optional(),
+  }),
+  languagePrefs: z.object({
+    primaryLanguage: z.string(), // should move to server
+    contentLanguages: z.array(z.string()), // should move to server
+    postLanguage: z.string(), // should move to server
+    postLanguageHistory: z.array(z.string()),
+  }),
+  requireAltTextEnabled: z.boolean(), // should move to server
+  mutedThreads: z.array(z.string()), // should move to server
+  invitedUsers: z.object({
+    seenDids: z.array(z.string()),
+    copiedInvites: z.array(z.string()),
+  }),
+  onboarding: z.object({
+    step: z.string(),
+  }),
+})
+export type Schema = z.infer<typeof schema>
+
+export const defaults: Schema = {
+  colorMode: 'system',
+  session: {
+    accounts: [],
+    currentAccount: undefined,
+  },
+  reminders: {
+    lastEmailConfirmReminder: undefined,
+  },
+  languagePrefs: {
+    primaryLanguage: deviceLocales[0] || 'en',
+    contentLanguages: deviceLocales || [],
+    postLanguage: deviceLocales[0] || 'en',
+    postLanguageHistory: (deviceLocales || [])
+      .concat(['en', 'ja', 'pt', 'de'])
+      .slice(0, 6),
+  },
+  requireAltTextEnabled: false,
+  mutedThreads: [],
+  invitedUsers: {
+    seenDids: [],
+    copiedInvites: [],
+  },
+  onboarding: {
+    step: 'Home',
+  },
+}
@@ -0,0 +1,18 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+import {Schema, schema} from '#/state/persisted/schema'
+
+const BSKY_STORAGE = 'BSKY_STORAGE'
+
+export async function write(value: Schema) {
+  schema.parse(value)
+  await AsyncStorage.setItem(BSKY_STORAGE, JSON.stringify(value))
+}
+
+export async function read(): Promise<Schema | undefined> {
+  const rawData = await AsyncStorage.getItem(BSKY_STORAGE)
+  const objData = rawData ? JSON.parse(rawData) : undefined
+  if (schema.safeParse(objData).success) {
+    return objData
+  }
+}
@@ -0,0 +1,56 @@
+import React from 'react'
+import {isWeb} from '#/platform/detection'
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['colorMode']
+type SetContext = (v: persisted.Schema['colorMode']) => void
+
+const stateContext = React.createContext<StateContext>('system')
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['colorMode']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('colorMode'))
+
+  const setStateWrapped = React.useCallback(
+    (colorMode: persisted.Schema['colorMode']) => {
+      setState(colorMode)
+      persisted.write('colorMode', colorMode)
+      updateDocument(colorMode)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('colorMode'))
+      updateDocument(persisted.get('colorMode'))
+    })
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useColorMode() {
+  return React.useContext(stateContext)
+}
+
+export function useSetColorMode() {
+  return React.useContext(setContext)
+}
+
+function updateDocument(colorMode: string) {
+  if (isWeb && typeof window !== 'undefined') {
+    const html = window.document.documentElement
+    // remove any other color mode classes
+    html.className = html.className.replace(/colorMode--\w+/g, '')
+    html.classList.add(`colorMode--${colorMode}`)
+  }
+}
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useIsDrawerOpen() {
+  return React.useContext(stateContext)
+}
+
+export function useSetDrawerOpen() {
+  return React.useContext(setContext)
+}
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useIsDrawerSwipeDisabled() {
+  return React.useContext(stateContext)
+}
+
+export function useSetDrawerSwipeDisabled() {
+  return React.useContext(setContext)
+}
@@ -0,0 +1,25 @@
+import React from 'react'
+import {Provider as DrawerOpenProvider} from './drawer-open'
+import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
+import {Provider as MinimalModeProvider} from './minimal-mode'
+import {Provider as ColorModeProvider} from './color-mode'
+
+export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
+export {
+  useIsDrawerSwipeDisabled,
+  useSetDrawerSwipeDisabled,
+} from './drawer-swipe-disabled'
+export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
+export {useColorMode, useSetColorMode} from './color-mode'
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  return (
+    <DrawerOpenProvider>
+      <DrawerSwipableProvider>
+        <MinimalModeProvider>
+          <ColorModeProvider>{children}</ColorModeProvider>
+        </MinimalModeProvider>
+      </DrawerSwipableProvider>
+    </DrawerOpenProvider>
+  )
+}
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useMinimalShellMode() {
+  return React.useContext(stateContext)
+}
+
+export function useSetMinimalShellMode() {
+  return React.useContext(setContext)
+}
@@ -9,6 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {SplashScreen} from './SplashScreen'
+import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'

 enum ScreenState {
  S_LoginOrCreateAccount,
@@ -19,6 +20,7 @@ enum ScreenState {
 export const LoggedOut = observer(function LoggedOutImpl() {
  const pal = usePalette('default')
  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
  const {screen} = useAnalytics()
  const [screenState, setScreenState] = React.useState<ScreenState>(
    ScreenState.S_LoginOrCreateAccount,
@@ -26,8 +28,8 @@ export const LoggedOut = observer(function LoggedOutImpl() {

  React.useEffect(() => {
    screen('Login')
-    store.shell.setMinimalShellMode(true)
-  }, [store, screen])
+    setMinimalShellMode(true)
+  }, [screen, setMinimalShellMode])

  if (
    store.session.isResumingSession ||
@@ -8,14 +8,16 @@ import {useStores} from 'state/index'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 import {RecommendedFollows} from './onboarding/RecommendedFollows'
+import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'

 export const Onboarding = observer(function OnboardingImpl() {
  const pal = usePalette('default')
  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()

  React.useEffect(() => {
-    store.shell.setMinimalShellMode(true)
-  }, [store])
+    setMinimalShellMode(true)
+  }, [setMinimalShellMode])

  const next = () => store.onboarding.next()
  const skip = () => store.onboarding.skip()
@@ -54,14 +54,14 @@ export const ExternalEmbed = ({
            {link.meta.description}
          </Text>
        )}
-        {!!link.meta?.error && (
+        {link.meta?.error ? (
          <Text
            type="sm"
            numberOfLines={2}
            style={[{color: palError.colors.background}, styles.description]}>
            {link.meta.error}
          </Text>
-        )}
+        ) : null}
      </View>
      <TouchableOpacity
        style={styles.removeBtn}
@@ -41,7 +41,7 @@ export const FeedPage = observer(function FeedPageImpl({
  const pal = usePalette('default')
  const {_} = useLingui()
  const {isDesktop} = useWebMediaQueries()
-  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
+  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
  const {screen, track} = useAnalytics()
  const headerOffset = useHeaderOffset()
  const scrollElRef = React.useRef<FlatList>(null)
@@ -17,7 +17,7 @@ import {Text} from '../util/text/Text'
 import {ListsListModel} from 'state/models/lists/lists-list'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
-import {FlatList} from '../util/Views.web'
+import {FlatList} from '../util/Views'
 import {s} from 'lib/styles'
 import {logger} from '#/logger'
 import {Trans} from '@lingui/macro'
@@ -489,13 +489,13 @@ function CustomHandleForm({
          </Text>
        </View>
      )}
-      {error && (
+      {error ? (
        <View style={[styles.message, palError.view]}>
          <Text type="md-medium" style={palError.text}>
            {error}
          </Text>
        </View>
-      )}
+      ) : null}
      <Button
        type="primary"
        style={[s.p20, isVerifying && styles.dimmed]}
@@ -13,10 +13,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {s} from 'lib/styles'
 import {HITSLOP_10} from 'lib/constants'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {useSetDrawerOpen} from '#/state/shell/drawer-open'

 export const FeedsTabBar = observer(function FeedsTabBarImpl(
  props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@@ -24,13 +25,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
  const pal = usePalette('default')
  const store = useStores()
  const {_} = useLingui()
+  const setDrawerOpen = useSetDrawerOpen()
  const items = useHomeTabs(store.preferences.pinnedFeeds)
  const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
-  const {headerMinimalShellTransform} = useMinimalShellMode()
+  const {minimalShellMode, headerMinimalShellTransform} = useMinimalShellMode()

  const onPressAvi = React.useCallback(() => {
-    store.shell.openDrawer()
-  }, [store])
+    setDrawerOpen(true)
+  }, [setDrawerOpen])

  return (
    <Animated.View
@@ -39,7 +41,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
        pal.border,
        styles.tabBar,
        headerMinimalShellTransform,
-        store.shell.minimalShellMode && styles.disabled,
+        minimalShellMode && styles.disabled,
      ]}>
      <View style={[pal.view, styles.topBar]}>
        <View style={[pal.view]}>
@@ -1,9 +1,13 @@
 import * as React from 'react'
-import {LayoutChangeEvent, StyleSheet} from 'react-native'
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  StyleSheet,
+  View,
+} from 'react-native'
 import Animated, {
  Easing,
  useAnimatedReaction,
-  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
@@ -12,13 +16,12 @@ import Animated, {
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {TabBar} from './TabBar'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'

 const SCROLLED_DOWN_LIMIT = 200

 interface PagerWithHeaderChildParams {
  headerHeight: number
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
  isScrolledDown: boolean
 }

@@ -28,6 +31,7 @@ export interface PagerWithHeaderProps {
    | (((props: PagerWithHeaderChildParams) => JSX.Element) | null)[]
    | ((props: PagerWithHeaderChildParams) => JSX.Element)
  items: string[]
+  isHeaderReady: boolean
  renderHeader?: () => JSX.Element
  initialPage?: number
  onPageSelected?: (index: number) => void
@@ -39,6 +43,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
      children,
      testID,
      items,
+      isHeaderReady,
      renderHeader,
      initialPage,
      onPageSelected,
@@ -51,15 +56,17 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
    const scrollYs = React.useRef<Record<number, number>>({})
    const scrollY = useSharedValue(scrollYs.current[currentPage] || 0)
    const [tabBarHeight, setTabBarHeight] = React.useState(0)
-    const [headerHeight, setHeaderHeight] = React.useState(0)
+    const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0)
    const [isScrolledDown, setIsScrolledDown] = React.useState(
      scrollYs.current[currentPage] > SCROLLED_DOWN_LIMIT,
    )

+    const headerHeight = headerOnlyHeight + tabBarHeight
+
    // react to scroll updates
    function onScrollUpdate(v: number) {
      // track each page's current scroll position
-      scrollYs.current[currentPage] = Math.min(v, headerHeight - tabBarHeight)
+      scrollYs.current[currentPage] = Math.min(v, headerOnlyHeight)
      // update the 'is scrolled down' value
      setIsScrolledDown(v > SCROLLED_DOWN_LIMIT)
    }
@@ -75,11 +82,11 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
      },
      [setTabBarHeight],
    )
-    const onHeaderLayout = React.useCallback(
+    const onHeaderOnlyLayout = React.useCallback(
      (evt: LayoutChangeEvent) => {
-        setHeaderHeight(evt.nativeEvent.layout.height)
+        setHeaderOnlyHeight(evt.nativeEvent.layout.height)
      },
-      [setHeaderHeight],
+      [setHeaderOnlyHeight],
    )

    // render the the header and tab bar
@@ -88,7 +95,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
        transform: [
          {
            translateY: Math.min(
-              Math.min(scrollY.value, headerHeight - tabBarHeight) * -1,
+              Math.min(scrollY.value, headerOnlyHeight) * -1,
              0,
            ),
          },
@@ -100,40 +107,54 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
      (props: RenderTabBarFnProps) => {
        return (
          <Animated.View
-            onLayout={onHeaderLayout}
            style={[
              isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
              headerTransform,
            ]}>
-            {renderHeader?.()}
-            <TabBar
-              items={items}
-              selectedPage={currentPage}
-              onSelect={props.onSelect}
-              onPressSelected={onCurrentPageSelected}
+            <View onLayout={onHeaderOnlyLayout}>{renderHeader?.()}</View>
+            <View
              onLayout={onTabBarLayout}
-            />
+              style={{
+                // Render it immediately to measure it early since its size doesn't depend on the content.
+                // However, keep it invisible until the header above stabilizes in order to prevent jumps.
+                opacity: isHeaderReady ? 1 : 0,
+                pointerEvents: isHeaderReady ? 'auto' : 'none',
+              }}>
+              <TabBar
+                items={items}
+                selectedPage={currentPage}
+                onSelect={props.onSelect}
+                onPressSelected={onCurrentPageSelected}
+              />
+            </View>
          </Animated.View>
        )
      },
      [
        items,
+        isHeaderReady,
        renderHeader,
        headerTransform,
        currentPage,
        onCurrentPageSelected,
        isMobile,
        onTabBarLayout,
-        onHeaderLayout,
+        onHeaderOnlyLayout,
      ],
    )

-    // props to pass into children render functions
-    const onScroll = useAnimatedScrollHandler({
-      onScroll(e) {
+    // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that
+    // due to https://github.com/software-mansion/react-native-reanimated/issues/5345.
+    // So instead we pass down a worklet, and individual pages will have to call it.
+    const onScroll = React.useCallback(
+      (e: NativeScrollEvent) => {
+        'worklet'
        scrollY.value = e.contentOffset.y
      },
-    })
+      [scrollY],
+    )
+
+    // props to pass into children render functions
    const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
      return {
        headerHeight,
@@ -175,11 +196,23 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
        tabBarPosition="top">
        {toArray(children)
          .filter(Boolean)
-          .map(child => {
-            if (child) {
-              return child(childProps)
+          .map((child, i) => {
+            let output = null
+            if (
+              child != null &&
+              // Defer showing content until we know it won't jump.
+              isHeaderReady &&
+              headerOnlyHeight > 0 &&
+              tabBarHeight > 0
+            ) {
+              output = child(childProps)
            }
-            return null
+            // Pager children must be noncollapsible plain <View>s.
+            return (
+              <View key={i} collapsable={false}>
+                {output}
+              </View>
+            )
          })}
      </Pager>
    )
@@ -14,7 +14,6 @@ export interface TabBarProps {
  indicatorColor?: string
  onSelect?: (index: number) => void
  onPressSelected?: (index: number) => void
-  onLayout?: (evt: LayoutChangeEvent) => void
 }

 export function TabBar({
@@ -24,7 +23,6 @@ export function TabBar({
  indicatorColor,
  onSelect,
  onPressSelected,
-  onLayout,
 }: TabBarProps) {
  const pal = usePalette('default')
  const scrollElRef = useRef<ScrollView>(null)
@@ -68,7 +66,7 @@ export function TabBar({
  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles

  return (
-    <View testID={testID} style={[pal.view, styles.outer]} onLayout={onLayout}>
+    <View testID={testID} style={[pal.view, styles.outer]}>
      <DraggableScrollView
        horizontal={true}
        showsHorizontalScrollIndicator={false}
@@ -19,6 +19,7 @@ import {isNative} from 'platform/detection'
 import {ImagesLightbox} from 'state/models/ui/shell'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useSetDrawerOpen} from '#/state/shell'

 export const ProfileSubpageHeader = observer(function HeaderImpl({
  isLoading,
@@ -44,6 +45,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
  avatarType: UserAvatarType
 }>) {
  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
  const {_} = useLingui()
  const {isMobile} = useWebMediaQueries()
@@ -59,8 +61,8 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
  }, [navigation])

  const onPressMenu = React.useCallback(() => {
-    store.shell.openDrawer()
-  }, [store])
+    setDrawerOpen(true)
+  }, [setDrawerOpen])

  const onPressAvi = React.useCallback(() => {
    if (
@@ -8,12 +8,12 @@ import {Text} from 'view/com/util/text/Text'
 import {MagnifyingGlassIcon} from 'lib/icons'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {HITSLOP_10} from 'lib/constants'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSetDrawerOpen} from '#/state/shell'

 interface Props {
  isInputFocused: boolean
@@ -35,7 +35,7 @@ export function HeaderWithInput({
  onSubmitQuery,
  showMenu = true,
 }: Props) {
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const theme = useTheme()
  const pal = usePalette('default')
  const {_} = useLingui()
@@ -45,8 +45,8 @@ export function HeaderWithInput({

  const onPressMenu = React.useCallback(() => {
    track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
-  }, [track, store])
+    setDrawerOpen(true)
+  }, [track, setDrawerOpen])

  const onPressCancelSearchInner = React.useCallback(() => {
    onPressCancelSearch()
@@ -10,11 +10,11 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {CenteredView} from './Views'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
+import {useSetDrawerOpen} from '#/state/shell'

 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}

@@ -27,7 +27,7 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
  style?: StyleProp<ViewStyle>
 }>) {
  const pal = usePalette('default')
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
  const {track} = useAnalytics()
  const {isMobile} = useWebMediaQueries()
@@ -43,8 +43,8 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({

  const onPressMenu = React.useCallback(() => {
    track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
-  }, [track, store])
+    setDrawerOpen(true)
+  }, [track, setDrawerOpen])

  const Container = isMobile ? View : CenteredView
  return (
@@ -5,13 +5,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {CenteredView} from './Views'
 import {Text} from './text/Text'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
+import {useSetDrawerOpen} from '#/state/shell'

 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}

@@ -33,7 +33,7 @@ export const ViewHeader = observer(function ViewHeaderImpl({
  renderButton?: () => JSX.Element
 }) {
  const pal = usePalette('default')
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
  const {track} = useAnalytics()
  const {isDesktop, isTablet} = useWebMediaQueries()
@@ -48,8 +48,8 @@ export const ViewHeader = observer(function ViewHeaderImpl({

  const onPressMenu = React.useCallback(() => {
    track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
-  }, [track, store])
+    setDrawerOpen(true)
+  }, [track, setDrawerOpen])

  if (isDesktop) {
    if (showOnDesktop) {
@@ -18,20 +18,22 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+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 () => {
@@ -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 (
@@ -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 (
@@ -29,6 +29,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSetMinimalShellMode} from '#/state/shell'

 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 export const FeedsScreen = withAuthRequired(
@@ -36,6 +37,7 @@ export const FeedsScreen = withAuthRequired(
    const pal = usePalette('default')
    const store = useStores()
    const {_} = useLingui()
+    const setMinimalShellMode = useSetMinimalShellMode()
    const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
    const myFeeds = store.me.myFeeds
    const [query, setQuery] = React.useState<string>('')
@@ -46,14 +48,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
@@ -295,13 +297,13 @@ function SavedFeed({feed}: {feed: FeedSourceModel}) {
        <Text type="lg-medium" style={pal.text} numberOfLines={1}>
          {feed.displayName}
        </Text>
-        {feed.error && (
+        {feed.error ? (
          <View style={[styles.offlineSlug, pal.borderDark]}>
            <Text type="xs" style={pal.textLight}>
              <Trans>Feed offline</Trans>
            </Text>
          </View>
-        )}
+        ) : null}
      </View>
      {isMobile && (
        <FontAwesomeIcon
@@ -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(() => {
@@ -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(() => {
@@ -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(() => {
@@ -85,7 +87,7 @@ export const ListsScreen = withAuthRequired(
            </Button>
          </View>
        </SimpleViewHeader>
-        <ListsList listsList={listsLists} />
+        <ListsList listsList={listsLists} style={s.flexGrow1} />
      </View>
    )
  }),
@@ -5,7 +5,6 @@ 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'
@@ -14,20 +13,21 @@ import {getEntries} from '#/logger/logDump'
 import {ago} from 'lib/strings/time'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useSetMinimalShellMode} from '#/state/shell'

 export const LogScreen = observer(function Log({}: NativeStackScreenProps<
  CommonNavigatorParams,
  'Log'
 >) {
  const pal = usePalette('default')
-  const store = useStores()
  const {_} = useLingui()
+  const setMinimalShellMode = useSetMinimalShellMode()
  const [expanded, setExpanded] = React.useState<string[]>([])

  useFocusEffect(
    React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
-    }, [store]),
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
  )

  const toggler = (id: string) => () => {
@@ -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(() => {
@@ -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(() => {
@@ -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(() => {
@@ -85,7 +87,7 @@ export const ModerationModlistsScreen = withAuthRequired(
            </Button>
          </View>
        </SimpleViewHeader>
-        <ListsList listsList={mutelists} />
+        <ListsList listsList={mutelists} style={s.flexGrow1} />
      </View>
    )
  }),
@@ -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(() => {
@@ -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()
@@ -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(
@@ -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 (
@@ -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 (
@@ -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,
@@ -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 (
@@ -32,11 +32,13 @@ import {combinedDisplayName} from 'lib/strings/display-names'
 import {logger} from '#/logger'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+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 {_} = useLingui()
    const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
@@ -72,7 +74,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(() => {
@@ -87,7 +89,7 @@ export const ProfileScreen = withAuthRequired(
          feedCleanup()
          softResetSub.remove()
        }
-      }, [store, onSoftReset, uiState, hasSetup]),
+      }, [store, onSoftReset, uiState, hasSetup, setMinimalShellMode]),
    )

    // events
@@ -1,7 +1,14 @@
 import React, {useMemo, useCallback} from 'react'
-import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native'
+import {
+  FlatList,
+  NativeScrollEvent,
+  StyleSheet,
+  View,
+  ActivityIndicator,
+} from 'react-native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useNavigation} from '@react-navigation/native'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {HeartIcon, HeartIconSolid} from 'lib/icons'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -26,7 +33,6 @@ import {EmptyState} from 'view/com/util/EmptyState'
 import * as Toast from 'view/com/util/Toast'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {Haptics} from 'lib/haptics'
@@ -337,11 +343,11 @@ export const ProfileFeedScreenInner = observer(
      <View style={s.hContentRegion}>
        <PagerWithHeader
          items={SECTION_TITLES}
+          isHeaderReady={feedInfo?.hasLoaded ?? false}
          renderHeader={renderHeader}
          onCurrentPageSelected={onCurrentPageSelected}>
          {({onScroll, headerHeight, isScrolledDown}) => (
            <FeedSection
-              key="1"
              ref={feedSectionRef}
              feed={feed}
              onScroll={onScroll}
@@ -350,18 +356,14 @@ export const ProfileFeedScreenInner = observer(
            />
          )}
          {({onScroll, headerHeight}) => (
-            <ScrollView
-              key="2"
+            <AboutSection
+              feedOwnerDid={feedOwnerDid}
+              feedRkey={rkey}
+              feedInfo={feedInfo}
+              headerHeight={headerHeight}
+              onToggleLiked={onToggleLiked}
              onScroll={onScroll}
-              scrollEventThrottle={1}
-              contentContainerStyle={{paddingTop: headerHeight}}>
-              <AboutSection
-                feedOwnerDid={feedOwnerDid}
-                feedRkey={rkey}
-                feedInfo={feedInfo}
-                onToggleLiked={onToggleLiked}
-              />
-            </ScrollView>
+            />
          )}
        </PagerWithHeader>
        <FAB
@@ -385,7 +387,7 @@ export const ProfileFeedScreenInner = observer(

 interface FeedSectionProps {
  feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
  headerHeight: number
  isScrolledDown: boolean
 }
@@ -410,12 +412,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
      return <EmptyState icon="feed" message="This feed is empty!" />
    }, [])

+    const scrollHandler = useAnimatedScrollHandler({onScroll})
    return (
      <View>
        <Feed
          feed={feed}
          scrollElRef={scrollElRef}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
          scrollEventThrottle={5}
          renderEmptyState={renderPostsEmpty}
          headerOffset={headerHeight}
@@ -436,83 +439,94 @@ const AboutSection = observer(function AboutPageImpl({
  feedOwnerDid,
  feedRkey,
  feedInfo,
+  headerHeight,
  onToggleLiked,
+  onScroll,
 }: {
  feedOwnerDid: string
  feedRkey: string
  feedInfo: FeedSourceModel | undefined
+  headerHeight: number
  onToggleLiked: () => void
+  onScroll: (e: NativeScrollEvent) => void
 }) {
  const pal = usePalette('default')
  const {_} = useLingui()
+  const scrollHandler = useAnimatedScrollHandler({onScroll})

  if (!feedInfo) {
    return <View />
  }
+
  return (
-    <View
-      style={[
-        {
-          borderTopWidth: 1,
-          paddingVertical: 20,
-          paddingHorizontal: 20,
-          gap: 12,
-        },
-        pal.border,
-      ]}>
-      {feedInfo.descriptionRT ? (
-        <RichText
-          testID="listDescription"
-          type="lg"
-          style={pal.text}
-          richText={feedInfo.descriptionRT}
-        />
-      ) : (
-        <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
-          <Trans>No description</Trans>
-        </Text>
-      )}
-      <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
-        <Button
-          type="default"
-          testID="toggleLikeBtn"
-          accessibilityLabel={_(msg`Like this feed`)}
-          accessibilityHint=""
-          onPress={onToggleLiked}
-          style={{paddingHorizontal: 10}}>
-          {feedInfo?.isLiked ? (
-            <HeartIconSolid size={19} style={styles.liked} />
-          ) : (
-            <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
-          )}
-        </Button>
-        {typeof feedInfo.likeCount === 'number' && (
-          <TextLink
-            href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
-            text={`Liked by ${feedInfo.likeCount} ${pluralize(
-              feedInfo.likeCount,
-              'user',
-            )}`}
-            style={[pal.textLight, s.semiBold]}
+    <ScrollView
+      scrollEventThrottle={1}
+      contentContainerStyle={{paddingTop: headerHeight}}
+      onScroll={scrollHandler}>
+      <View
+        style={[
+          {
+            borderTopWidth: 1,
+            paddingVertical: 20,
+            paddingHorizontal: 20,
+            gap: 12,
+          },
+          pal.border,
+        ]}>
+        {feedInfo.descriptionRT ? (
+          <RichText
+            testID="listDescription"
+            type="lg"
+            style={pal.text}
+            richText={feedInfo.descriptionRT}
          />
-        )}
-      </View>
-      <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-        Created by{' '}
-        {feedInfo.isOwner ? (
-          'you'
        ) : (
-          <TextLink
-            text={sanitizeHandle(feedInfo.creatorHandle, '@')}
-            href={makeProfileLink({
-              did: feedInfo.creatorDid,
-              handle: feedInfo.creatorHandle,
-            })}
-            style={pal.textLight}
-          />
+          <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
+            No description
+          </Text>
        )}
-      </Text>
-    </View>
+        <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+          <Button
+            type="default"
+            testID="toggleLikeBtn"
+            accessibilityLabel="Like this feed"
+            accessibilityHint=""
+            onPress={onToggleLiked}
+            style={{paddingHorizontal: 10}}>
+            {feedInfo?.isLiked ? (
+              <HeartIconSolid size={19} style={styles.liked} />
+            ) : (
+              <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
+            )}
+          </Button>
+          {typeof feedInfo.likeCount === 'number' && (
+            <TextLink
+              href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
+              text={`Liked by ${feedInfo.likeCount} ${pluralize(
+                feedInfo.likeCount,
+                'user',
+              )}`}
+              style={[pal.textLight, s.semiBold]}
+            />
+          )}
+        </View>
+        <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+          Created by{' '}
+          {feedInfo.isOwner ? (
+            'you'
+          ) : (
+            <TextLink
+              text={sanitizeHandle(feedInfo.creatorHandle, '@')}
+              href={makeProfileLink({
+                did: feedInfo.creatorDid,
+                handle: feedInfo.creatorHandle,
+              })}
+              style={pal.textLight}
+            />
+          )}
+        </Text>
+      </View>
+    </ScrollView>
  )
 })

@@ -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 (
@@ -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 (
@@ -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 (
@@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react'
 import {
  ActivityIndicator,
  FlatList,
+  NativeScrollEvent,
  Pressable,
  StyleSheet,
  View,
@@ -10,6 +11,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {useNavigation} from '@react-navigation/native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
 import {observer} from 'mobx-react-lite'
 import {RichText as RichTextAPI} from '@atproto/api'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -33,7 +35,6 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {NavigationProp} from 'lib/routes/types'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {shareUrl} from 'lib/sharing'
@@ -46,6 +47,7 @@ import {ListItems} from 'view/com/lists/ListItems'
 import {logger} from '#/logger'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSetMinimalShellMode} from '#/state/shell'

 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@@ -107,6 +109,7 @@ export const ProfileListScreenInner = observer(
  }: Props & {listOwnerDid: string}) {
    const store = useStores()
    const {_} = useLingui()
+    const setMinimalShellMode = useSetMinimalShellMode()
    const {rkey} = route.params
    const feedSectionRef = React.useRef<SectionRef>(null)
    const aboutSectionRef = React.useRef<SectionRef>(null)
@@ -126,13 +129,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(() => {
@@ -168,11 +171,11 @@ export const ProfileListScreenInner = observer(
        <View style={s.hContentRegion}>
          <PagerWithHeader
            items={SECTION_TITLES_CURATE}
+            isHeaderReady={list.hasLoaded}
            renderHeader={renderHeader}
            onCurrentPageSelected={onCurrentPageSelected}>
            {({onScroll, headerHeight, isScrolledDown}) => (
              <FeedSection
-                key="1"
                ref={feedSectionRef}
                feed={feed}
                onScroll={onScroll}
@@ -182,7 +185,6 @@ export const ProfileListScreenInner = observer(
            )}
            {({onScroll, headerHeight, isScrolledDown}) => (
              <AboutSection
-                key="2"
                ref={aboutSectionRef}
                list={list}
                descriptionRT={list.descriptionRT}
@@ -218,10 +220,10 @@ export const ProfileListScreenInner = observer(
        <View style={s.hContentRegion}>
          <PagerWithHeader
            items={SECTION_TITLES_MOD}
+            isHeaderReady={list.hasLoaded}
            renderHeader={renderHeader}>
            {({onScroll, headerHeight, isScrolledDown}) => (
              <AboutSection
-                key="2"
                list={list}
                descriptionRT={list.descriptionRT}
                creator={list.data ? list.data.creator : undefined}
@@ -254,7 +256,7 @@ export const ProfileListScreenInner = observer(
    return (
      <CenteredView sideBorders style={s.hContentRegion}>
        <Header rkey={rkey} list={list} />
-        {list.error && <ErrorScreen error={list.error} />}
+        {list.error ? <ErrorScreen error={list.error} /> : null}
      </CenteredView>
    )
  },
@@ -551,7 +553,7 @@ const Header = observer(function HeaderImpl({

 interface FeedSectionProps {
  feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
  headerHeight: number
  isScrolledDown: boolean
 }
@@ -575,13 +577,14 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
      return <EmptyState icon="feed" message="This feed is empty!" />
    }, [])

+    const scrollHandler = useAnimatedScrollHandler({onScroll})
    return (
      <View>
        <Feed
          testID="listFeed"
          feed={feed}
          scrollElRef={scrollElRef}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
          scrollEventThrottle={1}
          renderEmptyState={renderPostsEmpty}
          headerOffset={headerHeight}
@@ -605,7 +608,7 @@ interface AboutSectionProps {
  isCurateList: boolean | undefined
  isOwner: boolean | undefined
  onPressAddUser: () => void
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
  headerHeight: number
  isScrolledDown: boolean
 }
@@ -736,6 +739,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
      )
    }, [])

+    const scrollHandler = useAnimatedScrollHandler({onScroll})
    return (
      <View>
        <ListItems
@@ -745,7 +749,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
          renderEmptyState={renderEmptyState}
          list={list}
          headerOffset={headerHeight}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
          scrollEventThrottle={1}
        />
        {isScrolledDown && (
@@ -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 (
@@ -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(() => {
@@ -46,6 +46,11 @@ 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,
+  useColorMode,
+  useSetColorMode,
+} from '#/state/shell'

 // TEMPORARY (APP-700)
 // remove after backend testing finishes
@@ -58,9 +63,12 @@ import {useLingui} from '@lingui/react'
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
  observer(function Settings({}: Props) {
+    const colorMode = useColorMode()
+    const setColorMode = useSetColorMode()
    const pal = usePalette('default')
    const store = useStores()
    const {_} = useLingui()
+    const setMinimalShellMode = useSetMinimalShellMode()
    const navigation = useNavigation<NavigationProp>()
    const {isMobile} = useWebMediaQueries()
    const {screen, track} = useAnalytics()
@@ -91,8 +99,8 @@ export const SettingsScreen = withAuthRequired(
    useFocusEffect(
      React.useCallback(() => {
        screen('Settings')
-        store.shell.setMinimalShellMode(false)
-      }, [screen, store]),
+        setMinimalShellMode(false)
+      }, [screen, setMinimalShellMode]),
    )

    const onPressAddAccount = React.useCallback(() => {
@@ -380,23 +388,23 @@ export const SettingsScreen = withAuthRequired(
          <View>
            <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
              <SelectableBtn
-                selected={store.shell.colorMode === 'system'}
+                selected={colorMode === 'system'}
                label="System"
                left
-                onSelect={() => store.shell.setColorMode('system')}
+                onSelect={() => setColorMode('system')}
                accessibilityHint="Set color theme to system setting"
              />
              <SelectableBtn
-                selected={store.shell.colorMode === 'light'}
+                selected={colorMode === 'light'}
                label="Light"
-                onSelect={() => store.shell.setColorMode('light')}
+                onSelect={() => setColorMode('light')}
                accessibilityHint="Set color theme to light"
              />
              <SelectableBtn
-                selected={store.shell.colorMode === 'dark'}
+                selected={colorMode === 'dark'}
                label="Dark"
                right
-                onSelect={() => store.shell.setColorMode('dark')}
+                onSelect={() => setColorMode('dark')}
                accessibilityHint="Set color theme to dark"
              />
            </View>
@@ -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 (
@@ -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 (
@@ -45,12 +45,14 @@ import {isWeb} from 'platform/detection'
 import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSetDrawerOpen} from '#/state/shell'

 export const DrawerContent = observer(function DrawerContentImpl() {
  const theme = useTheme()
  const pal = usePalette('default')
  const store = useStores()
  const {_} = useLingui()
+  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
  const {track} = useAnalytics()
  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
@@ -65,7 +67,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
    (tab: string) => {
      track('Menu:ItemClicked', {url: tab})
      const state = navigation.getState()
-      store.shell.closeDrawer()
+      setDrawerOpen(false)
      if (isWeb) {
        // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
        if (tab === 'MyProfile') {
@@ -86,7 +88,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
        }
      }
    },
-    [store, track, navigation],
+    [store, track, navigation, setDrawerOpen],
  )

  const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
@@ -113,20 +115,20 @@ export const DrawerContent = observer(function DrawerContentImpl() {
  const onPressLists = React.useCallback(() => {
    track('Menu:ItemClicked', {url: 'Lists'})
    navigation.navigate('Lists')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])

  const onPressModeration = React.useCallback(() => {
    track('Menu:ItemClicked', {url: 'Moderation'})
    navigation.navigate('Moderation')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])

  const onPressSettings = React.useCallback(() => {
    track('Menu:ItemClicked', {url: 'Settings'})
    navigation.navigate('Settings')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])

  const onPressFeedback = React.useCallback(() => {
    track('Menu:FeedbackClicked')
@@ -440,13 +442,14 @@ const InviteCodes = observer(function InviteCodesImpl({
 }) {
  const {track} = useAnalytics()
  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
  const pal = usePalette('default')
  const {invitesAvailable} = store.me
  const onPress = React.useCallback(() => {
    track('Menu:ItemClicked', {url: '#invite-codes'})
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
    store.shell.openModal({name: 'invite-codes'})
-  }, [store, track])
+  }, [store, track, setDrawerOpen])
  return (
    <TouchableOpacity
      testID="menuItemInviteCodes"
@@ -40,7 +40,7 @@ export const BottomBar = observer(function BottomBarImpl({
  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
    useNavigationTabState()

-  const {footerMinimalShellTransform} = useMinimalShellMode()
+  const {minimalShellMode, footerMinimalShellTransform} = useMinimalShellMode()
  const {notifications} = store.me

  const onPressTab = React.useCallback(
@@ -86,7 +86,7 @@ export const BottomBar = observer(function BottomBarImpl({
        pal.border,
        {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
        footerMinimalShellTransform,
-        store.shell.minimalShellMode && styles.disabled,
+        minimalShellMode && styles.disabled,
      ]}>
      <Btn
        testID="bottomBarHomeBtn"
@@ -6,6 +6,7 @@ import {
  StyleSheet,
  useWindowDimensions,
  View,
+  BackHandler,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Drawer} from 'react-native-drawer-layout'
@@ -18,7 +19,6 @@ import {DrawerContent} from './Drawer'
 import {Composer} from './Composer'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
-import * as backHandler from 'lib/routes/back-handler'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
 import {
@@ -26,9 +26,18 @@ import {
  initialWindowMetrics,
 } from 'react-native-safe-area-context'
 import {useOTAUpdate} from 'lib/hooks/useOTAUpdate'
+import {
+  useIsDrawerOpen,
+  useSetDrawerOpen,
+  useIsDrawerSwipeDisabled,
+} from '#/state/shell'
+import {isAndroid} from 'platform/detection'

 const ShellInner = observer(function ShellInnerImpl() {
  const store = useStores()
+  const isDrawerOpen = useIsDrawerOpen()
+  const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
+  const setIsDrawerOpen = useSetDrawerOpen()
  useOTAUpdate() // this hook polls for OTA updates every few seconds
  const winDim = useWindowDimensions()
  const safeAreaInsets = useSafeAreaInsets()
@@ -38,20 +47,26 @@ const ShellInner = observer(function ShellInnerImpl() {
  )
  const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
  const onOpenDrawer = React.useCallback(
-    () => store.shell.openDrawer(),
-    [store],
+    () => setIsDrawerOpen(true),
+    [setIsDrawerOpen],
  )
  const onCloseDrawer = React.useCallback(
-    () => store.shell.closeDrawer(),
-    [store],
+    () => setIsDrawerOpen(false),
+    [setIsDrawerOpen],
  )
  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
  React.useEffect(() => {
-    const listener = backHandler.init(store)
-    return () => {
-      listener()
+    let listener = {remove() {}}
+    if (isAndroid) {
+      listener = BackHandler.addEventListener('hardwareBackPress', () => {
+        setIsDrawerOpen(false)
+        return store.shell.closeAnyActiveElement()
+      })
    }
-  }, [store])
+    return () => {
+      listener.remove()
+    }
+  }, [store, setIsDrawerOpen])

  return (
    <>
@@ -59,14 +74,12 @@ const ShellInner = observer(function ShellInnerImpl() {
        <ErrorBoundary>
          <Drawer
            renderDrawerContent={renderDrawerContent}
-            open={store.shell.isDrawerOpen}
+            open={isDrawerOpen}
            onOpen={onOpenDrawer}
            onClose={onCloseDrawer}
            swipeEdgeWidth={winDim.width / 2}
            swipeEnabled={
-              !canGoBack &&
-              store.session.hasSession &&
-              !store.shell.isDrawerSwipeDisabled
+              !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
            }>
            <TabsNavigator />
          </Drawer>
@@ -18,18 +18,22 @@ import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useAuxClick} from 'lib/hooks/useAuxClick'
 import {t} from '@lingui/macro'
+import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'

 const ShellInner = observer(function ShellInnerImpl() {
  const store = useStores()
+  const isDrawerOpen = useIsDrawerOpen()
+  const setDrawerOpen = useSetDrawerOpen()
  const {isDesktop, isMobile} = useWebMediaQueries()
  const navigator = useNavigation<NavigationProp>()
  useAuxClick()

  useEffect(() => {
    navigator.addListener('state', () => {
+      setDrawerOpen(false)
      store.shell.closeAnyActiveElement()
    })
-  }, [navigator, store.shell])
+  }, [navigator, store.shell, setDrawerOpen])

  const showBottomBar = isMobile && !store.onboarding.isActive
  const showSideNavs =
@@ -58,9 +62,9 @@ const ShellInner = observer(function ShellInnerImpl() {
      {showBottomBar && <BottomBarWeb />}
      <ModalsContainer />
      <Lightbox />
-      {!isDesktop && store.shell.isDrawerOpen && (
+      {!isDesktop && isDrawerOpen && (
        <TouchableOpacity
-          onPress={() => store.shell.closeDrawer()}
+          onPress={() => setDrawerOpen(false)}
          style={styles.drawerMask}
          accessibilityLabel={t`Close navigation footer`}
          accessibilityHint="Closes bottom navigation bar">