Customise style for own and system chat bubbles

Partially addresses the concerns in #2! Own messages are now on
the opposite side in their own colour, and system messages (such
as "* is online", detected by having no "from" attribute) are
displayed without any bubble at all.

Along the way, we also fixed bug #14 where own messages would
show the other person's name underneath. That was because we were
looking at the nickname attribute, which, as it turns out, gives
the nickname for the entire conversation or something, not for the
chat itself. I think it wasn't a problem in groupchats, but anyway,
that's something to tackle another day...

public/kaios-native-ui.css

@@ -41,7 +41,7 @@
   --chatbox-indicator-background-focused: #6a6a6a;
   --chatbox-indicator-color-focused: #ffffff;
   --chatbox-background: #cccccc;
-  --chatbox-background-primary: #323232;
+  --chatbox-background-primary: #873eff;
   --chatbox-color: #323232;
   --chatbox-color-primary: #ffffff;
 

src/components/ChatMessage.svelte

@@ -1,28 +1,54 @@
 <script>
   export let message
+  export let ourJID
   export let tabindex = -1
   export let autofocus = false
   export let onclick = () => {}
+
+  let ourMessage
+
+  $: {
+    ourMessage = (message?.attributes?.from == ourJID)
+  }
 </script>
 
 {#if message}
-<div
-  class="chat-item-indicator focusable"
-  {tabindex}
-  {autofocus}
-  on:click={onclick}
->
-  <div class="chat-item-row">
-    <div class="avatar"></div>
-    <div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
-      <p>{message.attributes?.message}</p>
-    </div>
+  {#if !message.attributes?.from}
+  <div
+    class="chat-item-indicator focusable"
+    {tabindex}
+    {autofocus}
+    on:click={onclick}
+  >
+    <p class="chat-item-bare">
+      {message.attributes?.message}<br />
+      {new Date(message.attributes?.time).toLocaleString()}
+    </p>
   </div>
-  <p class="chat-item-info">
-    {message.attributes?.nick || message.attributes?.nickname || message.attributes?.from}
-    {new Date(message.attributes?.time).toLocaleString()}
-  </p>
-</div>
+  {:else}
+  <div
+    class="chat-item-indicator focusable"
+    class:own-chat={ourMessage}
+    {tabindex}
+    {autofocus}
+    on:click={onclick}
+  >
+    <div class="chat-item-row">
+      <div class="avatar"></div>
+      <div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
+        <p>{message.attributes?.message}</p>
+      </div>
+    </div>
+    <p class="chat-item-info">
+      {#if ourMessage}
+      me,
+      {:else}
+      {message.attributes?.nick || message.attributes?.nickname || message.attributes?.from},
+      {/if}
+      {new Date(message.attributes?.time).toLocaleString()}
+    </p>
+  </div>
+  {/if}
 {/if}
 
 <style>
@@ -38,17 +64,26 @@
   }
 
   .chat-item-row {
-    vertical-align: top;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .own-chat .chat-item-row {
+    flex-direction: row-reverse;
   }
 
   .avatar {
     height: 3rem;
     width: 3rem;
-    margin-right: 0.5rem;
+    margin: 0 0.5rem auto 0;
     display: inline-block;
     vertical-align: top;
     background: var(--chatbox-background);
-    margin-bottom: auto;
+  }
+
+  .own-chat .avatar {
+    margin: 0 0 auto 0.5rem;
+    background: var(--chatbox-background-primary);
   }
 
   .chat-item {
@@ -60,6 +95,12 @@
     border-radius: 0 1rem 1rem 1rem;
   }
 
+  .own-chat .chat-item {
+    border-radius: 1rem 0 1rem 1rem;
+    background: var(--chatbox-background-primary);
+    color: var(--chatbox-color-primary);
+  }
+
   .chat-item p {
     word-wrap: break-word;
     overflow: hidden;
@@ -77,14 +118,31 @@
   }
 
   .chat-item-info {
-    margin-left: 4.5rem;
+    margin: 0 0 0 4.5rem;
     font-size: 1.4rem;
     font-weight: 400;
     color: var(--chatbox-color);
-    margin-top: 0;
+  }
+
+  .own-chat .chat-item-info {
+    margin: 0 4.5rem 0 0;
   }
 
   .chat-item-indicator:focus .chat-item-info {
     color: var(--chatbox-indicator-color-focused);
   }
+
+  .chat-item-bare {
+    margin-left: 4.5rem;
+    margin-right: 4.5rem;
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: var(--chatbox-color);
+    margin-top: 0;
+    text-align: center;
+  }
+
+  .chat-item-indicator:focus .chat-item-bare {
+    color: var(--chatbox-indicator-color-focused);
+  }
 </style>

src/routes/Chat.svelte

@@ -223,7 +223,11 @@
 {:else}
   <div class="message-list">
   {#each messages as message, index (message.id)}
-   <ChatMessage {message} tabindex={index}/>
+   <ChatMessage
+     {message}
+     tabindex={index}
+     ourJID={_converse.bare_jid}
+   />
   {/each}
   </div>
 {/if}