From ba4a1eb6460f1035e10b801c53a9d30d13b82582 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 19 Oct 2022 13:55:18 -0700
Subject: [PATCH] Refactor, better handle mouseover

---
 src/components/{search.jsx => quicklaunch.jsx} | 10 +++++++---
 src/pages/index.jsx                            |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)
 rename src/components/{search.jsx => quicklaunch.jsx} (92%)

diff --git a/src/components/search.jsx b/src/components/quicklaunch.jsx
similarity index 92%
rename from src/components/search.jsx
rename to src/components/quicklaunch.jsx
index 596efc459..6fe15c579 100644
--- a/src/components/search.jsx
+++ b/src/components/quicklaunch.jsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 import { resolveIcon } from "./services/item";
 
-export default function HomepageSearch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) {
+export default function QuickLaunch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) {
   const { t } = useTranslation();
 
   const searchField = useRef();
@@ -37,6 +37,10 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
     }
   }
 
+  function handleItemHover(event) {
+    setCurrentItemIndex(parseInt(event.target?.dataset?.index));
+  }
+
   function handleItemClick() {
     resetAndClose();
   }
@@ -84,9 +88,9 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
             {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
               {results.map((r, i) => (
                 <li key={r.name}>
-                  <a className={classNames(
+                  <a data-index={i} onMouseEnter={handleItemHover} className={classNames(
                     i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
-                    "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
+                    "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
                     )} href={r.href} target="_blank" rel="noreferrer" onClick={handleItemClick}>
                     <div className="flex flex-row items-center mr-4">
                       <div className="w-5 text-xs mr-4">
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index efedf83d8..a1ce96d5e 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -21,7 +21,7 @@ import { SettingsContext } from "utils/contexts/settings";
 import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
 import ErrorBoundary from "components/errorboundry";
 import themes from "utils/styles/themes";
-import HomepageSearch from "components/search";
+import QuickLaunch from "components/quicklaunch";
 
 const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
   ssr: false,
@@ -236,7 +236,7 @@ function Home({ initialSettings }) {
             headerStyles[initialSettings.headerStyle || "underlined"]
           )}
         >
-          <HomepageSearch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
+          <QuickLaunch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
           {widgets && (
             <>
               {widgets