From 01928a7fad60efbafdd623d06ebcfbc37d1cf901 Mon Sep 17 00:00:00 2001 From: col3name Date: Sun, 12 Jan 2025 19:25:30 +0300 Subject: [PATCH] fix: show message input on mobile chat (android, ios browser) --- src/alf/atoms.ts | 9 +++++++++ src/screens/Messages/Conversation.tsx | 10 +++++++++- src/screens/Messages/components/MessagesList.tsx | 8 +++++++- src/view/shell/index.web.tsx | 16 ++++++++++++++-- 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 1485ca7fc8..9b3a73e084 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -78,6 +78,15 @@ export const atoms = { }), ] as ViewStyle, + util_screen_message_outer: [ + web({ + minHeight: 'calc(100vh - 200px)', + }), + native({ + height: '100%', + }), + ], + /* * Theme-independent bg colors */ diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index b8b0bfe0d3..9e70b0b4f7 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -6,10 +6,12 @@ import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {isAndroidWeb} from '#/lib/browser' import {useEmail} from '#/lib/hooks/useEmail' import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {isWeb} from '#/platform/detection' +import {isIPhoneWeb} from '#/platform/detection' import {useProfileShadow} from '#/state/cache/profile-shadow' import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo' import {ConvoStatus} from '#/state/messages/convo/types' @@ -58,7 +60,13 @@ export function MessagesConversationScreen({route}: Props) { ) return ( - + diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx index 071ce1cd71..43ad90b9f7 100644 --- a/src/screens/Messages/components/MessagesList.tsx +++ b/src/screens/Messages/components/MessagesList.tsx @@ -12,6 +12,7 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook import {useSafeAreaInsets} from 'react-native-safe-area-context' import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api' +import {isAndroidWeb} from '#/lib/browser' import {clamp} from '#/lib/numbers' import {ScrollProvider} from '#/lib/ScrollContext' import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip' @@ -22,6 +23,7 @@ import { import {logger} from '#/logger' import {isNative} from '#/platform/detection' import {isWeb} from '#/platform/detection' +import {isIPhoneWeb} from '#/platform/detection' import {isConvoActive, useConvoActive} from '#/state/messages/convo' import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types' import {useGetPost} from '#/state/queries/post' @@ -34,6 +36,7 @@ import {List, ListMethods} from '#/view/com/util/List' import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled' import {MessageInput} from '#/screens/Messages/components/MessageInput' import {MessageListError} from '#/screens/Messages/components/MessageListError' +import {atoms as a, web} from '#/alf' import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill' import {MessageItem} from '#/components/dms/MessageItem' import {NewMessagesPill} from '#/components/dms/NewMessagesPill' @@ -405,7 +408,10 @@ export function MessagesList({ keyExtractor={keyExtractor} disableFullWindowScroll={true} disableVirtualization={true} - style={animatedListStyle} + style={[ + animatedListStyle, + web((isIPhoneWeb || isAndroidWeb) && a.util_screen_message_outer), + ]} // The extra two items account for the header and the footer components initialNumToRender={isNative ? 32 : 62} maxToRenderPerBatch={isWeb ? 32 : 62} diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 8c30813ab5..9f1749d712 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -5,18 +5,20 @@ import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' import {RemoveScrollBar} from 'react-remove-scroll-bar' +import {isAndroidWeb} from '#/lib/browser' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {useIntentHandler} from '#/lib/hooks/useIntentHandler' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {NavigationProp} from '#/lib/routes/types' import {colors} from '#/lib/styles' +import {isIPhoneWeb} from '#/platform/detection' import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut' import {useCloseAllActiveElements} from '#/state/util' import {Lightbox} from '#/view/com/lightbox/Lightbox' import {ModalsContainer} from '#/view/com/modals/Modal' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' -import {atoms as a, select, useTheme} from '#/alf' +import {atoms as a, select, useTheme, web} from '#/alf' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' import {Outlet as PortalOutlet} from '#/components/Portal' @@ -92,8 +94,18 @@ function ShellInner() { export const Shell: React.FC = function ShellImpl() { const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark) + const isMessagesRoute = + isAndroidWeb || isIPhoneWeb + ? window?.location?.pathname.includes('/messages/') + : false + return ( - +