fix(core): add favorite folder in menu, adjust empty-page new page button (#7730)

close AF-1150, AF-1128, AF-1131
- Replace favorite migration related copy
- Adjust empty page's "New Page" button
  ![CleanShot 2024-08-05 at 15.16.06@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/1cf7d75a-a33a-4eec-9dc1-87d50d9526f1.png)
- Add toggle favorite to folder menu
  ![CleanShot 2024-08-05 at 15.17.50@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/af6116b5-47d1-49a6-9660-41c0d7cd8fd3.png)
- Adjust `Button`
  - add `withoutHover` state
  - remove cursor: not-allowed when disabled

packages/frontend/core/src/pages/workspace/page-list-empty.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const pageListEmptyStyle = style({
   height: 'calc(100% - 52px)',
@@ -23,3 +24,15 @@ export const emptyDescKbd = style([
     cursor: 'text',
   },
 ]);
+
+export const plusButton = style({
+  borderWidth: 1,
+  borderColor: cssVarV2('layer/border'),
+  boxShadow: 'none',
+  cursor: 'default',
+});
+export const descWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+});

packages/frontend/core/src/pages/workspace/page-list-empty.tsx

@@ -1,33 +1,30 @@
-import { Empty } from '@affine/component';
+import { Empty, IconButton } from '@affine/component';
 import { Trans, useI18n } from '@affine/i18n';
+import { PlusIcon } from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
 import type { ReactNode } from 'react';
-import { useCallback } from 'react';
 
-import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
 import * as styles from './page-list-empty.css';
 
 export const EmptyPageList = ({
   type,
-  docCollection,
   heading,
 }: {
   type: 'all' | 'trash' | 'shared' | 'public';
   docCollection: DocCollection;
   heading?: ReactNode;
 }) => {
-  const { createPage } = usePageHelper(docCollection);
   const t = useI18n();
-  const onCreatePage = useCallback(() => {
-    createPage?.();
-  }, [createPage]);
 
   const getEmptyDescription = () => {
     if (type === 'all') {
       const createNewPageButton = (
-        <button className={styles.emptyDescButton} onClick={onCreatePage}>
-          {t['New Page']()}
-        </button>
+        <IconButton
+          withoutHover
+          className={styles.plusButton}
+          variant="solid"
+          icon={<PlusIcon />}
+        />
       );
       if (environment.isDesktop) {
         const shortcut = environment.isMacOs ? '⌘ + N' : 'Ctrl + N';
@@ -61,7 +58,9 @@ export const EmptyPageList = ({
       {heading && <div>{heading}</div>}
       <Empty
         title={t['com.affine.emptyDesc']()}
-        description={getEmptyDescription()}
+        description={
+          <span className={styles.descWrapper}>{getEmptyDescription()}</span>
+        }
       />
     </div>
   );