From 8eace9c3e7cd7192ed28f8b57705ec3212362596 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 22 Apr 2026 20:37:17 -0600
Subject: [PATCH] WebUI tweaks (#22980)

* Use escape key to go back to main camera dashboard

* Add icon showing when review item is needing review
---
 web/src/components/card/AnimatedEventCard.tsx | 26 +++++++++++++++++--
 web/src/views/live/LiveCameraView.tsx         |  8 +++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 74495ddc7..53a548103 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -17,6 +17,9 @@ import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
 import { FaCircleCheck } from "react-icons/fa6";
+import { FaExclamationTriangle } from "react-icons/fa";
+import { MdOutlinePersonSearch } from "react-icons/md";
+import { ThreatLevel } from "@/types/review";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -127,6 +130,11 @@ export function AnimatedEventCard({
     true,
   );
 
+  const threatLevel = useMemo<ThreatLevel>(
+    () => (event.data.metadata?.potential_threat_level ?? 0) as ThreatLevel,
+    [event],
+  );
+
   const aspectRatio = useMemo(() => {
     if (
       !config ||
@@ -152,7 +160,15 @@ export function AnimatedEventCard({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                className="pointer-events-none absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+                className={cn(
+                  "absolute left-2 top-1 z-40 transition-opacity",
+                  threatLevel === ThreatLevel.SECURITY_CONCERN &&
+                    "pointer-events-auto bg-severity_alert opacity-100 hover:bg-severity_alert",
+                  threatLevel === ThreatLevel.NEEDS_REVIEW &&
+                    "pointer-events-auto bg-severity_detection opacity-100 hover:bg-severity_detection",
+                  threatLevel === ThreatLevel.NORMAL &&
+                    "pointer-events-none bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100",
+                )}
                 size="xs"
                 aria-label={t("markAsReviewed")}
                 onClick={async () => {
@@ -160,7 +176,13 @@ export function AnimatedEventCard({
                   updateEvents();
                 }}
               >
-                <FaCircleCheck className="size-3 text-white" />
+                {threatLevel === ThreatLevel.SECURITY_CONCERN ? (
+                  <FaExclamationTriangle className="size-3 text-white" />
+                ) : threatLevel === ThreatLevel.NEEDS_REVIEW ? (
+                  <MdOutlinePersonSearch className="size-3 text-white" />
+                ) : (
+                  <FaCircleCheck className="size-3 text-white" />
+                )}
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("markAsReviewed")}</TooltipContent>
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 49d0e70bf..dc09fe4f5 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -389,7 +389,7 @@ export default function LiveCameraView({
     return "mse";
   }, [lowBandwidth, mic, webRTC, isRestreamed]);
 
-  useKeyboardListener(["m"], (key, modifiers) => {
+  useKeyboardListener(["m", "Escape"], (key, modifiers) => {
     if (!modifiers.down) {
       return true;
     }
@@ -407,6 +407,12 @@ export default function LiveCameraView({
           return true;
         }
         break;
+      case "Escape":
+        if (!fullscreen) {
+          navigate(-1);
+          return true;
+        }
+        break;
     }
 
     return false;