💄 Better chatting ui

🐛 Fix multiple connections

src/components/chat/ChatEditor.vue

@@ -60,7 +60,6 @@
       auto-grow
       hide-details
       class="w-full"
-      variant="solo"
       density="comfortable"
       placeholder="Enter some messages..."
       :rows="1"
@@ -70,7 +69,7 @@
       @keydown="onEditorKeydown"
       @paste="pasteMedia"
     >
-      <template #append>
+      <template #append-inner>
         <v-btn
           icon
           type="button"
@@ -78,7 +77,7 @@
           size="small"
           variant="text"
           :disabled="loading"
-          @click="dialogs.attachments = true"
+          @click.stop="dialogs.attachments = true"
         >
           <v-badge v-if="data.attachments.length > 0" :content="data.attachments.length">
             <v-icon icon="mdi-paperclip" />

src/components/navigation/NavigationDrawer.vue

@@ -1,14 +1,13 @@
 <template>
   <v-navigation-drawer
     v-model="ui.drawer.open"
+    floating
     color="grey-lighten-5"
     width="320"
     :permanent="isLargeScreen"
     :rail="ui.drawer.mini"
     :rail-width="58"
     :order="0"
-    floating
-    @click="ui.drawer.mini = false"
   >
     <div class="flex flex-col h-full">
       <v-toolbar
@@ -16,6 +15,7 @@
         color="primary"
         height="64"
         :style="`padding-top: ${safeAreaTop}`"
+        @click="expandDrawer"
       >
         <div class="flex items-center">
           <img src="/favicon.png" alt="Logo" width="32" height="32" class="block" />
@@ -58,6 +58,7 @@
           density="compact"
           :opened="ui.drawer.mini ? [] : expanded.resources"
           @update:opened="(val) => expanded.resources = val"
+          @click="expandDrawer"
         >
           <channel-list />
           <realm-list />
@@ -66,19 +67,17 @@
 
       <!-- User info -->
       <v-list
-        class="border-opacity-15 h-[64px]"
-        style="border-top-width: thin"
+        class="bg-grey-lighten-3"
         :style="`margin-bottom: ${safeAreaBottom}`"
+        @click="expandDrawer"
       >
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
             <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
           </template>
           <template #append>
-            <div v-if="id.userinfo.isLoggedIn">
-              <notification-list />
-              <user-menu />
-            </div>
+            <notification-list v-if="id.userinfo.isLoggedIn" />
+            <user-menu />
           </template>
         </v-list-item>
       </v-list>
@@ -87,9 +86,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue"
+import { computed, onMounted, reactive } from "vue"
 import { useUserinfo } from "@/stores/userinfo"
-import { useWellKnown } from "@/stores/wellKnown"
 import { useUI } from "@/stores/ui"
 import { useRealms } from "@/stores/realms"
 import { useChannels } from "@/stores/channels"
@@ -133,9 +131,9 @@ const nickname = computed(() => {
   }
 })
 
-id.readProfiles()
-
-useWellKnown().readWellKnown()
+function expandDrawer() {
+  ui.drawer.mini = false
+}
 
 onMounted(() => {
   PullToRefresh.init({

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>

src/layouts/master.vue

@@ -1,7 +1,7 @@
 <template>
   <NavigationDrawer />
 
-  <v-app-bar v-if="!isLargeScreen" height="64" color="primary" scroll-behavior="hide" :order="2" flat>
+  <v-app-bar v-if="!isLargeScreen && ui.appbar.show" height="64" color="primary" scroll-behavior="hide" :order="2">
     <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
       <v-app-bar-nav-icon variant="text" @click.stop="ui.drawer.open = !ui.drawer.open" />
 

src/stores/ui.ts

@@ -8,6 +8,9 @@ export const useUI = defineStore("ui", () => {
     messages: false,
   })
 
+  const appbar = reactive({
+    show: true,
+  })
   const drawer = reactive({
     open: true,
     mini: false,
@@ -32,5 +35,5 @@ export const useUI = defineStore("ui", () => {
    }, 5000)
   }
 
-  return { safeArea, snackbar, drawer, reconnection, showSnackbar, showErrorSnackbar }
+  return { safeArea, snackbar, appbar, drawer, reconnection, showSnackbar, showErrorSnackbar }
 })

src/views/chat/page.vue

@@ -8,7 +8,7 @@
   <v-footer
     app
     class="footer-section flex-col gap-2 min-h-[64px]"
-    :style="`padding-bottom: max(${safeAreaBottom}, 12px)`"
+    :style="`padding-bottom: max(${safeAreaBottom}, 6px)`"
   >
     <v-expand-transition>
       <v-expansion-panels v-show="channels.call">
@@ -43,9 +43,9 @@ import { request } from "@/scripts/request"
 import { useUI } from "@/stores/ui"
 import { computed, onUnmounted, reactive, ref, watch } from "vue"
 import { useRoute } from "vue-router"
+import { useUserinfo } from "@/stores/userinfo"
 import ChatList from "@/components/chat/ChatList.vue"
 import ChatEditor from "@/components/chat/ChatEditor.vue"
-import { useUserinfo } from "@/stores/userinfo"
 
 const ui = useUI()
 const id = useUserinfo()
@@ -72,7 +72,7 @@ async function readCall() {
   )
   if (res.status !== 200 && res.status !== 404) {
     showErrorSnackbar(await res.text())
-  } else {
+  } else if (res.status !== 404) {
     channels.call = await res.json()
   }
   loading.value = false
@@ -171,7 +171,7 @@ async function mountJitsi() {
     jwt: tk.token,
     userInfo: {
       avatar: id.userinfo.data?.picture,
-      displayName: id.userinfo.displayName,
+      displayName: id.userinfo.displayName
     },
     configOverwrite: {
       prejoinPageEnabled: true,
@@ -198,12 +198,18 @@ onUnmounted(() => unmountJitsi())
 
 <style scoped>
 .footer-section {
-  background: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.65);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
-  padding-top: 12px !important;
+
+  padding-top: 8px !important;
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+
+  display: flex;
+  justify-content: center;
 }
 </style>