Small Tweaks (#17652)

* Ensure that hailo uses correct labelmap

* Make whole button clickable

* Add weblate to readme

* Update docs for HEIC

* Fix explore chip icon logic

* Sort regardless of case

* Don't allow selection

* Fix image uploading

web/src/components/card/SearchThumbnail.tsx

@@ -44,23 +44,31 @@ export default function SearchThumbnail({
     [searchResult, onClick],
   );
 
-  const objectLabel = useMemo(() => {
-    if (
-      !config ||
-      !searchResult.sub_label ||
-      !config.model.attributes_map[searchResult.label]
-    ) {
-      return searchResult.label;
-    }
-
-    return `${searchResult.label}-verified`;
-  }, [config, searchResult]);
-
   const hasRecognizedPlate = useMemo(
     () => (searchResult.data.recognized_license_plate?.length || 0) > 0,
     [searchResult],
   );
 
+  const objectLabel = useMemo(() => {
+    if (!config) {
+      return searchResult.label;
+    }
+
+    if (!searchResult.sub_label) {
+      return `${searchResult.label}${hasRecognizedPlate ? "-plate" : ""}`;
+    }
+
+    if (
+      config.model.attributes_map[searchResult.label]?.includes(
+        searchResult.sub_label,
+      )
+    ) {
+      return searchResult.sub_label;
+    }
+
+    return `${searchResult.label}-verified`;
+  }, [config, hasRecognizedPlate, searchResult]);
+
   return (
     <div
       className="relative size-full cursor-pointer"
@@ -102,10 +110,7 @@ export default function SearchThumbnail({
                     className={`z-0 flex items-center justify-between gap-1 space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs`}
                     onClick={() => onClick(searchResult, false, true)}
                   >
-                    {getIconForLabel(
-                      `${objectLabel}${hasRecognizedPlate ? "-plate" : ""}`,
-                      "size-3 text-white",
-                    )}
+                    {getIconForLabel(objectLabel, "size-3 text-white")}
                     {Math.round(
                       (searchResult.data.score ??
                         searchResult.data.top_score ??

web/src/components/input/ImageEntry.tsx

@@ -32,7 +32,11 @@ export default function ImageEntry({
   const [preview, setPreview] = useState<string | null>(null);
 
   const formSchema = z.object({
-    file: z.instanceof(File, { message: "Please select an image file." }),
+    file: z
+      .instanceof(File, { message: t("imageEntry.validation.selectImage") })
+      .refine((file) =>
+        accept["image/*"].includes(`.${file.type.split("/")[1]}`),
+      ),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({

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

@@ -462,6 +462,13 @@ export function SubFilterContent({
   setSubLabels,
 }: SubFilterContentProps) {
   const { t } = useTranslation(["components/filter"]);
+  const sortedSubLabels = useMemo(
+    () =>
+      [...allSubLabels].sort((a, b) =>
+        a.toLowerCase().localeCompare(b.toLowerCase()),
+      ),
+    [allSubLabels],
+  );
   return (
     <div className="overflow-x-hidden">
       <DropdownMenuSeparator className="mb-3" />
@@ -482,7 +489,7 @@ export function SubFilterContent({
         />
       </div>
       <div className="mt-2.5 flex flex-col gap-2.5">
-        {allSubLabels.map((item) => (
+        {sortedSubLabels.map((item) => (
           <FilterSwitch
             key={item}
             label={item.replaceAll("_", " ")}

web/src/pages/FaceLibrary.tsx

@@ -690,7 +690,7 @@ function FaceAttemptGroup({
       }}
     >
       <div className="flex flex-row justify-between">
-        <div className="capitalize">
+        <div className="select-none capitalize">
           Person
           {event?.sub_label
             ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
@@ -848,7 +848,7 @@ function FaceAttempt({
             : "outline-transparent duration-500",
         )}
       >
-        <div className="relative w-full overflow-hidden rounded-lg *:text-card-foreground">
+        <div className="relative w-full select-none overflow-hidden rounded-lg *:text-card-foreground">
           <img
             ref={imgRef}
             className={cn("size-44", isMobile && "w-full")}
@@ -866,7 +866,7 @@ function FaceAttempt({
             />
           </div>
         </div>
-        <div className="p-2">
+        <div className="select-none p-2">
           <div className="flex w-full flex-row items-center justify-between gap-2">
             <div className="flex flex-col items-start text-xs text-primary-variant">
               <div className="capitalize">{data.name}</div>

web/src/views/live/LiveCameraView.tsx

@@ -1479,17 +1479,17 @@ function FrigateCameraFeatures({
                   })}
                 </p>
               </div>
-              <div className="flex flex-col gap-1">
+              <div
+                className="flex cursor-pointer flex-col gap-1"
+                onClick={() =>
+                  navigate(`/settings?page=debug&camera=${camera.name}`)
+                }
+              >
                 <div className="flex items-center justify-between text-sm font-medium leading-none">
                   {t("streaming.debugView", {
                     ns: "components/dialog",
                   })}
-                  <LuExternalLink
-                    onClick={() =>
-                      navigate(`/settings?page=debug&camera=${camera.name}`)
-                    }
-                    className="ml-2 inline-flex size-5 cursor-pointer"
-                  />
+                  <LuExternalLink className="ml-2 inline-flex size-5" />
                 </div>
               </div>
             </div>