quilling.dev
An ATproto social media client -- with an independent Appview.
[🐴] 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>
authored by
Eric Bailey
and committed by
GitHub
31868b25
04aea931
+1
-1
src/components/dms/ActionsWrapper.tsx
+1
-1
src/components/dms/ActionsWrapper.tsx
-1
src/components/dms/MessageMenu.tsx
-1
src/components/dms/MessageMenu.tsx
+1
-1
src/screens/Messages/Conversation/MessageInput.tsx
+1
-1
src/screens/Messages/Conversation/MessageInput.tsx
+2
-3
src/screens/Messages/Conversation/MessagesList.tsx
+2
-3
src/screens/Messages/Conversation/MessagesList.tsx
···
15
15
import {List} from 'view/com/util/List'
16
16
import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
17
17
import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
18
+
import {atoms as a} from '#/alf'
18
19
import {MessageItem} from '#/components/dms/MessageItem'
19
20
import {Loader} from '#/components/Loader'
20
21
import {Text} from '#/components/Typography'
···
208
209
renderItem={renderItem}
209
210
keyExtractor={keyExtractor}
210
211
containWeb={true}
211
-
contentContainerStyle={{
212
-
paddingHorizontal: 10,
213
-
}}
212
+
contentContainerStyle={[a.px_md]}
214
213
disableVirtualization={true}
215
214
initialNumToRender={isNative ? 30 : 60}
216
215
maxToRenderPerBatch={isWeb ? 30 : 60}
+17
-5
src/screens/Messages/Conversation/index.tsx
+17
-5
src/screens/Messages/Conversation/index.tsx
···
18
18
import {useProfileQuery} from '#/state/queries/profile'
19
19
import {BACK_HITSLOP} from 'lib/constants'
20
20
import {sanitizeDisplayName} from 'lib/strings/display-names'
21
-
import {isIOS, isWeb} from 'platform/detection'
21
+
import {isIOS, isNative, isWeb} from 'platform/detection'
22
22
import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo'
23
23
import {ConvoStatus} from 'state/messages/convo/types'
24
+
import {useSetMinimalShellMode} from 'state/shell'
24
25
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
25
26
import {CenteredView} from 'view/com/util/Views'
26
27
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
···
38
39
>
39
40
export function MessagesConversationScreen({route}: Props) {
40
41
const gate = useGate()
42
+
const setMinimalShellMode = useSetMinimalShellMode()
43
+
const {gtMobile} = useBreakpoints()
44
+
41
45
const convoId = route.params.conversation
42
46
const {setCurrentConvoId} = useCurrentConvoId()
43
47
44
48
useFocusEffect(
45
49
useCallback(() => {
46
50
setCurrentConvoId(convoId)
51
+
52
+
if (isWeb && !gtMobile) {
53
+
setMinimalShellMode(true)
54
+
}
55
+
47
56
return () => {
48
57
setCurrentConvoId(undefined)
58
+
setMinimalShellMode(false)
49
59
}
50
-
}, [convoId, setCurrentConvoId]),
60
+
}, [convoId, gtMobile, setCurrentConvoId, setMinimalShellMode]),
51
61
)
52
62
53
63
if (!gate('dms')) return <ClipClopGate />
···
67
77
const [hasInitiallyRendered, setHasInitiallyRendered] = React.useState(false)
68
78
69
79
const {bottom: bottomInset, top: topInset} = useSafeAreaInsets()
70
-
const {gtMobile} = useBreakpoints()
71
-
const bottomBarHeight = gtMobile ? 0 : isIOS ? 40 : 60
80
+
const nativeBottomBarHeight = isIOS ? 42 : 60
72
81
73
82
// HACK: Because we need to scroll to the bottom of the list once initial items are added to the list, we also have
74
83
// to take into account that scrolling to the end of the list on native will happen asynchronously. This will cause
···
106
115
return (
107
116
<KeyboardProvider>
108
117
<KeyboardAvoidingView
109
-
style={[a.flex_1, {marginBottom: bottomInset + bottomBarHeight}]}
118
+
style={[
119
+
a.flex_1,
120
+
isNative && {marginBottom: bottomInset + nativeBottomBarHeight},
121
+
]}
110
122
keyboardVerticalOffset={isIOS ? topInset : 0}
111
123
behavior="padding"
112
124
contentContainerStyle={a.flex_1}>