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} />