acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[iPad support] Custom tab navigator for native tablet, with side nav (#3385)

Browse Source 
* fix fab position

* show left nav

* custom tab navigator for tablets

* re-disable right nav on tablet

* fix unread count not being rounded

* use mobile subpage header on native tablet

* fix feed being hidden under header

* rename misleading variable name

* remove drawer on native tablet, as on web tablet

* fix prompt styles on tablet

* import isWeb (ts-ignore 😡)

* disable emoji picker on tablet

* prettier format
This commit is contained in:
Samuel Newman
2024-04-10 14:59:54 +01:00
parent b335a3ca58
commit e81bb86682
14 changed files with 462 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+255 -95
View File
@@ -1,5 +1,6 @@
import * as React from 'react' import * as React from 'react'
import {JSX} from 'react/jsx-runtime' import {JSX} from 'react/jsx-runtime'
import {View} from 'react-native'
import {i18n, MessageDescriptor} from '@lingui/core' import {i18n, MessageDescriptor} from '@lingui/core'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import { import {
@@ -15,11 +16,12 @@ import {
StackActions, StackActions,
} from '@react-navigation/native' } from '@react-navigation/native'
import {timeout} from 'lib/async/timeout' import {init as initAnalytics} from '#/lib/analytics/analytics'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {timeout} from '#/lib/async/timeout'
import {usePalette} from 'lib/hooks/usePalette' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
import {buildStateObject} from 'lib/routes/helpers' import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
import { import {buildStateObject} from '#/lib/routes/helpers'
import type {
AllNavigatorParams, AllNavigatorParams,
BottomTabNavigatorParams, BottomTabNavigatorParams,
FeedsTabNavigatorParams, FeedsTabNavigatorParams,
@@ -28,59 +30,60 @@ import {
MyProfileTabNavigatorParams, MyProfileTabNavigatorParams,
NotificationsTabNavigatorParams, NotificationsTabNavigatorParams,
SearchTabNavigatorParams, SearchTabNavigatorParams,
} from 'lib/routes/types' SideTabNavigatorParams,
import {RouteParams, State} from 'lib/routes/types' } from '#/lib/routes/types'
import {bskyTitle} from 'lib/strings/headings' import {RouteParams, State} from '#/lib/routes/types'
import {isAndroid, isNative} from 'platform/detection' import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' import {bskyTitle} from '#/lib/strings/headings'
import {AppPasswords} from 'view/screens/AppPasswords' import {isAndroid, isNative, isNativeTablet} from '#/platform/detection'
import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' import {useModalControls} from '#/state/modals'
import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' import {useSession} from '#/state/session'
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 {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 { import {
setEmailConfirmationRequested, setEmailConfirmationRequested,
shouldRequestEmailConfirmation, shouldRequestEmailConfirmation,
} from './state/shell/reminders' } from '#/state/shell/reminders'
import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines' import {AppPasswords} from '#/view/screens/AppPasswords'
import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy' import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
import {DebugModScreen} from './view/screens/DebugMod' import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
import {FeedsScreen} from './view/screens/Feeds' import {DebugModScreen} from '#/view/screens/DebugMod'
import {HomeScreen} from './view/screens/Home' import {FeedsScreen} from '#/view/screens/Feeds'
import {LanguageSettingsScreen} from './view/screens/LanguageSettings' import {HomeScreen} from '#/view/screens/Home'
import {ListsScreen} from './view/screens/Lists' import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
import {LogScreen} from './view/screens/Log' import {ListsScreen} from '#/view/screens/Lists'
import {ModerationModlistsScreen} from './view/screens/ModerationModlists' import {LogScreen} from '#/view/screens/Log'
import {NotFoundScreen} from './view/screens/NotFound' import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
import {NotificationsScreen} from './view/screens/Notifications' import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
import {PostLikedByScreen} from './view/screens/PostLikedBy' import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
import {PostRepostedByScreen} from './view/screens/PostRepostedBy' import {NotFoundScreen} from '#/view/screens/NotFound'
import {PostThreadScreen} from './view/screens/PostThread' import {NotificationsScreen} from '#/view/screens/Notifications'
import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy' import {PostLikedByScreen} from '#/view/screens/PostLikedBy'
import {ProfileScreen} from './view/screens/Profile' import {PostRepostedByScreen} from '#/view/screens/PostRepostedBy'
import {ProfileFeedScreen} from './view/screens/ProfileFeed' import {PostThreadScreen} from '#/view/screens/PostThread'
import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy' import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
import {ProfileFollowersScreen} from './view/screens/ProfileFollowers' import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
import {ProfileFollowsScreen} from './view/screens/ProfileFollows' import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
import {ProfileListScreen} from './view/screens/ProfileList' import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
import {SearchScreen} from './view/screens/Search' import {ProfileScreen} from '#/view/screens/Profile'
import {SettingsScreen} from './view/screens/Settings' import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
import {Storybook} from './view/screens/Storybook' import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
import {SupportScreen} from './view/screens/Support' import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
import {TermsOfServiceScreen} from './view/screens/TermsOfService' import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
import {BottomBar} from './view/shell/bottom-bar/BottomBar' import {ProfileListScreen} from '#/view/screens/ProfileList'
import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth' 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 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'
const navigationRef = createNavigationContainerRef<AllNavigatorParams>() const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@@ -91,15 +94,23 @@ const NotificationsTab =
createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>() createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
const MyProfileTab = const MyProfileTab =
createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>() createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
const ListsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
const ModerationTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
const SettingsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>() const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
const MobileTab = createBottomTabNavigator<BottomTabNavigatorParams>()
const TabletTab = createBottomTabNavigator<SideTabNavigatorParams>()
/** /**
* These "common screens" are reused across stacks. * These "common screens" are reused across stacks.
*/ */
function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { function commonScreens(
Stack: typeof HomeTab,
opts?: {unreadCountLabel?: string},
) {
const title = (page: MessageDescriptor) => const title = (page: MessageDescriptor) =>
bskyTitle(i18n._(page), unreadCountLabel) bskyTitle(i18n._(page), opts?.unreadCountLabel)
return ( return (
<> <>
@@ -108,16 +119,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
getComponent={() => NotFoundScreen} getComponent={() => NotFoundScreen}
options={{title: title(msg`Not Found`)}} 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 <Stack.Screen
name="ModerationModlists" name="ModerationModlists"
getComponent={() => ModerationModlistsScreen} getComponent={() => ModerationModlistsScreen}
@@ -133,11 +134,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
getComponent={() => ModerationBlockedAccounts} getComponent={() => ModerationBlockedAccounts}
options={{title: title(msg`Blocked Accounts`), requireAuth: true}} options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
/> />
<Stack.Screen
name="Settings"
getComponent={() => SettingsScreen}
options={{title: title(msg`Settings`), requireAuth: true}}
/>
<Stack.Screen <Stack.Screen
name="LanguageSettings" name="LanguageSettings"
getComponent={() => LanguageSettingsScreen} getComponent={() => LanguageSettingsScreen}
@@ -147,7 +143,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
name="Profile" name="Profile"
getComponent={() => ProfileScreen} getComponent={() => ProfileScreen}
options={({route}) => ({ options={({route}) => ({
title: bskyTitle(`@${route.params.name}`, unreadCountLabel), title: bskyTitle(`@${route.params.name}`, opts?.unreadCountLabel),
})} })}
/> />
<Stack.Screen <Stack.Screen
@@ -281,15 +277,38 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
getComponent={() => HashtagScreen} getComponent={() => HashtagScreen}
options={{title: title(msg`Hashtag`)}} 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 * The TabsNavigator is used by native mobile to represent the routes
* in 3 distinct tab-stacks with a different root screen on each. * in the distinct tab-stacks with a different root screen on each.
*/ */
function TabsNavigator() { function TabsNavigator() {
return isNativeTablet ? <TabNavigatorTablet /> : <TabsNavigatorMobile />
}
function TabsNavigatorMobile() {
const tabBar = React.useCallback( const tabBar = React.useCallback(
(props: JSX.IntrinsicAttributes & BottomTabBarProps) => ( (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
<BottomBar {...props} /> <BottomBar {...props} />
@@ -298,28 +317,88 @@ function TabsNavigator() {
) )
return ( return (
<Tab.Navigator <MobileTab.Navigator
initialRouteName="HomeTab" initialRouteName="HomeTab"
backBehavior="initialRoute" backBehavior="initialRoute"
screenOptions={{headerShown: false, lazy: true}} screenOptions={{headerShown: false, lazy: true}}
tabBar={tabBar}> tabBar={tabBar}>
<Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} /> <MobileTab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
<Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} /> <MobileTab.Screen
<Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} /> name="SearchTab"
<Tab.Screen getComponent={() => SearchTabNavigator}
/>
<MobileTab.Screen
name="FeedsTab"
getComponent={() => FeedsTabNavigator}
/>
<MobileTab.Screen
name="NotificationsTab" name="NotificationsTab"
getComponent={() => NotificationsTabNavigator} getComponent={() => NotificationsTabNavigator}
/> />
<Tab.Screen <MobileTab.Screen
name="MyProfileTab" name="MyProfileTab"
getComponent={() => MyProfileTabNavigator} getComponent={() => MyProfileTabNavigator}
/> />
</Tab.Navigator> </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>
) )
} }
function HomeTabNavigator() { function HomeTabNavigator() {
const pal = usePalette('default') const t = useTheme()
return ( return (
<HomeTab.Navigator <HomeTab.Navigator
@@ -329,7 +408,7 @@ function HomeTabNavigator() {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<HomeTab.Screen <HomeTab.Screen
name="Home" name="Home"
@@ -342,7 +421,7 @@ function HomeTabNavigator() {
} }
function SearchTabNavigator() { function SearchTabNavigator() {
const pal = usePalette('default') const t = useTheme()
return ( return (
<SearchTab.Navigator <SearchTab.Navigator
screenOptions={{ screenOptions={{
@@ -351,7 +430,7 @@ function SearchTabNavigator() {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<SearchTab.Screen name="Search" getComponent={() => SearchScreen} /> <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
{commonScreens(SearchTab as typeof HomeTab)} {commonScreens(SearchTab as typeof HomeTab)}
@@ -360,7 +439,7 @@ function SearchTabNavigator() {
} }
function FeedsTabNavigator() { function FeedsTabNavigator() {
const pal = usePalette('default') const t = useTheme()
return ( return (
<FeedsTab.Navigator <FeedsTab.Navigator
screenOptions={{ screenOptions={{
@@ -369,7 +448,7 @@ function FeedsTabNavigator() {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<FeedsTab.Screen <FeedsTab.Screen
name="Feeds" name="Feeds"
@@ -382,7 +461,7 @@ function FeedsTabNavigator() {
} }
function NotificationsTabNavigator() { function NotificationsTabNavigator() {
const pal = usePalette('default') const t = useTheme()
return ( return (
<NotificationsTab.Navigator <NotificationsTab.Navigator
screenOptions={{ screenOptions={{
@@ -391,7 +470,7 @@ function NotificationsTabNavigator() {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<NotificationsTab.Screen <NotificationsTab.Screen
name="Notifications" name="Notifications"
@@ -404,7 +483,7 @@ function NotificationsTabNavigator() {
} }
function MyProfileTabNavigator() { function MyProfileTabNavigator() {
const pal = usePalette('default') const t = useTheme()
return ( return (
<MyProfileTab.Navigator <MyProfileTab.Navigator
screenOptions={{ screenOptions={{
@@ -413,7 +492,7 @@ function MyProfileTabNavigator() {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<MyProfileTab.Screen <MyProfileTab.Screen
// @ts-ignore // TODO: fix this broken type in ProfileScreen // @ts-ignore // TODO: fix this broken type in ProfileScreen
@@ -428,12 +507,78 @@ 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 * The FlatNavigator is used by Web to represent the routes
* in a single ("flat") stack. * in a single ("flat") stack.
*/ */
const FlatNavigator = () => { const FlatNavigator = () => {
const pal = usePalette('default') const t = useTheme()
const numUnread = useUnreadNotifications() const numUnread = useUnreadNotifications()
const screenListeners = useWebScrollRestoration() const screenListeners = useWebScrollRestoration()
const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread) const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread)
@@ -446,7 +591,7 @@ const FlatNavigator = () => {
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
headerShown: false, headerShown: false,
animationDuration: 250, animationDuration: 250,
contentStyle: pal.view, contentStyle: t.atoms.bg,
}}> }}>
<Flat.Screen <Flat.Screen
name="Home" name="Home"
@@ -468,7 +613,7 @@ const FlatNavigator = () => {
getComponent={() => NotificationsScreen} getComponent={() => NotificationsScreen}
options={{title: title(msg`Notifications`), requireAuth: true}} options={{title: title(msg`Notifications`), requireAuth: true}}
/> />
{commonScreens(Flat as typeof HomeTab, numUnread)} {commonScreens(Flat as typeof HomeTab, {unreadCountLabel: numUnread})}
</Flat.Navigator> </Flat.Navigator>
) )
} }
@@ -515,12 +660,26 @@ const LINKING = {
if (name === 'Search') { if (name === 'Search') {
return buildStateObject('SearchTab', 'Search', params) return buildStateObject('SearchTab', 'Search', params)
} }
if (name === 'Feeds') {
return buildStateObject('FeedsTab', 'Feeds', params)
}
if (name === 'Notifications') { if (name === 'Notifications') {
return buildStateObject('NotificationsTab', 'Notifications', params) return buildStateObject('NotificationsTab', 'Notifications', params)
} }
if (name === 'Home') { if (name === 'Home') {
return buildStateObject('HomeTab', 'Home', params) 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 // 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, [ return buildStateObject('HomeTab', name, params, [
{ {
@@ -703,5 +862,6 @@ export {
reset, reset,
resetToTab, resetToTab,
RoutesContainer, RoutesContainer,
TabNavigatorTablet,
TabsNavigator, TabsNavigator,
} }
src/components/Prompt.tsx
+7 -2
View File
@@ -3,6 +3,7 @@ import {View} from 'react-native'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {isNativeTablet} from '#/platform/detection'
import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonColor, ButtonText} from '#/components/Button' import {Button, ButtonColor, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog' import * as Dialog from '#/components/Dialog'
@@ -43,7 +44,11 @@ export function Outer({
<Dialog.ScrollableInner <Dialog.ScrollableInner
accessibilityLabelledBy={titleId} accessibilityLabelledBy={titleId}
accessibilityDescribedBy={descriptionId} accessibilityDescribedBy={descriptionId}
style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}> style={[
gtMobile && !isNativeTablet
? {width: 'auto', maxWidth: 400}
: a.w_full,
]}>
{children} {children}
</Dialog.ScrollableInner> </Dialog.ScrollableInner>
</Context.Provider> </Context.Provider>
@@ -81,7 +86,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
a.w_full, a.w_full,
a.gap_md, a.gap_md,
a.justify_end, a.justify_end,
gtMobile gtMobile && !isNativeTablet
? [a.flex_row, a.flex_row_reverse, a.justify_start] ? [a.flex_row, a.flex_row_reverse, a.justify_start]
: [a.flex_col], : [a.flex_col],
]}> ]}>
src/lib/routes/types.ts
+11 -1
View File
@@ -47,6 +47,17 @@ export type BottomTabNavigatorParams = CommonNavigatorParams & {
MyProfileTab: undefined 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 & { export type HomeTabNavigatorParams = CommonNavigatorParams & {
Home: undefined Home: undefined
} }
@@ -72,7 +83,6 @@ export type FlatNavigatorParams = CommonNavigatorParams & {
Search: {q?: string} Search: {q?: string}
Feeds: undefined Feeds: undefined
Notifications: undefined Notifications: undefined
Hashtag: {tag: string; author?: string}
} }
export type AllNavigatorParams = CommonNavigatorParams & { export type AllNavigatorParams = CommonNavigatorParams & {
src/view/com/composer/Composer.tsx
+2 -8
View File
@@ -44,13 +44,7 @@ import {insertMentionAt} from 'lib/strings/mention-manip'
import {shortenLinks} from 'lib/strings/rich-text-manip' import {shortenLinks} from 'lib/strings/rich-text-manip'
import {toShortUrl} from 'lib/strings/url-helpers' import {toShortUrl} from 'lib/strings/url-helpers'
import {colors, gradients, s} from 'lib/styles' import {colors, gradients, s} from 'lib/styles'
import { import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
isAndroid,
isIOS,
isNative,
isNativeTablet,
isWeb,
} from 'platform/detection'
import {useDialogStateControlContext} from 'state/dialogs' import {useDialogStateControlContext} from 'state/dialogs'
import {GalleryModel} from 'state/models/media/gallery' import {GalleryModel} from 'state/models/media/gallery'
import {ComposerOpts} from 'state/shell/composer' import {ComposerOpts} from 'state/shell/composer'
@@ -490,7 +484,7 @@ export const ComposePost = observer(function ComposePost({
<OpenCameraBtn gallery={gallery} /> <OpenCameraBtn gallery={gallery} />
</> </>
) : null} ) : null}
{!(isMobile || isNativeTablet) ? ( {!isMobile && !isNative ? (
<Pressable <Pressable
onPress={onEmojiButtonPress} onPress={onEmojiButtonPress}
accessibilityRole="button" accessibilityRole="button"
src/view/com/home/HomeHeaderLayoutMobile.tsx
+31 -26
View File
@@ -1,23 +1,23 @@
import React from 'react' import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette' import Animated from 'react-native-reanimated'
import {Link} from '../util/Link'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {HITSLOP_10} from 'lib/constants'
import Animated from 'react-native-reanimated'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useShellLayout} from '#/state/shell/shell-layout' import {useShellLayout} from '#/state/shell/shell-layout'
import {isWeb} from 'platform/detection' import {HITSLOP_10} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {usePalette} from 'lib/hooks/usePalette'
import {isNativeTablet, isWeb} from 'platform/detection'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
import {IS_DEV} from '#/env'
import {atoms} from '#/alf' import {atoms} from '#/alf'
import {Link as Link2} from '#/components/Link'
import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
import {Link as Link2} from '#/components/Link'
import {IS_DEV} from '#/env'
import {Link} from '../util/Link'
export function HomeHeaderLayoutMobile({ export function HomeHeaderLayoutMobile({
children, children,
@@ -42,23 +42,28 @@ export function HomeHeaderLayoutMobile({
headerHeight.value = e.nativeEvent.layout.height headerHeight.value = e.nativeEvent.layout.height
}}> }}>
<View style={[pal.view, styles.topBar]}> <View style={[pal.view, styles.topBar]}>
<View style={[pal.view, {width: 100}]}> {!isNativeTablet ? (
<TouchableOpacity <View style={[pal.view, {width: 100}]}>
testID="viewHeaderDrawerBtn" <TouchableOpacity
onPress={onPressAvi} testID="viewHeaderDrawerBtn"
accessibilityRole="button" onPress={onPressAvi}
accessibilityLabel={_(msg`Open navigation`)} accessibilityRole="button"
accessibilityHint={_( accessibilityLabel={_(msg`Open navigation`)}
msg`Access profile and other navigation links`, accessibilityHint={_(
)} msg`Access profile and other navigation links`,
hitSlop={HITSLOP_10}> )}
<FontAwesomeIcon hitSlop={HITSLOP_10}>
icon="bars" <FontAwesomeIcon
size={18} icon="bars"
color={pal.colors.textLight} size={18}
/> color={pal.colors.textLight}
</TouchableOpacity> />
</View> </TouchableOpacity>
</View>
) : (
// subtract width of LeftNav
<View style={{width: 100 - 77}} />
)}
<View> <View>
<Logo width={30} /> <Logo width={30} />
</View> </View>
src/view/com/profile/ProfileSubpageHeader.tsx
+20 -17
View File
@@ -1,24 +1,25 @@
import React from 'react' import React from 'react'
import {Pressable, StyleSheet, View} from 'react-native' import {Pressable, StyleSheet, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 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 {useNavigation} from '@react-navigation/native'
import {emitSoftReset} from '#/state/events'
import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
import {useSetDrawerOpen} from '#/state/shell'
import {BACK_HITSLOP} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 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 {makeProfileLink} from 'lib/routes/links'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {BACK_HITSLOP} from 'lib/constants' import {sanitizeHandle} from 'lib/strings/handles'
import {isNative} from 'platform/detection' import {isNative, isNativeTablet} 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({ export function ProfileSubpageHeader({
isLoading, isLoading,
@@ -71,9 +72,11 @@ export function ProfileSubpageHeader({
} }
}, [openLightbox, avatar]) }, [openLightbox, avatar])
const isMobileLayout = isMobile || isNativeTablet
return ( return (
<CenteredView style={pal.view}> <CenteredView style={pal.view}>
{isMobile && ( {isMobileLayout && (
<View <View
style={[ style={[
{ {
@@ -82,7 +85,7 @@ export function ProfileSubpageHeader({
borderBottomWidth: 1, borderBottomWidth: 1,
paddingTop: isNative ? 0 : 8, paddingTop: isNative ? 0 : 8,
paddingBottom: 8, paddingBottom: 8,
paddingHorizontal: isMobile ? 12 : 14, paddingHorizontal: isMobileLayout ? 12 : 14,
}, },
pal.border, pal.border,
]}> ]}>
@@ -119,7 +122,7 @@ export function ProfileSubpageHeader({
gap: 10, gap: 10,
paddingTop: 14, paddingTop: 14,
paddingBottom: 6, paddingBottom: 6,
paddingHorizontal: isMobile ? 12 : 14, paddingHorizontal: isMobileLayout ? 12 : 14,
}}> }}>
<Pressable <Pressable
testID="headerAviButton" testID="headerAviButton"
@@ -170,7 +173,7 @@ export function ProfileSubpageHeader({
</Text> </Text>
)} )}
</View> </View>
{!isMobile && ( {!isMobileLayout && (
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
src/view/com/util/SimpleViewHeader.tsx
+7 -6
View File
@@ -8,13 +8,14 @@ import {
} from 'react-native' } from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native' import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views'
import {isNativeTablet, isWeb} from '#/platform/detection'
import {useSetDrawerOpen} from '#/state/shell'
import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types' 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} const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -71,13 +72,13 @@ export function SimpleViewHeader({
icon="angle-left" icon="angle-left"
style={[styles.backIcon, pal.text]} style={[styles.backIcon, pal.text]}
/> />
) : ( ) : !isNativeTablet ? (
<FontAwesomeIcon <FontAwesomeIcon
size={18} size={18}
icon="bars" icon="bars"
style={[styles.backIcon, pal.textLight]} style={[styles.backIcon, pal.textLight]}
/> />
)} ) : null}
</TouchableOpacity> </TouchableOpacity>
) : null} ) : null}
{children} {children}
src/view/com/util/fab/FABInner.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {LinearGradient} from 'expo-linear-gradient' import {LinearGradient} from 'expo-linear-gradient'
import {isNativeTablet, isWeb} from '#/platform/detection' import {isWeb} from '#/platform/detection'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {clamp} from 'lib/numbers' import {clamp} from 'lib/numbers'
@@ -40,7 +40,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
styles.outer, styles.outer,
size, size,
tabletSpacing, tabletSpacing,
(isMobile || isNativeTablet) && fabMinimalShellTransform, isMobile && fabMinimalShellTransform,
]}> ]}>
<LinearGradient <LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]} colors={[gradients.blueLight.start, gradients.blueLight.end]}
src/view/com/util/load-latest/LoadLatestBtn.tsx
+16 -15
View File
@@ -4,15 +4,16 @@ import Animated from 'react-native-reanimated'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useMediaQuery} from 'react-responsive' import {useMediaQuery} from 'react-responsive'
import {HITSLOP_20} from 'lib/constants' import {HITSLOP_20} from '#/lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {colors} from '#/lib/styles'
import {colors} from 'lib/styles' import {isNativeTablet, isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
import {useTheme} from '#/alf'
const AnimatedTouchableOpacity = const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity) Animated.createAnimatedComponent(TouchableOpacity)
import {isNativeTablet, isWeb} from 'platform/detection'
import {useSession} from 'state/session'
export function LoadLatestBtn({ export function LoadLatestBtn({
onPress, onPress,
@@ -23,7 +24,7 @@ export function LoadLatestBtn({
label: string label: string
showIndicator: boolean showIndicator: boolean
}) { }) {
const pal = usePalette('default') const t = useTheme()
const {hasSession} = useSession() const {hasSession} = useSession()
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries() const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode() const {fabMinimalShellTransform} = useMinimalShellMode()
@@ -33,9 +34,7 @@ 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 // 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) // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
const showBottomBar = hasSession const showBottomBar = hasSession ? isMobile : isTabletOrMobile
? isMobile || isNativeTablet
: isTabletOrMobile
return ( return (
<AnimatedTouchableOpacity <AnimatedTouchableOpacity
@@ -46,8 +45,8 @@ export function LoadLatestBtn({
? styles.loadLatestOutOfLine ? styles.loadLatestOutOfLine
: styles.loadLatestInline), : styles.loadLatestInline),
isTablet && !isNativeTablet && styles.loadLatestInline, isTablet && !isNativeTablet && styles.loadLatestInline,
pal.borderDark, t.atoms.border_contrast_high,
pal.view, t.atoms.bg,
showBottomBar && fabMinimalShellTransform, showBottomBar && fabMinimalShellTransform,
]} ]}
onPress={onPress} onPress={onPress}
@@ -55,8 +54,10 @@ export function LoadLatestBtn({
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={label} accessibilityLabel={label}
accessibilityHint=""> accessibilityHint="">
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> <FontAwesomeIcon icon="angle-up" color={t.atoms.text.color} size={19} />
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />} {showIndicator && (
<View style={[styles.indicator, t.atoms.border_contrast_high]} />
)}
</AnimatedTouchableOpacity> </AnimatedTouchableOpacity>
) )
} }
src/view/screens/Search/Search.tsx
+3 -3
View File
@@ -461,7 +461,7 @@ export function SearchScreen(
const moderationOpts = useModerationOpts() const moderationOpts = useModerationOpts()
const search = useActorAutocompleteFn() const search = useActorAutocompleteFn()
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries() const {isTabletOrDesktop, isMobile} = useWebMediaQueries()
const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>( const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
undefined, undefined,
@@ -637,8 +637,8 @@ export function SearchScreen(
pal.view, pal.view,
isTabletOrDesktop && {paddingTop: 10}, isTabletOrDesktop && {paddingTop: 10},
]} ]}
sideBorders={isTabletOrDesktop}> sideBorders={isMobile}>
{isTabletOrMobile && ( {isMobile && (
<Pressable <Pressable
testID="viewHeaderBackOrMenuBtn" testID="viewHeaderBackOrMenuBtn"
onPress={onPressMenu} onPress={onPressMenu}
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+8 -10
View File
@@ -1,11 +1,8 @@
import * as React from 'react' import * as React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {PWI_ENABLED, NEW_ONBOARDING_ENABLED} from '#/lib/build-flags'
// Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts // Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts
// MIT License // MIT License
// Copyright (c) 2017 React Navigation Contributors // Copyright (c) 2017 React Navigation Contributors
import { import {
createNavigatorFactory, createNavigatorFactory,
EventArg, EventArg,
@@ -21,24 +18,25 @@ import type {
NativeStackNavigationEventMap, NativeStackNavigationEventMap,
NativeStackNavigationOptions, NativeStackNavigationOptions,
} from '@react-navigation/native-stack' } from '@react-navigation/native-stack'
import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types'
import {NativeStackView} from '@react-navigation/native-stack' import {NativeStackView} from '@react-navigation/native-stack'
import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types'
import {BottomBarWeb} from './bottom-bar/BottomBarWeb' import {NEW_ONBOARDING_ENABLED, PWI_ENABLED} from '#/lib/build-flags'
import {DesktopLeftNav} from './desktop/LeftNav'
import {DesktopRightNav} from './desktop/RightNav'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useSession} from '#/state/session'
import {useOnboardingState} from '#/state/shell' import {useOnboardingState} from '#/state/shell'
import { import {
useLoggedOutView, useLoggedOutView,
useLoggedOutViewControls, useLoggedOutViewControls,
} from '#/state/shell/logged-out' } from '#/state/shell/logged-out'
import {useSession} from '#/state/session'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
import {Deactivated} from '#/screens/Deactivated' import {Deactivated} from '#/screens/Deactivated'
import {Onboarding as NewOnboarding} from '#/screens/Onboarding'
import {LoggedOut} from '../com/auth/LoggedOut' import {LoggedOut} from '../com/auth/LoggedOut'
import {Onboarding} from '../com/auth/Onboarding' import {Onboarding} from '../com/auth/Onboarding'
import {Onboarding as NewOnboarding} from '#/screens/Onboarding' import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
import {LeftNav} from './desktop/LeftNav'
import {DesktopRightNav} from './desktop/RightNav'
type NativeStackNavigationOptionsWithAuth = NativeStackNavigationOptions & { type NativeStackNavigationOptionsWithAuth = NativeStackNavigationOptions & {
requireAuth?: boolean requireAuth?: boolean
@@ -149,7 +147,7 @@ function NativeStackNavigator({
{isWeb && showBottomBar && <BottomBarWeb />} {isWeb && showBottomBar && <BottomBarWeb />}
{isWeb && !showBottomBar && ( {isWeb && !showBottomBar && (
<> <>
<DesktopLeftNav /> <LeftNav />
<DesktopRightNav routeName={activeRoute.name} /> <DesktopRightNav routeName={activeRoute.name} />
</> </>
)} )}
src/view/shell/desktop/LeftNav.tsx
+47 -42
View File
@@ -1,52 +1,54 @@
import React from 'react' import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {PressableWithHover} from 'view/com/util/PressableWithHover' import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import { import {
useLinkProps, useLinkProps,
useNavigation, useNavigation,
useNavigationState, useNavigationState,
} from '@react-navigation/native' } from '@react-navigation/native'
import {
FontAwesomeIcon, import {isInvalidHandle} from '#/lib/strings/handles'
FontAwesomeIconStyle, import {isWeb} from '#/platform/detection'
} from '@fortawesome/react-native-fontawesome' import {emitSoftReset} from '#/state/events'
import {Text} from 'view/com/util/text/Text' import {useFetchHandle} from '#/state/queries/handle'
import {UserAvatar} from 'view/com/util/UserAvatar' import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {Link} from 'view/com/util/Link' import {useProfileQuery} from '#/state/queries/profile'
import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {useSession} from '#/state/session'
import {useComposerControls} from '#/state/shell/composer'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {s, colors} from 'lib/styles'
import { import {
HomeIcon,
HomeIconSolid,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
BellIcon, BellIcon,
BellIconSolid, BellIconSolid,
UserIcon,
UserIconSolid,
CogIcon, CogIcon,
CogIconSolid, CogIconSolid,
ComposeIcon2, ComposeIcon2,
ListIcon,
HashtagIcon,
HandIcon, HandIcon,
HashtagIcon,
HomeIcon,
HomeIconSolid,
ListIcon,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
UserIcon,
UserIconSolid,
} from 'lib/icons' } from 'lib/icons'
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
import {router} from '../../../routes'
import {makeProfileLink} from 'lib/routes/links' import {makeProfileLink} from 'lib/routes/links'
import {useLingui} from '@lingui/react' import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
import {Trans, msg} from '@lingui/macro' import {colors, s} from 'lib/styles'
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 {NavSignupCard} from '#/view/shell/NavSignupCard'
import {isInvalidHandle} from '#/lib/strings/handles' 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 {router} from '../../../routes'
function ProfileCard() { function ProfileCard() {
const {currentAccount} = useSession() const {currentAccount} = useSession()
@@ -266,7 +268,7 @@ function ComposeBtn() {
) )
} }
export function DesktopLeftNav() { export function LeftNav() {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
@@ -445,17 +447,19 @@ export function DesktopLeftNav() {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
leftNav: { // @ts-ignore web only
// @ts-ignore web only leftNav: isWeb
position: 'fixed', ? {
top: 10, position: 'fixed',
// @ts-ignore web only top: 10,
left: 'calc(50vw - 300px - 220px - 20px)', left: 'calc(50vw - 300px - 220px - 20px)',
width: 220, width: 220,
// @ts-ignore web only maxHeight: 'calc(100vh - 10px)',
maxHeight: 'calc(100vh - 10px)', overflowY: 'auto',
overflowY: 'auto', }
}, : {
paddingTop: 12,
},
leftNavTablet: { leftNavTablet: {
top: 0, top: 0,
left: 0, left: 0,
@@ -513,6 +517,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
paddingHorizontal: 4, paddingHorizontal: 4,
borderRadius: 6, borderRadius: 6,
overflow: 'hidden',
}, },
navItemCountTablet: { navItemCountTablet: {
left: 18, left: 18,
src/view/shell/desktop/RightNav.tsx
+22 -18
View File
@@ -1,16 +1,17 @@
import React from 'react' import React from 'react'
import {StyleSheet, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
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 {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useSession} from '#/state/session' 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'
export function DesktopRightNav({routeName}: {routeName: string}) { export function DesktopRightNav({routeName}: {routeName: string}) {
const pal = usePalette('default') const pal = usePalette('default')
@@ -97,15 +98,18 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
rightNav: { // @ts-ignore web only
// @ts-ignore web only rightNav: isWeb
position: 'fixed', ? {
// @ts-ignore web only position: 'fixed',
left: 'calc(50vw + 300px + 20px)', left: 'calc(50vw + 300px + 20px)',
width: 300, width: 300,
maxHeight: '100%', maxHeight: '100%',
overflowY: 'auto', overflowY: 'auto',
}, }
: {
width: 300,
},
message: { message: {
paddingVertical: 18, paddingVertical: 18,
src/view/shell/index.tsx
+31 -26
View File
@@ -1,37 +1,38 @@
import React from 'react' import React from 'react'
import {StatusBar} from 'expo-status-bar'
import { import {
BackHandler,
DimensionValue, DimensionValue,
StyleSheet, StyleSheet,
useWindowDimensions, useWindowDimensions,
View, View,
BackHandler,
} from 'react-native' } from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Drawer} from 'react-native-drawer-layout' import {Drawer} from 'react-native-drawer-layout'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {StatusBar} from 'expo-status-bar'
import {useNavigationState} from '@react-navigation/native' import {useNavigationState} from '@react-navigation/native'
import {ModalsContainer} from 'view/com/modals/Modal'
import {Lightbox} from 'view/com/lightbox/Lightbox' import {useSession} from '#/state/session'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {DrawerContent} from './Drawer'
import {Composer} from './Composer'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
import {RoutesContainer, TabsNavigator} from '../../Navigation'
import {isStateAtTabRoot} from 'lib/routes/helpers'
import { import {
useIsDrawerOpen, useIsDrawerOpen,
useSetDrawerOpen,
useIsDrawerSwipeDisabled, useIsDrawerSwipeDisabled,
useSetDrawerOpen,
} from '#/state/shell' } from '#/state/shell'
import {isAndroid} from 'platform/detection'
import {useSession} from '#/state/session'
import {useCloseAnyActiveElement} from '#/state/util' import {useCloseAnyActiveElement} from '#/state/util'
import {usePalette} from 'lib/hooks/usePalette'
import * as notifications from 'lib/notifications/notifications' import * as notifications from 'lib/notifications/notifications'
import {Outlet as PortalOutlet} from '#/components/Portal' import {isStateAtTabRoot} from 'lib/routes/helpers'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {useTheme} from 'lib/ThemeContext'
import {isAndroid, isNativeTablet} from 'platform/detection'
import {useDialogStateContext} from 'state/dialogs' import {useDialogStateContext} from 'state/dialogs'
import Animated from 'react-native-reanimated' import {Lightbox} from 'view/com/lightbox/Lightbox'
import {ModalsContainer} from 'view/com/modals/Modal'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {Outlet as PortalOutlet} from '#/components/Portal'
import {RoutesContainer, TabsNavigator} from '../../Navigation'
import {Composer} from './Composer'
import {DrawerContent} from './Drawer'
function ShellInner() { function ShellInner() {
const isDrawerOpen = useIsDrawerOpen() const isDrawerOpen = useIsDrawerOpen()
@@ -87,15 +88,19 @@ function ShellInner() {
style={containerPadding} style={containerPadding}
importantForAccessibility={importantForAccessibility}> importantForAccessibility={importantForAccessibility}>
<ErrorBoundary> <ErrorBoundary>
<Drawer {!isNativeTablet ? (
renderDrawerContent={renderDrawerContent} <Drawer
open={isDrawerOpen} renderDrawerContent={renderDrawerContent}
onOpen={onOpenDrawer} open={isDrawerOpen}
onClose={onCloseDrawer} onOpen={onOpenDrawer}
swipeEdgeWidth={winDim.width / 2} onClose={onCloseDrawer}
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}> swipeEdgeWidth={winDim.width / 2}
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
<TabsNavigator />
</Drawer>
) : (
<TabsNavigator /> <TabsNavigator />
</Drawer> )}
</ErrorBoundary> </ErrorBoundary>
</Animated.View> </Animated.View>
<Composer winHeight={winDim.height} /> <Composer winHeight={winDim.height} />