From 3dc24ab3d7f52074e94e925ee71ebffa4b179914 Mon Sep 17 00:00:00 2001
From: Lncvrt <lncvrtreal@gmail.com>
Date: Wed, 7 Jan 2026 19:01:58 -0700
Subject: [PATCH] Use proper way of detecting when a user hovers for
 games/installs page

---
 src/app/Installs.css  | 10 ++++++++++
 src/app/game/page.tsx | 21 ++++-----------------
 src/app/page.tsx      | 21 ++++-----------------
 3 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/src/app/Installs.css b/src/app/Installs.css
index ab448c1..1e45b66 100644
--- a/src/app/Installs.css
+++ b/src/app/Installs.css
@@ -11,3 +11,13 @@
 .downloads-entry {
   @apply flex justify-between items-center m-2 p-2 rounded-lg text-gray-200 text-lg transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5);
 }
+
+.downloads-entry .entry-info-item,
+.downloads-entry .button {
+  @apply bg-(--col3) border-(--col5) hover:bg-(--col5) hover:border-(--col7) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col6) disabled:hover:text-gray-100 disabled:hover:bg-(--col3) disabled:hover:border-(--col7);
+}
+
+.downloads-entry:hover .entry-info-item,
+.downloads-entry:hover .button {
+  @apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
+}
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index a6af5e1..f7132f2 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -24,7 +24,6 @@ export default function Installs () {
   } = useGlobal()
 
   const params = useSearchParams()
-  const [hoveredIds, setHoveredIds] = useState<string[]>([])
 
   useEffect(() => {
     if (!showPopup) return
@@ -106,10 +105,6 @@ export default function Installs () {
                     setShowPopup(true)
                     setFadeOut(false)
                   }}
-                  onMouseEnter={() => setHoveredIds(prev => [...prev, entry])}
-                  onMouseLeave={() =>
-                    setHoveredIds(prev => prev.filter(i => i !== i))
-                  }
                 >
                   <div className='h-18 w-screen relative'>
                     <p className='text-2xl'>
@@ -118,9 +113,7 @@ export default function Installs () {
                     </p>
 
                     <div
-                      className={`entry-info-item absolute left-0 bottom-0 ${
-                        hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                      }`}
+                      className='entry-info-item absolute left-0 bottom-0'
                       title='The date the game was installed in MM/dd/yyyy format'
                     >
                       <p>
@@ -134,9 +127,7 @@ export default function Installs () {
 
                     <div className='flex gap-2 absolute right-0 bottom-0'>
                       <button
-                        className={`button ${
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='button'
                         onClick={e => {
                           e.stopPropagation()
                           setManagingVersion(entry)
@@ -149,9 +140,7 @@ export default function Installs () {
                         View Info
                       </button>
                       <button
-                        className={`button ${
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='button'
                         hidden={
                           !normalConfig?.settings.useLegacyInteractButtons
                         }
@@ -167,9 +156,7 @@ export default function Installs () {
                         Manage
                       </button>
                       <button
-                        className={`button ${
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='button'
                         onClick={e => {
                           e.stopPropagation()
                           const verInfo = getVersionInfo(entry)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 53b07c3..2252881 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,7 +28,6 @@ export default function Installs () {
   } = useGlobal()
 
   const router = useRouter()
-  const [hoveredIds, setHoveredIds] = useState<number[]>([])
 
   useEffect(() => {
     if (!showPopup) return
@@ -82,19 +81,13 @@ export default function Installs () {
                     if (normalConfig?.settings.useLegacyInteractButtons) return
                     router.push('/game?id=' + i.id)
                   }}
-                  onMouseEnter={() => setHoveredIds(prev => [...prev, i.id])}
-                  onMouseLeave={() =>
-                    setHoveredIds(prev => prev.filter(e => e !== i.id))
-                  }
                 >
                   <div className='h-18 w-screen relative'>
                     <p className='text-2xl'>{i.name}</p>
 
                     <div className='flex gap-2 absolute left-0 bottom-0'>
                       <div
-                        className={`entry-info-item ${
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='entry-info-item'
                         title='The amount of versions installed of this game in installed/installable format.'
                       >
                         <p>
@@ -107,9 +100,7 @@ export default function Installs () {
                         </p>
                       </div>
                       <div
-                        className={`entry-info-item ${
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='entry-info-item'
                         hidden={!i.official}
                         title='This game is official.'
                       >
@@ -117,9 +108,7 @@ export default function Installs () {
                         <p>Official</p>
                       </div>
                       <div
-                        className={`entry-info-item ${
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
+                        className='entry-info-item'
                         hidden={i.official}
                         title={
                           i.verified
@@ -136,9 +125,7 @@ export default function Installs () {
                     </div>
 
                     <Link
-                      className={`button absolute right-0 bottom-0 ${
-                        hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                      }`}
+                      className='button absolute right-0 bottom-0'
                       href={'/game?id=' + i.id}
                       hidden={!normalConfig?.settings.useLegacyInteractButtons}
                       title='Click to view game installs'