🎨 Deconstruct the snackbar

src/components/publish/ArticleEditor.vue

@@ -109,14 +109,10 @@
   <media ref="media" v-model:show="dialogs.media" v-model:uploading="uploading" v-model:value="data.attachments" />
   <publish-area v-model:show="dialogs.area" v-model:value="data.realm_id" />
 
-  <v-snackbar v-model="success" :timeout="3000">Your article has been published.</v-snackbar>
   <v-snackbar v-model="uploading" :timeout="-1">
     Uploading your media, please stand by...
     <v-progress-linear class="snackbar-progress" indeterminate />
   </v-snackbar>
-
-  <!-- @vue-ignore -->
-  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
 </template>
 
 <script setup lang="ts">
@@ -129,6 +125,7 @@ import { useRoute, useRouter } from "vue-router"
 import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
 import Media from "@/components/publish/parts/PublishMedia.vue"
 import PublishArea from "@/components/publish/parts/PublishArea.vue"
+import { useUI } from "@/stores/ui"
 
 const route = useRoute()
 const realms = useRealms()
@@ -160,10 +157,9 @@ const currentRealm = computed(() => {
 
 const router = useRouter()
 
-const error = ref<string | null>(null)
-const success = ref(false)
-const reverting = ref(false)
+const { showSnackbar, showErrorSnackbar } = useUI()
 const loading = ref(false)
+const reverting = ref(false)
 const uploading = ref(false)
 
 async function postArticle(evt: SubmitEvent) {
@@ -187,15 +183,15 @@ async function postArticle(evt: SubmitEvent) {
     headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify(payload)
   })
-  if (res.status === 200) {
+  if (res.status !== 200) {
+    showErrorSnackbar(await res.text())
+  } else {
     const data = await res.json()
-    success.value = true
+    showSnackbar("Your article has been published.")
     editor.show.article = false
 
     resetEditor(form)
-    router.push({ name: "posts.details.articles", params: { alias: data.alias } })
-  } else {
-    error.value = await res.text()
+    await router.push({ name: "posts.details.articles", params: { alias: data.alias } })
   }
   loading.value = false
 }