refactor(ui): title and actions slot on modals

components/smart/ConfirmModal.vue

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

components/smart/Modal.vue

@@ -48,7 +48,15 @@
             "
           >
             <div class="flex pl-2 items-center justify-between">
-              <slot name="header"></slot>
+              <h3 class="heading">{{ title }}</h3>
+              <span class="flex">
+                <slot name="actions"></slot>
+                <ButtonSecondary
+                  v-if="dimissible"
+                  icon="close"
+                  @click.native="close"
+                />
+              </span>
             </div>
             <div
               class="
@@ -97,6 +105,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: "",
+    },
+    dimissible: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()