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>

src/components/ViewModes/Note.vue

@@ -30,26 +30,27 @@ const updateNoteContent = (content: string) => {
 
 const references = computed<Note[]>(() => getNoteReferences(props.note))
 
-const del = async (closeModal: () => Promise<Boolean>) => {
-  await closeModal()
-  setActiveNote(rootNote.value?.id)
-  deleteNote(props.note.id)
-}
-
-const setRoot = async (closeModal: () => Promise<Boolean>) => {
-  setRootNote(props.note.id)
-  closeModal()
+const handleAction = async (action: string, closeModal: () => Promise<Boolean>) => {
+  if (action === 'delete') {
+    if (closeModal) await closeModal()
+    setActiveNote(rootNote.value?.id)
+    deleteNote(props.note.id)
+  }
+  if (action === 'setRoot') {
+    setRootNote(props.note.id)
+    if (closeModal) closeModal()
+  }
 }
 </script>
 <template>
   <div class="flex flex-grow flex-col">
-    <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
+    <NoteToolbar :note="props.note" @execute="handleAction">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input type="text" class="bg-transparent pb-1 outline-none w-full" v-model="noteTitle" />
+        <input type="text" class="w-full bg-transparent pb-1 outline-none" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor