Clipclop tweaks (#3851)

* scroll on input resize

* add back the padding 🙊

* fix timestamps

src/components/dms/MessageItem.tsx

@@ -32,6 +32,11 @@ export let MessageItem = ({
     next.sender?.did === currentAccount?.did
 
   const isLastInGroup = useMemo(() => {
+    // TODO this means it's a placeholder. Let's figure out the right way to do this though!
+    if (item.id.length > 13) {
+      return false
+    }
+
     // if the next message is from a different sender, then it's the last in the group
     if (isFromSelf ? !isNextFromSelf : isNextFromSelf) {
       return true

src/screens/Messages/Conversation/MessageInput.tsx

@@ -18,10 +18,10 @@ import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/ico
 
 export function MessageInput({
   onSendMessage,
-  onFocus,
+  scrollToEnd,
 }: {
   onSendMessage: (message: string) => void
-  onFocus?: () => void
+  scrollToEnd: () => void
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -54,8 +54,10 @@ export function MessageInput({
 
       setMaxHeight(max)
       setIsInputScrollable(availableSpace < 30)
+
+      scrollToEnd()
     },
-    [topInset],
+    [scrollToEnd, topInset],
   )
 
   return (
@@ -82,7 +84,7 @@ export function MessageInput({
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
           scrollEnabled={isInputScrollable}
           blurOnSubmit={false}
-          onFocus={onFocus}
+          onFocus={scrollToEnd}
           onContentSizeChange={onInputLayout}
           ref={inputRef}
         />

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -11,7 +11,7 @@ export function MessageInput({
   onSendMessage,
 }: {
   onSendMessage: (message: string) => void
-  onFocus: () => void
+  scrollToEnd: () => void
 }) {
   const {_} = useLingui()
   const t = useTheme()

src/screens/Messages/Conversation/MessagesList.tsx

@@ -168,9 +168,11 @@ export function MessagesList() {
     [contentHeight.value, hasInitiallyScrolled, isAtBottom],
   )
 
-  const onInputFocus = React.useCallback(() => {
-    flatListRef.current?.scrollToEnd({animated: true})
-  }, [flatListRef])
+  const scrollToEnd = React.useCallback(() => {
+    requestAnimationFrame(() =>
+      flatListRef.current?.scrollToEnd({animated: true}),
+    )
+  }, [])
 
   const {bottom: bottomInset} = useSafeAreaInsets()
   const {gtMobile} = useBreakpoints()
@@ -200,6 +202,7 @@ export function MessagesList() {
             maintainVisibleContentPosition={{
               minIndexForVisible: 1,
             }}
+            contentContainerStyle={{paddingHorizontal: 10}}
             removeClippedSubviews={false}
             onContentSizeChange={onContentSizeChange}
             onStartReached={onStartReached}
@@ -215,10 +218,7 @@ export function MessagesList() {
           />
         </ScrollProvider>
       </View>
-      <MessageInput
-        onSendMessage={onSendMessage}
-        onFocus={isWeb ? onInputFocus : undefined}
-      />
+      <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
     </KeyboardAvoidingView>
   )
 }

src/state/messages/convo.ts

@@ -786,7 +786,7 @@ export class Convo {
             (ChatBskyConvoDefs.isMessageView(item.message) ||
               ChatBskyConvoDefs.isDeletedMessageView(item.message))
           ) {
-            const next = items[i - 1]
+            const next = items[i + 1]
 
             if (
               isConvoItemMessage(next) &&