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">
toeverything · May 13, 2024 · f943067 · f943067
1 parent 3e23878
commit f943067
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/packages/frontend/core/src/components/page-list/group-definitions.tsx b/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(

diff --git a/packages/frontend/core/src/pages/workspace/collection/header.tsx b/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'} />}
  />

diff --git a/packages/frontend/core/src/pages/workspace/tag/header.tsx b/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 />}
+ />
+ );
 };