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">

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 => ({
+    return tags
-      id: tag.id,
+      .map(tag => ({
-      label: count => {
+        id: tag.id,
-        return <GroupTagLabel tag={tag} count={count} />;
+        label: (count: number) => {
-      },
+          return <GroupTagLabel tag={tag} count={count} />;
-      match: item => (item as DocMeta).tags?.includes(tag.id),
+        },
-    }));
+        match: (item: ListItem) => (item as DocMeta).tags?.includes(tag.id),
-  }, [tags]);
+      }))
+      .concat(untagged);
+  }, [tags, untagged]);
 };
 
 export const useFavoriteGroupDefinitions = <

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",