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

* mobile web tweaks chat screen * revert a change * remove unnecessary prop * Spacing tweaks --------- Co-authored-by: Eric Bailey <[email protected]>
bluesky-social · May 15, 2024 · 31868b2 · 31868b2
1 parent 04aea93
commit 31868b2
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/src/components/dms/ActionsWrapper.tsx b/src/components/dms/ActionsWrapper.tsx
@@ -79,7 +79,7 @@ export function ActionsWrapper({
         hitSlop={HITSLOP_10}>
         {children}
       </AnimatedPressable>
-      <MessageMenu message={message} control={menuControl} hideTrigger={true} />
+      <MessageMenu message={message} control={menuControl} />
     </View>
   )
 }
diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx
@@ -25,7 +25,6 @@ export let MessageMenu = ({
   control,
   triggerOpacity,
 }: {
-  hideTrigger?: boolean
   triggerOpacity?: number
   message: ChatBskyConvoDefs.MessageView
   control: Menu.MenuControlProps

diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx
@@ -78,7 +78,7 @@ export function MessageInput({
   useSaveMessageDraft(message)
 
   return (
-    <View style={a.p_sm}>
+    <View style={a.p_md}>
       <View
         style={[
           a.w_full,

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

diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx
@@ -18,9 +18,10 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {BACK_HITSLOP} from 'lib/constants'
 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 {ConvoStatus} from 'state/messages/convo/types'
+import {useSetMinimalShellMode} from 'state/shell'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
 import {CenteredView} from 'view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
@@ -38,16 +39,25 @@ type Props = NativeStackScreenProps<
 >
 export function MessagesConversationScreen({route}: Props) {
   const gate = useGate()
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const {gtMobile} = useBreakpoints()
+
   const convoId = route.params.conversation
   const {setCurrentConvoId} = useCurrentConvoId()
 
   useFocusEffect(
     useCallback(() => {
       setCurrentConvoId(convoId)
+
+      if (isWeb && !gtMobile) {
+        setMinimalShellMode(true)
+      }
+
       return () => {
         setCurrentConvoId(undefined)
+        setMinimalShellMode(false)
       }
-    }, [convoId, setCurrentConvoId]),
+    }, [convoId, gtMobile, setCurrentConvoId, setMinimalShellMode]),
   )
 
   if (!gate('dms')) return <ClipClopGate />
@@ -67,8 +77,7 @@ function Inner() {
   const [hasInitiallyRendered, setHasInitiallyRendered] = React.useState(false)
 
   const {bottom: bottomInset, top: topInset} = useSafeAreaInsets()
-  const {gtMobile} = useBreakpoints()
-  const bottomBarHeight = gtMobile ? 0 : isIOS ? 40 : 60
+  const nativeBottomBarHeight = isIOS ? 42 : 60
 
   // 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
@@ -106,7 +115,10 @@ function Inner() {
   return (
     <KeyboardProvider>
       <KeyboardAvoidingView
-        style={[a.flex_1, {marginBottom: bottomInset + bottomBarHeight}]}
+        style={[
+          a.flex_1,
+          isNative && {marginBottom: bottomInset + nativeBottomBarHeight},
+        ]}
         keyboardVerticalOffset={isIOS ? topInset : 0}
         behavior="padding"
         contentContainerStyle={a.flex_1}>