Gather consecutive messages from same sender

src/frontend/index.css

@@ -87,7 +87,7 @@ input[type="file"] {
 .popup section {
     font-weight: bold;
     display: block;
-    margin-bottom: 1em;
+    margin-bottom: 20px;
 }
 .popup input {
     display: block;
@@ -209,7 +209,7 @@ input[type="file"] {
     content: url("/static/imgs/icons/warning/FF3C00");
     display: inline-block;
     width: 1em;
-    margin-left: .3em;
+    margin-left: 5px;
     vertical-align: middle;
 }
 #left_panel ul li.is_contact p::after {
@@ -219,10 +219,10 @@ input[type="file"] {
     content: url("/static/imgs/icons/verified/FF3C00");
 }
 #left_panel ul li .not_seen_marker {
-    width: .8em;
+    width: 5px;
-    height: .8em;
+    height: 5px;
     background-color: var(--accent);
-    border-radius: 1em;
+    border-radius: 5px;
 }
 #refresher {
     position: relative;
@@ -230,7 +230,7 @@ input[type="file"] {
 #refresher button {
     position: absolute;
     right: 10px;
-    top: 1em;
+    top: 15px;
     z-index: 1;
 }
 #refresher button::after {
@@ -262,7 +262,7 @@ input[type="file"] {
     display: inline-block;
     width: 1.2em;
     vertical-align: middle;
-    padding-left: .3em;
+    margin-left: 10px;
 }
 #chat_header.is_contact p::after {
     content: unset;
@@ -296,7 +296,7 @@ input[type="file"] {
 }
 #message_input {
     border: unset;
-    padding: 1em;
+    padding: 20px;
     font-size: 1.1em;
 }
 #file_transfer {
@@ -319,7 +319,7 @@ input[type="file"] {
 }
 #file_cancel::after {
     background-color: unset;
-    width: 1.2em;
+    width: 20px;
     content: url("/static/imgs/icons/cancel/FF3C00");
 }
 #file_progress {
@@ -342,7 +342,7 @@ input[type="file"] {
 }
 #file_progress_bar {
     flex-grow: 1;
-    height: 1.5em;
+    height: 25px;
 }
 #file_progress_bar div {
     height: 100%;
@@ -357,20 +357,22 @@ input[type="file"] {
     overflow-y: scroll;
     white-space: pre;
 }
-#msg_log li>div:first-of-type { /*message header*/
+#msg_log p {
+    margin: 0;
+}
+#msg_log li .header {
     display: flex;
     align-items: center;
+    margin-top: 15px;
 }
-#msg_log p.name {
+#msg_log li .header p {
-    margin: 0;
     color: var(--accent);
     font-weight: bold;
 }
-#msg_log li>div:last-of-type { /*message content container*/
+#msg_log li .content {
     margin-left: 2em;
-}
+    margin-top: 5px;
-#msg_log li p {
+    margin-bottom: 10px;
-    margin-top: 0;
 }
 #msg_log a {
     color: #238cf5;
@@ -378,10 +380,8 @@ input[type="file"] {
 #msg_log .file {
     display: flex;
     align-items: end;
-    margin-bottom: 1em;
     border-left: 3px solid var(--accent);
-    padding-left: .5em;
+    padding-left: 15px;
-    margin-top: .5em;
 }
 #msg_log .file div { /*title and filename container*/
     display: flex;
@@ -391,14 +391,13 @@ input[type="file"] {
     margin: 0;
 }
 #msg_log .file p {
-    margin: 0;
     color: var(--accent);
 }
 #msg_log .file a::after {
     content: url("/static/imgs/icons/download/FF3C00");
     display: block;
     width: 2em;
-    margin-left: 1em;
+    margin-left: 15px;
 }
 #message_box, #chat_header, #msg_log {
     display: none;

src/frontend/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-const ENTER_KEY_CODE = 13;
 let identityName = undefined;
 let socket = null;
 let notificationAllowed = false;
@@ -20,20 +19,20 @@ function onClickSession(event) {
         }
         displaySessions();
         displayHeader();
-        dislayHistory();
         displayChatBottom();
+        dislayHistory();
     }
 }
 let ip_input = document.getElementById("ip_input");
 ip_input.addEventListener("keyup", function(event) {
-    if (event.keyCode === ENTER_KEY_CODE) {
+    if (event.key === "Enter") {
         socket.send("connect "+ip_input.value);
         ip_input.value = "";
     }
 });
 let message_input = document.getElementById("message_input");
 message_input.addEventListener("keyup", function(event) {
-    if (event.keyCode === ENTER_KEY_CODE) {
+    if (event.key === "Enter") {
         socket.send("send "+currentSessionId+" "+message_input.value);
         message_input.value = "";
     }
@@ -797,8 +796,8 @@ function generateSession(sessionId, session) {
 function generateMsgHeader(name) {
     let p = document.createElement("p");
     p.appendChild(document.createTextNode(name));
-    p.classList.add("name");
     let div = document.createElement("div");
+    div.classList.add("header");
     div.appendChild(generateAvatar(name));
     div.appendChild(p);
     return div;
@@ -807,15 +806,19 @@ function generateMessage(name, msg) {
     let p = document.createElement("p");
     p.appendChild(document.createTextNode(msg));
     let div = document.createElement("div");
+    div.classList.add("content");
     div.appendChild(linkifyElement(p));
     let li = document.createElement("li");
-    li.appendChild(generateMsgHeader(name))
+    if (typeof name !== "undefined") {
+        li.appendChild(generateMsgHeader(name));
+    }
     li.appendChild(div);
     return li;
 }
 function generateFile(name, outgoing, file_info) {
     let div1 = document.createElement("div");
     div1.classList.add("file");
+    div1.classList.add("content");
     let div2 = document.createElement("div");
     let h4 = document.createElement("h4");
     if (outgoing) {
@@ -833,7 +836,9 @@ function generateFile(name, outgoing, file_info) {
     a.target = "_blank";
     div1.appendChild(a);
     let li = document.createElement("li");
+    if (typeof name !== "undefined") {
         li.appendChild(generateMsgHeader(name));
+    }
     li.appendChild(div1);
     return li;
 }
@@ -905,13 +910,17 @@ function displayChatBottom(speed = undefined) {
 function dislayHistory(scrollToBottom = true) {
     msg_log.style.display = "block";
     msg_log.innerHTML = "";
+    let previousOutgoing = undefined;
     msgHistory.get(currentSessionId).forEach(entry => {
-        let name;
+        let name = undefined;
+        if (previousOutgoing != entry[0]) {
+            previousOutgoing = entry[0];
             if (entry[0]) { //outgoing msg
                 name = identityName;
             } else {
                 name = sessionsData.get(currentSessionId).name;
             }
+        }
         if (entry[1]) { //is file
             msg_log.appendChild(generateFile(name, entry[0], entry[2]));
         } else {