feat: improve admin panel design (#14464)

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useState,
 } from 'react';
 
@@ -44,11 +45,14 @@ export const MobileMenu = ({
 }: MenuProps) => {
   const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
   const [open, setOpen] = useState(false);
-  const mobileContextValue = {
-    subMenus,
-    setSubMenus,
-    setOpen,
-  };
+  const mobileContextValue = useMemo(
+    () => ({
+      subMenus,
+      setSubMenus,
+      setOpen,
+    }),
+    [subMenus]
+  );
 
   const { removeSubMenu, removeAllSubMenus } =
     useMobileSubMenuHelper(mobileContextValue);
@@ -95,6 +99,10 @@ export const MobileMenu = ({
     },
     [onInteractOutside, onPointerDownOutside, removeAllSubMenus, rootOptions]
   );
+  const mobileMenuContextValue = useMemo(
+    () => ({ subMenus, setSubMenus, setOpen: onOpenChange }),
+    [onOpenChange, subMenus]
+  );
 
   useImperativeHandle(
     ref,
@@ -139,9 +147,7 @@ export const MobileMenu = ({
   return (
     <>
       <Slot onClick={onItemClick}>{children}</Slot>
-      <MobileMenuContext.Provider
-        value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
-      >
+      <MobileMenuContext.Provider value={mobileMenuContextValue}>
         <Modal
           open={finalOpen}
           onOpenChange={onOpenChange}

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -1,7 +1,12 @@
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useContext, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
@@ -151,7 +156,7 @@ const ConfirmModalContext = createContext<ConfirmModalContextProps>({
   openConfirmModal: () => {},
   closeConfirmModal: () => {},
 });
-export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
+export const ConfirmModalProvider = ({ children }: React.PropsWithChildren) => {
   const [modalProps, setModalProps] = useState<ConfirmModalProps>({
     open: false,
   });
@@ -200,11 +205,13 @@ export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
     },
     [modalProps]
   );
+  const confirmModalContextValue = useMemo(
+    () => ({ openConfirmModal, closeConfirmModal, modalProps }),
+    [closeConfirmModal, modalProps, openConfirmModal]
+  );
 
   return (
-    <ConfirmModalContext.Provider
-      value={{ openConfirmModal, closeConfirmModal, modalProps }}
-    >
+    <ConfirmModalContext.Provider value={confirmModalContextValue}>
       {children}
       {/* TODO(@catsjuice): multi-instance support(unnecessary for now) */}
       <ConfirmModal {...modalProps} onOpenChange={onOpenChange} />

packages/frontend/component/src/ui/modal/prompt-modal.tsx

@@ -1,7 +1,13 @@
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useContext, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
@@ -205,15 +211,17 @@ export const PromptModalProvider = ({ children }: PropsWithChildren) => {
     },
     [modalProps]
   );
+  const promptModalContextValue = useMemo(
+    () => ({
+      openPromptModal,
+      closePromptModal,
+      modalProps,
+    }),
+    [closePromptModal, modalProps, openPromptModal]
+  );
 
   return (
-    <PromptModalContext.Provider
-      value={{
-        openPromptModal: openPromptModal,
-        closePromptModal: closePromptModal,
-        modalProps,
-      }}
-    >
+    <PromptModalContext.Provider value={promptModalContextValue}>
       {children}
       {/* TODO(@catsjuice): multi-instance support(unnecessary for now) */}
       <PromptModal {...modalProps} onOpenChange={onOpenChange} />