fix: performance issues due to mouse on header detection

packages/hoppscotch-common/src/components.d.ts

@@ -92,7 +92,6 @@ declare module '@vue/runtime-core' {
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
     HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']

packages/hoppscotch-common/src/components/app/Header.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <header
+      ref="headerRef"
       class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
+      @mousedown.prevent="platform.ui?.appHeader?.onHeaderAreaClick?.()"
     >
       <div
         class="inline-flex items-center justify-start flex-1 space-x-2"

packages/hoppscotch-common/src/platform/ui.ts

@@ -20,6 +20,11 @@ export type UIPlatformDef = {
   appHeader?: {
     paddingTop?: Ref<string>
     paddingLeft?: Ref<string>
+
+    /**
+     * A function which is called when the header area of the app receives a click event
+     */
+    onHeaderAreaClick?: () => void
   }
   onCodemirrorInstanceMount?: (element: HTMLElement) => void
 

packages/hoppscotch-selfhost-desktop/src/main.ts

@@ -15,7 +15,6 @@ import { useSettingStatic } from "@hoppscotch/common/composables/settings"
 import { appWindow } from "@tauri-apps/api/window"
 import { stdFooterItems } from "@hoppscotch/common/platform/std/ui/footerItem"
 import { stdSupportOptionItems } from "@hoppscotch/common/platform/std/ui/supportOptionsItem"
-import { useMousePressed } from "@vueuse/core"
 import { ioDef } from "./platform/io"
 
 const headerPaddingLeft = ref("0px")
@@ -28,6 +27,11 @@ createHoppApp("#app", {
     appHeader: {
       paddingLeft: headerPaddingLeft,
       paddingTop: headerPaddingTop,
+      onHeaderAreaClick() {
+        // Drag thw window when the user drags the header area
+        // TODO: Ignore click on headers and fields
+        appWindow.startDragging()
+      },
     },
   },
   io: ioDef,
@@ -88,27 +92,4 @@ watch(
     headerPaddingTop.value = "2px"
     headerPaddingLeft.value = "70px"
   }
-
-  const { pressed } = useMousePressed()
-
-  document.addEventListener("mousemove", (ev) => {
-    const { clientX, clientY } = ev
-
-    const el = document.querySelector("header")
-
-    if (!el) return
-
-    const { left, top, width, height } = el.getBoundingClientRect()
-
-    if (
-      clientX >= left &&
-      clientX <= left + width &&
-      clientY >= top &&
-      clientY <= top + height
-    ) {
-      if (pressed.value) {
-        appWindow.startDragging()
-      }
-    }
-  })
 })()