feat: update desc for empty page (#2710)

(cherry picked from commit ec99a0ce05)

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

@@ -117,7 +117,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",
@@ -295,6 +296,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> = ({