feat: add more search i18n keys

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

@@ -10,6 +10,27 @@
         "filterActive": "Filters active"
     },
     "filter": {
+        "label": {
+            "cameras": "Cameras",
+            "labels": "Labels",
+            "zones": "Zones",
+            "sub_labels": "Sub Labels",
+            "search_type": "Search Type",
+            "time_range": "Time Range",
+            "before": "Before",
+            "after": "After",
+            "min_score": "Min Score",
+            "max_score": "Max Score",
+            "min_speed": "Min Speed",
+            "max_speed": "Max Speed",
+            "recognized_license_plate": "Recognized License Plate",
+            "has_clip": "Has Clip",
+            "has_snapshot": "Has Snapshot"
+        },
+        "searchType": {
+            "thumbnail": "Thumbnail", 
+            "description": "Description"
+        },
         "toast": {
             "error": {
                 "beforeDateBeLaterAfter": "The 'before' date must be later than the 'after' date.",
@@ -25,11 +46,19 @@
             "desc": "Filters help you narrow down your search results. Here's how to use them in the input field:",
             "desc.step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>Type a filter name followed by a colon (e.g., \"cameras:\").</li><li>Select a value from the suggestions or type your own.</li><li>Use multiple filters by adding them one after another with a space in between.</li><li>Date filters (before: and after:) use <em>{{DateFormat}}</em> format.</li><li>Time range filter uses <em>{{exampleTime}}</em> format.</li><li>Remove filters by clicking the 'x' next to them.</li></ul>",
             "desc.example": "Example: <code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM </code>"
+        },
+        "header": {
+            "currentFilterType": "Filter Values",
+            "noFilters": "Filters",
+            "activeFilters": "Active Filters"
         }
     },
     "similaritySearch": {
         "title": "Similarity Search",
         "active": "Similarity search active",
         "clear": "Clear similarity search"
+    },
+    "placeholder": {
+        "search": "Search..."
     }
 }

web/public/locales/zh-CN/views/search.json

@@ -10,6 +10,27 @@
         "filterActive": "筛选器已激活"
     },
     "filter": {
+        "label": {
+            "cameras": "摄像机",
+            "labels": "标签",
+            "zones": "区域",
+            "sub_labels": "子标签",
+            "search_type": "搜索类型",
+            "time_range": "时间范围",
+            "before": "之前",
+            "after": "之后",
+            "min_score": "最低分数",
+            "max_score": "最高分数",
+            "min_speed": "最低速度",
+            "max_speed": "最高速度",
+            "recognized_license_plate": "识别的车牌",
+            "has_clip": "包含片段",
+            "has_snapshot": "包含快照"
+        },
+        "searchType": {
+            "thumbnail": "缩略图", 
+            "description": "描述"
+        },
         "toast": {
             "error": {
                 "beforeDateBeLaterAfter": "“之前”日期必须晚于“之后”日期。",
@@ -25,11 +46,19 @@
             "desc": "筛选器可帮助您缩小搜索范围。注意，目前还暂不支持中文搜索。以下是在输入字段中使用筛选器的方法：",
             "desc.step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>输入筛选器名称后跟一个冒号（例如：“cameras:”）。</li><li>从建议中选择一个值或输入您自己的值。</li><li>使用多个筛选器时，可以在它们之间用空格分隔。</li><li>日期筛选器（before: 和 after:）使用 <em>{{DateFormat}}</em> 格式。</li><li>时间范围筛选器使用 <em>{{exampleTime}}</em> 格式。</li><li>点击筛选器旁边的“x”即可移除筛选条件。</li></ul>",
             "desc.example": "示例：<code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM</code>"
+        },
+        "header": {
+            "currentFilterType": "筛选值",
+            "noFilters": "筛选条件",
+            "activeFilters": "激活的筛选项"
         }
     },
     "similaritySearch": {
         "title": "相似搜索",
         "active": "相似搜索已激活",
         "clear": "清除相似搜索"
+    },
+    "placeholder": {
+        "search": "搜索..."
     }
 }

web/src/components/input/InputWithTags.tsx

@@ -415,9 +415,15 @@ export default function InputWithTags({
       filterType === "has_snapshot" ||
       filterType === "is_submitted"
     ) {
-      return filterValues ? "Yes" : "No";
+      return filterValues
+        ? t("button.yes", { ns: "common" })
+        : t("button.no", { ns: "common" });
+    } else if (filterType === "labels") {
+      return t(filterValues as string, { ns: "objects" });
+    } else if (filterType === "search_type") {
+      return t("filter.searchType." + (filterValues as string));
     } else {
-      return filterValues as string;
+      return (filterValues as string).replaceAll("_", " ");
     }
   }
 
@@ -653,7 +659,7 @@ export default function InputWithTags({
             onBlur={handleInputBlur}
             onKeyDown={handleInputKeyDown}
             className="text-md h-9 pr-32"
-            placeholder="Search..."
+            placeholder={t("placeholder.search")}
           />
           <div className="absolute right-3 top-0 flex h-full flex-row items-center justify-center gap-5">
             {(search || Object.keys(filters).length > 0) && (
@@ -775,7 +781,7 @@ export default function InputWithTags({
           )}
           {(Object.keys(filters).filter((key) => key !== "query").length > 0 ||
             isSimilaritySearch) && (
-            <CommandGroup heading="Active Filters">
+            <CommandGroup heading={t("filter.header.activeFilters")}>
               <div className="my-2 flex flex-wrap gap-2 px-2">
                 {isSimilaritySearch && (
                   <span className="inline-flex items-center whitespace-nowrap rounded-full bg-blue-100 px-2 py-0.5 text-sm text-blue-800">
@@ -799,8 +805,8 @@ export default function InputWithTags({
                             key={`${filterType}-${index}`}
                             className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
                           >
-                            {filterType.replaceAll("_", " ")}:{" "}
+                            {t("filter.label." + filterType)}:{" "}
-                            {value.replaceAll("_", " ")}
+                            {formatFilterValues(filterType, value)}
                             <button
                               onClick={() =>
                                 removeFilter(filterType as FilterType, value)
@@ -821,7 +827,7 @@ export default function InputWithTags({
                             ? "Tracked Object ID"
                             : filterType === "is_submitted"
                               ? "Submitted to Frigate+"
-                              : filterType.replaceAll("_", " ")}
+                              : t("filter.label." + filterType)}
                           : {formatFilterValues(filterType, filterValues)}
                           <button
                             onClick={() =>
@@ -875,7 +881,11 @@ export default function InputWithTags({
               </CommandGroup>
             )}
           <CommandGroup
-            heading={currentFilterType ? "Filter Values" : "Filters"}
+            heading={
+              currentFilterType
+                ? t("filter.header.currentFilterType")
+                : t("filter.header.noFilters")
+            }
           >
             {filterSuggestions(suggestions)
               .filter(
@@ -888,7 +898,12 @@ export default function InputWithTags({
                   className="cursor-pointer"
                   onSelect={() => handleSuggestionClick(suggestion)}
                 >
+                  {currentFilterType
+                    ? formatFilterValues(currentFilterType, suggestion)
+                    : t("filter.label." + suggestion)}
+                  {" ("}
                   {suggestion}
+                  {")"}
                 </CommandItem>
               ))}
           </CommandGroup>