Various Tweaks (#22609)

* Mark items as reviewed as a group with keyboard

* Improve handling of half model regions

* update viewport meta tag to prevent user scaling

fixes https://github.com/blakeblackshear/frigate/issues/22017

* add small animation to collapsible shadcn elements

* add proxy auth env var tests

* Improve search effect

* Fix mobile back navigation losing overlay state on classification page

* undo historyBack changes

* fix classification history navigation

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/card/ClassificationCard.tsx

@@ -6,7 +6,7 @@ import {
   ClassificationThreshold,
   ClassifiedEvent,
 } from "@/types/classification";
-import { forwardRef, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop, isIOS, isMobile, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -216,6 +216,25 @@ export function GroupedClassificationCard({
   const { t } = useTranslation(["views/explore", i18nLibrary]);
   const [detailOpen, setDetailOpen] = useState(false);
 
+  // If the component unmounts while the detail overlay is open, we need to
+  // pop the history state that was pushed by useHistoryBack, otherwise it
+  // leaves a stale entry that breaks back navigation.
+  const detailOpenRef = useRef(detailOpen);
+  useEffect(() => {
+    detailOpenRef.current = detailOpen;
+  }, [detailOpen]);
+
+  useEffect(() => {
+    return () => {
+      // Only pop the state if we are still sitting on the overlayOpen history entry.
+      // This prevents the unmount from undoing cross-page routing if the unmount
+      // was caused by navigating away to a different view.
+      if (detailOpenRef.current && window.history.state?.overlayOpen) {
+        window.history.back();
+      }
+    };
+  }, []);
+
   // data
 
   const bestItem = useMemo<ClassificationItemData | undefined>(() => {

web/src/components/ui/collapsible.tsx

@@ -1,9 +1,28 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as React from "react";
 
-const Collapsible = CollapsiblePrimitive.Root
+import { cn } from "@/lib/utils";
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+const CollapsibleContent = React.forwardRef<
+  React.ComponentRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn(
+      "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </CollapsiblePrimitive.CollapsibleContent>
+));
+CollapsibleContent.displayName =
+  CollapsiblePrimitive.CollapsibleContent.displayName;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };