✨ Messages update & deletion

src/layouts/chat.vue

@@ -1,10 +1,10 @@
 <template>
   <v-app-bar :order="5" color="grey-lighten-3">
-    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
+    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center max-w-full">
       <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" />
 
-      <h2 class="ml-2 text-lg font-500">{{ channels.current?.name }}</h2>
-      <p class="ml-3 text-xs opacity-80">{{ channels.current?.description }}</p>
+      <h2 class="ml-2 text-lg font-500 overflow-hidden ws-nowrap text-clip">{{ channels.current?.name }}</h2>
+      <p class="ml-3 text-xs opacity-80 overflow-hidden ws-nowrap text-clip">{{ channels.current?.description }}</p>
 
       <v-spacer />
 
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { request } from "@/scripts/request"
 import { useRoute } from "vue-router"
-import { ref, watch } from "vue"
+import { onMounted, ref, watch } from "vue"
 import { useChannels } from "@/stores/channels"
 import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
 
@@ -47,9 +47,11 @@ async function readMetadata() {
 
 watch(
   () => route.params.channel,
-  () => {
-    channels.messages = []
-    readMetadata()
+  (val) => {
+    if (val) {
+      channels.messages = []
+      readMetadata()
+    }
   },
   { immediate: true }
 )
@@ -62,4 +64,9 @@ watch(() => channels.done, (val) => {
     })
   }
 }, { immediate: true })
+
+onMounted(() => {
+  channels.current = null
+  channels.messages = []
+})
 </script>