added info-modal + updated error handling

src/components/InfoModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="infos.data" id="modal">
+    <div v-for="(info, id) in infos.data" :key="id" class="custom-modal">
+      <div :class="info.type === 'error'
+              ? 'bg-danger text-white'
+              : info.type === 'warning'
+              ? 'bg-warning text-secondary'
+              : info.type === 'success'
+              ? 'bg-success text-white'
+              : 'bg-secondary text-white'"
+           class="card text-end">
+        <div class="card-header d-flex justify-content-between">
+          <div>
+            <span v-if="info.type !== 'success'">
+              Error <span class="mx-2">-</span> {{ info.statuscode }}
+            </span>
+            <span v-else>
+              Success
+            </span>
+          </div>
+          <button aria-label="Close" class="btn-close" type="button" @click="closeModal(id)"/>
+        </div>
+        <div class="card-body">
+          {{ info.message }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+
+export default {
+  name: "InfoModal",
+  setup() {
+    const store = useStore()
+    const infos = reactive({
+      data: []
+    })
+
+    const closeModal = (id) => {
+      store.commit('removeInfoState', id)
+    }
+
+    onMounted(() => {
+      store.subscribe(((mutation, state) => {
+        if (mutation.type === 'changeInfoState') {
+          infos.data = state.info
+
+          setTimeout(() => {
+            closeModal(store.state.info.length - 1)
+          }, 5000)
+        }
+      }))
+    })
+
+    return {infos, closeModal}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#modal {
+  --height: 100px;
+
+  .card {
+    z-index: 10;
+    position: absolute;
+    right: 1rem;
+    opacity: .8;
+    width: min(100vw - 2rem, 50ch);
+
+    .btn-close {
+      background-color: white;
+      opacity: .5;
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .custom-modal:nth-of-type(#{$i}) {
+      .card {
+        @if $i == 1 {
+          margin: 1rem 0;
+        } @else {
+          margin-top: calc(#{$i}rem + (#{$i} - 1) * var(--height));
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #modal {
+    --height: 120px;
+  }
+}
+</style>