Revert "[iPad support] Custom tab navigator for native tablet, with side nav …"

This reverts commit 842f0c96a3.
2024-04-10 15:04:47 +01:00
parent 842f0c96a3
commit 840b583f53
18 changed files with 221 additions and 420 deletions
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {JSX} from 'react/jsx-runtime'
-import {View} from 'react-native'
 import {i18n, MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {
@@ -16,12 +15,11 @@ import {
  StackActions,
 } from '@react-navigation/native'

-import {init as initAnalytics} from '#/lib/analytics/analytics'
-import {timeout} from '#/lib/async/timeout'
-import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
-import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
-import {buildStateObject} from '#/lib/routes/helpers'
-import type {
+import {timeout} from 'lib/async/timeout'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {usePalette} from 'lib/hooks/usePalette'
+import {buildStateObject} from 'lib/routes/helpers'
+import {
  AllNavigatorParams,
  BottomTabNavigatorParams,
  FeedsTabNavigatorParams,
@@ -30,60 +28,59 @@ import type {
  MyProfileTabNavigatorParams,
  NotificationsTabNavigatorParams,
  SearchTabNavigatorParams,
-  SideTabNavigatorParams,
-} from '#/lib/routes/types'
-import {RouteParams, State} from '#/lib/routes/types'
-import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
-import {bskyTitle} from '#/lib/strings/headings'
-import {isAndroid, isNative, isNativeTablet} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
-import {useUnreadNotifications} from '#/state/queries/notifications/unread'
-import {useSession} from '#/state/session'
-import {
-  setEmailConfirmationRequested,
-  shouldRequestEmailConfirmation,
-} from '#/state/shell/reminders'
-import {AppPasswords} from '#/view/screens/AppPasswords'
-import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
-import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
-import {DebugModScreen} from '#/view/screens/DebugMod'
-import {FeedsScreen} from '#/view/screens/Feeds'
-import {HomeScreen} from '#/view/screens/Home'
-import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
-import {ListsScreen} from '#/view/screens/Lists'
-import {LogScreen} from '#/view/screens/Log'
-import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
-import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
-import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
-import {NotFoundScreen} from '#/view/screens/NotFound'
-import {NotificationsScreen} from '#/view/screens/Notifications'
-import {PostLikedByScreen} from '#/view/screens/PostLikedBy'
-import {PostRepostedByScreen} from '#/view/screens/PostRepostedBy'
-import {PostThreadScreen} from '#/view/screens/PostThread'
+} from 'lib/routes/types'
+import {RouteParams, State} from 'lib/routes/types'
+import {bskyTitle} from 'lib/strings/headings'
+import {isAndroid, isNative} from 'platform/detection'
 import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
-import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
-import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
-import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
-import {ProfileScreen} from '#/view/screens/Profile'
-import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
-import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
-import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
-import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
-import {ProfileListScreen} from '#/view/screens/ProfileList'
-import {SavedFeeds} from '#/view/screens/SavedFeeds'
-import {SearchScreen} from '#/view/screens/Search'
-import {SettingsScreen} from '#/view/screens/Settings'
-import {Storybook} from '#/view/screens/Storybook'
-import {SupportScreen} from '#/view/screens/Support'
-import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
-import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
-import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
-import {LeftNav} from '#/view/shell/desktop/LeftNav'
+import {AppPasswords} from 'view/screens/AppPasswords'
+import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
+import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts'
+import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed'
+import {PreferencesThreads} from 'view/screens/PreferencesThreads'
+import {SavedFeeds} from 'view/screens/SavedFeeds'
 import HashtagScreen from '#/screens/Hashtag'
 import {ModerationScreen} from '#/screens/Moderation'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
-import {atoms as a, useTheme} from '#/alf'
-import {router} from '#/routes'
+import {init as initAnalytics} from './lib/analytics/analytics'
+import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
+import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
+import {router} from './routes'
+import {useModalControls} from './state/modals'
+import {useUnreadNotifications} from './state/queries/notifications/unread'
+import {useSession} from './state/session'
+import {
+  setEmailConfirmationRequested,
+  shouldRequestEmailConfirmation,
+} from './state/shell/reminders'
+import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
+import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
+import {DebugModScreen} from './view/screens/DebugMod'
+import {FeedsScreen} from './view/screens/Feeds'
+import {HomeScreen} from './view/screens/Home'
+import {LanguageSettingsScreen} from './view/screens/LanguageSettings'
+import {ListsScreen} from './view/screens/Lists'
+import {LogScreen} from './view/screens/Log'
+import {ModerationModlistsScreen} from './view/screens/ModerationModlists'
+import {NotFoundScreen} from './view/screens/NotFound'
+import {NotificationsScreen} from './view/screens/Notifications'
+import {PostLikedByScreen} from './view/screens/PostLikedBy'
+import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
+import {PostThreadScreen} from './view/screens/PostThread'
+import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
+import {ProfileScreen} from './view/screens/Profile'
+import {ProfileFeedScreen} from './view/screens/ProfileFeed'
+import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy'
+import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
+import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
+import {ProfileListScreen} from './view/screens/ProfileList'
+import {SearchScreen} from './view/screens/Search'
+import {SettingsScreen} from './view/screens/Settings'
+import {Storybook} from './view/screens/Storybook'
+import {SupportScreen} from './view/screens/Support'
+import {TermsOfServiceScreen} from './view/screens/TermsOfService'
+import {BottomBar} from './view/shell/bottom-bar/BottomBar'
+import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth'

 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()

@@ -94,23 +91,15 @@ const NotificationsTab =
  createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
  createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
-const ListsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
-const ModerationTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
-const SettingsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
 const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
-
-const MobileTab = createBottomTabNavigator<BottomTabNavigatorParams>()
-const TabletTab = createBottomTabNavigator<SideTabNavigatorParams>()
+const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()

 /**
 * These "common screens" are reused across stacks.
 */
-function commonScreens(
-  Stack: typeof HomeTab,
-  opts?: {unreadCountLabel?: string},
-) {
+function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
  const title = (page: MessageDescriptor) =>
-    bskyTitle(i18n._(page), opts?.unreadCountLabel)
+    bskyTitle(i18n._(page), unreadCountLabel)

  return (
    <>
@@ -119,6 +108,16 @@ function commonScreens(
        getComponent={() => NotFoundScreen}
        options={{title: title(msg`Not Found`)}}
      />
+      <Stack.Screen
+        name="Lists"
+        component={ListsScreen}
+        options={{title: title(msg`Lists`), requireAuth: true}}
+      />
+      <Stack.Screen
+        name="Moderation"
+        getComponent={() => ModerationScreen}
+        options={{title: title(msg`Moderation`), requireAuth: true}}
+      />
      <Stack.Screen
        name="ModerationModlists"
        getComponent={() => ModerationModlistsScreen}
@@ -134,6 +133,11 @@ function commonScreens(
        getComponent={() => ModerationBlockedAccounts}
        options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
      />
+      <Stack.Screen
+        name="Settings"
+        getComponent={() => SettingsScreen}
+        options={{title: title(msg`Settings`), requireAuth: true}}
+      />
      <Stack.Screen
        name="LanguageSettings"
        getComponent={() => LanguageSettingsScreen}
@@ -143,7 +147,7 @@ function commonScreens(
        name="Profile"
        getComponent={() => ProfileScreen}
        options={({route}) => ({
-          title: bskyTitle(`@${route.params.name}`, opts?.unreadCountLabel),
+          title: bskyTitle(`@${route.params.name}`, unreadCountLabel),
        })}
      />
      <Stack.Screen
@@ -277,38 +281,15 @@ function commonScreens(
        getComponent={() => HashtagScreen}
        options={{title: title(msg`Hashtag`)}}
      />
-      {!isNativeTablet && (
-        <>
-          <Stack.Screen
-            name="Moderation"
-            getComponent={() => ModerationScreen}
-            options={{title: title(msg`Moderation`), requireAuth: true}}
-          />
-          <Stack.Screen
-            name="Lists"
-            component={ListsScreen}
-            options={{title: title(msg`Lists`), requireAuth: true}}
-          />
-          <Stack.Screen
-            name="Settings"
-            getComponent={() => SettingsScreen}
-            options={{title: title(msg`Settings`), requireAuth: true}}
-          />
-        </>
-      )}
    </>
  )
 }

 /**
 * The TabsNavigator is used by native mobile to represent the routes
- * in the distinct tab-stacks with a different root screen on each.
+ * in 3 distinct tab-stacks with a different root screen on each.
 */
 function TabsNavigator() {
-  return isNativeTablet ? <TabNavigatorTablet /> : <TabsNavigatorMobile />
-}
-
-function TabsNavigatorMobile() {
  const tabBar = React.useCallback(
    (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
      <BottomBar {...props} />
@@ -317,88 +298,28 @@ function TabsNavigatorMobile() {
  )

  return (
-    <MobileTab.Navigator
+    <Tab.Navigator
      initialRouteName="HomeTab"
      backBehavior="initialRoute"
      screenOptions={{headerShown: false, lazy: true}}
      tabBar={tabBar}>
-      <MobileTab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
-      <MobileTab.Screen
-        name="SearchTab"
-        getComponent={() => SearchTabNavigator}
-      />
-      <MobileTab.Screen
-        name="FeedsTab"
-        getComponent={() => FeedsTabNavigator}
-      />
-      <MobileTab.Screen
+      <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
+      <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
+      <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} />
+      <Tab.Screen
        name="NotificationsTab"
        getComponent={() => NotificationsTabNavigator}
      />
-      <MobileTab.Screen
+      <Tab.Screen
        name="MyProfileTab"
        getComponent={() => MyProfileTabNavigator}
      />
-    </MobileTab.Navigator>
-  )
-}
-
-/**
- * The TabNavigatorTablet is used by native tablet to represent the routes
- * in all the extra tabs shown in the tablet left nav.
- */
-function TabNavigatorTablet() {
-  // we can't style the wrapper component of the tab navigator
-  // to set it to flex_row, so put the left nav outside of the tab navigator
-  const tabBar = React.useCallback(() => null, [])
-
-  return (
-    <View style={[a.flex_row, a.flex_1]}>
-      <LeftNav />
-      <TabletTab.Navigator
-        initialRouteName="HomeTab"
-        backBehavior="initialRoute"
-        screenOptions={{headerShown: false, lazy: true}}
-        tabBar={tabBar}>
-        <TabletTab.Screen
-          name="HomeTab"
-          getComponent={() => HomeTabNavigator}
-        />
-        <TabletTab.Screen
-          name="SearchTab"
-          getComponent={() => SearchTabNavigator}
-        />
-        <TabletTab.Screen
-          name="FeedsTab"
-          getComponent={() => FeedsTabNavigator}
-        />
-        <TabletTab.Screen
-          name="NotificationsTab"
-          getComponent={() => NotificationsTabNavigator}
-        />
-        <TabletTab.Screen
-          name="ListsTab"
-          getComponent={() => ListsTabNavigator}
-        />
-        <TabletTab.Screen
-          name="ModerationTab"
-          getComponent={() => ModerationTabNavigator}
-        />
-        <TabletTab.Screen
-          name="MyProfileTab"
-          getComponent={() => MyProfileTabNavigator}
-        />
-        <TabletTab.Screen
-          name="SettingsTab"
-          getComponent={() => SettingsTabNavigator}
-        />
-      </TabletTab.Navigator>
-    </View>
+    </Tab.Navigator>
  )
 }

 function HomeTabNavigator() {
-  const t = useTheme()
+  const pal = usePalette('default')

  return (
    <HomeTab.Navigator
@@ -408,7 +329,7 @@ function HomeTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <HomeTab.Screen
        name="Home"
@@ -421,7 +342,7 @@ function HomeTabNavigator() {
 }

 function SearchTabNavigator() {
-  const t = useTheme()
+  const pal = usePalette('default')
  return (
    <SearchTab.Navigator
      screenOptions={{
@@ -430,7 +351,7 @@ function SearchTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
      {commonScreens(SearchTab as typeof HomeTab)}
@@ -439,7 +360,7 @@ function SearchTabNavigator() {
 }

 function FeedsTabNavigator() {
-  const t = useTheme()
+  const pal = usePalette('default')
  return (
    <FeedsTab.Navigator
      screenOptions={{
@@ -448,7 +369,7 @@ function FeedsTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <FeedsTab.Screen
        name="Feeds"
@@ -461,7 +382,7 @@ function FeedsTabNavigator() {
 }

 function NotificationsTabNavigator() {
-  const t = useTheme()
+  const pal = usePalette('default')
  return (
    <NotificationsTab.Navigator
      screenOptions={{
@@ -470,7 +391,7 @@ function NotificationsTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <NotificationsTab.Screen
        name="Notifications"
@@ -483,7 +404,7 @@ function NotificationsTabNavigator() {
 }

 function MyProfileTabNavigator() {
-  const t = useTheme()
+  const pal = usePalette('default')
  return (
    <MyProfileTab.Navigator
      screenOptions={{
@@ -492,7 +413,7 @@ function MyProfileTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <MyProfileTab.Screen
        // @ts-ignore // TODO: fix this broken type in ProfileScreen
@@ -507,78 +428,12 @@ function MyProfileTabNavigator() {
  )
 }

-function ListsTabNavigator() {
-  const t = useTheme()
-  return (
-    <ListsTab.Navigator
-      screenOptions={{
-        animation: isAndroid ? 'none' : undefined,
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-        animationDuration: 250,
-        contentStyle: t.atoms.bg,
-      }}>
-      <ListsTab.Screen
-        name="Lists"
-        getComponent={() => ListsScreen}
-        options={{requireAuth: true}}
-      />
-      {commonScreens(ListsTab as typeof HomeTab)}
-    </ListsTab.Navigator>
-  )
-}
-
-function ModerationTabNavigator() {
-  const t = useTheme()
-  return (
-    <ModerationTab.Navigator
-      screenOptions={{
-        animation: isAndroid ? 'none' : undefined,
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-        animationDuration: 250,
-        contentStyle: t.atoms.bg,
-      }}>
-      <ModerationTab.Screen
-        name="Moderation"
-        getComponent={() => ModerationScreen}
-        options={{requireAuth: true}}
-      />
-      {commonScreens(ModerationTab as typeof HomeTab)}
-    </ModerationTab.Navigator>
-  )
-}
-
-function SettingsTabNavigator() {
-  const t = useTheme()
-  return (
-    <SettingsTab.Navigator
-      screenOptions={{
-        animation: isAndroid ? 'none' : undefined,
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-        animationDuration: 250,
-        contentStyle: t.atoms.bg,
-      }}>
-      <SettingsTab.Screen
-        name="Settings"
-        getComponent={() => SettingsScreen}
-        options={{requireAuth: true}}
-      />
-      {commonScreens(SettingsTab as typeof HomeTab)}
-    </SettingsTab.Navigator>
-  )
-}
-
 /**
 * The FlatNavigator is used by Web to represent the routes
 * in a single ("flat") stack.
 */
 const FlatNavigator = () => {
-  const t = useTheme()
+  const pal = usePalette('default')
  const numUnread = useUnreadNotifications()
  const screenListeners = useWebScrollRestoration()
  const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread)
@@ -591,7 +446,7 @@ const FlatNavigator = () => {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: t.atoms.bg,
+        contentStyle: pal.view,
      }}>
      <Flat.Screen
        name="Home"
@@ -613,7 +468,7 @@ const FlatNavigator = () => {
        getComponent={() => NotificationsScreen}
        options={{title: title(msg`Notifications`), requireAuth: true}}
      />
-      {commonScreens(Flat as typeof HomeTab, {unreadCountLabel: numUnread})}
+      {commonScreens(Flat as typeof HomeTab, numUnread)}
    </Flat.Navigator>
  )
 }
@@ -660,26 +515,12 @@ const LINKING = {
      if (name === 'Search') {
        return buildStateObject('SearchTab', 'Search', params)
      }
-      if (name === 'Feeds') {
-        return buildStateObject('FeedsTab', 'Feeds', params)
-      }
      if (name === 'Notifications') {
        return buildStateObject('NotificationsTab', 'Notifications', params)
      }
      if (name === 'Home') {
        return buildStateObject('HomeTab', 'Home', params)
      }
-      if (isNativeTablet) {
-        if (name === 'Lists') {
-          return buildStateObject('ListsTab', 'Lists', params)
-        }
-        if (name === 'Moderation') {
-          return buildStateObject('ModerationTab', 'Moderation', params)
-        }
-        if (name === 'Settings') {
-          return buildStateObject('SettingsTab', 'Settings', params)
-        }
-      }
      // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
      return buildStateObject('HomeTab', name, params, [
        {
@@ -862,6 +703,5 @@ export {
  reset,
  resetToTab,
  RoutesContainer,
-  TabNavigatorTablet,
  TabsNavigator,
 }
@@ -3,7 +3,6 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {isNativeTablet} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -44,11 +43,7 @@ export function Outer({
        <Dialog.ScrollableInner
          accessibilityLabelledBy={titleId}
          accessibilityDescribedBy={descriptionId}
-          style={[
-            gtMobile && !isNativeTablet
-              ? {width: 'auto', maxWidth: 400}
-              : a.w_full,
-          ]}>
+          style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
          {children}
        </Dialog.ScrollableInner>
      </Context.Provider>
@@ -86,7 +81,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
        a.w_full,
        a.gap_md,
        a.justify_end,
-        gtMobile && !isNativeTablet
+        gtMobile
          ? [a.flex_row, a.flex_row_reverse, a.justify_start]
          : [a.flex_col],
      ]}>
@@ -1,5 +1,4 @@
 import {useNavigationState} from '@react-navigation/native'
-
 import {getTabState, TabState} from 'lib/routes/helpers'

 export function useNavigationTabState() {
@@ -47,17 +47,6 @@ export type BottomTabNavigatorParams = CommonNavigatorParams & {
  MyProfileTab: undefined
 }

-export type SideTabNavigatorParams = CommonNavigatorParams & {
-  HomeTab: undefined
-  SearchTab: undefined
-  FeedsTab: undefined
-  NotificationsTab: undefined
-  MyProfileTab: undefined
-  ListsTab: undefined
-  ModerationTab: undefined
-  SettingsTab: undefined
-}
-
 export type HomeTabNavigatorParams = CommonNavigatorParams & {
  Home: undefined
 }
@@ -83,6 +72,7 @@ export type FlatNavigatorParams = CommonNavigatorParams & {
  Search: {q?: string}
  Feeds: undefined
  Notifications: undefined
+  Hashtag: {tag: string; author?: string}
 }

 export type AllNavigatorParams = CommonNavigatorParams & {
@@ -484,7 +484,7 @@ export const ComposePost = observer(function ComposePost({
              <OpenCameraBtn gallery={gallery} />
            </>
          ) : null}
-          {!isMobile && !isNative ? (
+          {!isMobile ? (
            <Pressable
              onPress={onEmojiButtonPress}
              accessibilityRole="button"
@@ -7,7 +7,7 @@ import {useQueryClient} from '@tanstack/react-query'

 import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
-import {isNative, isNativeTablet} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
@@ -155,9 +155,9 @@ export function FeedPage({
 }

 function useHeaderOffset() {
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {isDesktop, isTablet} = useWebMediaQueries()
  const {fontScale} = useWindowDimensions()
-  if (isTabletOrDesktop && !isNativeTablet) {
+  if (isDesktop || isTablet) {
    return 0
  }
  const navBarHeight = 42
@@ -11,7 +11,7 @@ import {useLingui} from '@lingui/react'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {isNativeTablet, isWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'

 import {IS_DEV} from '#/env'
@@ -42,28 +42,23 @@ export function HomeHeaderLayoutMobile({
        headerHeight.value = e.nativeEvent.layout.height
      }}>
      <View style={[pal.view, styles.topBar]}>
-        {!isNativeTablet ? (
-          <View style={[pal.view, {width: 100}]}>
-            <TouchableOpacity
-              testID="viewHeaderDrawerBtn"
-              onPress={onPressAvi}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Open navigation`)}
-              accessibilityHint={_(
-                msg`Access profile and other navigation links`,
-              )}
-              hitSlop={HITSLOP_10}>
-              <FontAwesomeIcon
-                icon="bars"
-                size={18}
-                color={pal.colors.textLight}
-              />
-            </TouchableOpacity>
-          </View>
-        ) : (
-          // subtract width of LeftNav
-          <View style={{width: 100 - 77}} />
-        )}
+        <View style={[pal.view, {width: 100}]}>
+          <TouchableOpacity
+            testID="viewHeaderDrawerBtn"
+            onPress={onPressAvi}
+            accessibilityRole="button"
+            accessibilityLabel={_(msg`Open navigation`)}
+            accessibilityHint={_(
+              msg`Access profile and other navigation links`,
+            )}
+            hitSlop={HITSLOP_10}>
+            <FontAwesomeIcon
+              icon="bars"
+              size={18}
+              color={pal.colors.textLight}
+            />
+          </TouchableOpacity>
+        </View>
        <View>
          <Logo width={30} />
        </View>
@@ -13,7 +13,7 @@ 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 {isNative, isNativeTablet} from 'platform/detection'
+import {isNative} from 'platform/detection'
 import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
@@ -71,11 +71,9 @@ export function ProfileSubpageHeader({
    }
  }, [openLightbox, avatar])

-  const isMobileLayout = isMobile || isNativeTablet
-
  return (
    <CenteredView style={pal.view}>
-      {isMobileLayout && (
+      {isMobile && (
        <View
          style={[
            {
@@ -84,7 +82,7 @@ export function ProfileSubpageHeader({
              borderBottomWidth: 1,
              paddingTop: isNative ? 0 : 8,
              paddingBottom: 8,
-              paddingHorizontal: isMobileLayout ? 12 : 14,
+              paddingHorizontal: isMobile ? 12 : 14,
            },
            pal.border,
          ]}>
@@ -121,7 +119,7 @@ export function ProfileSubpageHeader({
          gap: 10,
          paddingTop: 14,
          paddingBottom: 6,
-          paddingHorizontal: isMobileLayout ? 12 : 14,
+          paddingHorizontal: isMobile ? 12 : 14,
        }}>
        <Pressable
          testID="headerAviButton"
@@ -172,7 +170,7 @@ export function ProfileSubpageHeader({
            </Text>
          )}
        </View>
-        {!isMobileLayout && (
+        {!isMobile && (
          <View
            style={{
              flexDirection: 'row',
@@ -14,7 +14,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
-import {isNativeTablet, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'

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

@@ -71,13 +71,13 @@ export function SimpleViewHeader({
              icon="angle-left"
              style={[styles.backIcon, pal.text]}
            />
-          ) : !isNativeTablet ? (
+          ) : (
            <FontAwesomeIcon
              size={18}
              icon="bars"
              style={[styles.backIcon, pal.textLight]}
            />
-          ) : null}
+          )}
        </TouchableOpacity>
      ) : null}
      {children}
@@ -1,8 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
-
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FABInner, FABProps} from './FABInner'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'

 export const FAB = (_opts: FABProps) => {
  const {isDesktop} = useWebMediaQueries()
@@ -4,7 +4,7 @@ import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'

-import {isWeb} from '#/platform/detection'
+import {isNativeTablet, isWeb} from '#/platform/detection'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {clamp} from 'lib/numbers'
@@ -40,7 +40,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
          styles.outer,
          size,
          tabletSpacing,
-          isMobile && fabMinimalShellTransform,
+          (isMobile || isNativeTablet) && fabMinimalShellTransform,
        ]}>
        <LinearGradient
          colors={[gradients.blueLight.start, gradients.blueLight.end]}
@@ -1,8 +1,7 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'

 interface Props {
  testID?: string
@@ -4,16 +4,15 @@ import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useMediaQuery} from 'react-responsive'

-import {HITSLOP_20} from '#/lib/constants'
-import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {colors} from '#/lib/styles'
-import {isNativeTablet, isWeb} from '#/platform/detection'
-import {useSession} from '#/state/session'
-import {useTheme} from '#/alf'
-
+import {HITSLOP_20} from 'lib/constants'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {colors} from 'lib/styles'
 const AnimatedTouchableOpacity =
  Animated.createAnimatedComponent(TouchableOpacity)
+import {isNativeTablet, isWeb} from 'platform/detection'
+import {useSession} from 'state/session'

 export function LoadLatestBtn({
  onPress,
@@ -24,7 +23,7 @@ export function LoadLatestBtn({
  label: string
  showIndicator: boolean
 }) {
-  const t = useTheme()
+  const pal = usePalette('default')
  const {hasSession} = useSession()
  const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
  const {fabMinimalShellTransform} = useMinimalShellMode()
@@ -34,7 +33,9 @@ export function LoadLatestBtn({

  // Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
  // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
-  const showBottomBar = hasSession ? isMobile : isTabletOrMobile
+  const showBottomBar = hasSession
+    ? isMobile || isNativeTablet
+    : isTabletOrMobile

  return (
    <AnimatedTouchableOpacity
@@ -45,8 +46,8 @@ export function LoadLatestBtn({
            ? styles.loadLatestOutOfLine
            : styles.loadLatestInline),
        isTablet && !isNativeTablet && styles.loadLatestInline,
-        t.atoms.border_contrast_high,
-        t.atoms.bg,
+        pal.borderDark,
+        pal.view,
        showBottomBar && fabMinimalShellTransform,
      ]}
      onPress={onPress}
@@ -54,10 +55,8 @@ export function LoadLatestBtn({
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityHint="">
-      <FontAwesomeIcon icon="angle-up" color={t.atoms.text.color} size={19} />
-      {showIndicator && (
-        <View style={[styles.indicator, t.atoms.border_contrast_high]} />
-      )}
+      <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
+      {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
    </AnimatedTouchableOpacity>
  )
 }
@@ -461,7 +461,7 @@ export function SearchScreen(
  const moderationOpts = useModerationOpts()
  const search = useActorAutocompleteFn()
  const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrDesktop, isMobile} = useWebMediaQueries()
+  const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()

  const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
    undefined,
@@ -637,8 +637,8 @@ export function SearchScreen(
          pal.view,
          isTabletOrDesktop && {paddingTop: 10},
        ]}
-        sideBorders={isMobile}>
-        {isMobile && (
+        sideBorders={isTabletOrDesktop}>
+        {isTabletOrMobile && (
          <Pressable
            testID="viewHeaderBackOrMenuBtn"
            onPress={onPressMenu}
@@ -25,7 +25,7 @@ import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src
 import {NativeStackView} from '@react-navigation/native-stack'

 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
-import {LeftNav} from './desktop/LeftNav'
+import {DesktopLeftNav} from './desktop/LeftNav'
 import {DesktopRightNav} from './desktop/RightNav'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useOnboardingState} from '#/state/shell'
@@ -149,7 +149,7 @@ function NativeStackNavigator({
      {isWeb && showBottomBar && <BottomBarWeb />}
      {isWeb && !showBottomBar && (
        <>
-          <LeftNav />
+          <DesktopLeftNav />
          <DesktopRightNav routeName={activeRoute.name} />
        </>
      )}
@@ -1,54 +1,52 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {PressableWithHover} from 'view/com/util/PressableWithHover'
 import {
  useLinkProps,
  useNavigation,
  useNavigationState,
 } from '@react-navigation/native'
-
-import {isInvalidHandle} from '#/lib/strings/handles'
-import {isWeb} from '#/platform/detection'
-import {emitSoftReset} from '#/state/events'
-import {useFetchHandle} from '#/state/queries/handle'
-import {useUnreadNotifications} from '#/state/queries/notifications/unread'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import {useComposerControls} from '#/state/shell/composer'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {Link} from 'view/com/util/Link'
+import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {s, colors} from 'lib/styles'
 import {
+  HomeIcon,
+  HomeIconSolid,
+  MagnifyingGlassIcon2,
+  MagnifyingGlassIcon2Solid,
  BellIcon,
  BellIconSolid,
+  UserIcon,
+  UserIconSolid,
  CogIcon,
  CogIconSolid,
  ComposeIcon2,
-  HandIcon,
-  HashtagIcon,
-  HomeIcon,
-  HomeIconSolid,
  ListIcon,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-  UserIcon,
-  UserIconSolid,
+  HashtagIcon,
+  HandIcon,
 } from 'lib/icons'
-import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
-import {makeProfileLink} from 'lib/routes/links'
-import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
-import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {Link} from 'view/com/util/Link'
-import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
-import {PressableWithHover} from 'view/com/util/PressableWithHover'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
+import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
+import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
 import {router} from '../../../routes'
+import {makeProfileLink} from 'lib/routes/links'
+import {useLingui} from '@lingui/react'
+import {Trans, msg} from '@lingui/macro'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useComposerControls} from '#/state/shell/composer'
+import {useFetchHandle} from '#/state/queries/handle'
+import {emitSoftReset} from '#/state/events'
+import {NavSignupCard} from '#/view/shell/NavSignupCard'
+import {isInvalidHandle} from '#/lib/strings/handles'

 function ProfileCard() {
  const {currentAccount} = useSession()
@@ -268,7 +266,7 @@ function ComposeBtn() {
  )
 }

-export function LeftNav() {
+export function DesktopLeftNav() {
  const {hasSession, currentAccount} = useSession()
  const pal = usePalette('default')
  const {_} = useLingui()
@@ -447,19 +445,17 @@ export function LeftNav() {
 }

 const styles = StyleSheet.create({
-  // @ts-ignore web only
-  leftNav: isWeb
-    ? {
-        position: 'fixed',
-        top: 10,
-        left: 'calc(50vw - 300px - 220px - 20px)',
-        width: 220,
-        maxHeight: 'calc(100vh - 10px)',
-        overflowY: 'auto',
-      }
-    : {
-        paddingTop: 12,
-      },
+  leftNav: {
+    // @ts-ignore web only
+    position: 'fixed',
+    top: 10,
+    // @ts-ignore web only
+    left: 'calc(50vw - 300px - 220px - 20px)',
+    width: 220,
+    // @ts-ignore web only
+    maxHeight: 'calc(100vh - 10px)',
+    overflowY: 'auto',
+  },
  leftNavTablet: {
    top: 0,
    left: 0,
@@ -517,7 +513,6 @@ const styles = StyleSheet.create({
    fontWeight: 'bold',
    paddingHorizontal: 4,
    borderRadius: 6,
-    overflow: 'hidden',
  },
  navItemCountTablet: {
    left: 18,
@@ -1,17 +1,16 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {useSession} from '#/state/session'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-import {TextLink} from 'view/com/util/Link'
-import {Text} from 'view/com/util/text/Text'
-import {DesktopFeeds} from './Feeds'
 import {DesktopSearch} from './Search'
+import {DesktopFeeds} from './Feeds'
+import {Text} from 'view/com/util/text/Text'
+import {TextLink} from 'view/com/util/Link'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
+import {s} from 'lib/styles'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
+import {useSession} from '#/state/session'

 export function DesktopRightNav({routeName}: {routeName: string}) {
  const pal = usePalette('default')
@@ -98,18 +97,15 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
 }

 const styles = StyleSheet.create({
-  // @ts-ignore web only
-  rightNav: isWeb
-    ? {
-        position: 'fixed',
-        left: 'calc(50vw + 300px + 20px)',
-        width: 300,
-        maxHeight: '100%',
-        overflowY: 'auto',
-      }
-    : {
-        width: 300,
-      },
+  rightNav: {
+    // @ts-ignore web only
+    position: 'fixed',
+    // @ts-ignore web only
+    left: 'calc(50vw + 300px + 20px)',
+    width: 300,
+    maxHeight: '100%',
+    overflowY: 'auto',
+  },

  message: {
    paddingVertical: 18,
@@ -24,7 +24,7 @@ import {
  useSetDrawerOpen,
  useIsDrawerSwipeDisabled,
 } from '#/state/shell'
-import {isAndroid, isNativeTablet} from 'platform/detection'
+import {isAndroid} from 'platform/detection'
 import {useSession} from '#/state/session'
 import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
@@ -87,19 +87,15 @@ function ShellInner() {
        style={containerPadding}
        importantForAccessibility={importantForAccessibility}>
        <ErrorBoundary>
-          {!isNativeTablet ? (
-            <Drawer
-              renderDrawerContent={renderDrawerContent}
-              open={isDrawerOpen}
-              onOpen={onOpenDrawer}
-              onClose={onCloseDrawer}
-              swipeEdgeWidth={winDim.width / 2}
-              swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
-              <TabsNavigator />
-            </Drawer>
-          ) : (
+          <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} />