perf: optimize simple app history (#2782)

* simple app history

* ui

* extract context content into hooks

packages/web/components/common/Icon/constants.ts

@@ -40,6 +40,7 @@ export const iconPaths = {
   'common/language/en': () => import('./icons/common/language/en.svg'),
   'common/language/zh': () => import('./icons/common/language/zh.svg'),
   'common/leftArrowLight': () => import('./icons/common/leftArrowLight.svg'),
+  'common/line': () => import('./icons/common/line.svg'),
   'common/lineChange': () => import('./icons/common/lineChange.svg'),
   'common/linkBlue': () => import('./icons/common/linkBlue.svg'),
   'common/list': () => import('./icons/common/list.svg'),

packages/web/components/common/Icon/icons/common/line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 12" fill="none">
+<path d="M4.42017 1.30151L0.999965 10.6984" stroke="#DFE2EA" stroke-linecap="round"/>
+</svg>

packages/web/components/common/MyDrawer/CustomRightDrawer.tsx

@@ -16,6 +16,8 @@ const CustomRightDrawer = ({
   iconSrc,
   title,
   maxW = ['90vw', '30vw'],
+  top = 16,
+  bottom = 0,
   children,
   isLoading,
   showMask = true,
@@ -31,8 +33,8 @@ const CustomRightDrawer = ({
       zIndex={100}
       maxW={maxW}
       w={'100%'}
-      top={'60px'}
-      bottom={0}
+      top={top}
+      bottom={bottom}
       borderLeftRadius={'lg'}
       border={'base'}
       boxShadow={'2'}