diff --git a/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx b/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx new file mode 100644 index 0000000000..6c37e42c2c --- /dev/null +++ b/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 ( + <> + showUpdateCollection(true)} + size="small" + > + + + + showUpdateCollection(false)} + title={t['Save As New Collection']()} + init={defaultCollection} + /> + + ); +}; diff --git a/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx index 9314a532e5..294aa2a998 100644 --- a/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx +++ b/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 ( + } + disabled + > + Create a collection + + ); + } return (
- {savedCollections - .filter(v => v.pinned) - .map(view => { - return ( - - ); - })} + {pinedCollections.map(view => { + return ( + + ); + })}
); }; diff --git a/apps/core/src/components/root-app-sidebar/index.tsx b/apps/core/src/components/root-app-sidebar/index.tsx index a19c2dd17a..a6167dc539 100644 --- a/apps/core/src/components/root-app-sidebar/index.tsx +++ b/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 = ({ - + + + span`, { + display: 'block', + width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', @@ -75,6 +76,9 @@ export const filterButton = style({ padding: '4px 8px', fontSize: 'var(--affine-font-xs)', background: 'var(--affine-white)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', color: 'var(--affine-text-secondary-color)', border: '1px solid var(--affine-border-color)', transition: 'margin-left 0.2s ease-in-out', diff --git a/packages/component/src/components/page-list/view/create-collection.tsx b/packages/component/src/components/page-list/view/create-collection.tsx index 7a8446eb1f..72f2065845 100644 --- a/packages/component/src/components/page-list/view/create-collection.tsx +++ b/packages/component/src/components/page-list/view/create-collection.tsx @@ -243,14 +243,14 @@ export const EditCollection = ({ marginTop: 40, }} > - { await page.getByRole('tooltip').getByText('TODO Tag').click(); expect(await page.getByTestId('title').count()).toBe(2); }); + +test('add collection from sidebar', async ({ page }) => { + await openHomePage(page); + await waitEditorLoad(page); + await newPage(page); + await getBlockSuiteEditorTitle(page).click(); + await getBlockSuiteEditorTitle(page).fill('test page'); + await page.getByTestId('all-pages').click(); + const cell = page.getByRole('cell', { + name: 'test page', + }); + await expect(cell).toBeVisible(); + const nullCollection = page.getByTestId( + 'slider-bar-collection-null-description' + ); + await expect(nullCollection).toBeVisible(); + await page.getByTestId('slider-bar-add-collection-button').click(); + const title = page.getByTestId('input-collection-title'); + await title.isVisible(); + await title.fill('test collection'); + await page.getByTestId('save-collection').click(); + await page.waitForTimeout(100); + const collections = page.getByTestId('collections'); + const items = collections.getByTestId('collection-item'); + expect(await items.count()).toBe(1); + await expect(nullCollection).not.toBeVisible(); +});