From 269cadff15a6836585a2e6c61e8794d3ad774f77 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 8 Apr 2025 09:08:01 -0600
Subject: [PATCH] Show detail icon indicating if a car has a plate recognized
 that is not a known plate (#17601)

---
 web/src/components/card/SearchThumbnail.tsx | 10 +++++++++-
 web/src/utils/iconUtil.tsx                  | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
index b41533f7b..f53756be0 100644
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -56,6 +56,11 @@ export default function SearchThumbnail({
     return `${searchResult.label}-verified`;
   }, [config, searchResult]);
 
+  const hasRecognizedPlate = useMemo(
+    () => (searchResult.data.recognized_license_plate?.length || 0) > 0,
+    [searchResult],
+  );
+
   return (
     <div
       className="relative size-full cursor-pointer"
@@ -97,7 +102,10 @@ 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, "size-3 text-white")}
+                    {getIconForLabel(
+                      `${objectLabel}${hasRecognizedPlate ? "-plate" : ""}`,
+                      "size-3 text-white",
+                    )}
                     {Math.round(
                       (searchResult.data.score ??
                         searchResult.data.top_score ??
diff --git a/web/src/utils/iconUtil.tsx b/web/src/utils/iconUtil.tsx
index e4356c290..8cca78ab5 100644
--- a/web/src/utils/iconUtil.tsx
+++ b/web/src/utils/iconUtil.tsx
@@ -32,7 +32,7 @@ import {
   GiRaccoonHead,
   GiSailboat,
 } from "react-icons/gi";
-import { LuBox, LuLassoSelect } from "react-icons/lu";
+import { LuBox, LuLassoSelect, LuScanBarcode } from "react-icons/lu";
 import * as LuIcons from "react-icons/lu";
 import { MdRecordVoiceOver } from "react-icons/md";
 import { PiBirdFill } from "react-icons/pi";
@@ -57,6 +57,8 @@ export function isValidIconName(value: string): value is IconName {
 export function getIconForLabel(label: string, className?: string) {
   if (label.endsWith("-verified")) {
     return getVerifiedIcon(label, className);
+  } else if (label.endsWith("-plate")) {
+    return getRecognizedPlateIcon(label, className);
   }
 
   switch (label) {
@@ -153,3 +155,14 @@ function getVerifiedIcon(label: string, className?: string) {
     </div>
   );
 }
+
+function getRecognizedPlateIcon(label: string, className?: string) {
+  const simpleLabel = label.substring(0, label.lastIndexOf("-"));
+
+  return (
+    <div key={label} className="flex items-center">
+      {getIconForLabel(simpleLabel, className)}
+      <LuScanBarcode className="absolute size-2.5 translate-x-[50%] translate-y-3/4" />
+    </div>
+  );
+}