feat: update desc for empty page (#2710)

apps/web/src/components/blocksuite/block-suite-page-list/index.css.ts

@@ -3,3 +3,25 @@ import { style } from '@vanilla-extract/css';
 export const pageListEmptyStyle = style({
   height: 'calc(100% - 52px)',
 });
+
+export const emptyDescButton = style({
+  cursor: 'pointer',
+  color: 'var(--affine-text-secondary-color)',
+  background: 'var(--affine-background-code-block)',
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '4px',
+  padding: '0 6px',
+  boxSizing: 'border-box',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const emptyDescKbd = style([
+  emptyDescButton,
+  {
+    cursor: 'text',
+  },
+]);

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -5,7 +5,9 @@ import {
   PageList,
   PageListTrashView,
 } from '@affine/component/page-list';
+import { env } from '@affine/env';
 import type { View } from '@affine/env/filter';
+import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
@@ -19,7 +21,7 @@ import { pageModeSelectAtom } from '../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 import { toast } from '../../../utils';
-import { pageListEmptyStyle } from './index.css';
+import { emptyDescButton, emptyDescKbd, pageListEmptyStyle } from './index.css';
 import { usePageHelper } from './utils';
 
 export type BlockSuitePageListProps = {
@@ -41,14 +43,36 @@ const filter = {
 };
 
 const PageListEmpty = (props: {
+  createPage?: () => void;
   listType: BlockSuitePageListProps['listType'];
 }) => {
-  const { listType } = props;
+  const { listType, createPage } = props;
   const t = useAFFiNEI18N();
 
   const getEmptyDescription = () => {
     if (listType === 'all') {
-      return t['emptyAllPages']();
+      const CreateNewPageButton = () => (
+        <button className={emptyDescButton} onClick={createPage}>
+          New Page
+        </button>
+      );
+      if (env.isDesktop) {
+        const shortcut = env.isMacOs ? '⌘ + N' : 'Ctrl + N';
+        return (
+          <Trans i18nKey="emptyAllPagesClient">
+            Click on the <CreateNewPageButton /> button Or press
+            <kbd className={emptyDescKbd}>{{ shortcut } as any}</kbd> to create
+            your first page.
+          </Trans>
+        );
+      }
+      return (
+        <Trans i18nKey="emptyAllPages">
+          Click on the
+          <CreateNewPageButton />
+          button to create your first page.
+        </Trans>
+      );
     }
     if (listType === 'trash') {
       return t['emptyTrash']();
@@ -60,7 +84,10 @@ const PageListEmpty = (props: {
 
   return (
     <div className={pageListEmptyStyle}>
-      <Empty description={getEmptyDescription()} />
+      <Empty
+        title={t['com.affine.emptyDesc']()}
+        description={getEmptyDescription()}
+      />
     </div>
   );
 };
@@ -204,7 +231,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
       onImportFile={importFile}
       isPublicWorkspace={isPublic}
       list={pageList}
-      fallback={<PageListEmpty listType={listType} />}
+      fallback={<PageListEmpty createPage={createPage} listType={listType} />}
     />
   );
 };

packages/component/src/ui/empty/empty.tsx

@@ -1,15 +1,17 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 import { EmptySvg } from './empty-svg';
 import { StyledEmptyContainer } from './style';
 export type EmptyContentProps = {
   containerStyle?: CSSProperties;
-  description?: string;
+  title?: ReactNode;
+  description?: ReactNode;
   descriptionStyle?: CSSProperties;
 };
 
 export const Empty = ({
   containerStyle,
+  title,
   description,
   descriptionStyle,
 }: EmptyContentProps) => {
@@ -18,7 +20,22 @@ export const Empty = ({
       <div style={{ color: 'var(--affine-black)' }}>
         <EmptySvg />
       </div>
-      <p style={{ marginTop: '30px', ...descriptionStyle }}>{description}</p>
+      {title && (
+        <p
+          style={{
+            marginTop: '30px',
+            color: 'var(--affine-text-primary-color)',
+            fontWeight: 700,
+          }}
+        >
+          {title}
+        </p>
+      )}
+      {description && (
+        <p style={{ marginTop: title ? '8px' : '30px', ...descriptionStyle }}>
+          {description}
+        </p>
+      )}
     </StyledEmptyContainer>
   );
 };

packages/i18n/src/resources/en.json

@@ -116,7 +116,8 @@
   "mobile device": "Looks like you are browsing on a mobile device.",
   "mobile device description": "We are still working on mobile support and recommend you use a desktop device.",
   "Got it": "Got it",
-  "emptyAllPages": "This workspace is empty. Create a new page to begin editing.",
+  "emptyAllPages": "Click on the <1>$t(New Page)</1> button to create your first page.",
+  "emptyAllPagesClient": "Click on the <1>$t(New Page)</1> button Or press <3>{{shortcut}}</3> to create your first page.",
   "emptyTrash": "Click Add to Trash and the page will appear here.",
   "still designed": "(This page is still being designed.)",
   "My Workspaces": "My Workspaces",
@@ -290,6 +291,7 @@
   "com.affine.last30Days": "Last 30 Days",
   "com.affine.currentYear": "Current Year",
   "com.affine.earlier": "Earlier",
+  "com.affine.emptyDesc": "There's no page here yet",
   "FILE_ALREADY_EXISTS": "File already exists",
   "others": "Others",
   "Update Available": "Update available",

packages/storybook/src/stories/page-list.stories.tsx

@@ -138,7 +138,23 @@ AffineEmptyAllPageList.args = {
   onCreateNewEdgeless: () => toast('Create new edgeless'),
   onImportFile: () => toast('Import file'),
   list: [],
-  fallback: <Empty description="empty description" />,
+  fallback: (
+    <Empty
+      title="Empty"
+      description={
+        <div>
+          empty description, click{' '}
+          <button
+            onClick={() => {
+              toast('click');
+            }}
+          >
+            button
+          </button>
+        </div>
+      }
+    />
+  ),
 };
 
 export const AffinePublicPageList: StoryFn<typeof PageList> = ({