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>