@abtnode/ux 1.16.27-beta-d1555a79 → 1.16.27-beta-595ed831

package/lib/blocklet/audit-logs.js

@@ -2,6 +2,7 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 import MarkdownPreview from '@uiw/react-markdown-preview';
+import rehypeExternalLinks from 'rehype-external-links';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import Spinner from '@mui/material/CircularProgress';
 import Empty from '@arcblock/ux/lib/Empty';
@@ -105,7 +106,9 @@ function AuditLog({
         gutterBottom: true,
         children: /*#__PURE__*/_jsx(MarkdownPreview, {
           source: log.content,
-          linkTarget: "_blank"
+          rehypePlugins: [[rehypeExternalLinks, {
+            target: '_blank'
+          }]]
         })
       }), /*#__PURE__*/_jsxs(Box, {
         className: "log-meta",

package/lib/blocklet/component/add-component/add-component-core.js

@@ -2,10 +2,8 @@
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import semver from 'semver';
 import { isInServerlessMode } from '@abtnode/util/lib/serverless';
 import Alert from '@arcblock/ux/lib/Alert';
-import { useTheme } from '@arcblock/ux/lib/Theme';
 import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -15,7 +13,6 @@ import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
 import PageHeader from '@blocklet/launcher-layout/lib/page-header';
 import styled from '@emotion/styled';
 import CheckIcon from '@mui/icons-material/Check';
-import UpgradeIcon from '@mui/icons-material/Upgrade';
 import AddIcon from '@mui/icons-material/Link';
 import Box from '@mui/material/Box';
 import Spinner from '@mui/material/CircularProgress';
@@ -104,11 +101,12 @@ export default function AddComponentCore({
   storageKey,
   inDialog,
   selectedMeta,
+  storeUrl,
   showResourcesSwitch,
   showFromUrl,
-  enableRunBackground
+  enableRunBackground,
+  showCategory
 }) {
-  const theme = useTheme();
   const {
     t,
     locale
@@ -267,6 +265,7 @@ export default function AddComponentCore({
   useSubscription(BlockletEvents.installFailed, createBlockletEventHandler(() => {
     setInstallErrorResult(t('blocklet.component.installComponentError'));
   }), [blocklet?.meta?.did]);
+  const steps = [];
   const onOver = () => {
     setLoading(false);
     setParams({});
@@ -386,7 +385,6 @@ export default function AddComponentCore({
     setError(errMsg);
 
     // the step can complete, install component
-    // eslint-disable-next-line no-use-before-define
     if (activeStep === steps.length - 2) {
       await onInstall(payload);
     }
@@ -497,6 +495,7 @@ export default function AddComponentCore({
     });
     component.current = {
       ...chooseParams,
+      // FIXME: @zhanghan 此处不应该修改 meta 的结构，会导致在不同地方看到的 meta 结果不一样，然后产生误解
       meta: {
         ...meta,
         // init configs from environments
@@ -614,14 +613,14 @@ export default function AddComponentCore({
     }
   };
   useEffect(() => {
-    if (!selectedMeta || activeStep !== 0) {
+    if (!selectedMeta || activeStep !== 0 || !blocklet) {
       return;
     }
     setConfigValue({
       chooseParams: {
         blocklets: [selectedMeta],
         meta: selectedMeta,
-        registryUrl: selectedMeta.homepage,
+        registryUrl: storeUrl || selectedMeta.homepage,
         inStore: true
       },
       isInit: true
@@ -632,25 +631,8 @@ export default function AddComponentCore({
     onNext();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedMeta, activeStep]);
-  const getInstallOrUpgrade = item => {
-    const exist = (blocklet?.children || []).find(x => x.meta.bundleDid === item.did);
-    if (exist) {
-      try {
-        const currentVersion = exist.meta.version;
-        const targetVersion = item.version;
-        if (semver.gt(targetVersion, currentVersion)) {
-          return 'upgrade';
-        }
-      } catch {
-        // 如果比对版本报错，则还是允许安装
-        return 'install';
-      }
-      return 'disable';
-    }
-    return 'install';
-  };
-  const steps = [{
+  }, [selectedMeta, activeStep, blocklet]);
+  steps.push({
     key: 'selectComponent',
     name: t('blocklet.component.selectComponent'),
     body: /*#__PURE__*/_jsxs(TypographyWrapper, {
@@ -715,7 +697,7 @@ export default function AddComponentCore({
               fontSize: 20,
               marginRight: 4
             }
-          }), ' ', t('blocklet.component.addComponentTip.fromUrl'), ' ']
+          }), " ", t('blocklet.component.addComponentTip.fromUrl'), ' ']
         }) : null : null,
         loading: loading,
         onChange: () => {
@@ -728,6 +710,7 @@ export default function AddComponentCore({
         }) => {
           return /*#__PURE__*/_jsx(BlockletList, {
             showResourcesSwitch: showResourcesSwitch,
+            showCategory: showCategory,
             serverVersion: nodeInfo?.version,
             style: isMobile ? {
               // should remove other dom height/margin
@@ -752,36 +735,8 @@ export default function AddComponentCore({
               defaultRender
             }) => {
               const isChosen = params?.bundleDid && params?.bundleDid === blockletItem?.did;
-              const actionType = getInstallOrUpgrade(blockletItem);
-              if (actionType === 'disable') {
-                return /*#__PURE__*/_jsxs(StoreBlockletItemWrapper, {
-                  style: {
-                    cursor: 'not-allowed',
-                    backgroundColor: theme.palette.grey['100']
-                  },
-                  title: t('blocklet.component.installed'),
-                  children: [/*#__PURE__*/_jsx("div", {
-                    className: "install-container",
-                    children: /*#__PURE__*/_jsx(CheckIcon, {
-                      className: "install-icon"
-                    })
-                  }), /*#__PURE__*/_jsx("div", {
-                    className: "installed-blocklet",
-                    style: {
-                      marginLeft: 16,
-                      pointerEvents: 'none'
-                    },
-                    children: defaultRender
-                  })]
-                });
-              }
               return /*#__PURE__*/_jsxs(StoreBlockletItemWrapper, {
-                children: [actionType === 'upgrade' ? /*#__PURE__*/_jsx("div", {
-                  className: "upgrade-container",
-                  children: /*#__PURE__*/_jsx(UpgradeIcon, {
-                    className: "upgrade-icon"
-                  })
-                }) : null, isChosen && /*#__PURE__*/_jsx("div", {
+                children: [isChosen && /*#__PURE__*/_jsx("div", {
                   className: "check-container",
                   children: /*#__PURE__*/_jsx(CheckIcon, {
                     className: "check-icon"
@@ -809,10 +764,14 @@ export default function AddComponentCore({
     onConfirm: () => {
       onNext();
     }
-  }, {
+  });
+  steps.push({
     key: 'agreement',
     name: t('launchBlocklet.introduction'),
-    body: /*#__PURE__*/_jsxs(TypographyWrapper, {
+    body:
+    /*#__PURE__*/
+    // TODO: @zhanghan 添加要展示的信息，暂时无法添加，需要修改 launch-layout 里的组件
+    _jsxs(TypographyWrapper, {
       component: "div",
       className: "agreement-wrapper",
       children: [/*#__PURE__*/_jsx(PageHeader, {
@@ -839,187 +798,200 @@ export default function AddComponentCore({
         })
       })]
     }),
-    cancel: selectedMeta ? t('common.cancel') : t('common.pre'),
+    cancel: selectedMeta ? undefined : t('common.pre'),
     confirm: t('launchBlocklet.next'),
     onCancel: selectedMeta ? onOver : onCancel,
     onConfirm: () => {
       setIsWaitingPurchase(false);
       onNext();
     }
-  }, meta && params.requirePurchase && {
-    key: 'purchase',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('common.verifyNFT'), /*#__PURE__*/_jsx(Required, {})]
-    }),
-    body: /*#__PURE__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      className: "flex-align-center",
-      style: {
-        flexDirection: 'column'
-      },
-      children: [!(purchaseRef.current?.getCurrentStep?.() === 2 || isWaitingPurchase) && /*#__PURE__*/_jsx(PageHeaderWrapper, {
-        title: t('common.verifyNFT'),
-        subTitle: t('blocklet.component.addComponentTip.verifyNFT')
-      }), !isEmpty(params.purchaseResultProps) ? /*#__PURE__*/_jsx("div", {
-        className: "flex-align-center flex-justify-center",
-        children: /*#__PURE__*/_jsx(ResultMessage, {
-          ...params.purchaseResultProps
-        })
-      }) : purchaseData && /*#__PURE__*/_jsx(ComponentPurchaseSelect, {
-        ref: purchaseRef,
-        meta: purchaseData.meta
-        // if select deleted history, use verify mode
-        ,
-        mode: params.componentDid ? 'verify' : 'both',
-        onCancel: onCancelPurchase,
-        installOpts: purchaseData.installOpts,
-        handlePaySuccess: onSuccessPurchase
-      })]
-    }),
-    disabled: purchaseRef.current?.getCurrentStep?.() === 2 || isWaitingPurchase,
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onConfirm: () => {
-      if (typeof purchaseRef.current.onNext === 'function') {
-        purchaseRef.current.onNext();
-        setIsWaitingPurchase(true);
-      }
-    },
-    onCancel: () => {
-      onCancel();
-    }
-  }, hasStartEngine(meta) && !alreadyInstalled(meta.did) && {
-    key: 'config',
-    name: t('common.config'),
-    error,
-    body: /*#__PURE__*/_jsxs(TypographyWrapper, {
-      component: "div",
-      children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-        title: t('common.config'),
-        subTitle: t('blocklet.component.addComponentTip.config')
-      }), /*#__PURE__*/_jsx(TextField, {
-        label: t('blocklet.component.mountPoint'),
-        autoComplete: "off",
-        variant: "outlined",
-        name: "pathPrefix",
-        inputProps: {
-          'data-cy': 'mount-point-input'
-        },
-        fullWidth: true,
-        helperText: mountPointHelperText || t('blocklet.component.mountPointTip'),
+  });
+  if (meta && params.requirePurchase) {
+    steps.push({
+      key: 'purchase',
+      name: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [t('common.verifyNFT'), /*#__PURE__*/_jsx(Required, {})]
+      }),
+      body: /*#__PURE__*/_jsxs(TypographyWrapper, {
+        component: "div",
+        className: "flex-align-center",
         style: {
-          marginBottom: 32
+          flexDirection: 'column'
         },
-        margin: "normal",
-        value: params.pathPrefix,
-        onChange: e => {
-          const pathPrefix = e.target.value;
-          updateParams({
-            pathPrefix
-          });
-          setMountPointHelperText(t('common.slugifyHint', {
-            value: formatMountPoint(pathPrefix)
-          }));
+        children: [!(purchaseRef.current?.getCurrentStep?.() === 2 || isWaitingPurchase) && /*#__PURE__*/_jsx(PageHeaderWrapper, {
+          title: t('common.verifyNFT'),
+          subTitle: t('blocklet.component.addComponentTip.verifyNFT')
+        }), !isEmpty(params.purchaseResultProps) ? /*#__PURE__*/_jsx("div", {
+          className: "flex-align-center flex-justify-center",
+          children: /*#__PURE__*/_jsx(ResultMessage, {
+            ...params.purchaseResultProps
+          })
+        }) : purchaseData && /*#__PURE__*/_jsx(ComponentPurchaseSelect, {
+          ref: purchaseRef,
+          meta: purchaseData.meta
+          // if select deleted history, use verify mode
+          ,
+          mode: params.componentDid ? 'verify' : 'both',
+          onCancel: onCancelPurchase,
+          installOpts: purchaseData.installOpts,
+          handlePaySuccess: onSuccessPurchase
+        })]
+      }),
+      disabled: purchaseRef.current?.getCurrentStep?.() === 2 || isWaitingPurchase,
+      cancel: t('common.pre'),
+      confirm: t('common.next'),
+      onConfirm: () => {
+        if (typeof purchaseRef.current.onNext === 'function') {
+          purchaseRef.current.onNext();
+          setIsWaitingPurchase(true);
         }
-      }), !!error && /*#__PURE__*/_jsx(Alert, {
-        type: "error",
-        style: {
-          width: '100%',
-          marginTop: 8
-        },
-        children: error
-      })]
-    }),
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel,
-    onConfirm: () => {
-      onNext();
-    }
-  }, meta && !alreadyInstalled(meta.did) && params?.hasEnvironmentsStep && {
-    key: 'environment',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('common.environment'), " ", params.hasRequiredEnvironments && /*#__PURE__*/_jsx(Required, {})]
-    }),
-    disabled: !!editingItem || params?.hasMissRequiredConfigs,
-    body: () => {
-      return /*#__PURE__*/_jsxs(TypographyWrapper, {
+      },
+      onCancel: () => {
+        onCancel();
+      }
+    });
+  }
+  if (hasStartEngine(meta) && !alreadyInstalled(meta.did)) {
+    steps.push({
+      key: 'config',
+      name: t('common.config'),
+      error,
+      body: /*#__PURE__*/_jsxs(TypographyWrapper, {
         component: "div",
         children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-          title: t('common.environment'),
-          subTitle: t('blocklet.component.addComponentTip.environment')
-        }), /*#__PURE__*/_jsx(SchemaForm, {
+          title: t('common.config'),
+          subTitle: t('blocklet.component.addComponentTip.config')
+        }), /*#__PURE__*/_jsx(TextField, {
+          label: t('blocklet.component.mountPoint'),
+          autoComplete: "off",
+          variant: "outlined",
+          name: "pathPrefix",
+          inputProps: {
+            'data-cy': 'mount-point-input'
+          },
+          fullWidth: true,
+          helperText: mountPointHelperText || t('blocklet.component.mountPointTip'),
           style: {
-            marginTop: -12,
-            width: '100%'
+            marginBottom: 32
           },
-          schema: params.configsList,
-          defaultValue: params.configsValue
-          // eslint-disable-next-line
-          ,
-          onChange: (changeValue, {
-            action,
-            currentItem,
-            allValues
-          }) => {
-            if (action === 'confirm') {
-              updateParams({
-                hasMissRequiredConfigs: hasMissRequiredConfigs(params.configsList, allValues),
-                configsValue: allValues
-              });
-            }
-            if (action === 'edit') {
-              setEditingItem(currentItem);
-            } else if (['cancel', 'confirm'].includes(action)) {
-              setEditingItem(null);
-            }
+          margin: "normal",
+          value: params.pathPrefix,
+          onChange: e => {
+            const pathPrefix = e.target.value;
+            updateParams({
+              pathPrefix
+            });
+            setMountPointHelperText(t('common.slugifyHint', {
+              value: formatMountPoint(pathPrefix)
+            }));
           }
+        }), !!error && /*#__PURE__*/_jsx(Alert, {
+          type: "error",
+          style: {
+            width: '100%',
+            marginTop: 8
+          },
+          children: error
         })]
-      });
-    },
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel,
-    onConfirm: onNext
-  }, meta && !alreadyInstalled(meta.did) && params?.didSpaceIsRequiredSetup && {
-    key: 'didSpace',
-    name: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceIsRequiredSetup === 'required' && /*#__PURE__*/_jsx(Required, {})]
-    }),
-    disabled: params?.didSpaceIsRequiredSetup && !params.didSpaceEndpoint,
-    body: () => {
-      return /*#__PURE__*/_jsx(ConfigSpaceProvider, {
-        children: /*#__PURE__*/_jsxs(TypographyWrapper, {
+      }),
+      cancel: t('common.pre'),
+      confirm: t('common.next'),
+      onCancel,
+      onConfirm: () => {
+        onNext();
+      }
+    });
+  }
+  if (meta && !alreadyInstalled(meta.did) && params?.hasEnvironmentsStep) {
+    steps.push({
+      key: 'environment',
+      name: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [t('common.environment'), " ", params.hasRequiredEnvironments && /*#__PURE__*/_jsx(Required, {})]
+      }),
+      disabled: !!editingItem || params?.hasMissRequiredConfigs,
+      body: () => {
+        return /*#__PURE__*/_jsxs(TypographyWrapper, {
           component: "div",
           children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-            title: t('blocklet.component.didSpaceConfig'),
-            subTitle: t('blocklet.component.didSpaceConfigTip')
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              mt: '36px',
-              '& > div': {
-                maxWidth: 'unset !important',
-                '& .MuiAutocomplete-root': {
-                  maxWidth: 'unset !important'
-                }
-              }
+            title: t('common.environment'),
+            subTitle: t('blocklet.component.addComponentTip.environment')
+          }), /*#__PURE__*/_jsx(SchemaForm, {
+            style: {
+              marginTop: -12,
+              width: '100%'
             },
-            children: /*#__PURE__*/_jsx(DidSpace, {
-              blockletMeta: component.current.meta,
-              onNext: () => {
-                onNext();
-              },
-              onEndpointUpdate: refreshDidSpaceEndpoint
-            })
+            schema: params.configsList,
+            defaultValue: params.configsValue
+            // eslint-disable-next-line
+            ,
+            onChange: (changeValue, {
+              action,
+              currentItem,
+              allValues
+            }) => {
+              if (action === 'confirm') {
+                updateParams({
+                  hasMissRequiredConfigs: hasMissRequiredConfigs(params.configsList, allValues),
+                  configsValue: allValues
+                });
+              }
+              if (action === 'edit') {
+                setEditingItem(currentItem);
+              } else if (['cancel', 'confirm'].includes(action)) {
+                setEditingItem(null);
+              }
+            }
           })]
-        })
-      });
-    },
-    cancel: t('common.pre'),
-    confirm: t('common.next'),
-    onCancel,
-    onConfirm: onNext
-  }, {
+        });
+      },
+      cancel: t('common.pre'),
+      confirm: t('common.next'),
+      onCancel,
+      onConfirm: onNext
+    });
+  }
+  if (meta && !alreadyInstalled(meta.did) && params?.didSpaceIsRequiredSetup) {
+    steps.push({
+      key: 'didSpace',
+      name: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceIsRequiredSetup === 'required' && /*#__PURE__*/_jsx(Required, {})]
+      }),
+      disabled: params?.didSpaceIsRequiredSetup && !params.didSpaceEndpoint,
+      body: () => {
+        return /*#__PURE__*/_jsx(ConfigSpaceProvider, {
+          children: /*#__PURE__*/_jsxs(TypographyWrapper, {
+            component: "div",
+            children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
+              title: t('blocklet.component.didSpaceConfig'),
+              subTitle: t('blocklet.component.didSpaceConfigTip')
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                mt: '36px',
+                '& > div': {
+                  maxWidth: 'unset !important',
+                  '& .MuiAutocomplete-root': {
+                    maxWidth: 'unset !important'
+                  }
+                }
+              },
+              children: /*#__PURE__*/_jsx(DidSpace, {
+                blockletMeta: component.current.meta,
+                onNext: () => {
+                  onNext();
+                },
+                onEndpointUpdate: refreshDidSpaceEndpoint
+              })
+            })]
+          })
+        });
+      },
+      cancel: t('common.pre'),
+      confirm: t('common.next'),
+      onCancel,
+      onConfirm: onNext
+    });
+  }
+  steps.push({
     key: 'install',
     name: alreadyInstalled(meta?.did) ? t('common.upgrade') : t('common.install'),
     disabled: enableRunBackground ? false : isEmpty(params.installResultProps),
@@ -1061,7 +1033,7 @@ export default function AddComponentCore({
         }
       }, 200);
     }
-  }].filter(item => item);
+  });
   const step = steps[activeStep] || {};
   const isDisabled = () => {
     if (loading || step.error || !params.bundleDid) {
@@ -1145,18 +1117,21 @@ AddComponentCore.propTypes = {
   mode: PropTypes.oneOf(['normal', 'embed']),
   inDialog: PropTypes.bool,
   stores: PropTypes.arrayOf(PropTypes.string),
+  storeUrl: PropTypes.string,
   resourceType: PropTypes.string,
   resourceDid: PropTypes.string,
   storageKey: PropTypes.string,
   selectedMeta: PropTypes.object,
   showResourcesSwitch: PropTypes.bool,
   showFromUrl: PropTypes.bool,
-  enableRunBackground: PropTypes.bool
+  enableRunBackground: PropTypes.bool,
+  showCategory: PropTypes.bool
 };
 AddComponentCore.defaultProps = {
   onClose: () => {},
   mode: 'normal',
   stores: [],
+  storeUrl: '',
   resourceType: '',
   resourceDid: '',
   storageKey: '',
@@ -1164,7 +1139,8 @@ AddComponentCore.defaultProps = {
   selectedMeta: null,
   showResourcesSwitch: true,
   showFromUrl: true,
-  enableRunBackground: true
+  enableRunBackground: true,
+  showCategory: true
 };
 const Wrapper = styled(Box)`
   .action-bar {
@@ -1230,63 +1206,6 @@ const StoreBlockletItemWrapper = styled.div`
       transition: all ease 0.2s;
     }
   }
-  .install-container {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 30px;
-    height: 30px;
-    border-radius: 0 0 8px 0;
-    color: ${props => props.theme.palette.common.white};
-    overflow: hidden;
-    transition: all ease 0.3s;
-    &:after {
-      position: absolute;
-      z-index: 0;
-      display: block;
-      width: 0;
-      height: 0;
-      border-top: transparent solid 15px;
-      border-left: transparent solid 15px;
-      border-bottom: ${props => props.theme.palette.grey['300']} solid 15px;
-      border-right: ${props => props.theme.palette.grey['300']} solid 15px;
-      transition: all ease 0.1s;
-      content: '';
-    }
-
-    .install-icon {
-      position: relative;
-      z-index: 2;
-      margin: 0 1px 1px 0;
-      font-size: 16px;
-      transition: all ease 0.2s;
-    }
-  }
-  .upgrade-container {
-    position: absolute;
-    right: 6px;
-    top: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 30px;
-    height: 30px;
-    border-radius: 0 0 8px 0;
-    color: ${props => props.theme.palette.primary.main};
-    overflow: hidden;
-    transition: all ease 0.3s;
-
-    .upgrade-icon {
-      position: relative;
-      z-index: 2;
-      margin: 0 1px 1px 0;
-      font-size: 24px;
-      transition: all ease 0.2s;
-    }
-  }
 `;
 const MessageDiv = styled.div`
   color: ${props => props.theme.palette.primary.main};

package/lib/blocklet/component/add-component/step-connect.js

@@ -36,7 +36,12 @@ const StepContent = /*#__PURE__*/forwardRef(({
     component: "div",
     className: isMobile ? 'mobileStyle' : '',
     sx: {
-      height: 'calc(100% - 56px)'
+      height: 'calc(100% - 56px)',
+      '&>div>div>div:first-child': {
+        flex: {
+          md: 1
+        }
+      }
     },
     children: /*#__PURE__*/_jsx(Layout, {
       locale: locale,
@@ -155,8 +160,9 @@ const ContentWrapper = styled(Box)`
             // left-panel
             &:first-child {
               padding: 0;
-              width: 25%;
-              min-width: 240px;
+              width: 20%;
+              min-width: 180px;
+
               & > div:first-child {
                 display: none;
               }