Display initial letter in avatar

Just to make it not-blank! In future we should be displaying the
actual XMPP avatars here

This is the final feature on the to-do list for and therefore
closes #2

src/components/ChatMessage.svelte

@@ -9,6 +9,7 @@
   let meCommand
 
   let senderName
+  let avatarInitial // TODO: use actual avatars instead
 
   $: {
     ourMessage = (message?.attributes?.from == ourJID)
@@ -25,6 +26,10 @@
 	  || message.attributes.nickname
 	  || message.attributes.from
 	: undefined
+
+    avatarInitial = senderName
+      ? senderName[0]
+      : '?'
   }
 </script>
 
@@ -50,7 +55,7 @@
     on:click={onclick}
   >
     <div class="chat-item-me-command">
-      <div class="avatar avatar-small"></div>
+      <div class="avatar avatar-small">{avatarInitial}</div>
       {senderName}
       {meCommand}
     </div>
@@ -64,7 +69,7 @@
     on:click={onclick}
   >
     <div class="chat-item-row">
-      <div class="avatar"></div>
+      <div class="avatar">{avatarInitial}</div>
       <div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
         <p>{message.attributes?.message}</p>
       </div>
@@ -106,9 +111,12 @@
     height: 3rem;
     width: 3rem;
     margin: 0 0.5rem auto 0;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     vertical-align: top;
     background: var(--chatbox-background);
+    color: var(--chatbox-color);
   }
 
   .avatar-small {
@@ -119,6 +127,7 @@
   .own-chat .avatar {
     margin: 0 0 auto 0.5rem;
     background: var(--chatbox-background-primary);
+    color: var(--chatbox-color-primary);
   }
 
   .chat-item {