Add Detail stream in History view (#20525)

* new type

* activity stream panel

* use context provider for activity stream

* new activity stream panel in history view

* overlay for object tracking details in history view

* use overlay in video player

* don't refetch timeline

* fix activity stream group from being highlighted prematurely

* use annotation offset

* fix scrolling and use custom hook for interaction

* memoize to prevent unnecessary renders

* i18n and timestamp formatting

* add annotation offset slider

* bg color

* add collapsible component

* refactor

* rename activity to detail

* fix merge conflicts

* i18n

* more i18n

web/src/hooks/use-user-interaction.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type UseUserInteractionProps = {
+  elementRef: React.RefObject<HTMLElement>;
+};
+
+function useUserInteraction({ elementRef }: UseUserInteractionProps) {
+  const [userInteracting, setUserInteracting] = useState(false);
+  const interactionTimeout = useRef<NodeJS.Timeout>();
+  const isProgrammaticScroll = useRef(false);
+
+  const setProgrammaticScroll = useCallback(() => {
+    isProgrammaticScroll.current = true;
+  }, []);
+
+  useEffect(() => {
+    const handleUserInteraction = () => {
+      if (!isProgrammaticScroll.current) {
+        setUserInteracting(true);
+
+        if (interactionTimeout.current) {
+          clearTimeout(interactionTimeout.current);
+        }
+
+        interactionTimeout.current = setTimeout(() => {
+          setUserInteracting(false);
+        }, 3000);
+      } else {
+        isProgrammaticScroll.current = false;
+      }
+    };
+
+    const element = elementRef.current;
+
+    if (element) {
+      element.addEventListener("scroll", handleUserInteraction);
+      element.addEventListener("mousedown", handleUserInteraction);
+      element.addEventListener("mouseup", handleUserInteraction);
+      element.addEventListener("touchstart", handleUserInteraction);
+      element.addEventListener("touchmove", handleUserInteraction);
+      element.addEventListener("touchend", handleUserInteraction);
+
+      return () => {
+        element.removeEventListener("scroll", handleUserInteraction);
+        element.removeEventListener("mousedown", handleUserInteraction);
+        element.removeEventListener("mouseup", handleUserInteraction);
+        element.removeEventListener("touchstart", handleUserInteraction);
+        element.removeEventListener("touchmove", handleUserInteraction);
+        element.removeEventListener("touchend", handleUserInteraction);
+      };
+    }
+  }, [elementRef]);
+
+  return { userInteracting, setProgrammaticScroll };
+}
+
+export default useUserInteraction;