[client] Moves actor name on top of chat messages

- Actor name is now above the chat message(s) rather than to the left
- Subsequent messages from the same actor are collated into a single section

client/source/Chat.mint

@@ -94,23 +94,41 @@ component Chat {
     list-style: none;
     padding: 0px;
     display: grid;
-    grid-template-columns: 6rem 1fr;
+    grid-template-columns: 2rem 1fr;
     grid-gap: 0px;
   }
 
   style message {
     display: contents;
     word-break: break-word;
+
+    &:not(:first-child) .whomst {
+      border-top: 1px dotted #495057;
+    }
   }
 
   fun render {
     <section::chat>
       <Chat.Input username={character.name} socket={socket} />
       <ol::messages>
-      for (msg of Array.reverse(list |> Map.get(room) |> Maybe.withDefault([]))) {
-          <li::message><MessageDisplay data={msg} /></li>
+      for (pair of pairs) {
+          <li::message><MessageDisplay data={pair[0]} first={pair[1]} /></li>
         }
       </ol>
     </section>
+  } where {
+    messages =
+      list
+      |> Map.get(room)
+      |> Maybe.withDefault([])
+      |> Array.reverse
+    pairs =
+      messages
+      |> Array.mapWithIndex((msg : Message, n : Number) : Tuple(Message, Bool) {
+        case (messages |> Array.at(n - 1)) {
+          Maybe::Just(prev) => {msg, msg.from != prev.from}
+            => {msg, true}
+        }
+      })
   }
 }

client/source/Message.mint

@@ -66,6 +66,7 @@ module Message {
 
 component MessageDisplay {
   property data : Message
+  property first : Bool
 
   style total {
     display: inline-block;
@@ -82,16 +83,20 @@ component MessageDisplay {
 
   style sender {
     line-height: 22pt;
+    font-size: 0.8rem;
+    font-weight: bold;
     align-self: end;
     padding: 0.125rem 0.5rem 0.125rem 0px;
-    border-bottom: 1px dotted #495057;
     word-break: break-word;
+    grid-column: span 2;
+    if(!first) {
+      display: none;
+    }
   }
 
   style message {
     line-height: 22pt;
     align-self: end;
-    border-bottom: 1px dotted #495057;
     padding: 0.125rem 0px;
   }
 
@@ -108,8 +113,9 @@ component MessageDisplay {
 
   fun render {
     <>
-      <span::sender><{ data.from.name }></span>
-      <span::message>
+      <div::sender class="whomst"><{ data.from.name }></div>
+      <span></span>
+      <div::message>
         for (part of data.parts) {
           case (part) {
             Message.Part::Text(string) => <{ string }>
@@ -125,7 +131,7 @@ component MessageDisplay {
             </span>
           }
         }
-      </span>
+      </div>
     </>
   }
 }