feat: add new page to the sidebar #5095 (#5128)

Co-authored-by: 李华桥 <joooye1991@gmail.com>

packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx

@@ -1,7 +1,7 @@
 import { MenuLinkItem } from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
-import type { PageMeta, Workspace } from '@blocksuite/store';
+import { type PageMeta, type Workspace } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references';
 import { useAtomValue } from 'jotai/react';
@@ -9,6 +9,7 @@ import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { pageSettingFamily } from '../../../../atoms';
+import { AddFavouriteButton } from '../favorite/add-favourite-button';
 import * as styles from '../favorite/styles.css';
 interface ReferencePageProps {
   workspace: Workspace;
@@ -54,6 +55,7 @@ export const ReferencePage = ({
         icon={icon}
         collapsed={collapsible ? collapsed : undefined}
         onCollapsedChange={setCollapsed}
+        postfix={<AddFavouriteButton workspace={workspace} pageId={pageId} />}
       >
         <span className={styles.label} data-untitled={untitled}>
           {metaMapping[pageId]?.title || t['Untitled']()}

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx

@@ -8,16 +8,48 @@ import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
 
 type AddFavouriteButtonProps = {
   workspace: Workspace;
+  pageId?: string;
 };
 
-export const AddFavouriteButton = ({ workspace }: AddFavouriteButtonProps) => {
+export const AddFavouriteButton = ({
+  workspace,
+  pageId,
+}: AddFavouriteButtonProps) => {
   const { createPage } = usePageHelper(workspace);
   const { setPageMeta } = usePageMetaHelper(workspace);
-  const handleAddFavorite = useAsyncCallback(async () => {
+  const handleAddFavorite = useAsyncCallback(
+    async e => {
+      if (pageId) {
+        e.stopPropagation();
+        e.preventDefault();
         const page = createPage();
-    await page.waitForLoaded();
+        await page.load();
+        const parentPage = workspace.getPage(pageId);
+        if (parentPage) {
+          await parentPage.load();
+          const text = parentPage.Text.fromDelta([
+            {
+              insert: ' ',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: page.id,
+                },
+              },
+            },
+          ]);
+          const [frame] = parentPage.getBlockByFlavour('affine:note');
+          frame && parentPage.addBlock('affine:paragraph', { text }, frame.id);
+          setPageMeta(page.id, {});
+        }
+      } else {
+        const page = createPage();
+        await page.load();
         setPageMeta(page.id, { favorite: true });
-  }, [createPage, setPageMeta]);
+      }
+    },
+    [createPage, setPageMeta, workspace, pageId]
+  );
 
   return (
     <IconButton

tests/affine-local/e2e/local-first-favorites-items.spec.ts

@@ -130,7 +130,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
 test('Add new favorite page via sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
-  await page.getByTestId('slider-bar-add-favorite-button').click();
+  await page.getByTestId('slider-bar-add-favorite-button').first().click();
   await waitForEditorLoad(page);
 
   // enter random page title