fix: some pages can't translation object label.

web/public/locales/en/views/explore.json

@@ -54,7 +54,12 @@
       },
       "gone": "{{label}} left",
       "heard": "{{label}} heard",
-      "external": "{{label}} detected"
+      "external": "{{label}} detected",
+      "header": {
+        "zones": "Zones",
+        "ratio": "Ratio",
+        "area": "Area"
+      }
     },
     "annotationSettings": {
       "title": "Annotation Settings",

web/src/components/card/SearchThumbnail.tsx

@@ -127,7 +127,9 @@ export default function SearchThumbnail({
                   .filter(
                     (item) => item !== undefined && !item.includes("-verified"),
                   )
-                  .map((text) => t(text, { ns: "objects" }))
+                  .map((text) =>
+                    t(text.replace(" ", "_").toLowerCase(), { ns: "objects" }),
+                  )
                   .sort()
                   .join(", ")
                   .replaceAll("-verified", "")}

web/src/components/filter/SearchFilterGroup.tsx

@@ -248,7 +248,9 @@ function GeneralFilterButton({
     }
 
     if (selectedLabels.length == 1) {
-      return t(selectedLabels[0], { ns: "objects" });
+      return t(selectedLabels[0].replace(" ", "_").toLowerCase(), {
+        ns: "objects",
+      });
     }
 
     return t("labels.count", {
@@ -355,7 +357,7 @@ export function GeneralFilterContent({
           {allLabels.map((item) => (
             <FilterSwitch
               key={item}
-              label={t(item, { ns: "objects" })}
+              label={t(item.replace(" ", "_").toLowerCase(), { ns: "objects" })}
               isChecked={currentLabels?.includes(item) ?? false}
               onCheckedChange={(isChecked) => {
                 if (isChecked) {

web/src/components/input/InputWithTags.tsx

@@ -419,7 +419,9 @@ export default function InputWithTags({
         ? t("button.yes", { ns: "common" })
         : t("button.no", { ns: "common" });
     } else if (filterType === "labels") {
-      return t(filterValues as string, { ns: "objects" });
+      return t((filterValues as string).replace(" ", "_").toLowerCase(), {
+        ns: "objects",
+      });
     } else if (filterType === "search_type") {
       return t("filter.searchType." + (filterValues as string));
     } else {
@@ -806,7 +808,11 @@ export default function InputWithTags({
                             className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
                           >
                             {t("filter.label." + filterType)}:{" "}
-                            {value.replaceAll("_", " ")}
+                            {filterType === "labels"
+                              ? t(value.replace(" ", "_").toLowerCase(), {
+                                  ns: "objects",
+                                })
+                              : value.replaceAll("_", " ")}
                             <button
                               onClick={() =>
                                 removeFilter(filterType as FilterType, value)

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

@@ -200,9 +200,9 @@ export function AnnotationSettingsPane({
                       />
                     </FormControl>
                     <FormDescription>
-                      {t(
+                      <Trans ns="views/explore">
-                        "objectLifecycle.annotationSettings.offset.millisecondsToOffset",
+                        objectLifecycle.annotationSettings.offset.millisecondsToOffset
-                      )}
+                      </Trans>
                       <div className="mt-2">
                         {t("objectLifecycle.annotationSettings.offset.tips")}
                       </div>

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

@@ -596,7 +596,9 @@ export default function ObjectLifecycle({
                       <div className="text-md mr-2 w-1/3">
                         <div className="flex flex-col items-end justify-start">
                           <p className="mb-1.5 text-sm text-primary-variant">
-                            Zones
+                            {t(
+                              "objectLifecycle.lifecycleItemDesc.header.zones",
+                            )}
                           </p>
                           {item.class_type === "entered_zone"
                             ? item.data.zones.map((zone, index) => (
@@ -627,7 +629,9 @@ export default function ObjectLifecycle({
                       <div className="text-md mr-2 w-1/3">
                         <div className="flex flex-col items-end justify-start">
                           <p className="mb-1.5 text-sm text-primary-variant">
-                            Ratio
+                            {t(
+                              "objectLifecycle.lifecycleItemDesc.header.ratio",
+                            )}
                           </p>
                           {Array.isArray(item.data.box) &&
                           item.data.box.length >= 4
@@ -641,7 +645,7 @@ export default function ObjectLifecycle({
                       <div className="text-md mr-2 w-1/3">
                         <div className="flex flex-col items-end justify-start">
                           <p className="mb-1.5 text-sm text-primary-variant">
-                            Area
+                            {t("objectLifecycle.lifecycleItemDesc.header.area")}
                           </p>
                           {Array.isArray(item.data.box) &&
                           item.data.box.length >= 4 ? (

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

@@ -324,7 +324,11 @@ export default function ReviewDetailDialog({
                         ns="views/explore"
                         values={{
                           objects: missingObjects
-                            .map((x) => t(x, { ns: "objects" }))
+                            .map((x) =>
+                              t(x.replace(" ", "_").toLowerCase(), {
+                                ns: "objects",
+                              }),
+                            )
                             .join(", "),
                         }}
                       >

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

@@ -690,7 +690,9 @@ function ObjectDetailsTab({
             <div className="text-sm text-primary/40">{t("details.label")}</div>
             <div className="flex flex-row items-center gap-2 text-sm capitalize">
               {getIconForLabel(search.label, "size-4 text-primary")}
-              {t(search.label, { ns: "objects" })}
+              {t(search.label.replace(" ", "_").toLowerCase(), {
+                ns: "objects",
+              })}
               {search.sub_label && ` (${search.sub_label})`}
               {isAdmin && (
                 <Tooltip>
@@ -951,7 +953,9 @@ function ObjectDetailsTab({
             description={
               search.label
                 ? t("details.editSubLabel.desc", {
-                    label: t(search.label, { ns: "objects" }),
+                    label: t(search.label.replace(" ", "_").toLowerCase(), {
+                      ns: "objects",
+                    }),
                   })
                 : t("details.editSubLabel.descNoLabel")
             }
@@ -966,7 +970,9 @@ function ObjectDetailsTab({
             description={
               search.label
                 ? t("details.editLPR.desc", {
-                    label: t(search.label, { ns: "objects" }),
+                    label: t(search.label.replace(" ", "_").toLowerCase(), {
+                      ns: "objects",
+                    }),
                   })
                 : t("details.editLPR.descNoLabel")
             }
@@ -1112,10 +1118,20 @@ export function ObjectSnapshotTab({
                           >
                             {/^[aeiou]/i.test(search?.label || "")
                               ? t("explore.plus.review.true.true_other", {
-                                  label: search?.label,
+                                  label: t(
+                                    search?.label
+                                      .replace(" ", "_")
+                                      .toLowerCase(),
+                                    { ns: "objects" },
+                                  ),
                                 })
                               : t("explore.plus.review.true.true_one", {
-                                  label: search?.label,
+                                  label: t(
+                                    search?.label
+                                      .replace(" ", "_")
+                                      .toLowerCase(),
+                                    { ns: "objects" },
+                                  ),
                                 })}
                           </Button>
                           <Button
@@ -1129,10 +1145,20 @@ export function ObjectSnapshotTab({
                           >
                             {/^[aeiou]/i.test(search?.label || "")
                               ? t("explore.plus.review.false.false_other", {
-                                  label: search?.label,
+                                  label: t(
+                                    search?.label
+                                      .replace(" ", "_")
+                                      .toLowerCase(),
+                                    { ns: "objects" },
+                                  ),
                                 })
                               : t("explore.plus.review.false.false_one", {
-                                  label: search?.label,
+                                  label: t(
+                                    search?.label
+                                      .replace(" ", "_")
+                                      .toLowerCase(),
+                                    { ns: "objects" },
+                                  ),
                                 })}
                           </Button>
                         </>

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -448,7 +448,7 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
         <SelectSeparator className="bg-secondary" />
         {allLabels.map((item) => (
           <SelectItem key={item} value={item}>
-            {t(item, { ns: "objects" })}
+            {t(item.replace(" ", "_").toLowerCase(), { ns: "objects" })}
           </SelectItem>
         ))}
       </SelectGroup>

web/src/components/settings/ZoneEditPane.tsx

@@ -936,7 +936,7 @@ export function ZoneObjectSelector({
                 className="w-full cursor-pointer capitalize text-primary"
                 htmlFor={item}
               >
-                {t(item, { ns: "objects" })}
+                {t(item.replace(" ", "_").toLowerCase(), { ns: "objects" })}
               </Label>
               <Switch
                 key={item}

web/src/utils/lifecycleUtil.ts

@@ -5,11 +5,16 @@ export function getLifecycleItemDescription(
   lifecycleItem: ObjectLifecycleSequence,
 ) {
   // can't use useTranslation here
-  const label = (
+  const label = t(
-    (Array.isArray(lifecycleItem.data.sub_label)
+    (
-      ? lifecycleItem.data.sub_label[0]
+      (Array.isArray(lifecycleItem.data.sub_label)
-      : lifecycleItem.data.sub_label) || lifecycleItem.data.label
+        ? lifecycleItem.data.sub_label[0]
-  ).replaceAll("_", " ");
+        : lifecycleItem.data.sub_label) || lifecycleItem.data.label
+    )
+      .replace(" ", "_")
+      .toLowerCase(),
+    { ns: "objects" },
+  );
 
   switch (lifecycleItem.class_type) {
     case "visible":

web/src/views/explore/ExploreView.tsx

@@ -152,7 +152,7 @@ function ThumbnailRow({
   return (
     <div className="rounded-lg bg-background_alt p-2 md:px-4">
       <div className="flex flex-row items-center text-lg capitalize">
-        {t(objectType, { ns: "objects" })}
+        {t(objectType.replace(" ", "_").toLowerCase(), { ns: "objects" })}
         {searchResults && (
           <span className="ml-3 text-sm text-secondary-foreground">
             {t("trackedObjectsCount", {

web/src/views/settings/CameraSettingsView.tsx

@@ -79,7 +79,9 @@ export default function CameraSettingsView({
   const alertsLabels = useMemo(() => {
     return cameraConfig?.review.alerts.labels
       ? cameraConfig.review.alerts.labels
-          .map((label) => t(label, { ns: "objects" }))
+          .map((label) =>
+            t(label.replace(" ", "_").toLowerCase(), { ns: "objects" }),
+          )
           .join(", ")
       : "";
   }, [cameraConfig, t]);
@@ -87,7 +89,9 @@ export default function CameraSettingsView({
   const detectionsLabels = useMemo(() => {
     return cameraConfig?.review.detections.labels
       ? cameraConfig.review.detections.labels
-          .map((label) => t(label, { ns: "objects" }))
+          .map((label) =>
+            t(label.replace(" ", "_").toLowerCase(), { ns: "objects" }),
+          )
           .join(", ")
       : "";
   }, [cameraConfig, t]);

web/src/views/settings/ObjectSettingsView.tsx

@@ -366,7 +366,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                     {getIconForLabel(obj.label, "size-5 text-white")}
                   </div>
                   <div className="ml-3 text-lg">
-                    {capitalizeFirstLetter(obj.label.replaceAll("_", " "))}
+                    {t(obj.label, { ns: "objects" })}
                   </div>
                 </div>
                 <div className="flex w-8/12 flex-row items-center justify-end">