refactor: distinguish automated scrolling

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>,

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);
       }
     }

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;
+    }
+  }
+}

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;