Display avatars in contacts and message list

An enhancement that will seal tight the already closed #15!

src/routes/Contacts.svelte

@@ -54,6 +54,22 @@
   // TODO: use a sliding window so that only the contacts
   // that are in view get rendered
 
+  // Helper function to fetch avatars for a chatbox
+  function getAvatar(chatJID) {
+    let vcard = _converse.vcards.get(chatJID)
+    if (vcard && vcard.attributes?.image) {
+      return {
+        src: 'data:'
+	  + vcard.attributes.image_type
+	  + ';base64,'
+	  + vcard.attributes.image,
+	alt: 'Profile picture for ' + chatJID,
+      }
+    } else {
+      return undefined
+    }
+  }
+
   // Helper function to convert contacts list into
   // (exceedingly lightweight) object array for
   // final rendering
@@ -61,6 +77,7 @@
     return contacts.map(c => ({
       jid: c.attributes.jid,
       name: c.attributes.nickname || c.attributes.user_id,
+      avatar: getAvatar(c.attributes.jid),
     }))
   }
 
@@ -115,6 +132,7 @@
     <ListItem
       text={contact.name}
       subtext={contact.jid}
+      image={contact.avatar}
       tabindex={index}
       onclick={() => createChat(contact.jid)}
     />

src/routes/Messages.svelte

@@ -53,14 +53,31 @@
   // TODO: use a sliding window so that only the chatboxes
   // that are in view get rendered
 
+  // Helper function to fetch avatars for a chatbox
+  function getAvatar(chatJID) {
+    let vcard = _converse.vcards.get(chatJID)
+    if (vcard && vcard.attributes?.image) {
+      return {
+        src: 'data:'
+	  + vcard.attributes.image_type
+	  + ';base64,'
+	  + vcard.attributes.image,
+	alt: 'Profile picture for ' + chatJID,
+      }
+    } else {
+      return undefined
+    }
+  }
+
   // Helper function to convert chatboxes into
   // (exceedingly lightweight) object array for
   // final rendering
   function chatboxesToArray(chatboxes) {
     return chatboxes.models.map(c => ({
       id: c.id,
-      title: c.attributes.name || c.attributes.id,
+      title: c.attributes.nickname || c.attributes.id,
       lastMessage: c.messages?.last()?.attributes?.body,
+      avatar: getAvatar(c.id),
     }))
   }
 
@@ -115,6 +132,7 @@
     <ListItem
       text={convo.title}
       subtext={convo.lastMessage}
+      image={convo.avatar}
       tabindex={index}
       onclick={() => openChat(convo.id)}
     />