From 341a6fa666a2bb0dacdbc4cdfdbadcbc864cc3ed Mon Sep 17 00:00:00 2001
From: naiba <hi@nai.ba>
Date: Sun, 1 Mar 2026 01:11:37 +0000
Subject: [PATCH] fix: use Combobox for notification group selection in
 settings page

Settings page used a plain number input for ip_change_notification_group_id,
requiring users to manually enter a group ID. Replace it with a searchable
Combobox component (consistent with alert-rule/service/cron pages) and wrap
the settings route with NotificationProvider to load notification group data.

Closes nezhahq/nezha#1174

Co-authored-by: naiba/CloudCode <hi+cloudcode@nai.ba>
---
 src/main.tsx            |  6 +++++-
 src/routes/settings.tsx | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 6561d4e..9bd9f05 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -128,7 +128,11 @@ const router = createBrowserRouter([
             },
             {
                 path: "/dashboard/settings",
-                element: <SettingsPage />,
+                element: (
+                    <NotificationProvider withNotifierGroup>
+                        <SettingsPage />
+                    </NotificationProvider>
+                ),
             },
             {
                 path: "/dashboard/settings/user",
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index 3416049..dd0d6d8 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -21,6 +21,8 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
+import { Combobox } from "@/components/ui/combobox"
+import { useNotification } from "@/hooks/useNotfication"
 import { useAuth } from "@/hooks/useAuth"
 import useSetting from "@/hooks/useSetting"
 import { asOptionalField } from "@/lib/utils"
@@ -58,6 +60,12 @@ export default function SettingsPage() {
     const { profile } = useAuth()
     const navigate = useNavigate()
 
+    const { notifierGroup } = useNotification()
+    const ngroupList = notifierGroup?.map((ng) => ({
+        value: `${ng.group.id}`,
+        label: ng.group.name,
+    })) || [{ value: "", label: "" }]
+
     const isAdmin = profile?.role === 0
 
     if (!isAdmin) {
@@ -448,12 +456,13 @@ export default function SettingsPage() {
                                             name="ip_change_notification_group_id"
                                             render={({ field }) => (
                                                 <FormItem>
-                                                    <FormLabel>{t("NotifierGroupID")}</FormLabel>
+                                                    <FormLabel>{t("NotifierGroup")}</FormLabel>
                                                     <FormControl>
-                                                        <Input
-                                                            placeholder="0"
-                                                            type="number"
-                                                            {...field}
+                                                        <Combobox
+                                                            placeholder={t("Search")}
+                                                            options={ngroupList}
+                                                            onValueChange={field.onChange}
+                                                            defaultValue={field.value?.toString()}
                                                         />
                                                     </FormControl>
                                                     <FormMessage />