Feat: Split add tag to modal

Fix: Fix wrong css class

Fix: More misc. styling fixes

src/components/TagsManager.vue

@@ -9,7 +9,20 @@
                 :remove="deleteTag"
             />
         </div>
-        <div>
+        <div class="p-1">
+            <button
+                type="button"
+                class="btn btn-outline-secondary btn-add"
+                :disabled="processing"
+                @click.stop="showAddDialog"
+            >
+                <font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
+            </button>
+        </div>
+        <div ref="modal" class="modal fade" tabindex="-1">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-body">
                         <vue-multiselect
                             v-model="newDraftTag.select"
                             class="mb-2"
@@ -40,7 +53,7 @@
                         </vue-multiselect>
                         <div v-if="newDraftTag.select?.id == null" class="d-flex mb-2">
                             <div class="w-50 pe-2">
-                    <input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" placeholder="name" />
+                                <input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" :placeholder="$t('name')" />
                                 <div class="invalid-feedback">
                                     {{ $t("Tag with this name already exist.") }}
                                 </div>
@@ -94,9 +107,13 @@
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
 import Tag from "../components/Tag.vue";
 import { useToast } from "vue-toastification"
@@ -115,6 +132,7 @@ export default {
     },
     data() {
         return {
+            modal: null,
             existingTags: [],
             processing: false,
             newTags: [],
@@ -205,9 +223,13 @@ export default {
         },
     },
     mounted() {
+        this.modal = new Modal(this.$refs.modal);
         this.getExistingTags();
     },
     methods: {
+        showAddDialog() {
+            this.modal.show();
+        },
         getExistingTags() {
             this.$root.getSocket().emit("getTags", (res) => {
                 if (res.ok) {
@@ -269,6 +291,7 @@ export default {
                 invalid: true,
                 nameInvalid: false,
             };
+            this.modal.hide();
         },
         addTagAsync(newTag) {
             return new Promise((resolve) => {
@@ -357,3 +380,13 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.btn-add {
+    width: 100%;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+</style>