:recycle: styling the chat view a little bit

frontend/src/views/ChatView.vue

@@ -1,33 +1,33 @@
 <template lang="pug">
 main.view--chat
-    header(v-if='profile')
-        p {{ profile.chatter }}
-        hr
-        p messages: {{ messages }}
-        hr
+    header.mb6(v-if='profile')
+        h3 chatting with: {{ target.profile_id }}
         p subscriptions: {{ profile.chatter.subscriptions }}
 
     article(v-if='profile.isLoggedIn && target')
-        h3 {{ profile.id }}&nbsp;
-            span chatting with: {{ target.profile_id }}
-
         ul#messages.w-flex.column
-            //- li.pa1(v-for='(message, i in messages)')
-            //-     w-card.w-flex.row
-            //-         article
-                //- p {{ message.message }}
-        //-             footer
-        //-                 p {{ message.publisher }} | {{ message.timetoken }}
-        //-                 w-button.my12(@click='openDrawer = i' text) setting
-        //-             w-drawer(absolute v-model='openDrawer' width='160px')
-        //-                 p some settings things
-
-        input(@keyup.enter='sendMessage' v-model='toSend')
-        button(@click='sendMessage') send
+            template(v-for='chatmessage in messages')
+                li(
+                    :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
+                    v-if='chatmessage.message.description'
+                )
+                    .message-wrapper.pa4
+                        p.pb1
+                            span(
+                                v-if='chatmessage.publisher == profile.id.value'
+                            ) you
+                            span(v-else) {{ chatmessage.publisher }}
+                            span @{{ new Date(parseInt(chatmessage.timetoken) / 10000).toLocaleTimeString('en-US') }}
+                        p {{ chatmessage.message.description }}
 
     p(v-else-if='profile.isLoggedIn && !target') No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
     w-spinner(bounce v-else)
 
+    footer.w-flex.row
+        w-input(@keyup.enter='sendMessage' outline v-model='toSend')
+        w-button(@click='sendMessage')
+            w-icon mdi mdi-send
+
     MainNav
 </template>
 
@@ -92,3 +92,18 @@ export default {
     },
 }
 </script>
+
+<style lang="sass">
+main.view--chat
+    article ul
+        list-style: none
+        > li
+            font-family: sans-serif
+            background-color: powderblue
+            margin: 0 0.5em 1em 2em
+            &.me
+                margin: 0 2em 1em 0.5em
+                background-color: lightgreen
+            p:first-of-type
+                font-size: 10px
+</style>