add pfps, improve the looks of the client a bit

1 files changed, 30 insertions, 21 deletions

diff --git a/pages/main/page.js b/pages/main/page.js
index 9edb966..370b525 100644
--- a/pages/main/page.js
+++ b/pages/main/page.js
@@ -65,33 +65,42 @@ export function onload() {
     function createMessage(msg) {
         let elem = html('div')
             .class('message')
-            .for(msg.replies, r => html('div')
-                .class('reply')
-                .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`))
             .child('div')
-                .class('message-header')
-                .child('span')
-                    .class('username')
-                    .html(getUsernameHTML(msg))
+                .class('message-container')
+                .child('img')
+                    .attr('src', msg.author.avatar)
                     .up()
                 .child('div')
-                    .class('action-buttons')
-                    .child('button')
-                        .text('reply')
-                        .ev('click', e => {
-                            if(msg.length >= 3) return;
-                            replies.push(msg);
-                            rednerReplyThingy();
-                        })
+                    .class('message-content-container')
+                    .for(msg.replies, r => html('div')
+                        .class('reply')
+                        .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`))
+                    .child('div')
+                        .class('message-header')
+                        .child('span')
+                            .class('username')
+                            .html(getUsernameHTML(msg))
+                            .up()
+                        .child('div')
+                            .class('action-buttons')
+                            .child('button')
+                                .text('reply')
+                                .ev('click', e => {
+                                    if(msg.length >= 3) return;
+                                    replies.push(msg);
+                                    rednerReplyThingy();
+                                })
+                                .up()
+                            .up()
+                        .up()
+                    .child('span')
+                        .class('post-content')
+                        .html(md.render(msg?.content))
+                    .child('div')
+                        .for(msg.attachments, a => html('img').class('attachment').attr('src', a))
                         .up()
                     .up()
                 .up()
-            .child('span')
-                .class('post-content')
-                .html(md.render(msg?.content))
-            .child('div')
-                .for(msg.attachments, a => html('img').class('attachment').attr('src', a))
-                .up()
             .up()
         msgArea.appendChild(elem)
     }