Remove the drawer from the shell

package.json

@@ -72,7 +72,6 @@
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.6.1",
     "@react-navigation/bottom-tabs": "^6.5.7",
-    "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@segment/analytics-next": "^1.51.3",

src/screens/Hashtag.tsx

@@ -16,7 +16,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {enforceLen} from 'lib/strings/helpers'
 import {isNative, isWeb} from 'platform/detection'
 import {useSearchPostsQuery} from 'state/queries/search-posts'
-import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from 'state/shell'
+import {useSetMinimalShellMode} from 'state/shell'
 import {Pager} from '#/view/com/pager/Pager'
 import {TabBar} from '#/view/com/pager/TabBar'
 import {CenteredView} from '#/view/com/util/Views'
@@ -65,7 +65,6 @@ export default function HashtagScreen({
 
   const [activeTab, setActiveTab] = React.useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
-  const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -76,10 +75,9 @@ export default function HashtagScreen({
   const onPageSelected = React.useCallback(
     (index: number) => {
       setMinimalShellMode(false)
-      setDrawerSwipeDisabled(index > 0)
       setActiveTab(index)
     },
-    [setDrawerSwipeDisabled, setMinimalShellMode],
+    [setMinimalShellMode],
   )
 
   const sections = React.useMemo(() => {

src/state/shell/drawer-open.tsx

@@ -1,25 +0,0 @@
-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)
-}

src/state/shell/drawer-swipe-disabled.tsx

@@ -1,24 +0,0 @@
-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)
-}

src/state/shell/index.tsx

@@ -1,29 +1,21 @@
 import React from 'react'
-import {Provider as ShellLayoutProvder} from './shell-layout'
+
-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'
-import {Provider as OnboardingProvider} from './onboarding'
 import {Provider as ComposerProvider} from './composer'
+import {Provider as MinimalModeProvider} from './minimal-mode'
+import {Provider as OnboardingProvider} from './onboarding'
+import {Provider as ShellLayoutProvder} from './shell-layout'
 import {Provider as TickEveryMinuteProvider} from './tick-every-minute'
 
-export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
+export {useSetThemePrefs, useThemePrefs} from './color-mode'
-export {
+export {useComposerControls, useComposerState} from './composer'
-  useIsDrawerSwipeDisabled,
-  useSetDrawerSwipeDisabled,
-} from './drawer-swipe-disabled'
 export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
-export {useThemePrefs, useSetThemePrefs} from './color-mode'
+export {useOnboardingDispatch, useOnboardingState} from './onboarding'
-export {useOnboardingState, useOnboardingDispatch} from './onboarding'
-export {useComposerState, useComposerControls} from './composer'
 export {useTickEveryMinute} from './tick-every-minute'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
     <ShellLayoutProvder>
-      <DrawerOpenProvider>
-        <DrawerSwipableProvider>
       <MinimalModeProvider>
         <ColorModeProvider>
           <OnboardingProvider>
@@ -33,8 +25,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
           </OnboardingProvider>
         </ColorModeProvider>
       </MinimalModeProvider>
-        </DrawerSwipableProvider>
-      </DrawerOpenProvider>
     </ShellLayoutProvder>
   )
 }

src/state/util.ts

@@ -1,9 +1,9 @@
 import {useCallback} from 'react'
+
+import {useDialogStateControlContext} from '#/state/dialogs'
 import {useLightboxControls} from './lightbox'
 import {useModalControls} from './modals'
 import {useComposerControls} from './shell/composer'
-import {useSetDrawerOpen} from './shell/drawer-open'
-import {useDialogStateControlContext} from '#/state/dialogs'
 
 /**
  * returns true if something was closed
@@ -14,7 +14,6 @@ export function useCloseAnyActiveElement() {
   const {closeModal} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs} = useDialogStateControlContext()
-  const setDrawerOpen = useSetDrawerOpen()
   return useCallback(() => {
     if (closeLightbox()) {
       return true
@@ -28,9 +27,8 @@ export function useCloseAnyActiveElement() {
     if (closeAllDialogs()) {
       return true
     }
-    setDrawerOpen(false)
     return false
-  }, [closeLightbox, closeModal, closeComposer, setDrawerOpen, closeAllDialogs])
+  }, [closeLightbox, closeModal, closeComposer, closeAllDialogs])
 }
 
 /**
@@ -41,18 +39,10 @@ export function useCloseAllActiveElements() {
   const {closeAllModals} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs: closeAlfDialogs} = useDialogStateControlContext()
-  const setDrawerOpen = useSetDrawerOpen()
   return useCallback(() => {
     closeLightbox()
     closeAllModals()
     closeComposer()
     closeAlfDialogs()
-    setDrawerOpen(false)
+  }, [closeLightbox, closeAllModals, closeComposer, closeAlfDialogs])
-  }, [
-    closeLightbox,
-    closeAllModals,
-    closeComposer,
-    closeAlfDialogs,
-    setDrawerOpen,
-  ])
 }

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -7,7 +7,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useSession} from '#/state/session'
-import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {HITSLOP_10} from 'lib/constants'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
@@ -28,15 +27,10 @@ export function HomeHeaderLayoutMobile({
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
   const {hasSession} = useSession()
 
-  const onPressAvi = React.useCallback(() => {
-    setDrawerOpen(true)
-  }, [setDrawerOpen])
-
   return (
     <Animated.View
       style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
@@ -47,7 +41,7 @@ export function HomeHeaderLayoutMobile({
         <View style={[pal.view, {width: 100}]}>
           <TouchableOpacity
             testID="viewHeaderDrawerBtn"
-            onPress={onPressAvi}
+            onPress={undefined /*TODO*/}
             accessibilityRole="button"
             accessibilityLabel={_(msg`Open navigation`)}
             accessibilityHint={_(

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -1,24 +1,24 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
+
+import {emitSoftReset} from '#/state/events'
+import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
+import {BACK_HITSLOP} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Text} from '../util/text/Text'
-import {TextLink} from '../util/Link'
-import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
-import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {CenteredView} from '../util/Views'
-import {sanitizeHandle} from 'lib/strings/handles'
 import {makeProfileLink} from 'lib/routes/links'
 import {NavigationProp} from 'lib/routes/types'
-import {BACK_HITSLOP} from 'lib/constants'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {isNative} from 'platform/detection'
-import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
+import {TextLink} from '../util/Link'
-import {useLingui} from '@lingui/react'
+import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {Trans, msg} from '@lingui/macro'
+import {Text} from '../util/text/Text'
-import {useSetDrawerOpen} from '#/state/shell'
+import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
-import {emitSoftReset} from '#/state/events'
+import {CenteredView} from '../util/Views'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -43,7 +43,6 @@ export function ProfileSubpageHeader({
     | undefined
   avatarType: UserAvatarType
 }>) {
-  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const {isMobile} = useWebMediaQueries()
@@ -59,10 +58,6 @@ export function ProfileSubpageHeader({
     }
   }, [navigation])
 
-  const onPressMenu = React.useCallback(() => {
-    setDrawerOpen(true)
-  }, [setDrawerOpen])
-
   const onPressAvi = React.useCallback(() => {
     if (
       avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
@@ -88,7 +83,7 @@ export function ProfileSubpageHeader({
           ]}>
           <Pressable
             testID="headerDrawerBtn"
-            onPress={canGoBack ? onPressBack : onPressMenu}
+            onPress={canGoBack ? onPressBack : undefined /*TODO*/}
             hitSlop={BACK_HITSLOP}
             style={canGoBack ? styles.backBtn : styles.backBtnWide}
             accessibilityRole="button"

src/view/com/util/SimpleViewHeader.tsx

@@ -8,13 +8,13 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
-import {CenteredView} from './Views'
+
+import {isWeb} from '#/platform/detection'
+import {useAnalytics} from 'lib/analytics/analytics'
 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'
+import {CenteredView} from './Views'
-import {isWeb} from '#/platform/detection'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -27,7 +27,6 @@ export function SimpleViewHeader({
   style?: StyleProp<ViewStyle>
 }>) {
   const pal = usePalette('default')
-  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isMobile} = useWebMediaQueries()
@@ -43,8 +42,8 @@ export function SimpleViewHeader({
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    setDrawerOpen(true)
+    // TODO
-  }, [track, setDrawerOpen])
+  }, [track])
 
   const Container = isMobile ? View : CenteredView
   return (

src/view/com/util/ViewHeader.tsx

@@ -6,7 +6,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {useSetDrawerOpen} from '#/state/shell'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -39,7 +38,6 @@ export function ViewHeader({
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -55,8 +53,8 @@ export function ViewHeader({
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    setDrawerOpen(true)
+    // TODO
-  }, [track, setDrawerOpen])
+  }, [track])
 
   if (isDesktop) {
     if (showOnDesktop) {

src/view/screens/Home.tsx

@@ -13,11 +13,7 @@ import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
 import {useSession} from '#/state/session'
-import {
+import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
-  useMinimalShellMode,
-  useSetDrawerSwipeDisabled,
-  useSetMinimalShellMode,
-} from '#/state/shell'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
 import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
 import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
@@ -94,15 +90,10 @@ function HomeScreenReady({
 
   const {hasSession} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
-  const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
   useFocusEffect(
     React.useCallback(() => {
       setMinimalShellMode(false)
-      setDrawerSwipeDisabled(selectedIndex > 0)
+    }, [setMinimalShellMode]),
-      return () => {
-        setDrawerSwipeDisabled(false)
-      }
-    }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]),
   )
 
   useFocusEffect(
@@ -139,12 +130,11 @@ function HomeScreenReady({
   const onPageSelected = React.useCallback(
     (index: number) => {
       setMinimalShellMode(false)
-      setDrawerSwipeDisabled(index > 0)
       const feed = allFeeds[index]
       setSelectedFeed(feed)
       lastPagerReportedIndexRef.current = index
     },
-    [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
+    [setSelectedFeed, setMinimalShellMode, allFeeds],
   )
 
   const onPageSelecting = React.useCallback(

src/view/screens/Profile.tsx

@@ -19,7 +19,7 @@ import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {getAgent, useSession} from '#/state/session'
-import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
@@ -154,7 +154,6 @@ function ProfileScreenLoaded({
   })
   const [currentPage, setCurrentPage] = React.useState(0)
   const {_} = useLingui()
-  const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
 
   const [scrollViewTag, setScrollViewTag] = React.useState<number | null>(null)
 
@@ -280,15 +279,6 @@ function ProfileScreenLoaded({
     }, [setMinimalShellMode, screen, currentPage, scrollSectionToTop]),
   )
 
-  useFocusEffect(
-    React.useCallback(() => {
-      setDrawerSwipeDisabled(currentPage > 0)
-      return () => {
-        setDrawerSwipeDisabled(false)
-      }
-    }, [setDrawerSwipeDisabled, currentPage]),
-  )
-
   // events
   // =
 

src/view/screens/Search/Search.tsx

@@ -37,8 +37,7 @@ import {
   useSuggestedFollowsQuery,
 } from '#/state/queries/suggested-follows'
 import {useSession} from '#/state/session'
-import {useSetDrawerOpen} from '#/state/shell'
+import {useSetMinimalShellMode} from '#/state/shell'
-import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {
   NativeStackScreenProps,
@@ -396,7 +395,6 @@ function SearchScreenUserResults({
 export function SearchScreenInner({query}: {query?: string}) {
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
-  const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
   const {hasSession} = useSession()
   const {isDesktop} = useWebMediaQueries()
   const [activeTab, setActiveTab] = React.useState(0)
@@ -405,10 +403,9 @@ export function SearchScreenInner({query}: {query?: string}) {
   const onPageSelected = React.useCallback(
     (index: number) => {
       setMinimalShellMode(false)
-      setDrawerSwipeDisabled(index > 0)
       setActiveTab(index)
     },
-    [setDrawerSwipeDisabled, setMinimalShellMode],
+    [setMinimalShellMode],
   )
 
   const sections = React.useMemo(() => {
@@ -535,7 +532,6 @@ export function SearchScreen(
   const {_} = useLingui()
   const pal = usePalette('default')
   const {track} = useAnalytics()
-  const setDrawerOpen = useSetDrawerOpen()
   const moderationOpts = useModerationOpts()
   const search = useActorAutocompleteFn()
   const setMinimalShellMode = useSetMinimalShellMode()
@@ -592,8 +588,7 @@ export function SearchScreen(
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    setDrawerOpen(true)
+  }, [track])
-  }, [track, setDrawerOpen])
 
   const onPressCancelSearch = React.useCallback(() => {
     scrollToTopWeb()

src/view/shell/Drawer.tsx

@@ -1,731 +0,0 @@
-import React, {ComponentProps} from 'react'
-import {
-  Linking,
-  SafeAreaView,
-  ScrollView,
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {StackActions, useNavigation} from '@react-navigation/native'
-
-import {emitSoftReset} from '#/state/events'
-import {useUnreadNotifications} from '#/state/queries/notifications/unread'
-import {useProfileQuery} from '#/state/queries/profile'
-import {SessionAccount, useSession} from '#/state/session'
-import {useSetDrawerOpen} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
-import {usePalette} from 'lib/hooks/usePalette'
-import {
-  BellIcon,
-  BellIconSolid,
-  CogIcon,
-  HandIcon,
-  HashtagIcon,
-  HomeIcon,
-  HomeIconSolid,
-  ListIcon,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-  UserIcon,
-  UserIconSolid,
-} from 'lib/icons'
-import {getTabState, TabState} from 'lib/routes/helpers'
-import {NavigationProp} from 'lib/routes/types'
-import {pluralize} from 'lib/strings/helpers'
-import {colors, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {isWeb} from 'platform/detection'
-import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {formatCountShortOnly} from 'view/com/util/numeric/format'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
-import {useTheme as useAlfTheme} from '#/alf'
-import {TextLink} from '../com/util/Link'
-
-let DrawerProfileCard = ({
-  account,
-  onPressProfile,
-}: {
-  account: SessionAccount
-  onPressProfile: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  const {data: profile} = useProfileQuery({did: account.did})
-
-  return (
-    <TouchableOpacity
-      testID="profileCardButton"
-      accessibilityLabel={_(msg`Profile`)}
-      accessibilityHint={_(msg`Navigates to your profile`)}
-      onPress={onPressProfile}>
-      <UserAvatar
-        size={80}
-        avatar={profile?.avatar}
-        // See https://github.com/bluesky-social/social-app/pull/1801:
-        usePlainRNImage={true}
-        type={profile?.associated?.labeler ? 'labeler' : 'user'}
-      />
-      <Text
-        type="title-lg"
-        style={[pal.text, s.bold, styles.profileCardDisplayName]}
-        numberOfLines={1}>
-        {profile?.displayName || account.handle}
-      </Text>
-      <Text
-        type="2xl"
-        style={[pal.textLight, styles.profileCardHandle]}
-        numberOfLines={1}>
-        @{account.handle}
-      </Text>
-      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
-        <Text type="xl-medium" style={pal.text}>
-          {formatCountShortOnly(profile?.followersCount ?? 0)}
-        </Text>{' '}
-        {pluralize(profile?.followersCount || 0, 'follower')} &middot;{' '}
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCountShortOnly(profile?.followsCount ?? 0)}
-          </Text>{' '}
-          following
-        </Trans>
-      </Text>
-    </TouchableOpacity>
-  )
-}
-DrawerProfileCard = React.memo(DrawerProfileCard)
-export {DrawerProfileCard}
-
-let DrawerContent = ({}: {}): React.ReactNode => {
-  const theme = useTheme()
-  const t = useAlfTheme()
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
-  const navigation = useNavigation<NavigationProp>()
-  const {track} = useAnalytics()
-  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
-    useNavigationTabState()
-  const {hasSession, currentAccount} = useSession()
-
-  // events
-  // =
-
-  const onPressTab = React.useCallback(
-    (tab: string) => {
-      track('Menu:ItemClicked', {url: tab})
-      const state = navigation.getState()
-      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') {
-          navigation.navigate('Profile', {name: currentAccount!.handle})
-        } else {
-          // @ts-ignore must be Home, Search, Notifications, or MyProfile
-          navigation.navigate(tab)
-        }
-      } else {
-        const tabState = getTabState(state, tab)
-        if (tabState === TabState.InsideAtRoot) {
-          emitSoftReset()
-        } else if (tabState === TabState.Inside) {
-          navigation.dispatch(StackActions.popToTop())
-        } else {
-          // @ts-ignore must be Home, Search, Notifications, or MyProfile
-          navigation.navigate(`${tab}Tab`)
-        }
-      }
-    },
-    [track, navigation, setDrawerOpen, currentAccount],
-  )
-
-  const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
-
-  const onPressSearch = React.useCallback(
-    () => onPressTab('Search'),
-    [onPressTab],
-  )
-
-  const onPressNotifications = React.useCallback(
-    () => onPressTab('Notifications'),
-    [onPressTab],
-  )
-
-  const onPressProfile = React.useCallback(() => {
-    onPressTab('MyProfile')
-  }, [onPressTab])
-
-  const onPressMyFeeds = React.useCallback(
-    () => onPressTab('Feeds'),
-    [onPressTab],
-  )
-
-  const onPressLists = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: 'Lists'})
-    navigation.navigate('Lists')
-    setDrawerOpen(false)
-  }, [navigation, track, setDrawerOpen])
-
-  const onPressModeration = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: 'Moderation'})
-    navigation.navigate('Moderation')
-    setDrawerOpen(false)
-  }, [navigation, track, setDrawerOpen])
-
-  const onPressSettings = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: 'Settings'})
-    navigation.navigate('Settings')
-    setDrawerOpen(false)
-  }, [navigation, track, setDrawerOpen])
-
-  const onPressFeedback = React.useCallback(() => {
-    track('Menu:FeedbackClicked')
-    Linking.openURL(
-      FEEDBACK_FORM_URL({
-        email: currentAccount?.email,
-        handle: currentAccount?.handle,
-      }),
-    )
-  }, [track, currentAccount])
-
-  const onPressHelp = React.useCallback(() => {
-    track('Menu:HelpClicked')
-    Linking.openURL(HELP_DESK_URL)
-  }, [track])
-
-  // rendering
-  // =
-
-  return (
-    <View
-      testID="drawer"
-      style={[
-        styles.view,
-        theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
-      ]}>
-      <SafeAreaView style={s.flex1}>
-        <ScrollView style={styles.main}>
-          {hasSession && currentAccount ? (
-            <View style={{}}>
-              <DrawerProfileCard
-                account={currentAccount}
-                onPressProfile={onPressProfile}
-              />
-            </View>
-          ) : (
-            <View style={{paddingRight: 20}}>
-              <NavSignupCard />
-            </View>
-          )}
-
-          {hasSession ? (
-            <>
-              <View style={{height: 16}} />
-              <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
-              <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
-              <NotificationsMenuItem
-                isActive={isAtNotifications}
-                onPress={onPressNotifications}
-              />
-              <FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
-              <ListsMenuItem onPress={onPressLists} />
-              <ModerationMenuItem onPress={onPressModeration} />
-              <ProfileMenuItem
-                isActive={isAtMyProfile}
-                onPress={onPressProfile}
-              />
-              <SettingsMenuItem onPress={onPressSettings} />
-            </>
-          ) : (
-            <>
-              <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
-              <FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
-              <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
-            </>
-          )}
-
-          <View style={styles.smallSpacer} />
-
-          <View style={[{flexWrap: 'wrap', gap: 12}, s.flexCol]}>
-            <TextLink
-              type="md"
-              style={pal.link}
-              href="https://bsky.social/about/support/tos"
-              text={_(msg`Terms of Service`)}
-            />
-            <TextLink
-              type="md"
-              style={pal.link}
-              href="https://bsky.social/about/support/privacy-policy"
-              text={_(msg`Privacy Policy`)}
-            />
-          </View>
-
-          <View style={styles.smallSpacer} />
-          <View style={styles.smallSpacer} />
-        </ScrollView>
-
-        <DrawerFooter
-          onPressFeedback={onPressFeedback}
-          onPressHelp={onPressHelp}
-        />
-      </SafeAreaView>
-    </View>
-  )
-}
-DrawerContent = React.memo(DrawerContent)
-export {DrawerContent}
-
-let DrawerFooter = ({
-  onPressFeedback,
-  onPressHelp,
-}: {
-  onPressFeedback: () => void
-  onPressHelp: () => void
-}): React.ReactNode => {
-  const theme = useTheme()
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  return (
-    <View style={styles.footer}>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
-        onPress={onPressFeedback}
-        style={[
-          styles.footerBtn,
-          styles.footerBtnFeedback,
-          theme.colorScheme === 'light'
-            ? styles.footerBtnFeedbackLight
-            : styles.footerBtnFeedbackDark,
-        ]}>
-        <FontAwesomeIcon
-          style={pal.link as FontAwesomeIconStyle}
-          size={18}
-          icon={['far', 'message']}
-        />
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
-          <Trans>Feedback</Trans>
-        </Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
-        onPress={onPressHelp}
-        style={[styles.footerBtn]}>
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
-          <Trans>Help</Trans>
-        </Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-DrawerFooter = React.memo(DrawerFooter)
-
-interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
-  icon: JSX.Element
-  label: string
-  count?: string
-  bold?: boolean
-}
-
-let SearchMenuItem = ({
-  isActive,
-  onPress,
-}: {
-  isActive: boolean
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={
-        isActive ? (
-          <MagnifyingGlassIcon2Solid
-            style={pal.text as StyleProp<ViewStyle>}
-            size={24}
-            strokeWidth={1.7}
-          />
-        ) : (
-          <MagnifyingGlassIcon2
-            style={pal.text as StyleProp<ViewStyle>}
-            size={24}
-            strokeWidth={1.7}
-          />
-        )
-      }
-      label={_(msg`Search`)}
-      accessibilityLabel={_(msg`Search`)}
-      accessibilityHint=""
-      bold={isActive}
-      onPress={onPress}
-    />
-  )
-}
-SearchMenuItem = React.memo(SearchMenuItem)
-
-let HomeMenuItem = ({
-  isActive,
-  onPress,
-}: {
-  isActive: boolean
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={
-        isActive ? (
-          <HomeIconSolid
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={3.25}
-          />
-        ) : (
-          <HomeIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={3.25}
-          />
-        )
-      }
-      label={_(msg`Home`)}
-      accessibilityLabel={_(msg`Home`)}
-      accessibilityHint=""
-      bold={isActive}
-      onPress={onPress}
-    />
-  )
-}
-HomeMenuItem = React.memo(HomeMenuItem)
-
-let NotificationsMenuItem = ({
-  isActive,
-  onPress,
-}: {
-  isActive: boolean
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  const numUnreadNotifications = useUnreadNotifications()
-  return (
-    <MenuItem
-      icon={
-        isActive ? (
-          <BellIconSolid
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={1.7}
-          />
-        ) : (
-          <BellIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={1.7}
-          />
-        )
-      }
-      label={_(msg`Notifications`)}
-      accessibilityLabel={_(msg`Notifications`)}
-      accessibilityHint={
-        numUnreadNotifications === ''
-          ? ''
-          : _(msg`${numUnreadNotifications} unread`)
-      }
-      count={numUnreadNotifications}
-      bold={isActive}
-      onPress={onPress}
-    />
-  )
-}
-NotificationsMenuItem = React.memo(NotificationsMenuItem)
-
-let FeedsMenuItem = ({
-  isActive,
-  onPress,
-}: {
-  isActive: boolean
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={
-        isActive ? (
-          <HashtagIcon
-            strokeWidth={3}
-            style={pal.text as FontAwesomeIconStyle}
-            size={24}
-          />
-        ) : (
-          <HashtagIcon
-            strokeWidth={2}
-            style={pal.text as FontAwesomeIconStyle}
-            size={24}
-          />
-        )
-      }
-      label={_(msg`Feeds`)}
-      accessibilityLabel={_(msg`Feeds`)}
-      accessibilityHint=""
-      bold={isActive}
-      onPress={onPress}
-    />
-  )
-}
-FeedsMenuItem = React.memo(FeedsMenuItem)
-
-let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
-      label={_(msg`Lists`)}
-      accessibilityLabel={_(msg`Lists`)}
-      accessibilityHint=""
-      onPress={onPress}
-    />
-  )
-}
-ListsMenuItem = React.memo(ListsMenuItem)
-
-let ModerationMenuItem = ({
-  onPress,
-}: {
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
-      label={_(msg`Moderation`)}
-      accessibilityLabel={_(msg`Moderation`)}
-      accessibilityHint=""
-      onPress={onPress}
-    />
-  )
-}
-ModerationMenuItem = React.memo(ModerationMenuItem)
-
-let ProfileMenuItem = ({
-  isActive,
-  onPress,
-}: {
-  isActive: boolean
-  onPress: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={
-        isActive ? (
-          <UserIconSolid
-            style={pal.text as StyleProp<ViewStyle>}
-            size="26"
-            strokeWidth={1.5}
-          />
-        ) : (
-          <UserIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size="26"
-            strokeWidth={1.5}
-          />
-        )
-      }
-      label={_(msg`Profile`)}
-      accessibilityLabel={_(msg`Profile`)}
-      accessibilityHint=""
-      onPress={onPress}
-    />
-  )
-}
-ProfileMenuItem = React.memo(ProfileMenuItem)
-
-let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  return (
-    <MenuItem
-      icon={
-        <CogIcon
-          style={pal.text as StyleProp<ViewStyle>}
-          size="26"
-          strokeWidth={1.75}
-        />
-      }
-      label={_(msg`Settings`)}
-      accessibilityLabel={_(msg`Settings`)}
-      accessibilityHint=""
-      onPress={onPress}
-    />
-  )
-}
-SettingsMenuItem = React.memo(SettingsMenuItem)
-
-function MenuItem({
-  icon,
-  label,
-  accessibilityLabel,
-  count,
-  bold,
-  onPress,
-}: MenuItemProps) {
-  const pal = usePalette('default')
-  return (
-    <TouchableOpacity
-      testID={`menuItemButton-${label}`}
-      style={styles.menuItem}
-      onPress={onPress}
-      accessibilityRole="tab"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint="">
-      <View style={[styles.menuItemIconWrapper]}>
-        {icon}
-        {count ? (
-          <View
-            style={[
-              styles.menuItemCount,
-              count.length > 2
-                ? styles.menuItemCountHundreds
-                : count.length > 1
-                ? styles.menuItemCountTens
-                : undefined,
-            ]}>
-            <Text style={styles.menuItemCountLabel} numberOfLines={1}>
-              {count}
-            </Text>
-          </View>
-        ) : undefined}
-      </View>
-      <Text
-        type={bold ? '2xl-bold' : '2xl'}
-        style={[pal.text, s.flex1]}
-        numberOfLines={1}>
-        {label}
-      </Text>
-    </TouchableOpacity>
-  )
-}
-
-const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    paddingBottom: 50,
-    maxWidth: 300,
-  },
-  viewDarkMode: {
-    backgroundColor: '#1B1919',
-  },
-  main: {
-    paddingLeft: 20,
-    paddingTop: 20,
-  },
-  smallSpacer: {
-    height: 20,
-  },
-
-  profileCardDisplayName: {
-    marginTop: 20,
-    paddingRight: 30,
-  },
-  profileCardHandle: {
-    marginTop: 4,
-    paddingRight: 30,
-  },
-  profileCardFollowers: {
-    marginTop: 16,
-    paddingRight: 10,
-  },
-
-  menuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingRight: 10,
-  },
-  menuItemIconWrapper: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  menuItemCount: {
-    position: 'absolute',
-    width: 'auto',
-    right: -6,
-    top: -4,
-    backgroundColor: colors.blue3,
-    paddingHorizontal: 4,
-    paddingBottom: 1,
-    borderRadius: 6,
-  },
-  menuItemCountTens: {
-    width: 25,
-  },
-  menuItemCountHundreds: {
-    right: -12,
-    width: 34,
-  },
-  menuItemCountLabel: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    fontVariant: ['tabular-nums'],
-    color: colors.white,
-  },
-
-  inviteCodes: {
-    paddingLeft: 0,
-    paddingVertical: 8,
-    flexDirection: 'row',
-  },
-  inviteCodesIcon: {
-    marginRight: 6,
-    flexShrink: 0,
-    marginTop: 2,
-  },
-
-  footer: {
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    gap: 8,
-    paddingRight: 20,
-    paddingTop: 20,
-    paddingLeft: 20,
-  },
-  footerBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    borderRadius: 25,
-  },
-  footerBtnFeedback: {
-    paddingHorizontal: 20,
-  },
-  footerBtnFeedbackLight: {
-    backgroundColor: '#DDEFFF',
-  },
-  footerBtnFeedbackDark: {
-    backgroundColor: colors.blue6,
-  },
-})

src/view/shell/index.tsx

@@ -6,23 +6,15 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native'
-import {Drawer} from 'react-native-drawer-layout'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
-import {useNavigationState} from '@react-navigation/native'
 
 import {useSession} from '#/state/session'
-import {
-  useIsDrawerOpen,
-  useIsDrawerSwipeDisabled,
-  useSetDrawerOpen,
-} from '#/state/shell'
 import {useCloseAnyActiveElement} from '#/state/util'
 import {usePalette} from 'lib/hooks/usePalette'
 import * as notifications from 'lib/notifications/notifications'
-import {isStateAtTabRoot} from 'lib/routes/helpers'
 import {useTheme} from 'lib/ThemeContext'
 import {isAndroid} from 'platform/detection'
 import {useDialogStateContext} from 'state/dialogs'
@@ -34,29 +26,15 @@ import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {Composer} from './Composer'
-import {DrawerContent} from './Drawer'
 
 function ShellInner() {
-  const isDrawerOpen = useIsDrawerOpen()
-  const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
-  const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
   const safeAreaInsets = useSafeAreaInsets()
   const containerPadding = React.useMemo(
     () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
     [safeAreaInsets],
   )
-  const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
+  const {currentAccount} = useSession()
-  const onOpenDrawer = React.useCallback(
-    () => setIsDrawerOpen(true),
-    [setIsDrawerOpen],
-  )
-  const onCloseDrawer = React.useCallback(
-    () => setIsDrawerOpen(false),
-    [setIsDrawerOpen],
-  )
-  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
-  const {hasSession, currentAccount} = useSession()
   const closeAnyActiveElement = useCloseAnyActiveElement()
   const {importantForAccessibility} = useDialogStateContext()
   // start undefined
@@ -90,15 +68,7 @@ function ShellInner() {
         style={containerPadding}
         importantForAccessibility={importantForAccessibility}>
         <ErrorBoundary>
-          <Drawer
-            renderDrawerContent={renderDrawerContent}
-            open={isDrawerOpen}
-            onOpen={onOpenDrawer}
-            onClose={onCloseDrawer}
-            swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
           <TabsNavigator />
-          </Drawer>
         </ErrorBoundary>
       </Animated.View>
       <Composer winHeight={winDim.height} />

src/view/shell/index.web.tsx

@@ -1,11 +1,7 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
-import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {NavigationProp} from 'lib/routes/types'
@@ -13,23 +9,15 @@ import {colors, s} from 'lib/styles'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
-import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
 import {FlatNavigator, RoutesContainer} from '../../Navigation'
 import {Lightbox} from '../com/lightbox/Lightbox'
 import {ModalsContainer} from '../com/modals/Modal'
 import {ErrorBoundary} from '../com/util/ErrorBoundary'
 import {Composer} from './Composer.web'
-import {DrawerContent} from './Drawer'
 
 function ShellInner() {
-  const isDrawerOpen = useIsDrawerOpen()
-  const setDrawerOpen = useSetDrawerOpen()
-  const {isDesktop} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
   const closeAllActiveElements = useCloseAllActiveElements()
-  const {_} = useLingui()
-
-  useWebBodyScrollLock(isDrawerOpen)
 
   useEffect(() => {
     const unsubscribe = navigator.addListener('state', () => {
@@ -49,24 +37,6 @@ function ShellInner() {
       <SigninDialog />
       <Lightbox />
       <PortalOutlet />
-
-      {!isDesktop && isDrawerOpen && (
-        <TouchableWithoutFeedback
-          onPress={ev => {
-            // Only close if press happens outside of the drawer
-            if (ev.target === ev.currentTarget) {
-              setDrawerOpen(false)
-            }
-          }}
-          accessibilityLabel={_(msg`Close navigation footer`)}
-          accessibilityHint={_(msg`Closes bottom navigation bar`)}>
-          <View style={styles.drawerMask}>
-            <View style={styles.drawerContainer}>
-              <DrawerContent />
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      )}
     </>
   )
 }
@@ -89,21 +59,4 @@ const styles = StyleSheet.create({
   bgDark: {
     backgroundColor: colors.black, // TODO
   },
-  drawerMask: {
-    // @ts-ignore web only
-    position: 'fixed',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0,0,0,0.25)',
-  },
-  drawerContainer: {
-    display: 'flex',
-    // @ts-ignore web only
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    height: '100%',
-  },
 })