[🐴] Empty chat prompt (#4132)

* Add empty chat pill

* Tweak padding

* move to `components`, place inside `KeyboardStickyView`

* cleanup unused vars

* add a new animation type

* (unrelated) add haptic to long press

* adjust shrink and pop

---------

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 11 insertions, 8 deletions

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index e30354508..167cc72bd 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -17,7 +17,7 @@ import {AppBskyRichtextFacet, RichText} from '@atproto/api'
 
 import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {isIOS, isNative} from '#/platform/detection'
-import {useConvoActive} from '#/state/messages/convo'
+import {isConvoActive, useConvoActive} from '#/state/messages/convo'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
 import {useAgent} from '#/state/session'
 import {ScrollProvider} from 'lib/ScrollContext'
@@ -26,6 +26,7 @@ import {List} from 'view/com/util/List'
 import {ChatDisabled} from '#/screens/Messages/Conversation/ChatDisabled'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
+import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
@@ -340,18 +341,20 @@ export function MessagesList({
         />
       </ScrollProvider>
       <KeyboardStickyView offset={{closed: -bottomOffset, opened: 0}}>
-        {!blocked ? (
+        {convoState.status === ConvoStatus.Disabled ? (
+          <ChatDisabled />
+        ) : blocked ? (
+          footer
+        ) : (
           <>
-            {convoState.status === ConvoStatus.Disabled ? (
-              <ChatDisabled />
-            ) : (
-              <MessageInput onSendMessage={onSendMessage} />
+            {isConvoActive(convoState) && convoState.items.length === 0 && (
+              <ChatEmptyPill />
             )}
+            <MessageInput onSendMessage={onSendMessage} />
           </>
-        ) : (
-          footer
         )}
       </KeyboardStickyView>
+
       {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}
     </>
   )