From 00b0c51376c125f257e253f507367a297b2faf38 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 17 Apr 2025 07:18:00 -0500
Subject: [PATCH] fix filter tips steps

---
 web/public/locales/en/views/search.json    |  9 +++--
 web/src/components/input/InputWithTags.tsx | 39 ++++++++++++++--------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/web/public/locales/en/views/search.json b/web/public/locales/en/views/search.json
index 8d8e878a8b..a085a2a149 100644
--- a/web/public/locales/en/views/search.json
+++ b/web/public/locales/en/views/search.json
@@ -46,8 +46,13 @@
       "title": "How to use text filters",
       "desc": {
         "text": "Filters help you narrow down your search results. Here's how to use them in the input field:",
-        "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>",
-        "example": "Example: <code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM </code>"
+        "step1": "Type a filter key name followed by a colon (e.g., \"cameras:\").",
+        "step2": "Select a value from the suggestions or type your own.",
+        "step3": "Use multiple filters by adding them one after another with a space in between.",
+        "step4": "Date filters (before: and after:) use {{DateFormat}} format.",
+        "step5": "Time range filter uses {{exampleTime}} format.",
+        "step6": "Remove filters by clicking the 'x' next to them.",
+        "exampleLabel": "Example:"
       }
     },
     "header": {
diff --git a/web/src/components/input/InputWithTags.tsx b/web/src/components/input/InputWithTags.tsx
index 13977b8a7d..4c5e9ab8b1 100644
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@@ -51,7 +51,7 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { MdImageSearch } from "react-icons/md";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 type InputWithTagsProps = {
   inputFocused: boolean;
@@ -729,20 +729,31 @@ export default function InputWithTags({
                   <p className="text-sm text-muted-foreground">
                     {t("filter.tips.desc.text")}
                   </p>
-                  <Trans
-                    ns="views/search"
-                    values={{
-                      DateFormat: getIntlDateFormat(),
-                      exampleTime:
-                        config?.ui.time_format == "24hour"
-                          ? "15:00-16:00"
-                          : "3:00PM-4:00PM",
-                    }}
-                  >
-                    filter.tips.desc.step
-                  </Trans>
+                  <ul className="list-disc pl-5 text-sm text-primary-variant">
+                    <li>{t("filter.tips.desc.step1")}</li>
+                    <li>{t("filter.tips.desc.step2")}</li>
+                    <li>{t("filter.tips.desc.step3")}</li>
+                    <li>
+                      {t("filter.tips.desc.step4", {
+                        DateFormat: getIntlDateFormat(),
+                      })}
+                    </li>
+                    <li>
+                      {t("filter.tips.desc.step5", {
+                        exampleTime:
+                          config?.ui.time_format == "24hour"
+                            ? "15:00-16:00"
+                            : "3:00PM-4:00PM",
+                      })}
+                    </li>
+                    <li>{t("filter.tips.desc.step6")}</li>
+                  </ul>
                   <p className="text-sm text-muted-foreground">
-                    <Trans ns="views/search">filter.tips.desc.example</Trans>
+                    {t("filter.tips.desc.exampleLabel")}{" "}
+                    <code className="text-primary">
+                      cameras:front_door label:person before:01012024
+                      time_range:3:00PM-4:00PM
+                    </code>
                   </p>
                 </div>
               </PopoverContent>