More intelligent timeline scrolling (#10209)

* more intelligent timeline scrolling

* keep as div

web/src/components/filter/ReviewFilterGroup.tsx

@@ -71,7 +71,7 @@ export default function ReviewFilterGroup({
   );
 
   return (
-    <div className="mr-2">
+    <div>
       <CamerasFilterButton
         allCameras={filterValues.cameras}
         selectedCameras={filter?.cameras}
@@ -246,7 +246,7 @@ function GeneralFilterButton({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button size="sm" className="mx-1" variant="secondary">
+        <Button size="sm" className="ml-1" variant="secondary">
           <FaFilter className="md:mr-[10px] text-muted-foreground" />
           <div className="hidden md:block">Filter</div>
         </Button>

web/src/components/timeline/EventSegment.tsx

@@ -16,6 +16,7 @@ import {
   HoverCardTrigger,
 } from "../ui/hover-card";
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
+import scrollIntoView from "scroll-into-view-if-needed";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -225,20 +226,14 @@ export function EventSegment({
 
   const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
 
-  let debounceTimer: ReturnType<typeof setTimeout>;
-
-  function debounceScrollIntoView(element: HTMLElement) {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-    }, 100);
-  }
-
   useEffect(() => {
     // Check if the first segment is out of view
     const firstSegment = firstMinimapSegmentRef.current;
     if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
-      debounceScrollIntoView(firstSegment);
+      scrollIntoView(firstSegment, {
+        scrollMode: "if-needed",
+        behavior: "smooth",
+      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -276,7 +271,10 @@ export function EventSegment({
         `[data-segment-start="${startTimestamp - segmentDuration}"]`,
       );
       if (element instanceof HTMLElement) {
-        debounceScrollIntoView(element);
+        scrollIntoView(element, {
+          scrollMode: "if-needed",
+          behavior: "smooth",
+        });
         element.classList.add(
           `outline-severity_${severityType}`,
           `shadow-severity_${severityType}`,

web/src/hooks/use-handle-dragging.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
 
 type DragHandlerProps = {
   contentRef: React.RefObject<HTMLElement>;
@@ -75,6 +76,10 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
+            scrollIntoView(thumb, {
+              scrollMode: "if-needed",
+              behavior: "smooth",
+            });
           }
         });
         if (setHandlebarTime) {
@@ -167,11 +172,6 @@ function useDraggableHandler({
         scrolled;
 
       updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
-
-      scrollTimeRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps

web/src/views/events/EventView.tsx

@@ -247,12 +247,12 @@ export default function EventView({
 
   return (
     <div className="flex flex-col size-full">
-      <div className="h-10 relative flex justify-between items-center mb-2">
+      <div className="h-10 relative flex justify-between items-center m-2">
         {isMobile && (
           <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
         )}
         <ToggleGroup
-          className="*:px-3 *:py4 *:rounded-2xl"
+          className="*:px-3 *:py-4 *:rounded-2xl"
           type="single"
           defaultValue="alert"
           size="sm"
@@ -315,7 +315,7 @@ export default function EventView({
           {!isValidating && currentItems == null && (
             <div className="size-full flex flex-col justify-center items-center">
               <LuFolderCheck className="size-16" />
-              There are no {severity} items to review
+              There are no {severity.replace(/_/g, " ")} items to review
             </div>
           )}
 

web/src/views/live/LiveDashboardView.tsx

@@ -120,7 +120,7 @@ export default function LiveDashboardView({
       )}
 
       <div
-        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
+        className={`my-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
       >
         {cameras.map((camera) => {
           let grow;