feat(core): add tag operation to tag list (#5998)

https://github.com/toeverything/AFFiNE/assets/102217452/11745733-0d7b-494b-97fd-33e40a240a02

packages/frontend/core/src/pages/workspace/all-tag/index.tsx

@@ -3,23 +3,39 @@ import {
   TagListHeader,
   VirtualizedTagList,
 } from '@affine/core/components/page-list/tags';
+import { CreateOrEditTag } from '@affine/core/components/page-list/tags/create-tag';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useService } from '@toeverything/infra';
 import { Workspace } from '@toeverything/infra';
+import { useCallback, useState } from 'react';
 
 import { ViewBodyIsland, ViewHeaderIsland } from '../../../modules/workbench';
 import { EmptyTagList } from '../page-list-empty';
 import * as styles from './all-tag.css';
 import { AllTagHeader } from './header';
 
+const EmptyTagListHeader = () => {
+  const [showCreateTagInput, setShowCreateTagInput] = useState(false);
+  const handleOpen = useCallback(() => {
+    setShowCreateTagInput(true);
+  }, [setShowCreateTagInput]);
+
+  return (
+    <div>
+      <TagListHeader onOpen={handleOpen} />
+      <CreateOrEditTag
+        open={showCreateTagInput}
+        onOpenChange={setShowCreateTagInput}
+      />
+    </div>
+  );
+};
+
 export const AllTag = () => {
   const currentWorkspace = useService(Workspace);
   const pageMetas = useBlockSuiteDocMeta(currentWorkspace.blockSuiteWorkspace);
 
-  const { tags, tagMetas, deleteTags } = useTagMetas(
-    currentWorkspace.blockSuiteWorkspace,
-    pageMetas
-  );
+  const { tags, tagMetas, deleteTags } = useTagMetas(pageMetas);
 
   return (
     <>
@@ -35,7 +51,7 @@ export const AllTag = () => {
               onTagDelete={deleteTags}
             />
           ) : (
-            <EmptyTagList heading={<TagListHeader />} />
+            <EmptyTagList heading={<EmptyTagListHeader />} />
           )}
         </div>
       </ViewBodyIsland>

packages/frontend/core/src/pages/workspace/tag/index.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const body = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+});

packages/frontend/core/src/pages/workspace/tag/index.tsx

@@ -1,9 +1,13 @@
 import {
-  PageListHeader,
+  TagPageListHeader,
   useTagMetas,
   VirtualizedPageList,
 } from '@affine/core/components/page-list';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import {
+  ViewBodyIsland,
+  ViewHeaderIsland,
+} from '@affine/core/modules/workbench';
 import { useService } from '@toeverything/infra';
 import { Workspace } from '@toeverything/infra';
 import { useMemo } from 'react';
@@ -12,15 +16,13 @@ import { useParams } from 'react-router-dom';
 import { PageNotFound } from '../../404';
 import { EmptyPageList } from '../page-list-empty';
 import { TagDetailHeader } from './header';
+import * as styles from './index.css';
 
 export const TagDetail = ({ tagId }: { tagId?: string }) => {
   const currentWorkspace = useService(Workspace);
   const pageMetas = useBlockSuiteDocMeta(currentWorkspace.blockSuiteWorkspace);
 
-  const { tags, filterPageMetaByTag } = useTagMetas(
-    currentWorkspace.blockSuiteWorkspace,
-    pageMetas
-  );
+  const { tags, filterPageMetaByTag } = useTagMetas(pageMetas);
   const tagPageMetas = useMemo(() => {
     if (tagId) {
       return filterPageMetaByTag(tagId);
@@ -39,16 +41,27 @@ export const TagDetail = ({ tagId }: { tagId?: string }) => {
 
   return (
     <>
-      <TagDetailHeader />
-      {tagPageMetas.length > 0 ? (
-        <VirtualizedPageList tag={currentTag} listItem={tagPageMetas} />
-      ) : (
-        <EmptyPageList
-          type="all"
-          heading={<PageListHeader />}
-          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-        />
-      )}
+      <ViewHeaderIsland>
+        <TagDetailHeader />
+      </ViewHeaderIsland>
+      <ViewBodyIsland>
+        <div className={styles.body}>
+          {tagPageMetas.length > 0 ? (
+            <VirtualizedPageList tag={currentTag} listItem={tagPageMetas} />
+          ) : (
+            <EmptyPageList
+              type="all"
+              heading={
+                <TagPageListHeader
+                  tag={currentTag}
+                  workspaceId={currentWorkspace.id}
+                />
+              }
+              blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+            />
+          )}
+        </div>
+      </ViewBodyIsland>
     </>
   );
 };