feat: modify empty text & style of favorite & pinboard (#1977)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -4,7 +4,11 @@ import { StyledCollapseItem } from '../shared-styles';
 
 export const EmptyItem = () => {
   const { t } = useTranslation();
-  return <StyledCollapseItem disable={true}>{t('No item')}</StyledCollapseItem>;
+  return (
+    <StyledCollapseItem disable={true} textWrap={true}>
+      {t('Favorite pages for easy access')}
+    </StyledCollapseItem>
+  );
 };
 
 export default EmptyItem;

apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -54,7 +54,7 @@ export const FavoriteList = ({
               ) : (
                 <PageIcon />
               )}
-              {pageMeta.title || 'Untitled'}
+              <span>{pageMeta.title || 'Untitled'}</span>
             </StyledCollapseItem>
           </div>
         );

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -70,13 +70,15 @@ export const StyledCollapseItem = styled('div')<{
   disable?: boolean;
   active?: boolean;
   isOver?: boolean;
-}>(({ disable = false, active = false, theme, isOver }) => {
+  textWrap?: boolean;
+}>(({ disable = false, active = false, theme, isOver, textWrap = false }) => {
   return {
     width: '100%',
-    height: '32px',
+    lineHeight: '1.5',
+    minHeight: '32px',
     borderRadius: '8px',
     ...displayFlex('flex-start', 'center'),
-    padding: '0 2px 0 16px',
+    paddingRight: '2px',
     position: 'relative',
     color: disable
       ? theme.colors.disableColor
@@ -86,7 +88,12 @@ export const StyledCollapseItem = styled('div')<{
     cursor: disable ? 'not-allowed' : 'pointer',
     background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
     userSelect: 'none',
-
+    ...(textWrap
+      ? {
+          wordBreak: 'break-all',
+          whiteSpace: 'pre-wrap',
+        }
+      : {}),
     span: {
       flexGrow: '1',
       textAlign: 'left',
@@ -98,9 +105,6 @@ export const StyledCollapseItem = styled('div')<{
       flexShrink: '0',
       color: active ? theme.colors.primaryColor : theme.colors.iconColor,
     },
-    '.operation-button': {
-      visibility: 'hidden',
-    },
 
     ':hover': disable
       ? {}