From 958c68b6f6b77d058a3f3e0c451ab0d678fd33a2 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 16 Sep 2023 13:49:12 +0200
Subject: [PATCH] style hover (#525)

* refactor: render if in view

* style: add hover indicator on row
---
 .../features/cuesheet/Cuesheet.module.scss    |  5 +++
 .../cuesheet-table-elements/EventRow.tsx      | 35 +++++++++++++++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/features/cuesheet/Cuesheet.module.scss b/apps/client/src/features/cuesheet/Cuesheet.module.scss
index 04c982bcf..3987c1bd9 100644
--- a/apps/client/src/features/cuesheet/Cuesheet.module.scss
+++ b/apps/client/src/features/cuesheet/Cuesheet.module.scss
@@ -61,6 +61,11 @@ $table-header-font-size: calc(1rem - 3px);
 .eventRow {
   vertical-align: top;
 
+  &:hover {
+    outline: 1px solid $blue-700;
+    outline-offset: -1px;
+  }
+
   td {
     background-color: $gray-1250;
     border-radius: 2px;
diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
index 4368cc79e..e53f9ec7c 100644
--- a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
@@ -1,4 +1,4 @@
-import { memo, MutableRefObject, PropsWithChildren } from 'react';
+import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
 
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 
@@ -16,21 +16,50 @@ interface EventRowProps {
 
 function EventRow(props: PropsWithChildren<EventRowProps>) {
   const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const ownRef = useRef<HTMLTableRowElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
 
   const bgFallback = 'transparent';
   const bgColour = colour || bgFallback;
   const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
 
+  useLayoutEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 0.01,
+      },
+    );
+
+    const handleRefCurrent = ownRef.current;
+    if (selectedRef) {
+      setIsVisible(true);
+    } else if (handleRefCurrent) {
+      observer.observe(handleRefCurrent);
+    }
+
+    return () => {
+      if (handleRefCurrent) {
+        observer.unobserve(handleRefCurrent);
+      }
+    };
+  }, [ownRef, selectedRef]);
+
   return (
     <tr
       className={`${style.eventRow} ${skip ? style.skip : ''}`}
       style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
-      ref={selectedRef}
+      ref={selectedRef ?? ownRef}
     >
       <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
         {eventIndex}
       </td>
-      {children}
+      {isVisible ? children : null}
     </tr>
   );
 }