Review segment UI (#9945)

* Add ui for events

* Display data for review items

* Use preview thumbnails

* Implement paging

* Show icons for what was detected

* Show progress bar on preview thumbnail

* Hide the overlays on hover and update reviewed status

* Dim previews that have been reviewed

* Show audio icons

* Cleanup preview thumb player

* initial implementation of review timeline

* Use timeout for hover playback

* Break apart mobile and desktop views

* Show icons for sub labels

* autoplay first video on mobile

* Only show the last 24 hours by default

* Rework scrolling to fix nested scrolling

* Final scroll cleanups

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/pages/site-navigation.ts

@@ -1,34 +1,34 @@
 import {
-    LuConstruction,
-    LuFileUp,
-    LuFilm,
-    LuVideo,
-  } from "react-icons/lu";
+  LuConstruction,
+  LuFileUp,
+  LuFlag,
+  LuVideo,
+} from "react-icons/lu";
 
 export const navbarLinks = [
-    {
-      id: 1,
-      icon: LuVideo,
-      title: "Live",
-      url: "/",
-    },
-    {
-      id: 2,
-      icon: LuFilm,
-      title: "History",
-      url: "/history",
-    },
-    {
-      id: 3,
-      icon: LuFileUp,
-      title: "Export",
-      url: "/export",
-    },
-    {
-      id: 4,
-      icon: LuConstruction,
-      title: "UI Playground",
-      url: "/playground",
-      dev: true,
-    },
-  ];
+  {
+    id: 1,
+    icon: LuVideo,
+    title: "Live",
+    url: "/",
+  },
+  {
+    id: 2,
+    icon: LuFlag,
+    title: "Events",
+    url: "/events",
+  },
+  {
+    id: 3,
+    icon: LuFileUp,
+    title: "Export",
+    url: "/export",
+  },
+  {
+    id: 4,
+    icon: LuConstruction,
+    title: "UI Playground",
+    url: "/playground",
+    dev: true,
+  },
+];