refactor(ui): clean code

ui/src/components/access/AccessEditModal.tsx

@@ -4,8 +4,8 @@ import { useControllableValue } from "ahooks";
 import { Modal, notification } from "antd";
 
 import { type AccessModel } from "@/domain/access";
-import { useTriggerElement } from "@/hooks";
-import { useAccessStore } from "@/stores/access";
+import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
 import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
@@ -25,7 +25,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
 
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { createAccess, updateAccess } = useAccessStore();
+  const { createAccess, updateAccess } = useAccessesStore(useZustandShallowSelector(["createAccess", "updateAccess"]));
 
   const [open, setOpen] = useControllableValue<boolean>(props, {
     valuePropName: "open",

ui/src/components/access/AccessSelect.tsx

@@ -3,7 +3,8 @@ import { Avatar, Select, Space, Typography, type SelectProps } from "antd";
 
 import { type AccessModel } from "@/domain/access";
 import { accessProvidersMap } from "@/domain/provider";
-import { useAccessStore } from "@/stores/access";
+import { useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 
 export type AccessTypeSelectProps = Omit<
   SelectProps,
@@ -13,7 +14,7 @@ export type AccessTypeSelectProps = Omit<
 };
 
 const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
-  const { accesses, loadedAtOnce, fetchAccesses } = useAccessStore();
+  const { accesses, loadedAtOnce, fetchAccesses } = useAccessesStore(useZustandShallowSelector(["accesses", "loadedAtOnce", "fetchAccesses"]));
   useEffect(() => {
     fetchAccesses();
   }, [fetchAccesses]);

ui/src/components/notification/NotifyChannels.tsx

@@ -5,7 +5,8 @@ import { Button, Collapse, message, notification, Skeleton, Space, Switch, type
 
 import Show from "@/components/Show";
 import { notifyChannelsMap } from "@/domain/settings";
-import { useNotifyChannelStore } from "@/stores/notify";
+import { useZustandShallowSelector } from "@/hooks";
+import { useNotifyChannelsStore } from "@/stores/notify";
 import { getErrMsg } from "@/utils/error";
 
 import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
@@ -23,7 +24,7 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
   const [messageApi, MessageContextHolder] = message.useMessage();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { channels, setChannel } = useNotifyChannelStore();
+  const { channels, setChannel } = useNotifyChannelsStore(useZustandShallowSelector(["channels", "setChannel"]));
 
   const channelConfig = useDeepCompareMemo(() => channels[channel], [channels, channel]);
   const channelFormRef = useRef<NotifyChannelEditFormInstance>(null);
@@ -78,7 +79,7 @@ export type NotifyChannelsProps = {
 const NotifyChannels = ({ className, classNames, style, styles }: NotifyChannelsProps) => {
   const { t, i18n } = useTranslation();
 
-  const { channels, loadedAtOnce, setChannel, fetchChannels } = useNotifyChannelStore();
+  const { channels, loadedAtOnce, setChannel, fetchChannels } = useNotifyChannelsStore();
   useEffect(() => {
     fetchChannels();
   }, [fetchChannels]);

ui/src/components/workflow/Node.tsx

@@ -35,7 +35,7 @@ const Node = ({ data }: NodeProps) => {
 
     updateNode(
       produce(data, (draft) => {
-        draft.name = e.target.innerText;
+        draft.name = newName;
       })
     );
   };
@@ -66,8 +66,10 @@ const Node = ({ data }: NodeProps) => {
             </Show>
           </div>
         );
+
       case WorkflowNodeType.Apply:
         return <div className="text-muted-foreground truncate">{data.config?.domain as string}</div>;
+
       case WorkflowNodeType.Deploy: {
         const provider = deployProvidersMap.get(data.config?.providerType as string);
         return (
@@ -77,6 +79,7 @@ const Node = ({ data }: NodeProps) => {
           </div>
         );
       }
+
       case WorkflowNodeType.Notify: {
         const channelLabel = notifyChannelsMap.get(data.config?.channel as string);
         return (

ui/src/components/workflow/node/ApplyNodeForm.tsx

@@ -14,7 +14,7 @@ import MultipleInput from "@/components/core/MultipleInput";
 import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
 import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useContactStore } from "@/stores/contact";
+import { useContactEmailsStore } from "@/stores/contact";
 import { useWorkflowStore } from "@/stores/workflow";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 import { usePanel } from "../PanelProvider";
@@ -38,7 +38,7 @@ const initFormModel = (): WorkflowNodeConfig => {
 const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { addEmail } = useContactStore();
+  const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
   const { hidePanel } = usePanel();
 
@@ -277,7 +277,7 @@ const FormFieldEmailSelect = ({
   value?: string;
   onChange?: (value: string) => void;
 }) => {
-  const { emails, fetchEmails } = useContactStore();
+  const { emails, fetchEmails } = useContactEmailsStore();
   const emailsToOptions = useCallback(() => emails.map((email) => ({ label: email, value: email })), [emails]);
   useEffect(() => {
     fetchEmails();

ui/src/components/workflow/node/NotifyNodeForm.tsx

@@ -10,7 +10,7 @@ import { z } from "zod";
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useNotifyChannelStore } from "@/stores/notify";
+import { useNotifyChannelsStore } from "@/stores/notify";
 import { useWorkflowStore } from "@/stores/workflow";
 import { usePanel } from "../PanelProvider";
 
@@ -28,14 +28,18 @@ const initFormModel = (): WorkflowNodeConfig => {
 const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
-  const { hidePanel } = usePanel();
-
-  const { channels, loadedAtOnce: channelsLoadedAtOnce, fetchChannels } = useNotifyChannelStore();
+  const {
+    channels,
+    loadedAtOnce: channelsLoadedAtOnce,
+    fetchChannels,
+  } = useNotifyChannelsStore(useZustandShallowSelector(["channels", "loadedAtOnce", "fetchChannels"]));
   useEffect(() => {
     fetchChannels();
   }, [fetchChannels]);
 
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+  const { hidePanel } = usePanel();
+
   const formSchema = z.object({
     subject: z
       .string({ message: t("workflow_node.notify.form.subject.placeholder") })