feat: add tags support (#2988)

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

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -110,6 +110,13 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();
   const getPageInfo = useGetPageInfoById();
+  const tagOptionMap = useMemo(
+    () =>
+      Object.fromEntries(
+        blockSuiteWorkspace.meta.properties.tags.options.map(v => [v.id, v])
+      ),
+    [blockSuiteWorkspace.meta.properties.tags.options]
+  );
   const list = useMemo(
     () =>
       pageMetas
@@ -180,11 +187,15 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
   const pageList: ListData[] = list.map(pageMeta => {
     const page = blockSuiteWorkspace.getPage(pageMeta.id);
     const preview = page ? getPagePreviewText(page) : undefined;
+
     return {
       icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
       pageId: pageMeta.id,
       title: pageMeta.title,
       preview,
+      tags:
+        page?.meta.tags.map(id => tagOptionMap[id]).filter(v => v != null) ??
+        [],
       favorite: !!pageMeta.favorite,
       isPublicPage: !!pageMeta.isPublic,
       createDate: new Date(pageMeta.createDate),
@@ -219,6 +230,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
   });
   return (
     <PageList
+      propertiesMeta={blockSuiteWorkspace.meta.properties}
       getPageInfo={getPageInfo}
       onCreateNewPage={createPage}
       onCreateNewEdgeless={createEdgeless}

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

@@ -2,7 +2,7 @@ import { Menu } from '@affine/component';
 import { MenuItem } from '@affine/component/app-sidebar';
 import {
   EditCollectionModel,
-  useAllPageSetting,
+  useCollectionManager,
   useSavedCollections,
 } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
@@ -49,7 +49,7 @@ const CollectionOperations = ({
 }: {
   view: Collection;
   showUpdateCollection: () => void;
-  setting: ReturnType<typeof useAllPageSetting>;
+  setting: ReturnType<typeof useCollectionManager>;
 }) => {
   const actions = useMemo<
     Array<
@@ -128,7 +128,7 @@ const CollectionRenderer = ({
   getPageInfo: GetPageInfoById;
 }) => {
   const [collapsed, setCollapsed] = React.useState(true);
-  const setting = useAllPageSetting();
+  const setting = useCollectionManager();
   const router = useRouter();
   const clickCollection = useCallback(() => {
     router
@@ -187,6 +187,7 @@ const CollectionRenderer = ({
   return (
     <Collapsible.Root open={!collapsed}>
       <EditCollectionModel
+        propertiesMeta={workspace.blockSuiteWorkspace.meta.properties}
         getPageInfo={getPageInfo}
         init={collection}
         onConfirm={setting.saveCollection}

apps/web/src/components/workspace-header.tsx

@@ -2,7 +2,7 @@ import {
   CollectionList,
   FilterList,
   SaveCollectionButton,
-  useAllPageSetting,
+  useCollectionManager,
 } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
 import type { WorkspaceHeaderProps } from '@affine/env/workspace';
@@ -22,7 +22,7 @@ export function WorkspaceHeader({
   currentWorkspace,
   currentEntry,
 }: WorkspaceHeaderProps<WorkspaceFlavour>): ReactElement {
-  const setting = useAllPageSetting();
+  const setting = useCollectionManager();
   const t = useAFFiNEI18N();
   const saveToCollection = useCallback(
     async (collection: Collection) => {
@@ -38,6 +38,7 @@ export function WorkspaceHeader({
         <CollectionList
           setting={setting}
           getPageInfo={getPageInfoById}
+          propertiesMeta={currentWorkspace.blockSuiteWorkspace.meta.properties}
         ></CollectionList>
       );
       const filterContainer =
@@ -45,6 +46,9 @@ export function WorkspaceHeader({
           <div className={filterContainerStyle}>
             <div style={{ flex: 1 }}>
               <FilterList
+                propertiesMeta={
+                  currentWorkspace.blockSuiteWorkspace.meta.properties
+                }
                 value={setting.currentCollection.filterList}
                 onChange={filterList => {
                   return setting.updateCollection({
@@ -57,6 +61,9 @@ export function WorkspaceHeader({
             <div>
               {setting.currentCollection.filterList.length > 0 ? (
                 <SaveCollectionButton
+                  propertiesMeta={
+                    currentWorkspace.blockSuiteWorkspace.meta.properties
+                  }
                   getPageInfo={getPageInfoById}
                   init={{
                     id: uuidv4(),

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,4 +1,9 @@
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
+import {
+  createTagFilter,
+  useCollectionManager,
+} from '@affine/component/page-list';
+import { WorkspaceSubPath } from '@affine/env/workspace';
 import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -19,29 +24,41 @@ import type { NextPageWithLayout } from '../../../shared';
 
 const WorkspaceDetail: React.FC = () => {
   const router = useRouter();
-  const { openPage } = useRouterHelper(router);
+  const { openPage, jumpToSubPath } = useRouterHelper(router);
   const currentPageId = useAtomValue(rootCurrentPageIdAtom);
   const [currentWorkspace] = useCurrentWorkspace();
   assertExists(currentWorkspace);
   assertExists(currentPageId);
   const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
   const [setting, setSetting] = useAtom(pageSettingFamily(currentPageId));
+  const collectionManager = useCollectionManager();
   if (!setting) {
     setSetting({
       mode: 'page',
     });
   }
-
   const onLoad = useCallback(
     (page: Page, editor: EditorContainer) => {
       const dispose = editor.slots.pageLinkClicked.on(({ pageId }) => {
         return openPage(blockSuiteWorkspace.id, pageId);
       });
+      const disposeTagClick = editor.slots.tagClicked.on(async ({ tagId }) => {
+        await jumpToSubPath(currentWorkspace.id, WorkspaceSubPath.ALL);
+        collectionManager.backToAll();
+        collectionManager.setTemporaryFilter([createTagFilter(tagId)]);
+      });
       return () => {
         dispose.dispose();
+        disposeTagClick.dispose();
       };
     },
-    [blockSuiteWorkspace.id, openPage]
+    [
+      blockSuiteWorkspace.id,
+      collectionManager,
+      currentWorkspace.id,
+      jumpToSubPath,
+      openPage,
+    ]
   );
 
   const { PageDetail, Header } = getUIAdapter(currentWorkspace.flavour);

apps/web/src/pages/workspace/[workspaceId]/all.tsx

@@ -1,4 +1,4 @@
-import { useAllPageSetting } from '@affine/component/page-list';
+import { useCollectionManager } from '@affine/component/page-list';
 import { QueryParamError } from '@affine/env/constant';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -16,7 +16,7 @@ import type { NextPageWithLayout } from '../../../shared';
 
 const AllPage: NextPageWithLayout = () => {
   const router = useRouter();
-  const setting = useAllPageSetting();
+  const setting = useCollectionManager();
   const { jumpToPage } = useRouterHelper(router);
   const [currentWorkspace] = useCurrentWorkspace();
   const t = useAFFiNEI18N();

apps/web/src/utils/filter.ts

@@ -13,5 +13,6 @@ export const filterPage = (collection: Collection, page: PageMeta) => {
     'Is Favourited': !!page.favorite,
     Created: page.createDate,
     Updated: page.updatedDate ?? page.createDate,
+    Tags: page.tags,
   });
 };