group messages when by same user

src/components/app/MessageLogs.vue

@@ -15,7 +15,6 @@
       </div>
     </div>
     <message
-      class="message-container"
       v-for="(msg, index) in selectedChannelMessages"
       :class="{
         'show-message-animation': index === selectedChannelMessages.length - 1
@@ -24,8 +23,9 @@
       :creator="msg.creator"
       :message="msg"
       :isServer="isServer"
+      :hideAditional="groupedMessages.includes(msg.messageID)"
     />
-
+    <!-- {{ groupedMessages }} -->
     <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
     <div
       class="load-more-button"
@@ -321,6 +321,32 @@ export default {
       return (
         this.$store.getters.bottomUnloaded[this.selectedChannelID] || false
       );
+    },
+    groupedMessages() {
+      const messages = this.selectedChannelMessages;
+      const grouped = [];
+      let groupLength = 0;
+      let prevMessageCreator = null;
+      for (let index = 0; index < messages.length; index++) {
+        const message = messages[index];
+        if (message.type !== 0 && message.type !== undefined) {
+          groupLength = 0;
+          prevMessageCreator = null;
+          continue;
+        }
+        if (message.creator.uniqueID !== prevMessageCreator) {
+          groupLength = 0;
+          prevMessageCreator = message.creator.uniqueID;
+        } else {
+          if (groupLength > 3) {
+            groupLength = 0;
+            continue;
+          }
+          grouped.push(message.messageID);
+          groupLength += 1;
+        }
+      }
+      return grouped;
     }
   }
 };

src/components/app/MessageTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="container"
+    class="message-container container"
-    :class="{ 'mentioned-message': mentioned }"
+    :class="{ 'mentioned-message': mentioned, hideAditional }"
     @mouseover="mouseOverEvent"
     @mouseleave="hover = false"
   >
@@ -18,6 +18,7 @@
     >
       <div class="avatar">
         <profile-picture
+          v-if="!hideAditional"
           :admin="creator.admin"
           :url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
           size="50px"
@@ -26,10 +27,10 @@
         />
       </div>
       <div class="triangle">
-        <div class="triangle-inner" />
+        <div class="triangle-inner" v-if="!hideAditional" />
       </div>
       <div class="content" @dblclick="contentDoubleClickEvent">
-        <div class="user-info">
+        <div class="user-info" v-if="!hideAditional">
           <div
             class="username"
             :style="{ color: roleColor }"
@@ -150,7 +151,7 @@ import windowProperties from "@/utils/windowProperties";
 import { mapState } from "vuex";
 
 export default {
-  props: ["creator", "message", "isServer"],
+  props: ["creator", "message", "isServer", "hideAditional"],
   components: {
     ProfilePicture,
     messageEmbedTemplate,
@@ -385,7 +386,19 @@ $message-color: rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 1;
 }
-
+.hideAditional {
+  .content {
+    border-radius: 4px;
+  }
+  .avatar {
+    height: 46px;
+    flex-shrink: 0;
+  }
+  .triangle {
+    width: 8px;
+    flex-shrink: 0;
+  }
+}
 .drop-down-button {
   opacity: 0;
   transition: 0.2s;
@@ -513,6 +526,8 @@ $message-color: rgba(0, 0, 0, 0.3);
 
 .avatar {
   margin: auto 0 0 0;
+  height: 56px;
+  width: 56px;
 }
 
 .triangle {

src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue

@@ -2,30 +2,25 @@
   <div class="my-profile-panel message-design">
     <div class="message-example">
       <message-template
-        message="Hi"
+        :message="{ message: 'Hi', created: Date.now() }"
-        :username="user.username"
+        :creator="user"
         :date="Date.now()"
-        :unique-i-d="user.uniqueID"
         :admin="user.admin"
-        :avatar="user.avatar"
       />
       <message-template
-        message="Hello."
+        :message="{ message: 'Hello.', created: Date.now() }"
-        username="Cool Dude"
+        :creator="dummyUser"
         :date="Date.now()"
       />
       <message-template
-        message="Whaddup"
+        :message="{ message: 'Whaddup', created: Date.now() }"
-        :username="user.username"
+        :creator="user"
         :date="Date.now()"
-        :unique-i-d="user.uniqueID"
         :admin="user.admin"
-        :avatar="user.avatar"
       />
       <message-template
-        message="Nothing, bye."
+        :message="{ message: 'Nothing, bye.', created: Date.now() }"
-        username="Cool Dude"
+        :creator="dummyUser"
-        :date="Date.now()"
       />
     </div>
     <div class="options">
@@ -82,7 +77,12 @@ export default {
     MessageTemplate
   },
   data() {
-    return {};
+    return {
+      dummyUser: {
+        username: "Cool Dude",
+        uniqueID: "dummy"
+      }
+    };
   },
   computed: {
     apperance() {