🎨 Deconstruct the snackbar

src/components/realms/RealmDeletion.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">
@@ -25,15 +20,15 @@ import { useRealms } from "@/stores/realms"
 import { getAtk } from "@/stores/userinfo"
 import { useRoute, useRouter } from "vue-router"
 import { ref } from "vue"
+import { useUI } from "@/stores/ui"
 
+const { showSnackbar, showErrorSnackbar } = useUI()
 const route = useRoute()
 const router = useRouter()
 const realms = useRealms()
 
 const emits = defineEmits(["relist"])
 
-const error = ref<string | null>(null)
-const success = ref(false)
 const loading = ref(false)
 
 async function deleteRealm() {
@@ -46,9 +41,9 @@ async function deleteRealm() {
     headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
-    error.value = await res.text()
+    showErrorSnackbar(await res.text())
   } else {
-    success.value = true
+    showSnackbar("The realm has been deleted.")
     realms.show.delete = false
     realms.related.delete_to = null
     emits("relist")