🎨 Deconstruct the snackbar

src/layouts/chat.vue

@@ -15,9 +15,6 @@
   </v-app-bar>
 
   <router-view />
-
-  <!-- @vue-ignore -->
-  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
 </template>
 
 <script setup lang="ts">
@@ -26,20 +23,21 @@ import { useRoute } from "vue-router"
 import { onMounted, ref, watch } from "vue"
 import { useChannels } from "@/stores/channels"
 import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
+import { useUI } from "@/stores/ui"
+
+const { showErrorSnackbar } = useUI()
 
 const route = useRoute()
 const channels = useChannels()
 
-const error = ref<string | null>(null)
 const loading = ref(false)
 
 async function readMetadata() {
   loading.value = true
   const res = await request("messaging", `/api/channels/${route.params.channel}`)
   if (res.status !== 200) {
-    error.value = await res.text()
+    showErrorSnackbar(await res.text())
   } else {
-    error.value = null
     channels.current = await res.json()
   }
   loading.value = false