improve haptics

src/components/TopBar/Settings.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
 import { OnClickOutside } from '@vueuse/components'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
+
+const vibrate = (event: PointerEvent) => {
+  if (event.target !== document.activeElement) {
+    Haptics.impact({ style: ImpactStyle.Light })
+  }
+}
 </script>
 <template>
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton :dropdown="true" size="sm" variant="outline" class="topbar-button text-white">
+        <UIButton
+          :dropdown="true"
+          size="sm"
+          variant="outline"
+          class="topbar-button text-white"
+          @mousedown="vibrate"
+        >
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>

src/components/ViewModes/Note.vue

@@ -8,6 +8,7 @@ import {
   setActiveNote,
   getNoteReferences
 } from '@/composables/useNotes'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
 const props = defineProps<{
   note: Note
@@ -31,14 +32,16 @@ const updateNoteContent = (content: string) => {
 const references = computed<Note[]>(() => getNoteReferences(props.note))
 
 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()
+  Haptics.impact({ style: ImpactStyle.Light })
+  switch (action) {
+    case 'delete':
+      if (closeModal) await closeModal()
+      setActiveNote(rootNote.value?.id)
+      deleteNote(props.note.id)
+      break
+    case 'setRoot':
+      setRootNote(props.note.id)
+      if (closeModal) closeModal()
   }
 }
 </script>