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

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
   );