From 042ae73b8143e6ec6e23a269dfc29956c49c1ac9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 27 Oct 2025 12:51:53 -0500
Subject: [PATCH] use name and ID field in trigger edit dialog

---
 .../overlay/CreateTriggerDialog.tsx           | 78 ++++++++-----------
 1 file changed, 32 insertions(+), 46 deletions(-)

diff --git a/web/src/components/overlay/CreateTriggerDialog.tsx b/web/src/components/overlay/CreateTriggerDialog.tsx
index 620d3fe62..699896e17 100644
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@@ -47,6 +47,7 @@ import {
   MobilePageHeader,
   MobilePageTitle,
 } from "../mobile/MobilePage";
+import NameAndIdFields from "@/components/ui/NameAndIdFields";
 
 type CreateTriggerDialogProps = {
   show: boolean;
@@ -89,6 +90,19 @@ export default function CreateTriggerDialog({
     return Object.keys(config.cameras[selectedCamera].semantic_search.triggers);
   }, [config, selectedCamera]);
 
+  const existingTriggerFriendlyNames = useMemo(() => {
+    if (
+      !config ||
+      !selectedCamera ||
+      !config.cameras[selectedCamera]?.semantic_search?.triggers
+    ) {
+      return [];
+    }
+    return Object.values(
+      config.cameras[selectedCamera].semantic_search.triggers,
+    ).map((trigger) => trigger.friendly_name);
+  }, [config, selectedCamera]);
+
   const formSchema = z.object({
     enabled: z.boolean(),
     name: z
@@ -103,7 +117,15 @@ export default function CreateTriggerDialog({
           !existingTriggerNames.includes(value) || value === trigger?.name,
         t("triggers.dialog.form.name.error.alreadyExists"),
       ),
-    friendly_name: z.string().optional(),
+    friendly_name: z
+      .string()
+      .min(2, t("triggers.dialog.form.name.error.minLength"))
+      .refine(
+        (value) =>
+          !existingTriggerFriendlyNames.includes(value) ||
+          value === trigger?.friendly_name,
+        t("triggers.dialog.form.name.error.alreadyExists"),
+      ),
     type: z.enum(["thumbnail", "description"]),
     data: z.string().min(1, t("triggers.dialog.form.content.error.required")),
     threshold: z
@@ -138,7 +160,7 @@ export default function CreateTriggerDialog({
         values.data,
         values.threshold,
         values.actions,
-        values.friendly_name ?? "",
+        values.friendly_name,
       );
     }
   };
@@ -219,47 +241,14 @@ export default function CreateTriggerDialog({
             onSubmit={form.handleSubmit(onSubmit)}
             className="space-y-5 pt-4"
           >
-            <FormField
+            <NameAndIdFields
+              type="trigger"
               control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t("triggers.dialog.form.name.title")}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={t("triggers.dialog.form.name.placeholder")}
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="friendly_name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    {t("triggers.dialog.form.friendly_name.title")}
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={t(
-                        "triggers.dialog.form.friendly_name.placeholder",
-                      )}
-                      className="h-10"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    {t("triggers.dialog.form.friendly_name.description")}
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
+              nameField="friendly_name"
+              idField="name"
+              nameLabel={t("triggers.dialog.form.name.title")}
+              nameDescription={t("triggers.dialog.form.name.description")}
+              placeholderName={t("triggers.dialog.form.name.placeholder")}
             />
 
             <FormField
@@ -335,9 +324,6 @@ export default function CreateTriggerDialog({
                           camera={selectedCamera}
                         />
                       </FormControl>
-                      <FormDescription>
-                        {t("triggers.dialog.form.content.imageDesc")}
-                      </FormDescription>
                     </>
                   ) : (
                     <>
@@ -455,7 +441,7 @@ export default function CreateTriggerDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
+                        <ActivityIndicator className="size-5" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (