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

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

apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx

@@ -5,8 +5,8 @@ import { StyledPinboard } from '../styles';
 export const EmptyItem = () => {
   const { t } = useTranslation();
   return (
-    <StyledPinboard disable={true} style={{ paddingLeft: '32px' }}>
+    <StyledPinboard disable={true} textWrap={true}>
-      {t('No item')}
+      {t('Organize pages to build knowledge')}
     </StyledPinboard>
   );
 };

apps/web/src/components/affine/pinboard/styles.ts

@@ -38,10 +38,20 @@ export const StyledPinboard = styled('div')<{
   active?: boolean;
   isOver?: boolean;
   disableCollapse?: boolean;
-}>(({ disableCollapse, disable = false, active = false, theme, isOver }) => {
+  textWrap?: boolean;
+}>(
+  ({
+    disableCollapse,
+    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: disableCollapse ? '0 5px' : '0 2px 0 16px',
@@ -55,6 +65,13 @@ export const StyledPinboard = styled('div')<{
       background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
       fontSize: theme.font.base,
       userSelect: 'none',
+      ...(textWrap
+        ? {
+            wordBreak: 'break-all',
+            whiteSpace: 'pre-wrap',
+          }
+        : {}),
+
       span: {
         flexGrow: '1',
         textAlign: 'left',
@@ -75,7 +92,8 @@ export const StyledPinboard = styled('div')<{
         backgroundColor: disable ? '' : theme.colors.hoverBackground,
       },
     };
-});
+  }
+);
 
 export const StyledOperationButton = styled(IconButton, {
   shouldForwardProp: prop => {

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
       ? {}

packages/i18n/src/resources/en.json

@@ -212,6 +212,8 @@
   "Disable Public Link ?": "Disable Public Link ?",
   "Disable Public Link Description": "Disabling this public link will prevent anyone with the link from accessing this page.",
   "Export Shared Pages Description": "Download a static copy of your page to share with others.",
+  "Organize pages to build knowledge": "Organize pages to build knowledge",
+  "Favorite pages for easy access": "Favorite pages for easy access",
   "Shared Pages Description": "Sharing page publicly requires AFFiNE Cloud service.",
   "Create Shared Link Description": "Create a link you can easily share with anyone.",
   "Shared Pages In Public Workspace Description": "The entire Workspace is published on the web and can be edited via <1>Workspace Settings</1>.",