feat(core): tag groups sorted alphabetically (#6865)

feat(core): tag groups sorted alphabetically
feat(core): add display group to collection page and tag page

<img width="755" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/17a5abbe-cd1a-4ce2-8adc-f9aa5b6d6e77">

packages/frontend/core/src/pages/workspace/collection/header.tsx

@@ -1,4 +1,5 @@
 import { IconButton } from '@affine/component';
+import { PageDisplayMenu } from '@affine/core/components/page-list';
 import { Header } from '@affine/core/components/pure/header';
 import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
 import { PlusIcon } from '@blocksuite/icons';
@@ -16,16 +17,19 @@ export const CollectionDetailHeader = ({
   return (
     <Header
       right={
-        <IconButton
-          type="default"
-          icon={<PlusIcon fontSize={16} />}
-          onClick={onCreate}
-          className={clsx(
-            styles.headerCreateNewButton,
-            styles.headerCreateNewCollectionIconButton,
-            !showCreateNew && styles.headerCreateNewButtonHidden
-          )}
-        />
+        <>
+          <IconButton
+            type="default"
+            icon={<PlusIcon fontSize={16} />}
+            onClick={onCreate}
+            className={clsx(
+              styles.headerCreateNewButton,
+              styles.headerCreateNewCollectionIconButton,
+              !showCreateNew && styles.headerCreateNewButtonHidden
+            )}
+          />
+          <PageDisplayMenu />
+        </>
       }
       center={<WorkspaceModeFilterTab activeFilter={'collections'} />}
     />

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

@@ -1,6 +1,12 @@
+import { PageDisplayMenu } from '@affine/core/components/page-list';
 import { Header } from '@affine/core/components/pure/header';
 import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
 
 export const TagDetailHeader = () => {
-  return <Header center={<WorkspaceModeFilterTab activeFilter={'tags'} />} />;
+  return (
+    <Header
+      center={<WorkspaceModeFilterTab activeFilter={'tags'} />}
+      right={<PageDisplayMenu />}
+    />
+  );
 };