feat: add fav button (#4159)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -19,11 +19,14 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
   );
   const setPageMode = useSetAtom(setPageModeAtom);
   const createPageAndOpen = useCallback(
-    (id?: string, mode?: 'page' | 'edgeless') => {
+    (id?: string, mode?: 'page' | 'edgeless'): string => {
       const page = createPage(id);
-      initEmptyPage(page); // we don't need to wait it to be loaded right?
+      initEmptyPage(page).catch(error => {
+        toast(`Failed to initialize Page: ${error.message}`);
+      });
       setPageMode(page.id, mode || 'page');
       openPage(blockSuiteWorkspace.id, page.id);
+      return page.id;
     },
     [blockSuiteWorkspace.id, createPage, openPage, setPageMode]
   );

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

@@ -0,0 +1,30 @@
+import { PlusIcon } from '@blocksuite/icons';
+import type { Workspace } from '@blocksuite/store';
+import { IconButton } from '@toeverything/components/button';
+import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useCallback } from 'react';
+
+import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
+
+type AddFavouriteButtonProps = {
+  workspace: Workspace;
+};
+
+export const AddFavouriteButton = ({ workspace }: AddFavouriteButtonProps) => {
+  const { createPage } = usePageHelper(workspace);
+  const { setPageMeta } = usePageMetaHelper(workspace);
+  const handleAddFavorite = useCallback(async () => {
+    const id = createPage();
+    setPageMeta(id, { favorite: true });
+  }, [createPage, setPageMeta]);
+
+  return (
+    <IconButton
+      data-testid="slider-bar-add-favorite-button"
+      onClick={handleAddFavorite}
+      size="small"
+    >
+      <PlusIcon />
+    </IconButton>
+  );
+};

apps/core/src/components/root-app-sidebar/index.tsx

@@ -30,6 +30,7 @@ import { useAppSetting } from '../../atoms/settings';
 import type { AllWorkspace } from '../../shared';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
+import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector';
 import ImportPage from './import-page';
@@ -196,7 +197,9 @@ export const RootAppSidebar = ({
         </SidebarContainer>
 
         <SidebarScrollableContainer>
-          <CategoryDivider label={t['Favorites']()} />
+          <CategoryDivider label={t['Favorites']()}>
+            <AddFavouriteButton workspace={blockSuiteWorkspace} />
+          </CategoryDivider>
           <FavoriteList workspace={blockSuiteWorkspace} />
           <CategoryDivider label={t['Collections']()}>
             <AddCollectionButton workspace={blockSuiteWorkspace} />

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

@@ -127,3 +127,18 @@ test("Deleted page's reference will not be shown in sidebar", async ({
 
   expect(currentWorkspace.flavour).toContain('local');
 });
+
+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 waitForEditorLoad(page);
+
+  // enter random page title
+  await getBlockSuiteEditorTitle(page).fill('this is a new fav page');
+  // check if the page title is shown in the favorite list
+  const favItem = page.locator(
+    '[data-type=favorite-list-item] >> text=this is a new fav page'
+  );
+  await expect(favItem).toBeVisible();
+});