From c0ce0c15871cbd7a79746dd38e9cfd851a99dd21 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 17 Apr 2025 08:08:20 -0500
Subject: [PATCH] change submit to plus to use a question with yes/no

---
 web/public/locales/en/components/dialog.json  | 12 +--
 .../overlay/detail/SearchDetailDialog.tsx     | 97 ++++++++++++-------
 2 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/web/public/locales/en/components/dialog.json b/web/public/locales/en/components/dialog.json
index 5d185d2890..a18d20bafc 100644
--- a/web/public/locales/en/components/dialog.json
+++ b/web/public/locales/en/components/dialog.json
@@ -15,15 +15,11 @@
         "desc": "Objects in locations you want to avoid are not false positives. Submitting them as false positives will confuse the model."
       },
       "review": {
-        "true": {
+        "question": {
           "label": "Confirm this label for Frigate Plus",
-          "true_one": "This is a {{label}}",
-          "true_other": "This is an {{label}}"
-        },
-        "false": {
-          "label": "Do not confirm this label for Frigate Plus",
-          "false_one": "This is not a {{label}}",
-          "false_other": "This is not an {{label}}"
+          "ask_a": "Is this object a <code>{{label}}</code>?",
+          "ask_an": "Is this object an <code>{{label}}</code>?",
+          "ask_full": "Is this object a <code>{{untranslatedLabel}}</code> ({{translatedLabel}})?"
         },
         "state": {
           "submitted": "Submitted"
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 72cb0f8267..7c59f01cb9 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -73,7 +73,7 @@ import { LuInfo, LuSearch } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { FaPencilAlt } from "react-icons/fa";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { TbFaceId } from "react-icons/tb";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import FaceSelectionDialog from "../FaceSelectionDialog";
@@ -1017,7 +1017,7 @@ export function ObjectSnapshotTab({
   search,
   onEventUploaded,
 }: ObjectSnapshotTabProps) {
-  const { t } = useTranslation(["components/dialog"]);
+  const { t, i18n } = useTranslation(["components/dialog"]);
   type SubmissionState = "reviewing" | "uploading" | "submitted";
 
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -1128,42 +1128,67 @@ export function ObjectSnapshotTab({
                       </div>
                     </div>
 
-                    <div className="flex flex-row justify-center gap-2 md:justify-end">
+                    <div className="flex w-full flex-1 flex-col justify-center gap-2 md:ml-8 md:w-auto md:justify-end">
                       {state == "reviewing" && (
                         <>
-                          <Button
-                            className="bg-success"
-                            aria-label={t("explore.plus.review.true.label")}
-                            onClick={() => {
-                              setState("uploading");
-                              onSubmitToPlus(false);
-                            }}
-                          >
-                            {/^[aeiou]/i.test(search?.label || "")
-                              ? t("explore.plus.review.true.true_other", {
-                                  label: search?.label,
-                                })
-                              : t("explore.plus.review.true.true_one", {
-                                  label: search?.label,
-                                })}
-                          </Button>
-                          <Button
-                            className="text-white"
-                            aria-label={t("explore.plus.review.false.label")}
-                            variant="destructive"
-                            onClick={() => {
-                              setState("uploading");
-                              onSubmitToPlus(true);
-                            }}
-                          >
-                            {/^[aeiou]/i.test(search?.label || "")
-                              ? t("explore.plus.review.false.false_other", {
-                                  label: search?.label,
-                                })
-                              : t("explore.plus.review.false.false_one", {
-                                  label: search?.label,
-                                })}
-                          </Button>
+                          <div>
+                            {i18n.language === "en" ? (
+                              // English with a/an logic plus label
+                              <>
+                                {/^[aeiou]/i.test(search?.label || "") ? (
+                                  <Trans
+                                    ns="components/dialog"
+                                    values={{ label: search?.label }}
+                                  >
+                                    explore.plus.review.question.ask_an
+                                  </Trans>
+                                ) : (
+                                  <Trans
+                                    ns="components/dialog"
+                                    values={{ label: search?.label }}
+                                  >
+                                    explore.plus.review.question.ask_a
+                                  </Trans>
+                                )}
+                              </>
+                            ) : (
+                              // For other languages
+                              <Trans
+                                ns="components/dialog"
+                                values={{
+                                  untranslatedLabel: search?.label,
+                                  translatedLabel: t(
+                                    "filter.label." + search?.label,
+                                  ),
+                                }}
+                              >
+                                explore.plus.review.question.ask_full
+                              </Trans>
+                            )}
+                          </div>
+                          <div className="flex w-full flex-row gap-2">
+                            <Button
+                              className="flex-1 bg-success"
+                              aria-label={t("button.yes", { ns: "common" })}
+                              onClick={() => {
+                                setState("uploading");
+                                onSubmitToPlus(false);
+                              }}
+                            >
+                              {t("button.yes", { ns: "common" })}
+                            </Button>
+                            <Button
+                              className="flex-1 text-white"
+                              aria-label={t("button.no", { ns: "common" })}
+                              variant="destructive"
+                              onClick={() => {
+                                setState("uploading");
+                                onSubmitToPlus(true);
+                              }}
+                            >
+                              {t("button.no", { ns: "common" })}
+                            </Button>
+                          </div>
                         </>
                       )}
                       {state == "uploading" && <ActivityIndicator />}