native dialog on android & ios

src/components/Note/NoteToolbar.vue

@@ -1,11 +1,53 @@
 <script setup lang="ts">
+import { Capacitor } from '@capacitor/core'
+import { Dialog } from '@capacitor/dialog'
+import type { ConfirmOptions } from '@capacitor/dialog'
+
 const props = defineProps<{
   note: Note
 }>()
+
+type ActionKey = 'delete' | 'setRoot'
+
+interface ModalOptions {
+  key: ActionKey
+  icon: string
+  confirmOptions: ConfirmOptions
+}
+
+const confirmModals: ModalOptions[] = [
+  {
+    key: 'delete',
+    icon: 'fas fa-fw fa-trash',
+    confirmOptions: {
+      title: 'Delete note',
+      message: 'Are you sure you want to delete this note?',
+      okButtonTitle: 'Delete note'
+    }
+  },
+  {
+    key: 'setRoot',
+    icon: 'fas fa-fw fa-sitemap',
+    confirmOptions: {
+      title: 'Set root note',
+      message: 'Are you sure you want to set this note as root note?',
+      okButtonTitle: 'Set note as root note'
+    }
+  }
+]
+
 const emit = defineEmits<{
-  delete: [close: () => void]
-  setRoot: [close: () => void]
+  execute: [actionType: ActionKey, close?: () => void]
 }>()
+
+const openModal = async (open: () => void, modal: ModalOptions) => {
+  if (['android', 'ios'].includes(Capacitor.getPlatform())) {
+    const { value: confirmed } = await Dialog.confirm(modal.confirmOptions)
+    if (confirmed) emit('execute', modal.key)
+  } else {
+    open()
+  }
+}
 </script>
 <template>
   <div class="mb-2 flex items-center space-x-2">
@@ -13,27 +55,21 @@ const emit = defineEmits<{
       <slot name="title"></slot>
     </h1>
     <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
-      <UIModal>
+      <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
         <template #activator="{ open }">
-          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-trash" /></UIButton>
+          <UIButton size="sm" @click="openModal(open, confirmModal)">
+            <i :class="confirmModal.icon" />
+          </UIButton>
         </template>
-        <template #title><i class="fas fa-fw fa-trash mr-2" />Delete note</template>
-        <template #default>Are you sure you want to delete this note?</template>
-        <template #actions="{ close }">
-          <UIButton size="sm" color="primary" @click="emit('delete', close)">Delete notes</UIButton>
-          <UIButton size="sm" @click="close">Cancel</UIButton>
+        <template #title>
+          <i class="mr-2" :class="confirmModal.icon" />
+          {{ confirmModal.confirmOptions.title }}
         </template>
-      </UIModal>
-      <UIModal>
-        <template #activator="{ open }">
-          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-sitemap" /></UIButton>
-        </template>
-        <template #title><i class="fas fa-fw fa-sitemap mr-2" />Set root note</template>
-        <template #default>Are you sure you want to set this note as root note?</template>
+        <template #default>{{ confirmModal.confirmOptions.message }}</template>
         <template #actions="{ close }">
           <UIButton size="sm" @click="close">Cancel</UIButton>
-          <UIButton size="sm" color="primary" @click="emit('setRoot', close)">
-            Set current note as root
+          <UIButton size="sm" color="primary" @click="emit('execute', confirmModal.key, close)">
+            {{ confirmModal.confirmOptions.okButtonTitle }}
           </UIButton>
         </template>
       </UIModal>