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

Author: CatsJuice

packages/frontend/core/src/components/page-list/components/page-display-menu.tsx

@@ -18,6 +18,31 @@ type GroupOption = {
   label: string;
 };
 
+export function getGroupOptions(t: ReturnType<typeof useI18n>) {
+  return [
+    {
+      value: 'createDate',
+      label: t['Created'](),
+    },
+    {
+      value: 'updatedDate',
+      label: t['Updated'](),
+    },
+    {
+      value: 'tag',
+      label: t['com.affine.page.display.grouping.group-by-tag'](),
+    },
+    {
+      value: 'favourites',
+      label: t['com.affine.page.display.grouping.group-by-favourites'](),
+    },
+    {
+      value: 'none',
+      label: t['com.affine.page.display.grouping.no-grouping'](),
+    },
+  ] satisfies GroupOption[];
+}
+
 export const PageDisplayMenu = () => {
   const t = useI18n();
   const [workspaceProperties, setProperties] = useAllDocDisplayProperties();
@@ -66,28 +91,7 @@ export const PageDisplayMenu = () => {
   }, [handleSetDocDisplayProperties, t]);
 
   const items = useMemo(() => {
-    const groupOptions: GroupOption[] = [
-      {
-        value: 'createDate',
-        label: t['Created'](),
-      },
-      {
-        value: 'updatedDate',
-        label: t['Updated'](),
-      },
-      {
-        value: 'tag',
-        label: t['com.affine.page.display.grouping.group-by-tag'](),
-      },
-      {
-        value: 'favourites',
-        label: t['com.affine.page.display.grouping.group-by-favourites'](),
-      },
-      {
-        value: 'none',
-        label: t['com.affine.page.display.grouping.no-grouping'](),
-      },
-    ];
+    const groupOptions: GroupOption[] = getGroupOptions(t);
 
     const subItems = groupOptions.map(option => (
       <MenuItem

packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts

@@ -19,6 +19,10 @@ export const getPagePreviewText = (page: Doc) => {
   let count = MAX_SEARCH_BLOCK_COUNT;
   while (queue.length && previewLenNeeded > 0 && count-- > 0) {
     const block = queue.shift();
+    // if preview length is enough, skip the rest of the blocks
+    if (preview.join(' ').trim().length >= MAX_PREVIEW_LENGTH) {
+      break;
+    }
     if (!block) {
       console.error('Unexpected empty block');
       break;
@@ -51,7 +55,7 @@ export const getPagePreviewText = (page: Doc) => {
       }
     }
   }
-  return preview.join(' ').slice(0, MAX_PREVIEW_LENGTH);
+  return preview.join(' ').trim().slice(0, MAX_PREVIEW_LENGTH);
 };
 
 const emptyAtom = atom<string>('');

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -14,11 +14,12 @@ export type WorkbenchLinkProps = React.PropsWithChildren<
   {
     to: To;
     onClick?: (e: MouseEvent) => void;
+    replaceHistory?: boolean;
   } & React.HTMLProps<HTMLAnchorElement>
 >;
 
 export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
-  function WorkbenchLink({ to, onClick, ...other }, ref) {
+  function WorkbenchLink({ to, onClick, replaceHistory, ...other }, ref) {
     const { featureFlagService, workbenchService } = useServices({
       FeatureFlagService,
       WorkbenchService,
@@ -45,10 +46,10 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
           }
           return 'active';
         })();
-        workbench.open(to, { at });
+        workbench.open(to, { at, replaceHistory });
         event.preventDefault();
       },
-      [enableMultiView, onClick, to, workbench]
+      [enableMultiView, onClick, replaceHistory, to, workbench]
     );
 
     // eslint suspicious runtime error

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

@@ -121,7 +121,7 @@ export const Component = function CollectionPage() {
   if (!collection) {
     return null;
   }
-  const inner = isEmpty(collection) ? (
+  const inner = isEmptyCollection(collection) ? (
     <Placeholder collection={collection} />
   ) : (
     <CollectionDetail collection={collection} />
@@ -346,7 +346,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
   );
 };
 
-const isEmpty = (collection: Collection) => {
+export const isEmptyCollection = (collection: Collection) => {
   return (
     collection.allowList.length === 0 && collection.filterList.length === 0
   );

packages/frontend/mobile/src/components/app-tabs/index.tsx

@@ -4,6 +4,7 @@ import {
 } from '@affine/core/modules/workbench';
 import { AllDocsIcon, SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
+import type { Location } from 'react-router-dom';
 
 import { HomeIcon } from './home-icon';
 import * as styles from './styles.css';
@@ -12,6 +13,7 @@ interface Route {
   to: string;
   Icon: React.FC;
   LinkComponent?: React.FC;
+  isActive?: (location: Location) => boolean;
 }
 
 const routes: Route[] = [
@@ -22,6 +24,10 @@ const routes: Route[] = [
   {
     to: '/all',
     Icon: AllDocsIcon,
+    isActive: location =>
+      location.pathname === '/all' ||
+      location.pathname.startsWith('/collection') ||
+      location.pathname.startsWith('/tag'),
   },
   {
     to: '/search',
@@ -37,9 +43,13 @@ export const AppTabs = () => {
     <ul className={styles.appTabs} id="app-tabs">
       {routes.map(route => {
         const Link = route.LinkComponent || WorkbenchLink;
+
+        const isActive = route.isActive
+          ? route.isActive(location)
+          : location.pathname === route.to;
         return (
           <Link
-            data-active={location.pathname === route.to}
+            data-active={isActive}
             to={route.to}
             key={route.to}
             className={styles.tabItem}

packages/frontend/mobile/src/components/app-tabs/styles.css.ts

@@ -18,6 +18,7 @@ export const appTabs = style({
 
   position: 'fixed',
   bottom: 0,
+  zIndex: 1,
 });
 export const tabItem = style({
   display: 'flex',

packages/frontend/mobile/src/components/doc-card/index.tsx

@@ -16,10 +16,11 @@ import { DocCardTags } from './tag';
 
 export interface DocCardProps extends Omit<WorkbenchLinkProps, 'to'> {
   meta: DocMeta;
+  showTags?: boolean;
 }
 
 export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
-  function DocCard({ meta, className, ...attrs }, ref) {
+  function DocCard({ showTags = true, meta, className, ...attrs }, ref) {
     const favAdapter = useService(CompatibleFavoriteItemsAdapter);
     const workspace = useService(WorkspaceService).workspace;
 
@@ -54,7 +55,7 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
             emptyFallback={<div className={styles.contentEmpty}>Empty</div>}
           />
         </main>
-        <DocCardTags docId={meta.id} rows={2} />
+        {showTags ? <DocCardTags docId={meta.id} rows={2} /> : null}
       </WorkbenchLink>
     );
   }

packages/frontend/mobile/src/components/doc-card/tag.tsx

@@ -122,7 +122,7 @@ const DocCardTagsRenderer = ({ tags, rows }: { tags: Tag[]; rows: number }) => {
       {tags.map(tag => (
         <DocCardTag key={tag.id} tag={tag} />
       ))}
-      {/* TODO: more icon */}
+      {/* TODO(@CatsJuice): more icon */}
       {/* <MoreHorizontalIcon /> */}
     </ul>
   );

packages/frontend/mobile/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './app-tabs';
+export * from './doc-card';
 export * from './page-header';
 export * from './search-button';
 export * from './workspace-selector';

packages/frontend/mobile/src/components/page-header/styles.css.ts

@@ -1,20 +1,31 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
   width: '100%',
   minHeight: 44,
   padding: '0 6px',
+  paddingTop: 16,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  position: 'relative',
+
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+  backgroundColor: cssVarV2('layer/background/secondary'),
 });
 export const content = style({
   selectors: {
     '&.center': {
       position: 'absolute',
       left: '50%',
       transform: 'translateX(-50%)',
+      width: 'fit-content',
+      maxWidth: 'calc(100% - 12px - 88px - 16px)',
+      display: 'flex',
+      justifyContent: 'center',
+      pointerEvents: 'none',
     },
     '&:not(.center)': {
       width: 0,