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(),