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("_", " ")}