refactor: timeline design review

apps/client/src/common/hooks/useHorizontalFollowComponent.ts

@@ -1,4 +1,5 @@
 import { RefObject, useCallback, useEffect } from 'react';
+import { EntryId } from 'ontime-types';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
   componentRef: RefObject<ComponentRef> | null,
@@ -26,7 +27,7 @@ interface UseHorizontalFollowComponentOptions {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
-  hasSelectedElement?: boolean;
+  selectedEventId: EntryId | null;
   leftOffset?: number;
   setScrollFlag?: (newValue: boolean) => void;
 }
@@ -39,7 +40,7 @@ export default function useHorizontalFollowComponent({
   followRef,
   scrollRef,
   doFollow,
-  hasSelectedElement,
+  selectedEventId,
   leftOffset = 0,
   setScrollFlag,
 }: UseHorizontalFollowComponentOptions) {
@@ -52,25 +53,25 @@ export default function useHorizontalFollowComponent({
     // Use requestAnimationFrame to ensure the component is fully loaded
     window.requestAnimationFrame(() => {
       scrollToComponent(
-        hasSelectedElement ? (followRef as RefObject<HTMLElement>) : null,
+        selectedEventId !== null ? (followRef as RefObject<HTMLElement>) : null,
         scrollRef as RefObject<HTMLElement>,
         leftOffset,
       );
       setScrollFlag?.(false);
     });
-  }, [followRef, scrollRef, doFollow, hasSelectedElement, leftOffset, setScrollFlag]);
+  }, [followRef, scrollRef, doFollow, leftOffset, setScrollFlag, selectedEventId]);
 
   const scrollToRefComponent = useCallback(
     (componentRef = followRef, containerRef = scrollRef, offset = leftOffset) => {
       if (containerRef.current) {
         scrollToComponent(
-          hasSelectedElement ? (componentRef as RefObject<HTMLElement>) : null,
+          selectedEventId !== null ? (componentRef as RefObject<HTMLElement>) : null,
           containerRef as RefObject<HTMLElement>,
           offset,
         );
       }
     },
-    [followRef, scrollRef, hasSelectedElement, leftOffset],
+    [followRef, scrollRef, leftOffset, selectedEventId],
   );
 
   return scrollToRefComponent;