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

collapse left nav, remove fab in tablet mode

Browse Source
This commit is contained in:
Samuel Newman
2026-04-15 16:24:49 +03:00
parent f5a3487566
commit a178cff998
4 changed files with 119 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx
+16 -7
View File
@@ -12,8 +12,11 @@ import {IS_WEB} from '#/env'
import {ChatList, Header as ChatListHeader} from '../../ChatList'
import {SplitViewProvider} from './context'
const CENTER_COLUMN_WIDTH = 600
const LEFT_NAV_FULL_WIDTH = 245
const LEFT_NAV_MINIMAL_WIDTH = 86
const RIGHT_NAV_WIDTH = 330 + 28
const RIGHT_NAV_FULL_WIDTH = 330 + 28
const RIGHT_NAV_MINIMAL_WIDTH = 280 + 28
type LayoutProps = ScreenLayoutArgs<
AllNavigatorParams,
@@ -44,20 +47,26 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
? route?.params?.conversation
: undefined
const leftNavWidth = centerColumnOffset
? LEFT_NAV_MINIMAL_WIDTH
: LEFT_NAV_FULL_WIDTH
const rightNavWidth = centerColumnOffset
? RIGHT_NAV_MINIMAL_WIDTH
: RIGHT_NAV_FULL_WIDTH
const containerWidth =
leftNavWidth - LEFT_NAV_MINIMAL_WIDTH + CENTER_COLUMN_WIDTH + rightNavWidth
return (
<View
style={[
a.flex_1,
a.flex_row,
a.mx_auto,
{maxWidth: centerColumnOffset ? 900 : 950},
{maxWidth: containerWidth},
{
transform: [
{
translateX: centerColumnOffset
? LEFT_NAV_MINIMAL_WIDTH / 2
: RIGHT_NAV_WIDTH / 2,
},
{translateX: LEFT_NAV_MINIMAL_WIDTH / 2},
{translateX: web(SCROLLBAR_OFFSET) ?? 0},
],
},
src/view/com/util/fab/FAB.web.tsx
+5 -5
View File
@@ -1,13 +1,13 @@
import {View} from 'react-native'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useBreakpoints} from '#/alf'
import {FABInner, type FABProps} from './FABInner'
export const FAB = (_opts: FABProps) => {
const {isDesktop} = useWebMediaQueries()
export const FAB = (props: FABProps) => {
const {gtMobile} = useBreakpoints()
if (!isDesktop) {
return <FABInner {..._opts} />
if (!gtMobile) {
return <FABInner {...props} />
}
return <View />
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+5 -1
View File
@@ -200,7 +200,11 @@ function NativeStackNavigator({
</View>
{IS_WEB && (
<>
{showBottomBar ? <BottomBarWeb /> : <DesktopLeftNav />}
{showBottomBar ? (
<BottomBarWeb />
) : (
<DesktopLeftNav routeName={activeRoute.name} />
)}
{!isMobile && <DesktopRightNav routeName={activeRoute.name} />}
</>
)}
src/view/shell/desktop/LeftNav.tsx
+93 -62
View File
@@ -8,8 +8,6 @@ import {useNavigation, useNavigationState} from '@react-navigation/native'
import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
import {makeProfileLink} from '#/lib/routes/links'
import {
@@ -30,7 +28,14 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {PressableWithHover} from '#/view/com/util/PressableWithHover'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {NavSignupCard} from '#/view/shell/NavSignupCard'
import {atoms as a, tokens, useLayoutBreakpoints, useTheme, web} from '#/alf'
import {
atoms as a,
tokens,
useBreakpoints,
useLayoutBreakpoints,
useTheme,
web,
} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {type DialogControlProps} from '#/components/Dialog'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
@@ -81,7 +86,7 @@ import {router} from '../../../routes'
const NAV_ICON_WIDTH = 28
function ProfileCard() {
function ProfileCard({minimal}: {minimal: boolean}) {
const {currentAccount, accounts} = useSession()
const {logoutEveryAccount} = useSessionApi()
const {isLoading, data} = useProfilesQuery({
@@ -89,7 +94,6 @@ function ProfileCard() {
})
const profiles = data?.profiles
const signOutPromptControl = Prompt.usePromptControl()
const {leftNavMinimal} = useLayoutBreakpoints()
const {_} = useLingui()
const t = useTheme()
@@ -106,7 +110,7 @@ function ProfileCard() {
const {isActive: live} = useActorStatus(profile)
return (
<View style={[a.my_md, !leftNavMinimal && [a.w_full, a.align_start]]}>
<View style={[a.my_md, !minimal && [a.w_full, a.align_start]]}>
{!isLoading && profile ? (
<Menu.Root>
<Menu.Trigger label={_(msg`Switch accounts`)}>
@@ -125,7 +129,7 @@ function ProfileCard() {
a.align_center,
a.flex_row,
{gap: 6},
!leftNavMinimal && [a.pl_lg, a.pr_md],
!minimal && [a.pl_lg, a.pr_md],
]}>
<View
style={[
@@ -138,8 +142,8 @@ function ProfileCard() {
a.z_10,
active && {
transform: [
{scale: !leftNavMinimal ? 2 / 3 : 0.8},
{translateX: !leftNavMinimal ? -22 : 0},
{scale: !minimal ? 2 / 3 : 0.8},
{translateX: !minimal ? -22 : 0},
],
},
]}>
@@ -150,7 +154,7 @@ function ProfileCard() {
live={live}
/>
</View>
{!leftNavMinimal && (
{!minimal && (
<>
<View
style={[
@@ -203,7 +207,7 @@ function ProfileCard() {
<LoadingPlaceholder
width={size}
height={size}
style={[{borderRadius: size}, !leftNavMinimal && a.ml_lg]}
style={[{borderRadius: size}, !minimal && a.ml_lg]}
/>
)}
<Prompt.Basic
@@ -374,12 +378,21 @@ interface NavItemProps {
icon: JSX.Element
iconFilled: JSX.Element
label: string
minimal: boolean
}
function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
function NavItem({
count,
hasNew,
href,
icon,
iconFilled,
label,
minimal,
}: NavItemProps) {
const t = useTheme()
const {_} = useLingui()
const {currentAccount} = useSession()
const {leftNavMinimal} = useLayoutBreakpoints()
const [pathName] = useMemo(() => router.matchPath(href), [href])
const currentRouteInfo = useNavigationState(state => {
if (!state) {
@@ -417,7 +430,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
a.flex_row,
a.align_center,
a.p_md,
a.rounded_sm,
a.rounded_full,
a.gap_sm,
a.outline_inset_1,
a.transition_color,
@@ -438,9 +451,9 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
width: 24,
height: 24,
},
leftNavMinimal && {
width: 40,
height: 40,
minimal && {
width: 30,
height: 30,
},
]}>
{isCurrent ? iconFilled : icon}
@@ -479,7 +492,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
paddingVertical: 1,
minWidth: 16,
},
leftNavMinimal && [
minimal && [
{
top: '10%',
left: count.length === 1 ? 20 : 16,
@@ -502,7 +515,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
right: -2,
top: -4,
},
leftNavMinimal && {
minimal && {
right: 4,
top: 2,
},
@@ -510,7 +523,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
/>
) : null}
</View>
{!leftNavMinimal && (
{!minimal && (
<Text style={[a.text_xl, isCurrent ? a.font_bold : a.font_normal]}>
{label}
</Text>
@@ -519,12 +532,11 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
)
}
function ComposeBtn() {
function ComposeBtn({minimal}: {minimal: boolean}) {
const {currentAccount} = useSession()
const {getState} = useNavigation()
const {openComposer} = useOpenComposer()
const {_} = useLingui()
const {leftNavMinimal} = useLayoutBreakpoints()
const [isFetchingHandle, setIsFetchingHandle] = useState(false)
const fetchHandle = useFetchHandle()
@@ -564,31 +576,28 @@ function ComposeBtn() {
const onPressCompose = async () =>
openComposer({mention: await getProfileHandle(), logContext: 'Fab'})
if (leftNavMinimal) {
return null
}
return (
<View style={[a.flex_row, a.pl_md, a.pt_xl]}>
<View style={minimal ? [a.p_sm] : [a.flex_row, a.pl_md, a.pt_xl]}>
<Button
disabled={isFetchingHandle}
label={_(msg`Compose new post`)}
onPress={() => void onPressCompose()}
size="large"
variant="solid"
color="primary"
style={[a.rounded_full]}>
<ButtonIcon icon={EditBig} position="left" />
<ButtonText>
<Trans context="action">New post</Trans>
</ButtonText>
style={[a.rounded_full, minimal && {width: 56, height: 56}]}>
<ButtonIcon icon={EditBig} size={minimal ? 'lg' : 'sm'} />
{!minimal && (
<ButtonText>
<Trans context="action">New post</Trans>
</ButtonText>
)}
</Button>
</View>
)
}
function ChatNavItem() {
const pal = usePalette('default')
function ChatNavItem({minimal}: {minimal: boolean}) {
const t = useTheme()
const {_} = useLingui()
const numUnreadMessages = useUnreadMessageCount()
const aa = useAgeAssurance()
@@ -596,14 +605,19 @@ function ChatNavItem() {
return (
<NavItem
href="/messages"
minimal={minimal}
count={aa.flags.chatDisabled ? undefined : numUnreadMessages.numUnread}
hasNew={aa.flags.chatDisabled ? false : numUnreadMessages.hasNew}
icon={
<Message style={pal.text} aria-hidden={true} width={NAV_ICON_WIDTH} />
<Message
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<MessageFilled
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
@@ -613,15 +627,19 @@ function ChatNavItem() {
)
}
export function DesktopLeftNav() {
export function DesktopLeftNav({routeName}: {routeName: string}) {
const {hasSession, currentAccount} = useSession()
const pal = usePalette('default')
const {_} = useLingui()
const {isDesktop} = useWebMediaQueries()
const {leftNavMinimal, centerColumnOffset} = useLayoutBreakpoints()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const isMessagesRelatedScreen = routeName.startsWith('Messages')
const {leftNavMinimal: leftNavMinimalBreakpoint, centerColumnOffset} =
useLayoutBreakpoints()
const numUnreadNotifications = useUnreadNotifications()
if (!hasSession && !isDesktop) {
const leftNavMinimal = isMessagesRelatedScreen || leftNavMinimalBreakpoint
if (!hasSession && !gtMobile) {
return null
}
@@ -637,7 +655,11 @@ export function DesktopLeftNav() {
transform: [
{
translateX:
-300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0),
-300 +
(centerColumnOffset ? CENTER_COLUMN_OFFSET : 0) +
(isMessagesRelatedScreen && !leftNavMinimalBreakpoint
? -130
: 0),
},
{translateX: '-100%'},
...a.scrollbar_offset.transform,
@@ -645,7 +667,7 @@ export function DesktopLeftNav() {
},
]}>
{hasSession ? (
<ProfileCard />
<ProfileCard minimal={leftNavMinimal} />
) : !leftNavMinimal ? (
<View style={[a.pt_xl]}>
<NavSignupCard />
@@ -656,34 +678,36 @@ export function DesktopLeftNav() {
<>
<NavItem
href="/"
minimal={leftNavMinimal}
icon={
<Home
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
iconFilled={
<HomeFilled
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
label={_(msg`Home`)}
/>
<NavItem
href="/search"
minimal={leftNavMinimal}
icon={
<MagnifyingGlass
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<MagnifyingGlassFilled
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
@@ -692,36 +716,38 @@ export function DesktopLeftNav() {
/>
<NavItem
href="/notifications"
minimal={leftNavMinimal}
count={numUnreadNotifications}
icon={
<Bell
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
iconFilled={
<BellFilled
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
label={_(msg`Notifications`)}
/>
<ChatNavItem />
<ChatNavItem minimal={leftNavMinimal} />
<NavItem
href="/feeds"
minimal={leftNavMinimal}
icon={
<Hashtag
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<HashtagFilled
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
@@ -730,16 +756,17 @@ export function DesktopLeftNav() {
/>
<NavItem
href="/lists"
minimal={leftNavMinimal}
icon={
<List
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<ListFilled
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
@@ -748,16 +775,17 @@ export function DesktopLeftNav() {
/>
<NavItem
href="/saved"
minimal={leftNavMinimal}
icon={
<Bookmark
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<BookmarkFilled
style={pal.text}
style={t.atoms.text}
aria-hidden={true}
width={NAV_ICON_WIDTH}
/>
@@ -771,42 +799,44 @@ export function DesktopLeftNav() {
/>
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
minimal={leftNavMinimal}
icon={
<UserCircle
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
iconFilled={
<UserCircleFilled
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
label={_(msg`Profile`)}
/>
<NavItem
href="/settings"
minimal={leftNavMinimal}
icon={
<Settings
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
iconFilled={
<SettingsFilled
aria-hidden={true}
width={NAV_ICON_WIDTH}
style={pal.text}
style={t.atoms.text}
/>
}
label={_(msg`Settings`)}
/>
<ComposeBtn />
<ComposeBtn minimal={leftNavMinimal} />
</>
)}
</View>
@@ -824,6 +854,7 @@ const styles = StyleSheet.create({
// @ts-expect-error web only
maxHeight: '100vh',
overflowY: 'auto',
scrollbarWidth: 'thin',
},
leftNavWide: {
width: 245,