feat(mobile): all docs page ui impl (#7976)

packages/frontend/mobile/src/pages/workspace/all.tsx

@@ -1,9 +1,11 @@
 import { AppTabs } from '../../components';
+import { AllDocList, AllDocsHeader, AllDocsMenu } from '../../views';
 
 export const Component = () => {
   return (
     <>
-      `workspace/all.tsx`;
+      <AllDocsHeader operations={<AllDocsMenu />} />
+      <AllDocList />
       <AppTabs />
     </>
   );

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

@@ -1,3 +1,82 @@
+import { notify } 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,
+  useLiveData,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
+import { useCallback, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { AppTabs } from '../../../components';
+import { CollectionDetail, EmptyCollection } from '../../../views';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/collection/:collectionId</div>;
+  const { collectionService, globalContextService, workspaceService } =
+    useServices({
+      WorkspaceService,
+      CollectionService,
+      GlobalContextService,
+    });
+
+  const globalContext = globalContextService.globalContext;
+  const collections = useLiveData(collectionService.collections$);
+  const params = useParams();
+  const navigate = useNavigateHelper();
+  const workspace = workspaceService.workspace;
+  const collection = collections.find(v => v.id === params.collectionId);
+
+  useEffect(() => {
+    if (collection) {
+      globalContext.collectionId.set(collection.id);
+      globalContext.isCollection.set(true);
+
+      return () => {
+        globalContext.collectionId.set(null);
+        globalContext.isCollection.set(false);
+      };
+    }
+    return;
+  }, [collection, globalContext]);
+
+  const notifyCollectionDeleted = useCallback(() => {
+    navigate.jumpToSubPath(workspace.id, WorkspaceSubPath.HOME);
+    const collection = collectionService.collectionsTrash$.value.find(
+      v => v.collection.id === params.collectionId
+    );
+    let text = 'Collection does not exist';
+    if (collection) {
+      if (collection.userId) {
+        text = `${collection.collection.name} has been deleted by ${collection.userName}`;
+      } else {
+        text = `${collection.collection.name} has been deleted`;
+      }
+    }
+    return notify.error({ title: text });
+  }, [collectionService, navigate, params.collectionId, workspace.id]);
+
+  useEffect(() => {
+    if (!collection) {
+      notifyCollectionDeleted();
+    }
+  }, [collection, notifyCollectionDeleted]);
+
+  if (!collection) {
+    return null;
+  }
+
+  if (isEmptyCollection(collection)) {
+    return <EmptyCollection collection={collection} />;
+  }
+
+  return (
+    <>
+      <CollectionDetail collection={collection} />
+      <AppTabs />
+    </>
+  );
 };

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

@@ -1,3 +1,12 @@
+import { AppTabs } from '../../../components';
+import { AllDocsHeader, CollectionList } from '../../../views';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/collection</div>;
+  return (
+    <>
+      <AllDocsHeader />
+      <AppTabs />
+      <CollectionList />
+    </>
+  );
 };

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

@@ -1,3 +1,40 @@
+import { TagService } from '@affine/core/modules/tag';
+import { PageNotFound } from '@affine/core/pages/404';
+import {
+  GlobalContextService,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { TagDetail } from '../../../views';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/tag/:tagId</div>;
+  const params = useParams();
+  const tagId = params.tagId;
+
+  const globalContext = useService(GlobalContextService).globalContext;
+
+  const tagList = useService(TagService).tagList;
+  const currentTag = useLiveData(tagList.tagByTagId$(tagId));
+
+  useEffect(() => {
+    if (currentTag) {
+      globalContext.tagId.set(currentTag.id);
+      globalContext.isTag.set(true);
+
+      return () => {
+        globalContext.tagId.set(null);
+        globalContext.isTag.set(false);
+      };
+    }
+    return;
+  }, [currentTag, globalContext]);
+
+  if (!currentTag) {
+    return <PageNotFound />;
+  }
+
+  return <TagDetail tag={currentTag} />;
 };

packages/frontend/mobile/src/pages/workspace/tag/index.tsx

@@ -1,3 +1,12 @@
+import { AppTabs } from '../../../components';
+import { AllDocsHeader, TagList } from '../../../views';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/tag</div>;
+  return (
+    <>
+      <AllDocsHeader />
+      <AppTabs />
+      <TagList />
+    </>
+  );
 };