From 291db7d80978a3c35dae64f4c7be986d1c531070 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Thu, 9 May 2024 02:30:52 +0000
Subject: [PATCH] feat(core): add untagged group to GroupBy view (#6837)

close #6688

<img width="743" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/9ffe3cac-0c73-4a8c-8567-8a315eed6548">
---
 .../page-list/group-definitions.tsx           | 36 ++++++++++++++-----
 packages/frontend/i18n/src/resources/en.json  |  1 +
 2 files changed, 29 insertions(+), 8 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
index c720e73532..d33e2d56c6 100644
--- a/packages/frontend/core/src/components/page-list/group-definitions.tsx
+++ b/packages/frontend/core/src/components/page-list/group-definitions.tsx
@@ -129,15 +129,35 @@ const GroupTagLabel = ({ tag, count }: { tag: Tag; count: number }) => {
 export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
   const tagList = useService(TagService).tagList;
   const tags = useLiveData(tagList.tags$);
+  const t = useAFFiNEI18N();
+
+  const untagged = useMemo(
+    () => ({
+      id: 'Untagged',
+      label: (count: number) => (
+        <GroupLabel
+          id="Untagged"
+          label={t['com.affine.page.display.grouping.group-by-tag.untagged']()}
+          count={count}
+        />
+      ),
+      match: (item: ListItem) =>
+        (item as DocMeta).tags ? !(item as DocMeta).tags.length : false,
+    }),
+    [t]
+  );
+
   return useMemo(() => {
-    return tags.map(tag => ({
-      id: tag.id,
-      label: count => {
-        return <GroupTagLabel tag={tag} count={count} />;
-      },
-      match: item => (item as DocMeta).tags?.includes(tag.id),
-    }));
-  }, [tags]);
+    return tags
+      .map(tag => ({
+        id: tag.id,
+        label: (count: number) => {
+          return <GroupTagLabel tag={tag} count={count} />;
+        },
+        match: (item: ListItem) => (item as DocMeta).tags?.includes(tag.id),
+      }))
+      .concat(untagged);
+  }, [tags, untagged]);
 };
 
 export const useFavoriteGroupDefinitions = <
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index e15e62cfdf..8b8d9d0d98 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -851,6 +851,7 @@
   "com.affine.page.display.grouping": "Grouping",
   "com.affine.page.display.grouping.group-by-favourites": "Favourites",
   "com.affine.page.display.grouping.group-by-tag": "Tag",
+  "com.affine.page.display.grouping.group-by-tag.untagged": "Untagged",
   "com.affine.page.display.grouping.no-grouping": "No Grouping",
   "com.affine.page.display.list-option": "List option",
   "com.affine.page.group-header.clear": "Clear Selection",