[🐴] Tweak list on mobile web (#3958)

* mobile web tweaks chat screen

* revert a change

* remove unnecessary prop

* Spacing tweaks

---------

Co-authored-by: Eric Bailey <git@esb.lol>
zio/stable
Hailey 2024-05-15 09:50:16 -07:00 committed by GitHub
parent 04aea93192
commit 31868b255f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 21 additions and 11 deletions

View File

@ -79,7 +79,7 @@ export function ActionsWrapper({
hitSlop={HITSLOP_10}> hitSlop={HITSLOP_10}>
{children} {children}
</AnimatedPressable> </AnimatedPressable>
<MessageMenu message={message} control={menuControl} hideTrigger={true} /> <MessageMenu message={message} control={menuControl} />
</View> </View>
) )
} }

View File

@ -25,7 +25,6 @@ export let MessageMenu = ({
control, control,
triggerOpacity, triggerOpacity,
}: { }: {
hideTrigger?: boolean
triggerOpacity?: number triggerOpacity?: number
message: ChatBskyConvoDefs.MessageView message: ChatBskyConvoDefs.MessageView
control: Menu.MenuControlProps control: Menu.MenuControlProps

View File

@ -78,7 +78,7 @@ export function MessageInput({
useSaveMessageDraft(message) useSaveMessageDraft(message)
return ( return (
<View style={a.p_sm}> <View style={a.p_md}>
<View <View
style={[ style={[
a.w_full, a.w_full,

View File

@ -15,6 +15,7 @@ import {isWeb} from 'platform/detection'
import {List} from 'view/com/util/List' import {List} from 'view/com/util/List'
import {MessageInput} from '#/screens/Messages/Conversation/MessageInput' import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
import {MessageListError} from '#/screens/Messages/Conversation/MessageListError' import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
import {atoms as a} from '#/alf'
import {MessageItem} from '#/components/dms/MessageItem' import {MessageItem} from '#/components/dms/MessageItem'
import {Loader} from '#/components/Loader' import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@ -208,9 +209,7 @@ export function MessagesList() {
renderItem={renderItem} renderItem={renderItem}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
containWeb={true} containWeb={true}
contentContainerStyle={{ contentContainerStyle={[a.px_md]}
paddingHorizontal: 10,
}}
disableVirtualization={true} disableVirtualization={true}
initialNumToRender={isNative ? 30 : 60} initialNumToRender={isNative ? 30 : 60}
maxToRenderPerBatch={isWeb ? 30 : 60} maxToRenderPerBatch={isWeb ? 30 : 60}

View File

@ -18,9 +18,10 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useProfileQuery} from '#/state/queries/profile' import {useProfileQuery} from '#/state/queries/profile'
import {BACK_HITSLOP} from 'lib/constants' import {BACK_HITSLOP} from 'lib/constants'
import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeDisplayName} from 'lib/strings/display-names'
import {isIOS, isWeb} from 'platform/detection' import {isIOS, isNative, isWeb} from 'platform/detection'
import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo' import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo'
import {ConvoStatus} from 'state/messages/convo/types' import {ConvoStatus} from 'state/messages/convo/types'
import {useSetMinimalShellMode} from 'state/shell'
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar' import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
import {CenteredView} from 'view/com/util/Views' import {CenteredView} from 'view/com/util/Views'
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList' import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
@ -38,16 +39,25 @@ type Props = NativeStackScreenProps<
> >
export function MessagesConversationScreen({route}: Props) { export function MessagesConversationScreen({route}: Props) {
const gate = useGate() const gate = useGate()
const setMinimalShellMode = useSetMinimalShellMode()
const {gtMobile} = useBreakpoints()
const convoId = route.params.conversation const convoId = route.params.conversation
const {setCurrentConvoId} = useCurrentConvoId() const {setCurrentConvoId} = useCurrentConvoId()
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
setCurrentConvoId(convoId) setCurrentConvoId(convoId)
if (isWeb && !gtMobile) {
setMinimalShellMode(true)
}
return () => { return () => {
setCurrentConvoId(undefined) setCurrentConvoId(undefined)
setMinimalShellMode(false)
} }
}, [convoId, setCurrentConvoId]), }, [convoId, gtMobile, setCurrentConvoId, setMinimalShellMode]),
) )
if (!gate('dms')) return <ClipClopGate /> if (!gate('dms')) return <ClipClopGate />
@ -67,8 +77,7 @@ function Inner() {
const [hasInitiallyRendered, setHasInitiallyRendered] = React.useState(false) const [hasInitiallyRendered, setHasInitiallyRendered] = React.useState(false)
const {bottom: bottomInset, top: topInset} = useSafeAreaInsets() const {bottom: bottomInset, top: topInset} = useSafeAreaInsets()
const {gtMobile} = useBreakpoints() const nativeBottomBarHeight = isIOS ? 42 : 60
const bottomBarHeight = gtMobile ? 0 : isIOS ? 40 : 60
// HACK: Because we need to scroll to the bottom of the list once initial items are added to the list, we also have // HACK: Because we need to scroll to the bottom of the list once initial items are added to the list, we also have
// to take into account that scrolling to the end of the list on native will happen asynchronously. This will cause // to take into account that scrolling to the end of the list on native will happen asynchronously. This will cause
@ -106,7 +115,10 @@ function Inner() {
return ( return (
<KeyboardProvider> <KeyboardProvider>
<KeyboardAvoidingView <KeyboardAvoidingView
style={[a.flex_1, {marginBottom: bottomInset + bottomBarHeight}]} style={[
a.flex_1,
isNative && {marginBottom: bottomInset + nativeBottomBarHeight},
]}
keyboardVerticalOffset={isIOS ? topInset : 0} keyboardVerticalOffset={isIOS ? topInset : 0}
behavior="padding" behavior="padding"
contentContainerStyle={a.flex_1}> contentContainerStyle={a.flex_1}>