refactor: add monitor list

src/client/components/monitor/MonitorPicker.tsx

@@ -13,7 +13,7 @@ export const MonitorPicker: React.FC<MonitorPickerProps> = React.memo(
     });
 
     return (
-      <Select {...props}>
+      <Select placeholder="Select monitor" {...props}>
         {allMonitor.map((m) => (
           <Select.Option key={m.id} value={m.id}>
             <ColorTag label={m.type} />

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -2,6 +2,8 @@ import { Button, Form, Input, Typography } from 'antd';
 import React from 'react';
 import { slugRegex } from '../../../../shared';
 import { z } from 'zod';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { MonitorPicker } from '../MonitorPicker';
 
 const { Text } = Typography;
 
@@ -26,6 +28,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
           layout="vertical"
           initialValues={props.initialValues}
           onFinish={props.onFinish}
+          onValuesChange={console.log}
         >
           <Form.Item
             label="Title"
@@ -72,6 +75,49 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             <Input addonBefore={`${window.origin}/status/`} />
           </Form.Item>
 
+          <Form.List name="monitorList">
+            {(fields, { add, remove }, { errors }) => {
+              return (
+                <>
+                  <Form.Item label="Monitors">
+                    {fields.map((field, index) => (
+                      <div key={field.key} className="flex gap-2 items-start">
+                        <Form.Item
+                          name={[field.name, 'id']}
+                          className="flex-1"
+                          rules={[
+                            {
+                              required: true,
+                              message: 'Please select monitor',
+                            },
+                          ]}
+                        >
+                          <MonitorPicker />
+                        </Form.Item>
+
+                        <MinusCircleOutlined
+                          className="text-lg mt-1.5"
+                          onClick={() => remove(field.name)}
+                        />
+                      </div>
+                    ))}
+
+                    <Button
+                      type="dashed"
+                      onClick={() => add()}
+                      style={{ width: '60%' }}
+                      icon={<PlusOutlined />}
+                    >
+                      Add Monitor
+                    </Button>
+
+                    <Form.ErrorList errors={errors} />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.List>
+
           <div className="flex gap-4">
             <Button type="primary" htmlType="submit" loading={props.isLoading}>
               {props.saveButtonLabel ?? 'Save'}

src/client/components/monitor/StatusPage/index.tsx

@@ -83,18 +83,18 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
             <ColorSchemeSwitcher />
           </div>
 
-          <div>
+          {allowEdit && !editMode && (
-            {allowEdit && !editMode && (
+            <div className="mb-4">
               <Button type="primary" onClick={() => setEditMode(true)}>
                 Edit
               </Button>
-            )}
+            </div>
-          </div>
+          )}
 
           <div className="text-lg mb-2">Services</div>
 
           {info && (
-            <div className="shadow-2xl p-2.5">
+            <div className="shadow-2xl p-2.5 flex flex-col gap-4">
               {monitorList.length > 0 ? (
                 monitorList.map((item) => (
                   <div