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

@@ -128,7 +128,11 @@ const router = createBrowserRouter([
             },
             {
                 path: "/dashboard/settings",
-                element: <SettingsPage />,
+                element: (
+                    <NotificationProvider withNotifierGroup>
+                        <SettingsPage />
+                    </NotificationProvider>
+                ),
             },
             {
                 path: "/dashboard/settings/user",

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
+                                                        <Combobox
-                                                            placeholder="0"
+                                                            placeholder={t("Search")}
-                                                            type="number"
+                                                            options={ngroupList}
-                                                            {...field}
+                                                            onValueChange={field.onChange}
+                                                            defaultValue={field.value?.toString()}
                                                         />
                                                     </FormControl>
                                                     <FormMessage />