Miscellaneous Fixes (#20897)

* don't flatten the search result cache when updating

this would cause an infinite swr fetch if something was mutated and then fetch was called again

* Properly sort keys for recording summary in StorageMetrics

* tracked object description box tweaks

* Remove ability to right click on elements inside of face popup

* Update reprocess message

* don't show object track until video metadata is loaded

* fix blue line height calc for in progress events

* Use timeline tab by default for notifications but add a query arg for customization

* Try and improve notification opening behavior

* Reduce review item buffering behavior

* ensure logging config is passed to camera capture and tracker processes

* ensure on demand recording stops when browser closes

* improve active line progress height with resize observer

* remove icons and duplicate find similar link in explore context menu

* fix for initial broken image when creating trigger from explore

* display friendly names for triggers in toasts

* lpr and triggers docs updates

* remove icons from dropdowns in face and classification

* fix comma dangle linter issue

* re-add incorrectly removed face library button icons

* fix sidebar nav links on < 768px desktop layout

* allow text to wrap on mark as reviewed button

* match exact pixels

* clarify LPR docs

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/views/live/LiveCameraView.tsx

@@ -850,6 +850,29 @@ function FrigateCameraFeatures({
     }
   }, [activeToastId, t]);
 
+  const endEventViaBeacon = useCallback(() => {
+    if (!recordingEventIdRef.current) return;
+
+    const url = `${window.location.origin}/api/events/${recordingEventIdRef.current}/end`;
+    const payload = JSON.stringify({
+      end_time: Math.ceil(Date.now() / 1000),
+    });
+
+    // this needs to be a synchronous XMLHttpRequest to guarantee the PUT
+    // reaches the server before the browser kills the page
+    const xhr = new XMLHttpRequest();
+    try {
+      xhr.open("PUT", url, false);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.setRequestHeader("X-CSRF-TOKEN", "1");
+      xhr.setRequestHeader("X-CACHE-BYPASS", "1");
+      xhr.withCredentials = true;
+      xhr.send(payload);
+    } catch (e) {
+      // Silently ignore errors during unload
+    }
+  }, []);
+
   const handleEventButtonClick = useCallback(() => {
     if (isRecording) {
       endEvent();
@@ -887,8 +910,19 @@ function FrigateCameraFeatures({
   }, [camera.name, isRestreamed, preferredLiveMode, t]);
 
   useEffect(() => {
+    // Handle page unload/close (browser close, tab close, refresh, navigation to external site)
+    const handleBeforeUnload = () => {
+      if (recordingEventIdRef.current) {
+        endEventViaBeacon();
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
     // ensure manual event is stopped when component unmounts
     return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+
       if (recordingEventIdRef.current) {
         endEvent();
       }