From 56ace4822607c389224ba3c0c4ea667595b15d2b Mon Sep 17 00:00:00 2001
From: Anthony <oips.anthony@gmail.com>
Date: Tue, 5 Dec 2023 14:18:21 +0800
Subject: [PATCH] feat: add new page to the sidebar #5095 (#5128)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 李华桥 <joooye1991@gmail.com>
---
 .../components/reference-page.tsx             |  4 +-
 .../favorite/add-favourite-button.tsx         | 44 ++++++++++++++++---
 .../e2e/local-first-favorites-items.spec.ts   |  2 +-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx
index 12f7233c1e..7ffe6c1e0c 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx
+++ b/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']()}
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx
index 4db8ff54b3..05bb8dd869 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx
+++ b/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 page = createPage();
-    await page.waitForLoaded();
-    setPageMeta(page.id, { favorite: true });
-  }, [createPage, setPageMeta]);
+  const handleAddFavorite = useAsyncCallback(
+    async e => {
+      if (pageId) {
+        e.stopPropagation();
+        e.preventDefault();
+        const page = createPage();
+        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, workspace, pageId]
+  );
 
   return (
     <IconButton
diff --git a/tests/affine-local/e2e/local-first-favorites-items.spec.ts b/tests/affine-local/e2e/local-first-favorites-items.spec.ts
index 769eb66841..296b47e640 100644
--- a/tests/affine-local/e2e/local-first-favorites-items.spec.ts
+++ b/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