diff --git a/src/Navigation.tsx b/src/Navigation.tsx index bff1c43568..ab40ff4220 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -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() @@ -94,23 +91,15 @@ const NotificationsTab = createNativeStackNavigatorWithAuth() const MyProfileTab = createNativeStackNavigatorWithAuth() -const ListsTab = createNativeStackNavigatorWithAuth() -const ModerationTab = createNativeStackNavigatorWithAuth() -const SettingsTab = createNativeStackNavigatorWithAuth() const Flat = createNativeStackNavigatorWithAuth() - -const MobileTab = createBottomTabNavigator() -const TabletTab = createBottomTabNavigator() +const Tab = createBottomTabNavigator() /** * 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`)}} /> + + ModerationScreen} + options={{title: title(msg`Moderation`), requireAuth: true}} + /> ModerationModlistsScreen} @@ -134,6 +133,11 @@ function commonScreens( getComponent={() => ModerationBlockedAccounts} options={{title: title(msg`Blocked Accounts`), requireAuth: true}} /> + SettingsScreen} + options={{title: title(msg`Settings`), requireAuth: true}} + /> 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), })} /> HashtagScreen} options={{title: title(msg`Hashtag`)}} /> - {!isNativeTablet && ( - <> - ModerationScreen} - options={{title: title(msg`Moderation`), requireAuth: true}} - /> - - 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 ? : -} - -function TabsNavigatorMobile() { const tabBar = React.useCallback( (props: JSX.IntrinsicAttributes & BottomTabBarProps) => ( @@ -317,88 +298,28 @@ function TabsNavigatorMobile() { ) return ( - - HomeTabNavigator} /> - SearchTabNavigator} - /> - FeedsTabNavigator} - /> - HomeTabNavigator} /> + SearchTabNavigator} /> + FeedsTabNavigator} /> + NotificationsTabNavigator} /> - MyProfileTabNavigator} /> - - ) -} - -/** - * 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 ( - - - - HomeTabNavigator} - /> - SearchTabNavigator} - /> - FeedsTabNavigator} - /> - NotificationsTabNavigator} - /> - ListsTabNavigator} - /> - ModerationTabNavigator} - /> - MyProfileTabNavigator} - /> - SettingsTabNavigator} - /> - - + ) } function HomeTabNavigator() { - const t = useTheme() + const pal = usePalette('default') return ( SearchScreen} /> {commonScreens(SearchTab as typeof HomeTab)} @@ -439,7 +360,7 @@ function SearchTabNavigator() { } function FeedsTabNavigator() { - const t = useTheme() + const pal = usePalette('default') return ( - ListsScreen} - options={{requireAuth: true}} - /> - {commonScreens(ListsTab as typeof HomeTab)} - - ) -} - -function ModerationTabNavigator() { - const t = useTheme() - return ( - - ModerationScreen} - options={{requireAuth: true}} - /> - {commonScreens(ModerationTab as typeof HomeTab)} - - ) -} - -function SettingsTabNavigator() { - const t = useTheme() - return ( - - SettingsScreen} - options={{requireAuth: true}} - /> - {commonScreens(SettingsTab as typeof HomeTab)} - - ) -} - /** * 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, }}> { getComponent={() => NotificationsScreen} options={{title: title(msg`Notifications`), requireAuth: true}} /> - {commonScreens(Flat as typeof HomeTab, {unreadCountLabel: numUnread})} + {commonScreens(Flat as typeof HomeTab, numUnread)} ) } @@ -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, } diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 8b8ec8a46f..c92fe26523 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -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({ + style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}> {children} @@ -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], ]}> diff --git a/src/lib/hooks/useNavigationTabState.ts b/src/lib/hooks/useNavigationTabState.ts index 348df2a904..3a05fe524f 100644 --- a/src/lib/hooks/useNavigationTabState.ts +++ b/src/lib/hooks/useNavigationTabState.ts @@ -1,5 +1,4 @@ import {useNavigationState} from '@react-navigation/native' - import {getTabState, TabState} from 'lib/routes/helpers' export function useNavigationTabState() { diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index db2044bfc0..95af2f237d 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -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 & { diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index d4a2353f12..a3ee97a2ed 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -484,7 +484,7 @@ export const ComposePost = observer(function ComposePost({ ) : null} - {!isMobile && !isNative ? ( + {!isMobile ? ( - {!isNativeTablet ? ( - - - - - - ) : ( - // subtract width of LeftNav - - )} + + + + + diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 29dc457c2c..eaf00f3e66 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -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 ( - {isMobileLayout && ( + {isMobile && ( @@ -121,7 +119,7 @@ export function ProfileSubpageHeader({ gap: 10, paddingTop: 14, paddingBottom: 6, - paddingHorizontal: isMobileLayout ? 12 : 14, + paddingHorizontal: isMobile ? 12 : 14, }}> )} - {!isMobileLayout && ( + {!isMobile && ( - ) : !isNativeTablet ? ( + ) : ( - ) : null} + )} ) : null} {children} diff --git a/src/view/com/util/fab/FAB.web.tsx b/src/view/com/util/fab/FAB.web.tsx index c55337804c..0a8831fa92 100644 --- a/src/view/com/util/fab/FAB.web.tsx +++ b/src/view/com/util/fab/FAB.web.tsx @@ -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() diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index a01756da06..cdf11c76e4 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/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, ]}> - - {showIndicator && ( - - )} + + {showIndicator && } ) } diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 3827e1cb13..c0f4cf1950 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -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( undefined, @@ -637,8 +637,8 @@ export function SearchScreen( pal.view, isTabletOrDesktop && {paddingTop: 10}, ]} - sideBorders={isMobile}> - {isMobile && ( + sideBorders={isTabletOrDesktop}> + {isTabletOrMobile && ( } {isWeb && !showBottomBar && ( <> - + )} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 79787b0b4e..097ca2fbfb 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -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, diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 3f97f42b3f..c1f4987248 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -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, diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 2a72f243b8..f29183095a 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -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}> - {!isNativeTablet ? ( - - - - ) : ( + - )} +