feat: add new collection button to slider bar (#3369)

apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx

@@ -0,0 +1,56 @@
+import { IconButton } from '@affine/component';
+import {
+  EditCollectionModel,
+  useCollectionManager,
+} from '@affine/component/page-list';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { PlusIcon } from '@blocksuite/icons';
+import type { Workspace } from '@blocksuite/store';
+import { uuidv4 } from '@blocksuite/store';
+import { useMemo, useState } from 'react';
+
+import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
+
+type AddCollectionButtonProps = {
+  workspace: Workspace;
+};
+
+export const AddCollectionButton = ({
+  workspace,
+}: AddCollectionButtonProps) => {
+  const getPageInfo = useGetPageInfoById(workspace);
+  const setting = useCollectionManager(workspace.id);
+  const t = useAFFiNEI18N();
+  const [show, showUpdateCollection] = useState(false);
+  const defaultCollection = useMemo(
+    () => ({
+      id: uuidv4(),
+      name: '',
+      pinned: true,
+      filterList: [],
+      workspaceId: workspace.id,
+    }),
+    [workspace.id]
+  );
+  return (
+    <>
+      <IconButton
+        data-testid="slider-bar-add-collection-button"
+        onClick={() => showUpdateCollection(true)}
+        size="small"
+      >
+        <PlusIcon />
+      </IconButton>
+
+      <EditCollectionModel
+        propertiesMeta={workspace.meta.properties}
+        getPageInfo={getPageInfo}
+        onConfirm={setting.saveCollection}
+        open={show}
+        onClose={() => showUpdateCollection(false)}
+        title={t['Save As New Collection']()}
+        init={defaultCollection}
+      />
+    </>
+  );
+};

apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -12,6 +12,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeleteIcon,
   FilterIcon,
+  InformationIcon,
   MoreHorizontalIcon,
   UnpinIcon,
   ViewLayersIcon,
@@ -251,21 +252,34 @@ export const CollectionsList = ({ workspace }: CollectionsListProps) => {
   const metas = useBlockSuitePageMeta(workspace);
   const { savedCollections } = useSavedCollections(workspace.id);
   const getPageInfo = useGetPageInfoById(workspace);
+  const pinedCollections = useMemo(
+    () => savedCollections.filter(v => v.pinned),
+    [savedCollections]
+  );
+  if (pinedCollections.length === 0) {
+    return (
+      <MenuItem
+        data-testid="slider-bar-collection-null-description"
+        icon={<InformationIcon />}
+        disabled
+      >
+        <span>Create a collection</span>
+      </MenuItem>
+    );
+  }
   return (
     <div data-testid="collections" className={styles.wrapper}>
-      {savedCollections
-        .filter(v => v.pinned)
-        .map(view => {
-          return (
-            <CollectionRenderer
-              getPageInfo={getPageInfo}
-              key={view.id}
-              collection={view}
-              pages={metas}
-              workspace={workspace}
-            />
-          );
-        })}
+      {pinedCollections.map(view => {
+        return (
+          <CollectionRenderer
+            getPageInfo={getPageInfo}
+            key={view.id}
+            collection={view}
+            pages={metas}
+            workspace={workspace}
+          />
+        );
+      })}
     </div>
   );
 };

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

@@ -29,6 +29,7 @@ import { useHistoryAtom } from '../../atoms/history';
 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 FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector';
 import ImportPage from './import-page';
@@ -190,7 +191,9 @@ export const RootAppSidebar = ({
         <SidebarScrollableContainer>
           <CategoryDivider label={t['Favorites']()} />
           <FavoriteList workspace={blockSuiteWorkspace} />
-          <CategoryDivider label={t['Collections']()} />
+          <CategoryDivider label={t['Collections']()}>
+            <AddCollectionButton workspace={blockSuiteWorkspace} />
+          </CategoryDivider>
           <CollectionsList workspace={blockSuiteWorkspace} />
           <CategoryDivider label={t['others']()} />
           <RouteMenuLinkItem