Embeddings UI updates (#14378)

* Handle Frigate+ submitted case

* Add search settings and rename general to ui settings

* Add platform aware sheet component

* use two columns on mobile view

* Add cameras page to more filters

* clean up search settings view

* Add time range to side filter

* better match with ui settings

* fix icon size

* use two columns on mobile view

* clean up search settings view

* Add zones and saving logic

* Add all filters to side panel

* better match with ui settings

* fix icon size

* Fix mobile fitler page

* Fix embeddings access

* Cleanup

* Fix scroll

* fix double scrollbars and add separators on mobile too

* two columns on mobile

* italics for emphasis

---------

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

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -1,9 +1,16 @@
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "@/components/mobile/MobilePage";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { isMobile } from "react-device-detect";
 
 type PlatformAwareDialogProps = {
@@ -42,3 +49,48 @@ export default function PlatformAwareDialog({
     </Popover>
   );
 }
+
+type PlatformAwareSheetProps = {
+  trigger: JSX.Element;
+  content: JSX.Element;
+  triggerClassName?: string;
+  contentClassName?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+export function PlatformAwareSheet({
+  trigger,
+  content,
+  triggerClassName = "",
+  contentClassName = "",
+  open,
+  onOpenChange,
+}: PlatformAwareSheetProps) {
+  if (isMobile) {
+    return (
+      <div>
+        <div onClick={() => onOpenChange(true)}>{trigger}</div>
+        <MobilePage open={open} onOpenChange={onOpenChange}>
+          <MobilePageContent className="h-full overflow-hidden">
+            <MobilePageHeader
+              className="mx-2"
+              onClose={() => onOpenChange(false)}
+            >
+              <MobilePageTitle>More Filters</MobilePageTitle>
+            </MobilePageHeader>
+            <div className={contentClassName}>{content}</div>
+          </MobilePageContent>
+        </MobilePage>
+      </div>
+    );
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild className={triggerClassName}>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent className={contentClassName}>{content}</SheetContent>
+    </Sheet>
+  );
+}