feat(chat): sort sidebar items

components/views/navigation/sidebar/list/List.html

@@ -1,6 +1,10 @@
 <div class="list hover-scroll">
-  <SidebarListItem v-for="c in conversations" :key="c.id" :conversation="c" />
-  <div v-if="!Object.keys(conversations).length" class="mascot-container">
+  <SidebarListItem
+    v-for="c in sortedConversations"
+    :key="c.id"
+    :conversation="c"
+  />
+  <div v-if="!sortedConversations.length" class="mascot-container">
     <div class="mascot-text">
       <TypographyTitle :text="$t('pages.chat.no_friends_yet')" :size="6" />
       <TypographyText :text="$t('pages.chat.no_friends_yet_text')" />

components/views/navigation/sidebar/list/List.vue

@@ -4,16 +4,25 @@
 import Vue from 'vue'
 import { UserPlusIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { Conversation } from '~/libraries/Iridium/chat/types'
 
 export default Vue.extend({
   components: {
     UserPlusIcon,
   },
   data: () => ({
     conversations: iridium.chat.state.conversations,
+    messages: iridium.chat.messages,
   }),
+  computed: {
+    sortedConversations(): Conversation[] {
+      return Object.values(this.conversations).sort(
+        (a, b) => this.lastMessageTimestamp(b) - this.lastMessageTimestamp(a),
+      )
+    },
+  },
   methods: {
-    navigateAddFriends() {
+    navigateAddFriends(): void {
       if (this.$route.name?.includes('friends-list')) {
         if (this.$device.isMobile) {
           this.$store.commit('ui/showSidebar', false)
@@ -22,6 +31,10 @@ export default Vue.extend({
         this.$router.push({ path: '/friends' })
       }
     },
+    lastMessageTimestamp(conversation: Conversation): number {
+      const messages = this.messages[conversation.id]
+      return messages.at(-1)?.at ?? (conversation.updatedAt || 0)
+    },
   },
 })
 </script>

components/views/navigation/sidebar/list/item/Item.vue

@@ -78,7 +78,7 @@ export default Vue.extend({
       if (!this.lastMessage) {
         return this.$t('messaging.say_hi') as string
       }
-      return this.lastMessage.body
+      return this.lastMessage.body || ''
 
       // const sender = message.from === iridium.connector?.id ? 'me' : 'user'
 

libraries/Iridium/chat/ChatManager.ts

@@ -13,7 +13,6 @@ import {
   Conversation,
   ConversationMessage,
   ChatError,
-  ConversationMessagePayload,
   MessageReactionPayload,
 } from '~/libraries/Iridium/chat/types'
 import { Friend, FriendsError } from '~/libraries/Iridium/friends/types'
@@ -34,16 +33,20 @@ const initialState: State = {
   conversations: {},
 }
 
+export type Message = ConversationMessage & { id: string }
+
+export type Conversations = {
+  [key: Conversation['id']]: Message[]
+}
+
 export default class ChatManager extends Emitter<ConversationMessage> {
   public ready: boolean = false
   public subscriptions: string[] = []
   public state: State = {
     conversations: {},
   }
 
-  public messages: {
-    [key: Conversation['id']]: Array<ConversationMessage & { id: string }>
-  } = {}
+  public messages: Conversations = {}
 
   constructor(public readonly iridium: IridiumManager) {
     super()