web/src/components/card/AnimatedEventCard.tsx

@@ -50,27 +50,6 @@ export function AnimatedEventCard({
     fetchPreviews: !currentHour,
   });
 
-  const tooltipText = useMemo(() => {
-    if (event?.data?.metadata?.title) {
-      return event.data.metadata.title;
-    }
-
-    return (
-      `${[
-        ...new Set([
-          ...(event.data.objects || []),
-          ...(event.data.sub_labels || []),
-          ...(event.data.audio || []),
-        ]),
-      ]
-        .filter((item) => item !== undefined && !item.includes("-verified"))
-        .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
-        .sort()
-        .join(", ")
-        .replaceAll("-verified", "")} ` + t("detected")
-    );
-  }, [event, t]);
-
   // visibility
 
   const [windowVisible, setWindowVisible] = useState(true);
@@ -241,7 +220,20 @@ export function AnimatedEventCard({
           )}
         </div>
       </TooltipTrigger>
-      <TooltipContent>{tooltipText}</TooltipContent>
+      <TooltipContent>
+        {`${[
+          ...new Set([
+            ...(event.data.objects || []),
+            ...(event.data.sub_labels || []),
+            ...(event.data.audio || []),
+          ]),
+        ]
+          .filter((item) => item !== undefined && !item.includes("-verified"))
+          .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+          .sort()
+          .join(", ")
+          .replaceAll("-verified", "")} ` + t("detected")}
+      </TooltipContent>
     </Tooltip>
   );
 }

web/src/components/menu/LiveContextMenu.tsx

@@ -355,7 +355,9 @@ export default function LiveContextMenu({
             <div
               className="flex w-full cursor-pointer items-center justify-start gap-2"
               onClick={
-                isEnabled ? () => navigate(`?debug=true#${camera}`) : undefined
+                isEnabled
+                  ? () => navigate(`/settings?page=debug&camera=${camera}`)
+                  : undefined
               }
             >
               <div className="text-primary">

web/src/components/mobile/MobilePage.tsx

@@ -222,7 +222,7 @@ export function MobilePageHeader({
 type MobilePageTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
 export function MobilePageTitle({ className, ...props }: MobilePageTitleProps) {
-  return <h2 className={cn("text-lg", className)} {...props} />;
+  return <h2 className={cn("text-lg font-semibold", className)} {...props} />;
 }
 
 type MobilePageDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

web/src/components/overlay/RoleChangeDialog.tsx

@@ -42,7 +42,7 @@ export default function RoleChangeDialog({
     <Dialog open={show} onOpenChange={onCancel}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle className="text-xl">
+          <DialogTitle className="text-xl font-semibold">
             {t("users.dialog.changeRole.title")}
           </DialogTitle>
           <DialogDescription>

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -1170,7 +1170,11 @@ export function ObjectSnapshotTab({
                 <Card className="p-1 text-sm md:p-2">
                   <CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
                     <div className={cn("flex flex-col space-y-3")}>
-                      <div className={"text-lg leading-none"}>
+                      <div
+                        className={
+                          "text-lg font-semibold leading-none tracking-tight"
+                        }
+                      >
                         {t("explore.plus.submitToPlus.label")}
                       </div>
                       <div className="text-sm text-muted-foreground">

web/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
+  }
-);
+)
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-));
+))
-Alert.displayName = "Alert";
+Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,11 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium leading-none", className)}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-));
+))
-AlertTitle.displayName = "AlertTitle";
+AlertTitle.displayName = "AlertTitle"
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-));
+))
-AlertDescription.displayName = "AlertDescription";
+AlertDescription.displayName = "AlertDescription"
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }

web/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className,
+      className
     )}
     {...props}
   />
-));
+))
-Card.displayName = "Card";
+Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-));
+))
-CardHeader.displayName = "CardHeader";
+CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -35,11 +35,14 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("text-2xl font-semibold leading-none", className)}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
     {...props}
   />
-));
+))
-CardTitle.displayName = "CardTitle";
+CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -50,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-));
+))
-CardDescription.displayName = "CardDescription";
+CardDescription.displayName = "CardDescription"
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
+))
-CardContent.displayName = "CardContent";
+CardContent.displayName = "CardContent"
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,14 +73,7 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-));
+))
-CardFooter.displayName = "CardFooter";
+CardFooter.displayName = "CardFooter"
 
-export {
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};

web/src/components/ui/dialog.tsx

@@ -149,7 +149,10 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none", className)}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
     {...props}
   />
 ));

web/src/components/ui/drawer.tsx

@@ -85,7 +85,10 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none", className)}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
     {...props}
   />
 ));

web/src/components/ui/heading.tsx

@@ -14,7 +14,12 @@ const Heading = ({
   switch (as) {
     case "h1":
       return (
-        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
+        <h1
+          className={cn(
+            "scroll-m-20 text-3xl font-extrabold tracking-tight",
+            className
+          )}
+        >
           {children}
         </h1>
       );
@@ -22,8 +27,8 @@ const Heading = ({
       return (
         <h2
           className={cn(
-            "mb-3 scroll-m-20 text-3xl font-semibold transition-colors first:mt-0",
+            "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0 mb-3",
-            className,
+            className
           )}
         >
           {children}
@@ -31,19 +36,34 @@ const Heading = ({
       );
     case "h3":
       return (
-        <h3 className={cn("mb-3 scroll-m-20 text-2xl font-medium", className)}>
+        <h3
+          className={cn(
+            "scroll-m-20 text-2xl font-semibold tracking-tight mb-3",
+            className
+          )}
+        >
           {children}
         </h3>
       );
     case "h4":
       return (
-        <h4 className={cn("scroll-m-20 text-xl font-medium", className)}>
+        <h4
+          className={cn(
+            "scroll-m-20 text-xl font-semibold tracking-tight",
+            className
+          )}
+        >
           {children}
         </h4>
       );
     default:
       return (
-        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
+        <h1
+          className={cn(
+            "scroll-m-20 text-3xl font-extrabold tracking-tight",
+            className
+          )}
+        >
           {children}
         </h1>
       );

web/src/hooks/use-overlay-state.tsx

@@ -112,8 +112,7 @@ export function useSearchEffect(
   callback: (value: string) => boolean,
 ) {
   const location = useLocation();
-  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
-  const [searchParams] = useSearchParams();
 
   const param = useMemo(() => {
     const param = searchParams.get(key);
@@ -133,17 +132,7 @@ export function useSearchEffect(
     const remove = callback(param[1]);
 
     if (remove) {
-      navigate(location.pathname + location.hash, {
+      setSearchParams(undefined, { state: location.state, replace: true });
-        state: location.state,
-        replace: true,
-      });
     }
-  }, [
+  }, [param, location.state, callback, setSearchParams]);
-    param,
-    location.state,
-    location.pathname,
-    location.hash,
-    callback,
-    navigate,
-  ]);
 }

web/src/pages/Settings.tsx

@@ -292,7 +292,7 @@ export default function Settings() {
                 <Logo className="h-8" />
               </div>
               <div className="flex flex-row text-center">
-                <h2 className="ml-2 text-lg">
+                <h2 className="ml-2 text-lg font-semibold">
                   {t("menu.settings", { ns: "common" })}
                 </h2>
               </div>

web/src/types/ws.ts

@@ -30,7 +30,7 @@ type FrigateObjectState = {
 };
 
 export interface FrigateReview {
-  type: "new" | "update" | "end" | "genai";
+  type: "new" | "update" | "end";
   before: ReviewSegment;
   after: ReviewSegment;
 }

web/src/views/live/LiveCameraView.tsx

@@ -111,7 +111,6 @@ import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import PtzControlPanel from "@/components/overlay/PtzControlPanel";
 import ObjectSettingsView from "../settings/ObjectSettingsView";
-import { useSearchEffect } from "@/hooks/use-overlay-state";
 
 type LiveCameraViewProps = {
   config?: FrigateConfig;
@@ -275,14 +274,6 @@ export default function LiveCameraView({
   const [showStats, setShowStats] = useState(false);
   const [debug, setDebug] = useState(false);
 
-  useSearchEffect("debug", (value: string) => {
-    if (value === "true") {
-      setDebug(true);
-    }
-
-    return true;
-  });
-
   const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
     width: 0,
     height: 0,

web/src/views/live/LiveDashboardView.tsx

@@ -114,11 +114,7 @@ export default function LiveDashboardView({
 
     // if event is ended and was saved, update events list
     if (eventUpdate.after.severity == "alert") {
-      if (
+      if (eventUpdate.type == "end" || eventUpdate.type == "new") {
-        eventUpdate.type == "end" ||
-        eventUpdate.type == "new" ||
-        eventUpdate.type == "genai"
-      ) {
         setTimeout(
           () => updateEvents(),
           eventUpdate.type == "end" ? 1000 : 6000,

web/src/views/settings/ObjectSettingsView.tsx

@@ -162,9 +162,9 @@ export default function ObjectSettingsView({
   }
 
   return (
-    <div className="mt-1 flex size-full flex-col md:flex-row">
+    <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:w-3/12">
         <Heading as="h4" className="mb-2">
           {t("debug.title")}
         </Heading>