From 2f308af2ae6022aab3db17a77d22dc3d5cb3e411 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 30 Oct 2025 08:45:13 -0500
Subject: [PATCH] remove old review detail dialog

---
 .../overlay/detail/ReviewDetailDialog.tsx     | 577 ------------------
 1 file changed, 577 deletions(-)
 delete mode 100644 web/src/components/overlay/detail/ReviewDetailDialog.tsx

diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
deleted file mode 100644
index 16050245c..000000000
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ /dev/null
@@ -1,577 +0,0 @@
-import { isDesktop, isIOS, isMobile } from "react-device-detect";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "../../ui/sheet";
-import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
-import { getIconForLabel } from "@/utils/iconUtil";
-import { useApiHost } from "@/api";
-import {
-  ReviewDetailPaneType,
-  ReviewSegment,
-  ThreatLevel,
-} from "@/types/review";
-import { Event } from "@/types/event";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
-import TrackingDetails from "./TrackingDetails";
-import Chip from "@/components/indicators/Chip";
-import { FaDownload, FaImages, FaShareAlt } from "react-icons/fa";
-import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
-import { FaArrowsRotate } from "react-icons/fa6";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { baseUrl } from "@/api/baseUrl";
-import { shareOrCopy } from "@/utils/browserUtil";
-import {
-  MobilePage,
-  MobilePageContent,
-  MobilePageDescription,
-  MobilePageHeader,
-  MobilePageTitle,
-} from "@/components/mobile/MobilePage";
-import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { LuSearch } from "react-icons/lu";
-import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { Trans, useTranslation } from "react-i18next";
-import { getTranslatedLabel } from "@/utils/i18n";
-import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
-
-type ReviewDetailDialogProps = {
-  review?: ReviewSegment;
-  setReview: (review: ReviewSegment | undefined) => void;
-};
-export default function ReviewDetailDialog({
-  review,
-  setReview,
-}: ReviewDetailDialogProps) {
-  const { t } = useTranslation(["views/explore"]);
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
-  const navigate = useNavigate();
-
-  // upload
-
-  const [upload, setUpload] = useState<Event>();
-
-  // data
-
-  const { data: events } = useSWR<Event[]>(
-    review ? ["event_ids", { ids: review.data.detections.join(",") }] : null,
-  );
-
-  const aiAnalysis = useMemo(() => review?.data?.metadata, [review]);
-
-  const aiThreatLevel = useMemo(() => {
-    if (
-      !aiAnalysis ||
-      (!aiAnalysis.potential_threat_level && !aiAnalysis.other_concerns)
-    ) {
-      return "None";
-    }
-
-    let concerns = "";
-    switch (aiAnalysis.potential_threat_level) {
-      case ThreatLevel.SUSPICIOUS:
-        concerns = `• ${t("suspiciousActivity", { ns: "views/events" })}\n`;
-        break;
-      case ThreatLevel.DANGER:
-        concerns = `• ${t("threateningActivity", { ns: "views/events" })}\n`;
-        break;
-    }
-
-    (aiAnalysis.other_concerns ?? []).forEach((c) => {
-      concerns += `• ${c}\n`;
-    });
-
-    return concerns || "None";
-  }, [aiAnalysis, t]);
-
-  const hasMismatch = useMemo(() => {
-    if (!review || !events) {
-      return false;
-    }
-
-    return events.length != review?.data.detections.length;
-  }, [review, events]);
-
-  const missingObjects = useMemo(() => {
-    if (!review || !events) {
-      return [];
-    }
-
-    const detectedIds = review.data.detections;
-    const missing = Array.from(
-      new Set(
-        events
-          .filter((event) => !detectedIds.includes(event.id))
-          .map((event) => event.label),
-      ),
-    );
-
-    return missing;
-  }, [review, events]);
-
-  const formattedDate = useFormattedTimestamp(
-    review?.start_time ?? 0,
-    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
-          ns: "common",
-        })
-      : t("time.formattedTimestampMonthDayYearHourMinute.12hour", {
-          ns: "common",
-        }),
-    config?.ui.timezone,
-  );
-
-  // content
-
-  const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [pane, setPane] = useState<ReviewDetailPaneType>("overview");
-
-  // dialog and mobile page
-
-  const [isOpen, setIsOpen] = useState(review != undefined);
-
-  const handleOpenChange = useCallback(
-    (open: boolean) => {
-      setIsOpen(open);
-      if (!open) {
-        // short timeout to allow the mobile page animation
-        // to complete before updating the state
-        setTimeout(() => {
-          setReview(undefined);
-          setSelectedEvent(undefined);
-          setPane("overview");
-        }, 300);
-      }
-    },
-    [setReview, setIsOpen],
-  );
-
-  useEffect(() => {
-    setIsOpen(review != undefined);
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [review]);
-
-  // keyboard listener
-
-  useKeyboardListener(["Esc"], (key, modifiers) => {
-    if (key == "Esc" && modifiers.down && !modifiers.repeat) {
-      setIsOpen(false);
-    }
-
-    return true;
-  });
-
-  const Overlay = isDesktop ? Sheet : MobilePage;
-  const Content = isDesktop ? SheetContent : MobilePageContent;
-  const Header = isDesktop ? SheetHeader : MobilePageHeader;
-  const Title = isDesktop ? SheetTitle : MobilePageTitle;
-  const Description = isDesktop ? SheetDescription : MobilePageDescription;
-
-  if (!review) {
-    return;
-  }
-
-  return (
-    <>
-      <Overlay
-        open={isOpen ?? false}
-        onOpenChange={handleOpenChange}
-        enableHistoryBack={true}
-      >
-        <FrigatePlusDialog
-          upload={upload}
-          onClose={() => setUpload(undefined)}
-          onEventUploaded={() => {
-            if (upload) {
-              upload.plus_id = "new_upload";
-            }
-          }}
-        />
-
-        <Content
-          className={cn(
-            "scrollbar-container overflow-y-auto",
-            isDesktop && pane == "overview"
-              ? "sm:max-w-xl"
-              : "pt-2 sm:max-w-4xl",
-            isMobile && "px-4",
-          )}
-        >
-          <span tabIndex={0} className="sr-only" />
-          {pane == "overview" && (
-            <Header className="justify-center">
-              <Title>{t("details.item.title")}</Title>
-              <Description className="sr-only">
-                {t("details.item.desc")}
-              </Description>
-              <div
-                className={cn(
-                  "absolute flex gap-2 lg:flex-col",
-                  isDesktop && "right-1 top-8",
-                  isMobile && "right-0 top-3",
-                )}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      aria-label={t("details.item.button.share")}
-                      size="sm"
-                      onClick={() =>
-                        shareOrCopy(`${baseUrl}review?id=${review.id}`)
-                      }
-                    >
-                      <FaShareAlt className="size-4 text-secondary-foreground" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPortal>
-                    <TooltipContent>
-                      {t("details.item.button.share")}
-                    </TooltipContent>
-                  </TooltipPortal>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <DownloadVideoButton
-                      source={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`}
-                      camera={review.camera}
-                      startTime={review.start_time}
-                    />
-                  </TooltipTrigger>
-                  <TooltipPortal>
-                    <TooltipContent>
-                      {t("button.download", { ns: "common" })}
-                    </TooltipContent>
-                  </TooltipPortal>
-                </Tooltip>
-              </div>
-            </Header>
-          )}
-          {pane == "overview" && (
-            <div className="flex flex-col gap-5 md:mt-3">
-              {aiAnalysis != undefined && (
-                <div
-                  className={cn(
-                    "flex h-full w-full flex-col gap-2 rounded-md bg-card p-2",
-                    isDesktop && "m-2 w-[90%]",
-                  )}
-                >
-                  {t("aiAnalysis.title")}
-                  <div className="text-sm text-primary/40">
-                    {t("details.description.label")}
-                  </div>
-                  <div className="text-sm">{aiAnalysis.scene}</div>
-                  <div className="text-sm text-primary/40">
-                    {t("details.score.label")}
-                  </div>
-                  <div className="text-sm">{aiAnalysis.confidence * 100}%</div>
-                  <div className="text-sm text-primary/40">
-                    {t("concerns.label")}
-                  </div>
-                  <div className="text-sm">{aiThreatLevel}</div>
-                </div>
-              )}
-              <div className="flex w-full flex-row">
-                <div className="flex w-full flex-col gap-3">
-                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">
-                      {t("details.camera")}
-                    </div>
-                    <div className="text-sm smart-capitalize">
-                      <CameraNameLabel camera={review.camera} />
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">
-                      {t("details.timestamp")}
-                    </div>
-                    <div className="text-sm">{formattedDate}</div>
-                  </div>
-                </div>
-                <div className="flex w-full flex-col items-center gap-2">
-                  <div className="flex w-full flex-col gap-1.5 lg:pr-8">
-                    <div className="text-sm text-primary/40">
-                      {t("details.objects")}
-                    </div>
-                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm smart-capitalize">
-                      {events?.map((event) => {
-                        return (
-                          <div
-                            key={event.id}
-                            className="flex flex-row items-center gap-2 smart-capitalize"
-                          >
-                            {getIconForLabel(
-                              event.label,
-                              "size-3 text-primary",
-                            )}
-                            {event.sub_label ??
-                              event.label.replaceAll("_", " ")}{" "}
-                            ({Math.round(event.data.top_score * 100)}%)
-                            <Tooltip>
-                              <TooltipTrigger>
-                                <div
-                                  className="cursor-pointer"
-                                  onClick={() => {
-                                    navigate(`/explore?event_id=${event.id}`);
-                                  }}
-                                >
-                                  <LuSearch className="size-4 text-muted-foreground" />
-                                </div>
-                              </TooltipTrigger>
-                              <TooltipPortal>
-                                <TooltipContent>
-                                  {t("details.item.button.viewInExplore")}
-                                </TooltipContent>
-                              </TooltipPortal>
-                            </Tooltip>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                  {review.data.zones.length > 0 && (
-                    <div className="scrollbar-container flex max-h-32 w-full flex-col gap-1.5">
-                      <div className="text-sm text-primary/40">
-                        {t("details.zones")}
-                      </div>
-                      <div className="flex flex-col items-start gap-2 text-sm smart-capitalize">
-                        {review.data.zones.map((zone) => {
-                          return (
-                            <div
-                              key={zone}
-                              className="flex flex-row items-center gap-2 smart-capitalize"
-                            >
-                              {zone.replaceAll("_", " ")}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-              {hasMismatch && (
-                <div className="p-4 text-center text-sm">
-                  {(() => {
-                    const detectedCount = Math.abs(
-                      (events?.length ?? 0) -
-                        (review?.data.detections.length ?? 0),
-                    );
-
-                    return t("details.item.tips.mismatch", {
-                      count: detectedCount,
-                    });
-                  })()}
-                  {missingObjects.length > 0 && (
-                    <div className="mt-2">
-                      <Trans
-                        ns="views/explore"
-                        values={{
-                          objects: missingObjects
-                            .map((x) => getTranslatedLabel(x))
-                            .join(", "),
-                        }}
-                      >
-                        details.item.tips.hasMissingObjects
-                      </Trans>
-                    </div>
-                  )}
-                </div>
-              )}
-              <div className="relative flex size-full flex-col gap-2">
-                {events?.map((event) => (
-                  <EventItem
-                    key={event.id}
-                    event={event}
-                    setPane={setPane}
-                    setSelectedEvent={setSelectedEvent}
-                    setUpload={setUpload}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {pane == "details" && selectedEvent && (
-            <div className="mt-0 flex size-full flex-col gap-2">
-              <TrackingDetails event={selectedEvent} setPane={setPane} />
-            </div>
-          )}
-        </Content>
-      </Overlay>
-    </>
-  );
-}
-
-type EventItemProps = {
-  event: Event;
-  setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
-  setSelectedEvent: React.Dispatch<React.SetStateAction<Event | undefined>>;
-  setUpload?: React.Dispatch<React.SetStateAction<Event | undefined>>;
-};
-
-function EventItem({
-  event,
-  setPane,
-  setSelectedEvent,
-  setUpload,
-}: EventItemProps) {
-  const { t } = useTranslation(["views/explore"]);
-
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
-  const apiHost = useApiHost();
-
-  const imgRef = useRef(null);
-
-  const [hovered, setHovered] = useState(isMobile);
-
-  const navigate = useNavigate();
-
-  return (
-    <>
-      <div
-        className={cn(
-          "relative mr-auto",
-          !event.has_snapshot && "flex flex-row items-center justify-center",
-        )}
-        onMouseEnter={isDesktop ? () => setHovered(true) : undefined}
-        onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
-        key={event.id}
-      >
-        {event.has_snapshot && (
-          <>
-            <div className="pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
-          </>
-        )}
-        <img
-          ref={imgRef}
-          className={cn(
-            "select-none rounded-lg object-contain transition-opacity",
-          )}
-          style={
-            isIOS
-              ? {
-                  WebkitUserSelect: "none",
-                  WebkitTouchCallout: "none",
-                }
-              : undefined
-          }
-          draggable={false}
-          src={
-            event.has_snapshot
-              ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-              : `${apiHost}api/events/${event.id}/thumbnail.webp`
-          }
-        />
-        {hovered && (
-          <div>
-            <div
-              className={cn("absolute right-1 top-1 flex items-center gap-2")}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <a
-                    download
-                    href={
-                      event.has_snapshot
-                        ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-                        : `${apiHost}api/events/${event.id}/thumbnail.webp`
-                    }
-                  >
-                    <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
-                      <FaDownload className="size-4 text-white" />
-                    </Chip>
-                  </a>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t("button.download", { ns: "common" })}
-                </TooltipContent>
-              </Tooltip>
-
-              {event.has_snapshot &&
-                event.plus_id == undefined &&
-                event.data.type == "object" &&
-                config?.plus.enabled && (
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Chip
-                        className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                        onClick={() => {
-                          setUpload?.(event);
-                        }}
-                      >
-                        <FrigatePlusIcon className="size-4 text-white" />
-                      </Chip>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {t("itemMenu.submitToPlus.label")}
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-
-              {event.has_clip && (
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Chip
-                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                      onClick={() => {
-                        setPane("details");
-                        setSelectedEvent(event);
-                      }}
-                    >
-                      <FaArrowsRotate className="size-4 text-white" />
-                    </Chip>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("itemMenu.viewTrackingDetails.label")}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {event.has_snapshot && config?.semantic_search.enabled && (
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Chip
-                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                      onClick={() => {
-                        navigate(
-                          `/explore?search_type=similarity&event_id=${event.id}`,
-                        );
-                      }}
-                    >
-                      <FaImages className="size-4 text-white" />
-                    </Chip>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("itemMenu.findSimilar.label")}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}