From 7eb3c87fa0d8a5737d866867bdbaea7b690b4642 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 25 Feb 2025 18:17:39 -0700
Subject: [PATCH] UI tweaks (#16813)

* Add escape to close review details

* Refresh review page automatically if there are currently no items to review
---
 .../components/overlay/detail/ReviewDetailDialog.tsx   |  9 +++++++++
 web/src/views/events/EventView.tsx                     | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 76234193c6..2570fd033e 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -41,6 +41,7 @@ import { useOverlayState } from "@/hooks/use-overlay-state";
 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";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -133,6 +134,14 @@ export default function ReviewDetailDialog({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [review]);
 
+  // keyboard listener
+
+  useKeyboardListener(["Esc"], (key, modifiers) => {
+    if (key == "Esc" && modifiers.down && !modifiers.repeat) {
+      setIsOpen(false);
+    }
+  });
+
   const Overlay = isDesktop ? Sheet : MobilePage;
   const Content = isDesktop ? SheetContent : MobilePageContent;
   const Header = isDesktop ? SheetHeader : MobilePageHeader;
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index e8e864e321..583b47fe9a 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -621,6 +621,16 @@ function DetectionReview({
 
   // existing review item
 
+  useEffect(() => {
+    if (loading || currentItems == null || itemsToReview == undefined) {
+      return;
+    }
+
+    if (currentItems.length == 0 && itemsToReview > 0) {
+      pullLatestData();
+    }
+  }, [loading, currentItems, itemsToReview, pullLatestData]);
+
   useEffect(() => {
     if (!startTime || !currentItems || currentItems.length == 0) {
       return;