From fdfca0088672cc8e327b6d64846b5d08955479ef Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 19 Oct 2021 13:40:47 +0530
Subject: [PATCH] feat: set active on hover + minor ui improvements

---
 .../hoppscotch-app/components/app/Fuse.vue    | 17 +++++-------
 .../components/app/PowerSearch.vue            |  1 +
 .../components/app/PowerSearchEntry.vue       | 26 ++++---------------
 3 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Fuse.vue b/packages/hoppscotch-app/components/app/Fuse.vue
index 05358f460..6f0d138e0 100644
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -7,6 +7,7 @@
       :active="shortcutIndex === selectedEntry"
       :shortcut="shortcut.item"
       @action="$emit('action', shortcut.item.action)"
+      @mouseover.native="selectedEntry = shortcutIndex"
     />
     <div
       v-if="searchResults.length === 0"
@@ -21,12 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  onUnmounted,
-  onMounted,
-  getCurrentInstance,
-} from "@nuxtjs/composition-api"
+import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
@@ -36,6 +32,10 @@ const props = defineProps<{
   search: string
 }>()
 
+const emit = defineEmits<{
+  (e: "action", action: HoppAction): void
+}>()
+
 const options = {
   keys: ["keys", "label", "action", "tags"],
 }
@@ -48,10 +48,7 @@ const searchResultsItems = computed(() =>
   searchResults.value.map((searchResult: any) => searchResult.item)
 )
 
-const currentInstance = getCurrentInstance()
-
-const emitSearchAction = (action: HoppAction) =>
-  currentInstance.emit("action", action)
+const emitSearchAction = (action: HoppAction) => emit("action", action)
 
 const { bindArrowKeysListerners, unbindArrowKeysListerners, selectedEntry } =
   useArrowKeysNavigation(searchResultsItems, {
diff --git a/packages/hoppscotch-app/components/app/PowerSearch.vue b/packages/hoppscotch-app/components/app/PowerSearch.vue
index 61ced7ff9..51cf7b7e5 100644
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -49,6 +49,7 @@
             :shortcut="shortcut"
             :active="shortcutsItems.indexOf(shortcut) === selectedEntry"
             @action="runAction"
+            @mouseover.native="selectedEntry = shortcutsItems.indexOf(shortcut)"
           />
         </div>
       </div>
diff --git a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
index 62c85c0fb..8a4d43df8 100644
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -8,36 +8,22 @@
       transition
       items-center
       group
-      hover:bg-primaryLight
       focus:outline-none
       focus-visible:bg-primaryLight
       search-entry
     "
-    :class="{ active, 'outline-none': active, 'focus-visible': active }"
-    tabindex="0"
+    :class="{ active, 'focus-visible': active }"
+    tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="
-        mr-4
-        opacity-50
-        transition
-        svg-icons
-        group-hover:text-secondaryDark group-hover:opacity-100
-        group-focus:opacity-100
-      "
-      :class="{ 'opacity-100': active, 'text-secondaryDark': active }"
+      class="mr-4 opacity-50 transition svg-icons group-focus:opacity-100"
+      :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
     <span
-      class="
-        flex flex-1
-        mr-4
-        transition
-        group-hover:text-secondaryDark
-        group-focus:text-secondaryDark
-      "
+      class="flex flex-1 mr-4 transition"
       :class="{ 'text-secondaryDark': active }"
     >
       {{ $t(shortcut.label) }}
@@ -76,8 +62,6 @@ defineProps<{
     content: "";
   }
 
-  &:hover::after,
-  &:focus::after,
   &.active::after {
     @apply bg-accentLight;
   }