💄 Better chatting ui

🐛 Fix multiple connections

src/layouts/chat.vue

@@ -1,34 +1,36 @@
 <template>
-  <v-app-bar :order="5" color="grey-lighten-3">
+  <v-app-bar :order="5" scroll-behavior="hide" color="grey-lighten-3">
     <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" />
+      <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" :to="{ name: 'explore' }" />
 
       <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 />
+    </div>
 
-      <div v-if="channels.current">
-        <v-btn
-          v-if="channels.call"
-          icon="mdi-phone-hangup"
-          size="small"
-          variant="text"
-          :loading="calling"
-          @click="endsCall"
-        />
-        <v-btn
-          v-else
-          icon="mdi-phone-plus"
-          size="small"
-          variant="text"
-          :loading="calling"
-          @click="makeCall"
-        />
+    <template v-if="channels.current" #append>
+      <v-btn
+        v-if="channels.call"
+        icon="mdi-phone-hangup"
+        size="small"
+        variant="text"
+        :loading="calling"
+        @click="endsCall"
+      />
+      <v-btn
+        v-else
+        icon="mdi-phone-plus"
+        variant="text"
+        size="small"
+        :loading="calling"
+        @click="makeCall"
+      />
 
+      <div class="me-5">
         <channel-action :item="channels.current" />
       </div>
-    </div>
+    </template>
   </v-app-bar>
 
   <router-view />
@@ -37,7 +39,7 @@
 <script setup lang="ts">
 import { request } from "@/scripts/request"
 import { useRoute } from "vue-router"
-import { onMounted, ref, watch } from "vue"
+import { onMounted, onUnmounted, ref, watch } from "vue"
 import { useChannels } from "@/stores/channels"
 import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
 import { useUI } from "@/stores/ui"
@@ -45,6 +47,7 @@ import { getAtk } from "@/stores/userinfo"
 
 const { showErrorSnackbar } = useUI()
 
+const ui = useUI()
 const route = useRoute()
 const channels = useChannels()
 
@@ -106,8 +109,17 @@ watch(() => channels.done, (val) => {
   }
 }, { immediate: true })
 
+watch(
+  () => channels.current,
+  (val) => {
+    ui.appbar.show = !val
+  }
+)
+
 onMounted(() => {
   channels.current = null
   channels.messages = []
 })
+
+onUnmounted(() => ui.appbar.show = true)
 </script>