From 9d1d369f37300e78f7fcb40ec001630718e1f60b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 8 Nov 2023 18:47:40 +0530
Subject: [PATCH] fix: performance issues due to mouse on header detection

---
 .../hoppscotch-common/src/components.d.ts     |  1 -
 .../src/components/app/Header.vue             |  2 ++
 packages/hoppscotch-common/src/platform/ui.ts |  5 ++++
 .../hoppscotch-selfhost-desktop/src/main.ts   | 29 ++++---------------
 4 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index b1ad46569..786d61c73 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 56d20804d..bb37de6a9 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/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"
diff --git a/packages/hoppscotch-common/src/platform/ui.ts b/packages/hoppscotch-common/src/platform/ui.ts
index ee18a5031..b3ec3db9b 100644
--- a/packages/hoppscotch-common/src/platform/ui.ts
+++ b/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
 
diff --git a/packages/hoppscotch-selfhost-desktop/src/main.ts b/packages/hoppscotch-selfhost-desktop/src/main.ts
index c608b47c7..1c2f0a372 100644
--- a/packages/hoppscotch-selfhost-desktop/src/main.ts
+++ b/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()
-      }
-    }
-  })
 })()