feat(core): new empty states for doc/collection/tag (#8197)

AF-1329, AF-1330

packages/frontend/mobile/src/pages/workspace/collection/detail.tsx

@@ -1,7 +1,6 @@
 import { notify, useThemeColorV2 } from '@affine/component';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { CollectionService } from '@affine/core/modules/collection';
-import { isEmptyCollection } from '@affine/core/pages/workspace/collection';
 import { WorkspaceSubPath } from '@affine/core/shared';
 import {
   GlobalContextService,
@@ -13,7 +12,7 @@ import { useCallback, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { AppTabs } from '../../../components';
-import { CollectionDetail, EmptyCollection } from '../../../views';
+import { CollectionDetail } from '../../../views';
 
 export const Component = () => {
   useThemeColorV2('layer/background/secondary');
@@ -70,10 +69,6 @@ export const Component = () => {
     return null;
   }
 
-  if (isEmptyCollection(collection)) {
-    return <EmptyCollection collection={collection} />;
-  }
-
   return (
     <>
       <CollectionDetail collection={collection} />

packages/frontend/mobile/src/views/all-docs/collection/detail.tsx

@@ -1,4 +1,6 @@
 import { IconButton, MobileMenu } from '@affine/component';
+import { EmptyCollectionDetail } from '@affine/core/components/affine/empty';
+import { isEmptyCollection } from '@affine/core/pages/workspace/collection';
 import type { Collection } from '@affine/env/filter';
 import { MoreHorizontalIcon, ViewLayersIcon } from '@blocksuite/icons/rc';
 
@@ -34,6 +36,15 @@ export const CollectionDetail = ({
 }: {
   collection: Collection;
 }) => {
+  if (isEmptyCollection(collection)) {
+    return (
+      <>
+        <DetailHeader collection={collection} />
+        <EmptyCollectionDetail collection={collection} absoluteCenter />
+      </>
+    );
+  }
+
   return (
     <>
       <DetailHeader collection={collection} />

packages/frontend/mobile/src/views/all-docs/collection/list.tsx

@@ -1,3 +1,4 @@
+import { EmptyCollections } from '@affine/core/components/affine/empty';
 import type { CollectionMeta } from '@affine/core/components/page-list';
 import { CollectionService } from '@affine/core/modules/collection';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -19,6 +20,10 @@ export const CollectionList = () => {
     [collections]
   );
 
+  if (!collectionMetas.length) {
+    return <EmptyCollections absoluteCenter />;
+  }
+
   return (
     <ul className={list}>
       {collectionMetas.map(meta => (

packages/frontend/mobile/src/views/all-docs/doc/list.tsx

@@ -1,3 +1,4 @@
+import { EmptyDocs } from '@affine/core/components/affine/empty';
 import {
   type ItemGroupDefinition,
   type ItemGroupProps,
@@ -78,6 +79,10 @@ export const AllDocList = ({
     return itemsToItemGroups(finalPageMetas ?? [], groupDefs);
   }, [finalPageMetas, groupDefs]);
 
+  if (!groups.length) {
+    return <EmptyDocs absoluteCenter tagId={tag?.id} />;
+  }
+
   return (
     <div className={styles.groups}>
       {groups.map(group => (

packages/frontend/mobile/src/views/all-docs/tag/detail.tsx

@@ -1,17 +1,10 @@
 import type { Tag } from '@affine/core/modules/tag';
-import { useLiveData } from '@toeverything/infra';
 
 import { AppTabs } from '../../../components';
 import { AllDocList } from '../doc';
 import { TagDetailHeader } from './detail-header';
-import { TagEmpty } from './empty';
 
 export const TagDetail = ({ tag }: { tag: Tag }) => {
-  const pageIds = useLiveData(tag?.pageIds$);
-
-  if (!pageIds.length) {
-    return <TagEmpty tag={tag} />;
-  }
   return (
     <>
       <TagDetailHeader tag={tag} />

packages/frontend/mobile/src/views/all-docs/tag/list.tsx

@@ -1,3 +1,4 @@
+import { EmptyTags } from '@affine/core/components/affine/empty';
 import { TagService } from '@affine/core/modules/tag';
 import { useLiveData, useService } from '@toeverything/infra';
 
@@ -8,6 +9,10 @@ export const TagList = () => {
   const tagList = useService(TagService).tagList;
   const tags = useLiveData(tagList.tags$);
 
+  if (!tags.length) {
+    return <EmptyTags absoluteCenter />;
+  }
+
   return (
     <ul className={list}>
       {tags.map(tag => (

packages/frontend/mobile/src/views/recent-docs/index.tsx

@@ -12,10 +12,15 @@ export const RecentDocs = ({ max = 5 }: { max?: number }) => {
 
   const cardMetas = useMemo(() => {
     return [...allPageMetas]
+      .filter(meta => !meta.trash)
       .sort((a, b) => (b.updatedDate ?? 0) - (a.updatedDate ?? 0))
       .slice(0, max);
   }, [allPageMetas, max]);
 
+  if (!cardMetas.length) {
+    return null;
+  }
+
   return (
     <CollapsibleSection
       name="recent"