Add support for review information side panel (#13063)

web/src/views/events/EventView.tsx

@@ -52,6 +52,7 @@ import { cn } from "@/lib/utils";
 import { FilterList, LAST_24_HOURS_KEY } from "@/types/filter";
 import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import ReviewDetailDialog from "@/components/overlay/detail/ReviewDetailDialog";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -464,6 +465,10 @@ function DetectionReview({
 
   const segmentDuration = 60;
 
+  // detail
+
+  const [reviewDetail, setReviewDetail] = useState<ReviewSegment>();
+
   // preview
 
   const [previewTime, setPreviewTime] = useState<number>();
@@ -628,6 +633,8 @@ function DetectionReview({
 
   return (
     <>
+      <ReviewDetailDialog review={reviewDetail} setReview={setReviewDetail} />
+
       <div
         ref={contentRef}
         className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"
@@ -682,7 +689,17 @@ function DetectionReview({
                         setReviewed={markItemAsReviewed}
                         scrollLock={scrollLock}
                         onTimeUpdate={onPreviewTimeUpdate}
-                        onClick={onSelectReview}
+                        onClick={(
+                          review: ReviewSegment,
+                          ctrl: boolean,
+                          detail: boolean,
+                        ) => {
+                          if (detail) {
+                            setReviewDetail(review);
+                          } else {
+                            onSelectReview(review, ctrl);
+                          }
+                        }}
                       />
                     </div>
                     <div