🎨 Deconstruct the snackbar

src/components/chat/MessageDeletion.vue

@@ -12,11 +12,6 @@
       </div>
     </template>
   </v-card>
-
-  <v-snackbar v-model="success" :timeout="3000">The realm has been deleted.</v-snackbar>
-
-  <!-- @vue-ignore -->
-  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
 </template>
 
 <script setup lang="ts">
@@ -24,11 +19,11 @@ import { request } from "@/scripts/request"
 import { getAtk } from "@/stores/userinfo"
 import { useChannels } from "@/stores/channels"
 import { ref } from "vue"
+import { useUI } from "@/stores/ui"
 
 const channels = useChannels()
 
-const error = ref<string | null>(null)
-const success = ref(false)
+const { showSnackbar, showErrorSnackbar } = useUI()
 const loading = ref(false)
 
 async function deleteMessage() {
@@ -41,9 +36,9 @@ async function deleteMessage() {
     headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
-    error.value = await res.text()
+    showErrorSnackbar(await res.text())
   } else {
-    success.value = true
+    showSnackbar("The message has been deleted.")
     channels.show.messages.delete = false
     channels.related.messages.delete_to = null
   }