refactor: remove unused code and improve display view in status page

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

@@ -2,12 +2,12 @@ import React from 'react';
 import { MonitorPicker } from '../MonitorPicker';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Button } from '@/components/ui/button';
-import { LuMinus, LuMinusCircle, LuPlus } from 'react-icons/lu';
+import { LuMinusCircle, LuPlus } from 'react-icons/lu';
 import { MarkdownEditor } from '@/components/MarkdownEditor';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEventWithLoading } from '@/hooks/useEvent';
-import { Input as AntdInput, Divider, Typography } from 'antd';
+import { Input as AntdInput, Typography } from 'antd';
 import {
   Form,
   FormControl,
@@ -22,6 +22,7 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { domainRegex, slugRegex } from '@tianji/shared';
 import { useElementSize } from '@/hooks/useResizeObserver';
 import { Switch } from '@/components/ui/switch';
+import { Separator } from '@/components/ui/separator';
 
 const Text = Typography.Text;
 
@@ -140,7 +141,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             name="description"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>{t('Description')}</FormLabel>
+                <FormLabel optional={true}>{t('Description')}</FormLabel>
                 <FormControl>
                   <MarkdownEditorFormItem {...field} />
                 </FormControl>
@@ -155,7 +156,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             name="domain"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>{t('Custom Domain')}</FormLabel>
+                <FormLabel optional={true}>{t('Custom Domain')}</FormLabel>
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
@@ -178,51 +179,41 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             render={() => (
               <FormItem>
                 <FormLabel>{t('Monitor List')}</FormLabel>
-                {fields.map((field, i) => {
+                {fields.map((field, i) => (
-                  const { onChange: onMonitorChange, ...monitorProps } =
+                  <>
-                    form.register(`monitorList.${i}.id`, {
+                    {i !== 0 && <Separator className="my-0.5" />}
-                      onChange: (e) => console.log(e.target.value),
-                    });
-                  const { onChange: onShowCurrentChange, ...showCurrentProps } =
-                    form.register(`monitorList.${i}.showCurrent`);
 
-                  return (
+                    <div key={field.key} className="mb-2 flex flex-col gap-1">
-                    <>
+                      <Controller
-                      {i !== 0 && <Divider className="my-0.5" />}
+                        control={form.control}
+                        name={`monitorList.${i}.id`}
+                        render={({ field }) => <MonitorPicker {...field} />}
+                      />
 
-                      <div key={field.key} className="mb-2 flex flex-col gap-1">
+                      <div className="flex flex-1 items-center">
                         <Controller
                           control={form.control}
-                          name={`monitorList.${i}.id`}
+                          name={`monitorList.${i}.showCurrent`}
-                          render={({ field }) => <MonitorPicker {...field} />}
+                          render={({ field }) => (
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          )}
                         />
 
-                        <div className="flex flex-1 items-center">
+                        <span className="ml-1 flex-1 align-middle text-sm">
-                          <Controller
+                          {t('Show Latest Value')}
-                            control={form.control}
+                        </span>
-                            name={`monitorList.${i}.showCurrent`}
-                            render={({ field }) => (
-                              <Switch
-                                {...showCurrentProps}
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                              />
-                            )}
-                          />
 
-                          <span className="ml-1 flex-1 align-middle text-sm">
+                        <LuMinusCircle
-                            {t('Show Latest Value')}
+                          className="cursor-pointer text-lg"
-                          </span>
+                          onClick={() => remove(i)}
-
+                        />
-                          <LuMinusCircle
-                            className="cursor-pointer text-lg"
-                            onClick={() => remove(i)}
-                          />
-                        </div>
                       </div>
-                    </>
+                    </div>
-                  );
+                  </>
-                })}
+                ))}
                 <FormMessage />
 
                 <Button

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

@@ -13,7 +13,14 @@ import { useTranslation } from '@i18next-toolkit/react';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { Helmet } from 'react-helmet';
 import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
 import { MarkdownViewer } from '@/components/MarkdownEditor';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from '@/components/ui/sheet';
 
 interface MonitorStatusPageProps {
   slug: string;
@@ -83,6 +90,26 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
       }
     );
 
+    const editBtn = (
+      <Sheet open={editMode} onOpenChange={setEditMode}>
+        <SheetTrigger>
+          <Button>{t('Edit')}</Button>
+        </SheetTrigger>
+        <SheetContent side="right" className="overflow-auto">
+          <SheetHeader>{t('Modify Status Page Info')}</SheetHeader>
+
+          <Separator className="my-4" />
+
+          <MonitorStatusPageEditForm
+            isLoading={loading}
+            initialValues={initialValues}
+            onFinish={handleSave}
+            onCancel={() => setEditMode(false)}
+          />
+        </SheetContent>
+      </Sheet>
+    );
+
     return (
       <div className="flex h-full w-full">
         <Helmet>
@@ -92,21 +119,9 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
           </title>
         </Helmet>
 
-        {editMode && (
-          <div className="w-1/3 overflow-auto border-r border-gray-300 px-4 py-8 dark:border-gray-600">
-            <MonitorStatusPageEditForm
-              isLoading={loading}
-              initialValues={initialValues}
-              onFinish={handleSave}
-              onCancel={() => setEditMode(false)}
-            />
-          </div>
-        )}
-
         <div
           className={clsx(
-            'mx-auto overflow-auto px-4 py-8',
+            'mx-auto w-full overflow-auto px-4 py-8 md:w-4/5 xl:w-3/5'
-            !editMode ? 'w-full' : 'w-2/3'
           )}
         >
           <div className="flex">
@@ -115,11 +130,11 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
             <ColorSchemeSwitcher />
           </div>
 
-          {allowEdit && !editMode && (
+          {allowEdit && (
             <div className="mb-4 flex gap-2">
-              <Button onClick={() => setEditMode(true)}>{t('Edit')}</Button>
+              {editBtn}
 
-              {showBackBtn && (
+              {showBackBtn && !editMode && (
                 <Link to="/">
                   <Button variant="outline">{t('Back to Admin')}</Button>
                 </Link>

src/client/components/ui/form.tsx

@@ -12,6 +12,7 @@ import {
 
 import { cn } from "@/utils/style"
 import { Label } from "@/components/ui/label"
+import { useTranslation } from "@i18next-toolkit/react"
 
 const Form = FormProvider
 
@@ -86,9 +87,10 @@ FormItem.displayName = "FormItem"
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {optional?: boolean}
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField()
+  const { t } = useTranslation()
 
   return (
     <Label
@@ -96,7 +98,10 @@ const FormLabel = React.forwardRef<
       className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {props.children}
+      {props.optional && <span className="text-xs opacity-40 ml-1">{t('Optional')}</span>}
+    </Label>
   )
 })
 FormLabel.displayName = "FormLabel"