[Clipclops] Improve message list behaviour (#3789)

* improve message list behaviour

* replace useAgent with useSession

* add explicit types to appease linter

3 files changed, 45 insertions, 18 deletions

diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx
index 72f74c29b..a1aab2888 100644
--- a/src/screens/Messages/Conversation/MessageItem.tsx
+++ b/src/screens/Messages/Conversation/MessageItem.tsx
@@ -3,7 +3,7 @@ import {StyleProp, TextStyle, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent} from '#/state/session'
+import {useSession} from '#/state/session'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -17,13 +17,13 @@ export function MessageItem({
   next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
 }) {
   const t = useTheme()
-  const {getAgent} = useAgent()
+  const {currentAccount} = useSession()
 
-  const isFromSelf = item.sender?.did === getAgent().session?.did
+  const isFromSelf = item.sender?.did === currentAccount?.did
 
   const isNextFromSelf =
     TempDmChatDefs.isMessageView(next) &&
-    next.sender?.did === getAgent().session?.did
+    next.sender?.did === currentAccount?.did
 
   const isLastInGroup = useMemo(() => {
     // if the next message is from a different sender, then it's the last in the group
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx
index 2dd406fe6..ccf0d2044 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@@ -11,8 +11,9 @@ import {MessagesTabNavigatorParams} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-import {useAgent} from '#/state/session'
+import {useSession} from '#/state/session'
 import {List} from '#/view/com/util/List'
+import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {useBreakpoints, useTheme} from '#/alf'
@@ -168,15 +169,24 @@ export function MessagesListScreen({navigation}: Props) {
 function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
   const t = useTheme()
   const {_} = useLingui()
-  const {getAgent} = useAgent()
+  const {currentAccount} = useSession()
 
   let lastMessage = _(msg`No messages yet`)
+  let lastMessageSentAt: string | null = null
   if (TempDmChatDefs.isMessageView(chat.lastMessage)) {
-    lastMessage = chat.lastMessage.text
+    if (chat.lastMessage.sender?.did === currentAccount?.did) {
+      lastMessage = _(msg`You: ${chat.lastMessage.text}`)
+    } else {
+      lastMessage = chat.lastMessage.text
+    }
+    lastMessageSentAt = chat.lastMessage.sentAt
+  }
+  if (TempDmChatDefs.isDeletedMessage(chat.lastMessage)) {
+    lastMessage = _(msg`Message deleted`)
   }
 
   const otherUser = chat.members.find(
-    member => member.did !== getAgent().session?.did,
+    member => member.did !== currentAccount?.did,
   )
 
   if (!otherUser) {
@@ -200,19 +210,32 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
             <PreviewableUserAvatar profile={otherUser} size={42} />
           </View>
           <View style={[a.flex_1]}>
-            <Text numberOfLines={1} style={a.leading_snug}>
+            <Text numberOfLines={1} style={[a.text_md, a.leading_normal]}>
               <Text style={[t.atoms.text, chat.unreadCount > 0 && a.font_bold]}>
                 {otherUser.displayName || otherUser.handle}
               </Text>{' '}
-              <Text style={t.atoms.text_contrast_medium}>
-                @{otherUser.handle}
-              </Text>
+              {lastMessageSentAt ? (
+                <TimeElapsed timestamp={lastMessageSentAt}>
+                  {({timeElapsed}) => (
+                    <Text style={t.atoms.text_contrast_medium}>
+                      @{otherUser.handle} &middot; {timeElapsed}
+                    </Text>
+                  )}
+                </TimeElapsed>
+              ) : (
+                <Text style={t.atoms.text_contrast_medium}>
+                  @{otherUser.handle}
+                </Text>
+              )}
             </Text>
             <Text
               numberOfLines={2}
               style={[
                 a.text_sm,
-                chat.unread ? a.font_bold : t.atoms.text_contrast_medium,
+                a.leading_snug,
+                chat.unreadCount > 0
+                  ? a.font_bold
+                  : t.atoms.text_contrast_medium,
               ]}>
               {lastMessage}
             </Text>
@@ -221,8 +244,8 @@ function ChatListItem({chat}: {chat: TempDmChatDefs.ChatView}) {
             <View
               style={[
                 a.flex_0,
-                a.ml_2xl,
-                a.mt_xs,
+                a.ml_md,
+                a.mt_sm,
                 {backgroundColor: t.palette.primary_500},
                 a.rounded_full,
                 {height: 7, width: 7},
diff --git a/src/screens/Messages/Temp/query/query.ts b/src/screens/Messages/Temp/query/query.ts
index a4d78e0bb..02f31c029 100644
--- a/src/screens/Messages/Temp/query/query.ts
+++ b/src/screens/Messages/Temp/query/query.ts
@@ -5,7 +5,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 
-import {useAgent} from '#/state/session'
+import {useSession} from '#/state/session'
 import * as TempDmChatDefs from '#/temp/dm/defs'
 import * as TempDmChatGetChat from '#/temp/dm/getChat'
 import * as TempDmChatGetChatForMembers from '#/temp/dm/getChatForMembers'
@@ -20,10 +20,10 @@ import {useDmServiceUrlStorage} from '../useDmServiceUrlStorage'
  */
 
 const useHeaders = () => {
-  const {getAgent} = useAgent()
+  const {currentAccount} = useSession()
   return {
     get Authorization() {
-      return getAgent().session!.did
+      return currentAccount!.did
     },
   }
 }
@@ -196,6 +196,10 @@ export function useChatLogQuery() {
         const json =
           (await response.json()) as TempDmChatGetChatLog.OutputSchema
 
+        if (json.logs.length > 0) {
+          queryClient.invalidateQueries({queryKey: ['chats']})
+        }
+
         for (const log of json.logs) {
           if (TempDmChatDefs.isLogCreateMessage(log)) {
             queryClient.setQueryData(['chat', log.chatId], (prev: Chat) => {