🐛 Websocket auto reconnecting

src/components/chat/renderer/MessageAttachment.vue

@@ -23,13 +23,13 @@
         <video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
           <source :src="getUrl(item)" />
         </video>
-        <div v-else-if="item.type === 3" class="w-[480px] py-12">
+        <div v-else-if="item.type === 3" class="py-5 px-2">
           <div class="text-center">
             <p class="mb-1">{{ getFileName(item) }}</p>
-            <audio controls :src="getUrl(item)" class="mx-auto"></audio>
+            <audio controls :src="getUrl(item)" class="mx-auto  max-w-[85%]"></audio>
           </div>
         </div>
-        <div v-else class="w-[480px] py-12">
+        <div v-else class="py-5 px-2">
           <div class="text-center">
             <p>{{ getFileName(item) }}</p>
             <a class="underline" target="_blank" :href="getUrl(item)">Download</a>

src/components/posts/PostAttachment.vue

@@ -22,13 +22,13 @@
         <video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
           <source :src="getUrl(item)" />
         </video>
-        <div v-else-if="item.type === 3" class="w-[480px] py-12">
+        <div v-else-if="item.type === 3" class="py-5 px-2">
           <div class="text-center">
             <p class="mb-1">{{ getFileName(item) }}</p>
-            <audio controls :src="getUrl(item)" class="mx-auto"></audio>
+            <audio controls :src="getUrl(item)" class="mx-auto max-w-[85%]"></audio>
           </div>
         </div>
-        <div v-else class="w-[480px] py-12">
+        <div v-else class="py-5 px-2">
           <div class="text-center">
             <p>{{ getFileName(item) }}</p>
             <a class="underline" target="_blank" :href="getUrl(item)">Download</a>

src/stores/channels.ts

@@ -6,6 +6,7 @@ import { useRoute } from "vue-router"
 
 export const useChannels = defineStore("channels", () => {
   let socket: WebSocket
+  let reconnectCount = 0
 
   const done = ref(false)
 
@@ -69,9 +70,16 @@ export const useChannels = defineStore("channels", () => {
 
     socket.addEventListener("open", (event) => {
       console.log("[MESSAGING] The unified websocket has been established... ", event.type)
+      reconnectCount = 0
     })
     socket.addEventListener("close", (event) => {
       console.warn("[MESSAGING] The unified websocket is disconnected... ", event.reason, event.code)
+      if(reconnectCount <= 3) {
+        connect().then(() => {
+          console.warn("[MESSAGING] Now reconnecting!")
+          reconnectCount++
+        })
+      }
     })
     socket.addEventListener("message", (event) => {
       const data = JSON.parse(event.data)

src/stores/notifications.ts

@@ -7,6 +7,7 @@ import { Capacitor } from "@capacitor/core"
 
 export const useNotifications = defineStore("notifications", () => {
   let socket: WebSocket
+  let reconnectCount = 0
 
   const loading = ref(false)
 
@@ -48,9 +49,16 @@ export const useNotifications = defineStore("notifications", () => {
 
     socket.addEventListener("open", (event) => {
       console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type)
+      reconnectCount = 0
     })
     socket.addEventListener("close", (event) => {
       console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
+      if(reconnectCount <= 3) {
+        connect().then(() => {
+          console.warn("[NOTIFICATIONS] Now reconnecting!")
+          reconnectCount++
+        })
+      }
     })
     socket.addEventListener("message", (event) => {
       const data = JSON.parse(event.data)

src/views/explore.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container class="wrapper overflow-auto h-auto no-scrollbar">
-    <div class="timeline mt-[-16px]">
+  <v-container class="wrapper h-auto no-scrollbar">
+    <div class="timeline min-w-0 mt-[-16px]">
       <post-list v-model:posts="posts" :loader="readMore" />
     </div>
 
-    <div class="aside w-full max-md:order-first">
+    <div class="aside min-w-0 w-full max-md:order-first">
       <v-card title="Categories">
         <v-list density="compact">
           <v-list-item title="All" prepend-icon="mdi-apps" active></v-list-item>

src/views/realms/page.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container class="flex max-md:flex-col gap-3 overflow-auto h-auto no-scrollbar">
-    <div class="timeline flex-grow-1 mt-[-16px]">
+  <v-container class="wrapper h-auto no-scrollbar">
+    <div class="timeline mt-[-16px]">
       <post-list v-model:posts="posts" :loader="readMore" />
     </div>
 
-    <div class="aside md:sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
+    <div class="aside max-md:order-first">
       <v-card :loading="loading">
         <template #title>
           <div class="flex justify-between">
@@ -123,3 +123,18 @@ function parseContent(src: string): string {
   return dompurify().sanitize(parse(src) as string)
 }
 </script>
+
+<style scoped>
+.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/users/page.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-container class="wrapper overflow-auto h-auto no-scrollbar">
-    <div class="name-card col-span-2">
+  <v-container class="wrapper h-auto no-scrollbar">
+    <div class="min-w-0 name-card col-span-2">
       <v-card class="w-full">
         <v-img v-if="accountBanner" cover height="280px" :src="accountBanner" />
 
@@ -24,7 +24,7 @@
       </v-card>
     </div>
 
-    <v-card class="browser h-fit">
+    <v-card class="min-w-0 browser h-fit">
       <v-tabs v-model="tab" align-tabs="center" bg-color="grey-lighten-4">
         <v-tab value="page">Personal Page</v-tab>
         <v-tab value="timeline">Timeline</v-tab>
@@ -50,7 +50,7 @@
       </v-card-text>
     </v-card>
 
-    <div class="aside h-fit max-md:order-first">
+    <div class="min-w-0 aside h-fit max-md:order-first">
       <v-card prepend-icon="mdi-account-details" title="Bio">
         <v-card-text class="flex flex-col gap-2.5">
           <div>