update

README.md

@@ -28,12 +28,10 @@ Colubrina is a simple self-hostable chatting platform written in Vue, and Vuetif
 - [x] Channel message pins
 - [x] Read receipts
 
-<img src="https://i.troplo.com/i/d608273e066c.png" alt="Chat" width="45%"></img>
+<img src="https://i.troplo.com/i/cb08c414644d.png" alt="Chat" width="45%"></img>
-<img src="https://i.troplo.com/i/e8e2c9d6e349.png" alt="Friends" width="45%"></img>
+<img src="https://i.troplo.com/i/9e5beb241d19.png" alt="Friends" width="45%"></img>
-<img src="https://i.troplo.com/i/e958b8e58c5e.png" alt="Chat with AMOLED theme" width="45%"></img>
+<img src="https://i.troplo.com/i/a0459cbfd312.png" alt="Chat with AMOLED theme" width="45%"></img>
-<img src="https://i.troplo.com/i/279376da3f1d.png" alt="Chat with profile card and light theme" width="45%"></img>
+<img src="https://i.troplo.com/i/48f5e875d455.png" alt="Chat with profile card and light theme" width="45%"></img>
-<img src="https://i.troplo.com/i/59b63d5aa167.png" alt="QuickSwitcher" width="45%"></img>
-<img src="https://i.troplo.com/i/b2d6dd14c6b6.png" alt="QuickSwitcher with AMOLED theme" width="45%"></img>
 ## Backend setup
 First, configure a database and user (MariaDB strongly recommended) for Colubrina.<br>
 Please navigate to the `backend` folder and run `yarn`.<br>

frontend/src/components/CommsInput.vue

@@ -153,7 +153,7 @@
               v-on="on"
               id="attachment-button"
               icon
-              style="margin-top: -2px; margin-left: -2px"
+              style="margin-top: -3px; margin-left: -4px"
               small
               @dblclick.stop="openFileInput"
             >

frontend/src/components/Message.vue

@@ -45,9 +45,7 @@
             :dense="lastMessage"
             :id="'message-' + index"
             @contextmenu="show($event, 'message', message)"
-            :style="
+            :style="lastMessage ? 'margin-bottom: -5px; margin-top: -5px;' : ''"
-              lastMessage ? 'margin-bottom: -10px; margin-top: -10px;' : ''
-            "
           >
             <v-avatar size="45" class="mr-2" v-if="!lastMessage">
               <v-img

frontend/src/views/Communications/Communications.vue

@@ -23,12 +23,14 @@ export default {
       }
     }
   },
+  mounted() {
+    if (!this.$route.params.id) {
+      this.$router.push("/communications/friends")
+    }
+  },
   watch: {
     selectedChat() {
       this.$store.commit("setSelectedChat", this.selectedChat)
-    },
-    "$route.params.id"() {
-      this.$store.commit("setLastChat", this.$route.params.id || "friends")
     }
   }
 }

frontend/src/views/Communications/CommunicationsChat.vue

@@ -1064,11 +1064,7 @@ export default {
       })
     },
     async getMessages() {
-      if (!this.$store.state.messages[this.chat.id]) {
-        this.loadingMessages = true
-      } else {
       this.autoScroll()
-      }
       await this.axios
         .get(
           process.env.VUE_APP_BASE_URL +
@@ -1236,7 +1232,6 @@ export default {
         drafts[oldVal] = ""
       }
       this.message = drafts[val] || ""
-      this.messages = this.$store.state.messages[val] || []
       this.usersTyping = []
       this.replying = null
       this.reachedTop = false

frontend/src/views/Communications/CommunicationsFriends.vue

@@ -11,7 +11,7 @@
             $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
           "
         >
-          <v-card class="rounded-xl" color="card" elevation="0">
+          <v-card class="rounded-0" color="card" elevation="0">
             <v-toolbar color="toolbar" elevation="0">
               <v-toolbar-title> Users </v-toolbar-title>
             </v-toolbar>
@@ -82,7 +82,7 @@
             $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
           "
         >
-          <v-card class="rounded-xl" color="card" elevation="0">
+          <v-card class="rounded-0" color="card" elevation="0">
             <v-toolbar color="toolbar" elevation="0">
               <v-toolbar-title> Incoming </v-toolbar-title>
             </v-toolbar>