Simple search bar functionality

src/App.vue

@@ -25,10 +25,10 @@
         </div>
       </div>
       <div class="searchContainer">
-        <input type="search" placeholder="Search" class="textinput" />
+        <input type="search" placeholder="Search" class="textinput" v-model="search" />
       </div>
       <simplebar class="chats" ref="chats" data-simplebar-auto-hide="false">
-        <chat v-for="chat in chats" :key="chat.id" :chatid="chat.id"
+        <chat v-for="chat in filteredChats" :key="chat.id" :chatid="chat.id"
           :author="chat.author"
           :text="chat.text"
           :date="chat.date"
@@ -60,11 +60,19 @@ export default {
   data: function () {
     return {
       chats: [],
-      limit: 25,
+      limit: 50,
       offset: 0,
       loading: false,
       notifSound: null,
-      updateAvailable: false
+      updateAvailable: false,
+      search: ''
+    }
+  },
+  computed: {
+    filteredChats() {
+      return this.chats.filter((chat) => {
+        return chat.author.toLowerCase().includes(this.search.toLowerCase()) || chat.text.toLowerCase().includes(this.search.toLowerCase())
+      })
     }
   },
   methods: {

src/background.js

@@ -52,7 +52,7 @@ async function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    //if (!process.env.IS_TEST) win.webContents.openDevTools({mode:'undocked'})
+    if (!process.env.IS_TEST) win.webContents.openDevTools({mode:'undocked'})
 
     //Log autoUpdater in development
     autoUpdater.logger = require("electron-log")

src/components/Message.vue

@@ -187,6 +187,8 @@ export default {
           this.autoCompleteInput(input.value)
         }
       }
+
+      this.$nextTick(this.autoCompleteHooks)
     },
     isEmojis(msgText) {
       const regex = /<% RGI_Emoji %>|\p{Emoji_Presentation}|\p{Emoji}\uFE0F|\p{Emoji_Modifier_Base}/gu
@@ -295,7 +297,7 @@ export default {
     }
   },
   mounted () {
-    this.autoCompleteHooks()
+    this.$nextTick(this.autoCompleteHooks)
     this.fetchMessages()
   },
   socket: {
@@ -343,6 +345,7 @@ export default {
         }
         return
       }
+
       if (Object.keys(message).length == 0) {
         console.log("Received a message, but content was empty.")
       } else {