fix: unusual behavior while scrolling through spotlight entries (#3324)

* fix: spotlight scroll issue

* fix: entry hidden issue

* chore: back to loop mode

packages/hoppscotch-common/src/components/app/spotlight/Entry.vue

@@ -80,11 +80,10 @@ const props = defineProps<{
   active: boolean
 }>()
 
-const formattedShortcutKeys = computed(
+const formattedShortcutKeys = computed(() =>
-  () =>
+  props.entry.meta?.keyboardShortcut?.map((key) => {
-    props.entry.meta?.keyboardShortcut?.map((key) => {
+    return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
-      return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
+  })
-    })
 )
 
 const emit = defineEmits<{
@@ -119,5 +118,8 @@ watch(
   &.active {
     @apply after:bg-accentLight;
   }
+
+  scroll-padding: 4rem !important;
+  scroll-margin: 4rem !important;
 }
 </style>

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -40,7 +40,7 @@
             :key="`result-${result.id}`"
             :entry="result"
             :active="isEqual(selectedEntry, [sectionIndex, entryIndex])"
-            @mouseover="selectedEntry = [sectionIndex, entryIndex]"
+            @mouseover="onMouseOver($event, sectionIndex, entryIndex)"
             @action="runAction(sectionID, result)"
           />
         </div>
@@ -178,6 +178,24 @@ function runAction(searcherID: string, result: SpotlightSearcherResult) {
   emit("hide-modal")
 }
 
+let lastMousePosition: { x: number; y: number }
+
+const onMouseOver = (
+  e: MouseEvent,
+  sectionIndex: number,
+  entryIndex: number
+) => {
+  const mousePosition = {
+    x: e.clientX,
+    y: e.clientY,
+  }
+
+  // if the position is same, do nothing
+  if (isEqual(lastMousePosition, mousePosition)) return
+  selectedEntry.value = [sectionIndex, entryIndex]
+  lastMousePosition = mousePosition
+}
+
 function newUseArrowKeysForNavigation() {
   const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex]