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/components/page-list/group-definitions.tsx

@@ -4,7 +4,7 @@ import { TagService } from '@affine/core/modules/tag';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
 import type { DocMeta } from '@blocksuite/store';
-import { useLiveData, useService } from '@toeverything/infra';
+import { LiveData, useLiveData, useService } from '@toeverything/infra';
 import { type ReactNode, useMemo } from 'react';
 
 import * as styles from './group-definitions.css';
@@ -128,7 +128,17 @@ const GroupTagLabel = ({ tag, count }: { tag: Tag; count: number }) => {
 };
 export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
   const tagList = useService(TagService).tagList;
-  const tags = useLiveData(tagList.tags$);
+  const sortedTagsLiveData$ = useMemo(
+    () =>
+      LiveData.computed(get =>
+        get(tagList.tags$).sort((a, b) =>
+          get(a.value$).localeCompare(get(b.value$))
+        )
+      ),
+    [tagList.tags$]
+  );
+  const tags = useLiveData(sortedTagsLiveData$);
+
   const t = useAFFiNEI18N();
 
   const untagged = useMemo(

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 />}
+    />
+  );
 };