From c9976c7fe883924182e5c54b6f85c4c38e511b73 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 1 Sep 2023 21:46:17 +0200
Subject: [PATCH] refactor: distinguish automated scrolling

---
 apps/client/src/common/hooks/useFollowComponent.ts  |  4 +++-
 apps/client/src/features/operator/Operator.tsx      | 11 +++++++++++
 .../operator/follow-button/FollowButton.module.scss | 13 +++++++++++++
 .../operator/status-bar/StatusBar.module.scss       |  2 +-
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/common/hooks/useFollowComponent.ts b/apps/client/src/common/hooks/useFollowComponent.ts
index 4054bb1d3..f26ef07c0 100644
--- a/apps/client/src/common/hooks/useFollowComponent.ts
+++ b/apps/client/src/common/hooks/useFollowComponent.ts
@@ -21,10 +21,11 @@ interface UseFollowComponentProps {
   scrollRef: MutableRefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
+  setScrollFlag?: () => void;
 }
 
 export default function useFollowComponent(props: UseFollowComponentProps) {
-  const { followRef, scrollRef, doFollow, topOffset = 100 } = props;
+  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
 
   // when cursor moves, view should follow
   useEffect(() => {
@@ -35,6 +36,7 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
     if (followRef.current && scrollRef.current) {
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
+        setScrollFlag?.();
         scrollToComponent(
           followRef as MutableRefObject<HTMLElement>,
           scrollRef as MutableRefObject<HTMLElement>,
diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx
index 437a7117d..da9e346a2 100644
--- a/apps/client/src/features/operator/Operator.tsx
+++ b/apps/client/src/features/operator/Operator.tsx
@@ -31,6 +31,7 @@ export default function Operator() {
   const featureData = useOperator();
   const [searchParams] = useSearchParams();
 
+  const isAutomatedScroll = useRef(false);
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -39,6 +40,7 @@ export default function Operator() {
     scrollRef: scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: selectedOffset,
+    setScrollFlag: () => (isAutomatedScroll.current = true),
   });
 
   // Set window title
@@ -63,12 +65,21 @@ export default function Operator() {
   };
 
   const handleScroll = () => {
+    // prevent considering automated scrolls as user scrolls
+    console.log('handling', isAutomatedScroll);
+    if (isAutomatedScroll.current) {
+      isAutomatedScroll.current = false;
+      return;
+    }
+
     if (selectedRef?.current && scrollRef?.current) {
       const selectedRect = selectedRef.current.getBoundingClientRect();
       const scrollerRect = scrollRef.current.getBoundingClientRect();
       if (selectedRect && scrollerRect) {
         const distanceFromTop = selectedRect.top - scrollerRect.top;
         const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+        console.log('distanceFromTop', distanceFromTop, hasScrolledOutOfThreshold);
+
         setLockAutoScroll(hasScrolledOutOfThreshold);
       }
     }
diff --git a/apps/client/src/features/operator/follow-button/FollowButton.module.scss b/apps/client/src/features/operator/follow-button/FollowButton.module.scss
index 0ff82c0e0..8166505bd 100644
--- a/apps/client/src/features/operator/follow-button/FollowButton.module.scss
+++ b/apps/client/src/features/operator/follow-button/FollowButton.module.scss
@@ -27,3 +27,16 @@
   transition: bottom 1s;
   bottom: -50px;
 }
+
+// tablet
+@media (min-width: $min-tablet) {
+  .followButton {
+    font-size: 1.5rem;
+    gap: 1rem;
+    padding: 0.25rem 1rem;
+
+    &:not(.hidden) {
+      bottom: 12.5rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.module.scss b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
index 8143e31c7..4b6225169 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss
+++ b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
@@ -50,7 +50,7 @@
 
 .title {
   grid-area: title;
-  font-size: 1rem;
+  font-size: 1.25rem;
   padding-left: 0.25rem;
   display: none;
   line-height: 1.25em;