refactor(ui): title and actions slot on modals

components/collections/Add.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/AddFolder.vue

@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/Edit.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/EditFolder.vue

@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/EditRequest.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/ImportExport.vue

@@ -1,18 +1,21 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
-        <ButtonSecondary
-          v-if="mode == 'import_from_my_collections'"
-          v-tippy="{ theme: 'tooltip' }"
-          title="Back"
-          icon="arrow_back"
-          @click.native="
-            mode = 'import_export'
-            mySelectedCollectionID = undefined
-          "
-        />
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <ButtonSecondary
+        v-if="mode == 'import_from_my_collections'"
+        v-tippy="{ theme: 'tooltip' }"
+        title="Back"
+        icon="arrow_back"
+        @click.native="
+          mode = 'import_export'
+          mySelectedCollectionID = undefined
+        "
+      />
+      <span>
         <tippy
           v-if="
             mode == 'import_export' && collectionsType.type == 'my-collections'
@@ -24,7 +27,7 @@
           arrow
         >
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -62,8 +65,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">

components/collections/SaveRequest.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.save_as") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">

components/collections/graphql/Add.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/graphql/AddFolder.vue

@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/graphql/Edit.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input

components/collections/graphql/EditFolder.vue

@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -44,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
       this.hideModal()
     },

components/collections/graphql/EditRequest.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -48,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       const requestUpdated = {
         ...this.$props.request,
         name: this.$data.requestUpdateData.name || this.$props.request.name,

components/collections/graphql/ImportExport.vue

@@ -1,11 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -43,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">