Miscellaneous fixes (0.17 beta) (#21934)

* improve chip tooltip display

- use formatList to use i18n separators instead of commas
- ensure the correct event type is used so sublabels are not run through normalization
- remove smart-capitalization classes as translated labels use i18n (which includes capitalization)
- give icons an optional key so that the console doesn't complain about duplication when rendering

* Add grace period for recording segment checks to prevent spurious ffmpeg restarts

* add admin precedence to proxy role_map resolution to prevent downgrade

* clean up

* formatting

* work around radix pointer events issue when dialog is opened from drawer

fixes https://github.com/blakeblackshear/frigate/discussions/21940

* prevent console warnings about missing titles and descriptions

make these invisible with sr-only

* remove duplicate language

* Adjust handling for device sizes

* Cleanup

---------

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

web/src/components/card/AnimatedEventCard.tsx

@@ -19,6 +19,8 @@ import { Button } from "../ui/button";
 import { FaCircleCheck } from "react-icons/fa6";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { getTranslatedLabel } from "@/utils/i18n";
+import { formatList } from "@/utils/stringUtil";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -50,26 +52,37 @@ export function AnimatedEventCard({
     fetchPreviews: !currentHour,
   });
 
+  const getEventType = useCallback(
+    (text: string) => {
+      if (event.data.sub_labels?.includes(text)) return "manual";
+      if (event.data.audio.includes(text)) return "audio";
+      return "object";
+    },
+    [event],
+  );
+
   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")
+      `${formatList(
+        [
+          ...new Set([
+            ...(event.data.objects || []).map((text) =>
+              text.replace("-verified", ""),
+            ),
+            ...(event.data.sub_labels || []),
+            ...(event.data.audio || []),
+          ]),
+        ]
+          .filter((item) => item !== undefined)
+          .map((text) => getTranslatedLabel(text, getEventType(text)))
+          .sort(),
+      )} ` + t("detected")
     );
-  }, [event, t]);
+  }, [event, getEventType, t]);
 
   // visibility
 

web/src/components/card/ReviewCard.tsx

@@ -33,13 +33,14 @@ import axios from "axios";
 import { toast } from "sonner";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { Button, buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { LuCircle } from "react-icons/lu";
 import { MdAutoAwesome } from "react-icons/md";
 import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
+import { getTranslatedLabel } from "@/utils/i18n";
+import { formatList } from "@/utils/stringUtil";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -123,6 +124,12 @@ export default function ReviewCard({
     }
   }, [bypassDialogRef, onDelete]);
 
+  const getEventType = (text: string) => {
+    if (event.data.sub_labels?.includes(text)) return "manual";
+    if (event.data.audio.includes(text)) return "audio";
+    return "object";
+  };
+
   const content = (
     <div
       className="relative flex w-full cursor-pointer flex-col gap-1.5"
@@ -197,20 +204,20 @@ export default function ReviewCard({
             </div>
           </TooltipTrigger>
           <TooltipContent className="smart-capitalize">
-            {[
-              ...new Set([
-                ...(event.data.objects || []),
-                ...(event.data.sub_labels || []),
-                ...(event.data.audio || []),
-              ]),
-            ]
-              .filter(
-                (item) => item !== undefined && !item.includes("-verified"),
-              )
-              .map((text) => capitalizeFirstLetter(text))
-              .sort()
-              .join(", ")
-              .replaceAll("-verified", "")}
+            {formatList(
+              [
+                ...new Set([
+                  ...(event.data.objects || []).map((text) =>
+                    text.replace("-verified", ""),
+                  ),
+                  ...(event.data.sub_labels || []),
+                  ...(event.data.audio || []),
+                ]),
+              ]
+                .filter((item) => item !== undefined)
+                .map((text) => getTranslatedLabel(text, getEventType(text)))
+                .sort(),
+            )}
           </TooltipContent>
         </Tooltip>
         <TimeAgo