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

This reverts commit 842f0c96a3.

app.config.js

@@ -60,7 +60,7 @@ module.exports = function (config) {
       userInterfaceStyle: 'automatic',
       splash: SPLASH_CONFIG,
       ios: {
-        supportsTablet: false,
+        supportsTablet: true,
         bundleIdentifier: 'xyz.blueskyweb.app',
         config: {
           usesNonExemptEncryption: false,

src/lib/hooks/useWebMediaQueries.tsx

@@ -1,5 +1,5 @@
 import {useMediaQuery} from 'react-responsive'
-import {isNative} from 'platform/detection'
+import {isNative, isNativeTablet} from 'platform/detection'
 
 export function useWebMediaQueries() {
   const isDesktop = useMediaQuery({minWidth: 1300})
@@ -7,6 +7,15 @@ export function useWebMediaQueries() {
   const isMobile = useMediaQuery({maxWidth: 800 - 1})
   const isTabletOrMobile = isMobile || isTablet
   const isTabletOrDesktop = isDesktop || isTablet
+  if (isNativeTablet) {
+    return {
+      isMobile: false,
+      isTablet: true,
+      isTabletOrMobile: true,
+      isTabletOrDesktop: true,
+      isDesktop: false,
+    }
+  }
   if (isNative) {
     return {
       isMobile: true,

src/platform/detection.ts

@@ -5,6 +5,7 @@ import {dedupArray} from 'lib/functions'
 export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isNative = isIOS || isAndroid
+export const isNativeTablet = Platform.OS === 'ios' && Platform.isPad
 export const devicePlatform = isIOS ? 'ios' : isAndroid ? 'android' : 'web'
 export const isWeb = !isNative
 export const isMobileWebMediaQuery = 'only screen and (max-width: 1300px)'

src/view/com/auth/SplashScreen.tsx

@@ -58,7 +58,9 @@ export const SplashScreen = ({
             <Trans>What's up?</Trans>
           </Text>
         </View>
-        <View testID="signinOrCreateAccount">
+        <View
+          testID="signinOrCreateAccount"
+          style={[a.w_full, a.mx_auto, {maxWidth: 450}]}>
           <Button
             testID="createAccountButton"
             onPress={onPressCreateAccount}

src/view/com/notifications/FeedItem.tsx

@@ -1,20 +1,20 @@
-import React, {memo, useMemo, useState, useEffect} from 'react'
+import React, {memo, useEffect, useMemo, useState} from 'react'
 import {
   Animated,
-  TouchableOpacity,
   Pressable,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native'
 import {
+  AppBskyActorDefs,
   AppBskyEmbedImages,
+  AppBskyEmbedRecordWithMedia,
   AppBskyFeedDefs,
   AppBskyFeedPost,
-  ModerationOpts,
-  ModerationDecision,
   moderateProfile,
-  AppBskyEmbedRecordWithMedia,
-  AppBskyActorDefs,
+  ModerationDecision,
+  ModerationOpts,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
 import {
@@ -22,28 +22,29 @@ import {
   FontAwesomeIconStyle,
   Props,
 } from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
 import {FeedNotification} from '#/state/queries/notifications/feed'
-import {s, colors} from 'lib/styles'
-import {niceDate} from 'lib/strings/time'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {usePalette} from 'lib/hooks/usePalette'
+import {HeartIconSolid} from 'lib/icons'
+import {makeProfileLink} from 'lib/routes/links'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {pluralize} from 'lib/strings/helpers'
-import {HeartIconSolid} from 'lib/icons'
-import {Text} from '../util/text/Text'
-import {UserAvatar, PreviewableUserAvatar} from '../util/UserAvatar'
-import {UserPreviewLink} from '../util/UserPreviewLink'
-import {ImageHorzList} from '../util/images/ImageHorzList'
-import {Post} from '../post/Post'
-import {Link, TextLink} from '../util/Link'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-import {formatCount} from '../util/numeric/format'
-import {makeProfileLink} from 'lib/routes/links'
-import {TimeElapsed} from '../util/TimeElapsed'
+import {niceDate} from 'lib/strings/time'
+import {colors, s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {FeedSourceCard} from '../feeds/FeedSourceCard'
+import {Post} from '../post/Post'
+import {ImageHorzList} from '../util/images/ImageHorzList'
+import {Link, TextLink} from '../util/Link'
+import {formatCount} from '../util/numeric/format'
+import {Text} from '../util/text/Text'
+import {TimeElapsed} from '../util/TimeElapsed'
+import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
+import {UserPreviewLink} from '../util/UserPreviewLink'
 
 const MAX_AUTHORS = 5
 

src/view/com/pager/TabBar.tsx

@@ -1,11 +1,12 @@
-import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react'
-import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
-import {Text} from '../util/text/Text'
-import {PressableWithHover} from '../util/PressableWithHover'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
+
+import {isNative, isNativeTablet} from '#/platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {PressableWithHover} from '../util/PressableWithHover'
+import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
-import {isNative} from '#/platform/detection'
 
 export interface TabBarProps {
   testID?: string
@@ -36,8 +37,9 @@ export function TabBar({
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
-  const {isDesktop, isTablet} = useWebMediaQueries()
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const styles =
+    isTabletOrDesktop && !isNativeTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
     if (isNative) {
@@ -137,7 +139,7 @@ export function TabBar({
               onPress={() => onPressItem(i)}>
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+                  type={isTabletOrDesktop ? 'xl-bold' : 'lg-bold'}
                   testID={testID ? `${testID}-${item}` : undefined}
                   style={selected ? pal.text : pal.textLight}>
                   {item}

src/view/com/post-thread/PostThreadFollowBtn.tsx

@@ -1,25 +1,25 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
 import {AppBskyActorDefs} from '@atproto/api'
-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 {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
 import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {track} from 'lib/analytics/analytics'
+import {Text} from 'view/com/util/text/Text'
+import * as Toast from 'view/com/util/Toast'
+import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {s} from 'lib/styles'
 import {Shadow, useProfileShadow} from 'state/cache/profile-shadow'
+import {track} from 'lib/analytics/analytics'
 import {
   useProfileFollowMutationQueue,
   useProfileQuery,
 } from 'state/queries/profile'
 import {useRequireAuth} from 'state/session'
-import {Text} from 'view/com/util/text/Text'
-import * as Toast from 'view/com/util/Toast'
 
 export function PostThreadFollowBtn({did}: {did: string}) {
   const {data: profile, isLoading} = useProfileQuery({did})

src/view/com/posts/Feed.tsx

@@ -8,33 +8,32 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
-
-import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
-import {logEvent} from '#/lib/statsig/statsig'
-import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
-import {listenPostCreated} from '#/state/events'
-import {STALE} from '#/state/queries'
-import {
-  FeedDescriptor,
-  FeedParams,
-  pollLatest,
-  RQKEY,
-  usePostFeedQuery,
-} from '#/state/queries/post-feed'
-import {useSession} from '#/state/session'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {useTheme} from 'lib/ThemeContext'
 import {List, ListRef} from '../util/List'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
 import {FeedErrorMessage} from './FeedErrorMessage'
 import {FeedSlice} from './FeedSlice'
+import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {useTheme} from 'lib/ThemeContext'
+import {logger} from '#/logger'
+import {
+  RQKEY,
+  FeedDescriptor,
+  FeedParams,
+  usePostFeedQuery,
+  pollLatest,
+} from '#/state/queries/post-feed'
+import {isWeb} from '#/platform/detection'
+import {listenPostCreated} from '#/state/events'
+import {useSession} from '#/state/session'
+import {STALE} from '#/state/queries'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
+import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
+import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {logEvent} from '#/lib/statsig/statsig'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}

src/view/com/util/fab/FABInner.tsx

@@ -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]}

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
 
-import {isWeb} from '#/platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -73,9 +72,7 @@ export const LoggedOutLayout = ({
             contentContainerStyle={styles.scrollViewContentContainer}
             keyboardShouldPersistTaps="handled"
             keyboardDismissMode="on-drag">
-            <View style={[styles.contentWrapper, isWeb && a.my_auto]}>
-              {children}
-            </View>
+            <View style={[styles.contentWrapper]}>{children}</View>
           </ScrollView>
         </View>
       ) : (
@@ -92,6 +89,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     // @ts-ignore web only
     height: '100vh',
+    flex: 1,
   },
   side: {
     flex: 1,
@@ -111,8 +109,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollViewContentContainer: {
-    flex: 1,
+    flexGrow: 1,
     paddingHorizontal: 40,
+    justifyContent: 'center',
   },
   leadinText: {
     fontSize: 36,

src/view/com/util/layouts/withBreakpoints.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {isNative} from 'platform/detection'
+
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 export const withBreakpoints = <P extends object>(
@@ -8,12 +8,12 @@ export const withBreakpoints = <P extends object>(
   Desktop: React.ComponentType<P>,
 ): React.FC<P> =>
   function WithBreakpoints(props: P) {
-    const {isMobile, isTabletOrMobile} = useWebMediaQueries()
+    const {isMobile, isTablet} = useWebMediaQueries()
 
-    if (isMobile || isNative) {
+    if (isMobile) {
       return <Mobile {...props} />
     }
-    if (isTabletOrMobile) {
+    if (isTablet) {
       return <Tablet {...props} />
     }
     return <Desktop {...props} />

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 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 {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {colors} from 'lib/styles'
-import {HITSLOP_20} from 'lib/constants'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
-import {isWeb} from 'platform/detection'
+import {isNativeTablet, isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 
 export function LoadLatestBtn({
@@ -32,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
@@ -42,7 +45,7 @@ export function LoadLatestBtn({
           (isTallViewport
             ? styles.loadLatestOutOfLine
             : styles.loadLatestInline),
-        isTablet && styles.loadLatestInline,
+        isTablet && !isNativeTablet && styles.loadLatestInline,
         pal.borderDark,
         pal.view,
         showBottomBar && fabMinimalShellTransform,
@@ -72,10 +75,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  loadLatestInline: {
-    // @ts-ignore web only
-    left: 'calc(50vw - 282px)',
-  },
+  // @ts-ignore web only
+  loadLatestInline: isWeb
+    ? {
+        left: 'calc(50vw - 282px)',
+      }
+    : {},
   loadLatestOutOfLine: {
     // @ts-ignore web only
     left: 'calc(50vw - 382px)',

src/view/com/util/post-embeds/ExternalGifEmbed.tsx

@@ -13,9 +13,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {EmbedPlayerParams, getGifDims} from '#/lib/strings/embed-player'
 import {isIOS, isNative, isWeb} from '#/platform/detection'
-import {useExternalEmbedsPrefs} from '#/state/preferences'
+import {EmbedPlayerParams, getGifDims} from 'lib/strings/embed-player'
+import {useExternalEmbedsPrefs} from 'state/preferences'
 import {useDialogControl} from '#/components/Dialog'
 import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'