Lighten rendering function in conversation list

Instead of running the entire toArray of the chatboxes object, we
only render the information we need (id, title, last message text)
which will (hopefully) make for a less resource-hungry function

src/routes/Messages.svelte

@@ -43,14 +43,27 @@
     }
   }), 1000)
 
-  let chatboxes = _converse?.chatboxes?.toArray() || []
+  // Helper function to convert chatboxes into
+  // (exceedingly lightweight) object array for
+  // final rendering
+  function chatboxesToArray(chatboxes) {
+    if (!chatboxes) return []
+
+    return _converse.chatboxes.models.map(c => ({
+      id: c.id,
+      title: c.attributes.name || c.attributes.id,
+      lastMessage: c.messages?.last()?.attributes?.body,
+    }))
+  }
+
+  let chatboxes = chatboxesToArray(_converse?.chatboxes)
 
   _converse.on('chatBoxesFetched', () => {
-    chatboxes = _converse.chatboxes?.toArray() || []
+    chatboxes = chatboxesToArray(_converse.chatboxes)
   })
 
   _converse.on('message', () => {
-    chatboxes = _converse.chatboxes?.toArray() || []
+    chatboxes = chatboxesToArray(_converse.chatboxes)
   })
 </script>
 
@@ -61,8 +74,8 @@
 {:else}
   {#each chatboxes as convo, index (convo.id)}
     <ListItem
-      text={convo.attributes.nickname || convo.attributes.id}
-      subtext={convo.messages?.last()?.attributes?.body || undefined}
+      text={convo.title}
+      subtext={convo.lastMessage}
       tabindex={index}
       onclick={() => openChat(convo.id)}
     />