From 9b791b4f3c77ca17ee59c758ed09f5b7d13fc805 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 7 Nov 2024 14:21:26 +0800
Subject: [PATCH] feat(mobile): use cached random height for all docs masonry

---
 .../src/mobile/components/doc-card/index.tsx  | 17 ++++++-
 .../mobile/components/doc-card/styles.css.tsx |  1 -
 .../mobile/views/all-docs/doc/masonry.css.ts  |  3 --
 .../src/mobile/views/all-docs/doc/masonry.tsx | 48 ++++++++++++++-----
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/core/src/mobile/components/doc-card/index.tsx b/packages/frontend/core/src/mobile/components/doc-card/index.tsx
index dfd0509735978..0a17cb21cb92a 100644
--- a/packages/frontend/core/src/mobile/components/doc-card/index.tsx
+++ b/packages/frontend/core/src/mobile/components/doc-card/index.tsx
@@ -21,10 +21,18 @@ export interface DocCardProps extends Omit<WorkbenchLinkProps, 'to'> {
     title?: ReactNode;
   } & { [key: string]: any };
   showTags?: boolean;
+
+  /**
+   * If provided, content's height will be calculated: `previewRows * line-height`
+   */
+  previewRows?: number;
 }
 
 export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
-  function DocCard({ showTags = true, meta, className, ...attrs }, ref) {
+  function DocCard(
+    { showTags = true, meta, className, previewRows, ...attrs },
+    ref
+  ) {
     const favAdapter = useService(CompatibleFavoriteItemsAdapter);
     const workspace = useService(WorkspaceService).workspace;
 
@@ -38,6 +46,8 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
       [favAdapter, meta.id]
     );
 
+    const contentHeight = previewRows ? `${previewRows * 18}px` : 'unset';
+
     return (
       <WorkbenchLink
         to={`/${meta.id}`}
@@ -57,7 +67,10 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
             }
           />
         </header>
-        <main className={styles.content}>
+        <main
+          className={styles.content}
+          style={{ height: contentHeight, flex: contentHeight ? 'unset' : 1 }}
+        >
           <PagePreview
             docCollection={workspace.docCollection}
             pageId={meta.id}
diff --git a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx b/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
index d2b562b055632..ffca37f3b26e2 100644
--- a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
+++ b/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx
@@ -43,7 +43,6 @@ export const untitled = style({
 export const content = style([
   footnoteRegular,
   {
-    flex: 1,
     overflow: 'hidden',
   },
 ]);
diff --git a/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.css.ts b/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.css.ts
index c1e5b2f46b3a0..4fe2ac27d6965 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.css.ts
+++ b/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.css.ts
@@ -8,9 +8,6 @@ export const masonry = style({
   columnGap: columnGap,
 });
 export const masonryItem = style({
-  display: 'grid',
-  gridTemplateRows: '1fr auto',
   breakInside: 'avoid',
   marginBottom: 10,
 });
-export const space = style({ width: '100%', height: 16 });
diff --git a/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.tsx b/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.tsx
index 52faa91242ac1..570996cd14602 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.tsx
+++ b/packages/frontend/core/src/mobile/views/all-docs/doc/masonry.tsx
@@ -1,10 +1,23 @@
 import { useGlobalEvent } from '@affine/core/mobile/hooks/use-global-events';
 import type { DocMeta } from '@blocksuite/affine/store';
-import { useCallback, useEffect, useState } from 'react';
+import { GlobalCacheService, useService } from '@toeverything/infra';
+import { useCallback, useMemo, useState } from 'react';
 
 import { DocCard } from '../../../components';
 import * as styles from './masonry.css';
 
+const rows = [3, 4, 5, 6, 7];
+const cacheKey = 'masonryPreviewRows';
+
+const calcColumnCount = () => {
+  const maxCardWidth = 220;
+  const windowWidth = window.innerWidth;
+  const newColumnCount = Math.floor(
+    (windowWidth - styles.paddingX * 2 - styles.columnGap) / maxCardWidth
+  );
+  return Math.max(newColumnCount, 2);
+};
+
 export const MasonryDocs = ({
   items,
   showTags,
@@ -12,30 +25,39 @@ export const MasonryDocs = ({
   items: DocMeta[];
   showTags?: boolean;
 }) => {
-  const [columnCount, setColumnCount] = useState(2);
+  const globalCache = useService(GlobalCacheService).globalCache;
+  const [columnCount, setColumnCount] = useState(calcColumnCount());
 
   const updateColumnCount = useCallback(() => {
-    const maxCardWidth = 220;
-    const windowWidth = window.innerWidth;
-    const newColumnCount = Math.floor(
-      (windowWidth - styles.paddingX * 2 - styles.columnGap) / maxCardWidth
-    );
-    setColumnCount(Math.max(newColumnCount, 2));
+    setColumnCount(calcColumnCount());
   }, []);
-
   useGlobalEvent('resize', updateColumnCount);
-  useEffect(() => {
-    updateColumnCount();
-  }, [updateColumnCount]);
+
+  // Randomly assign preview rows to each item and cache it
+  const previewRowsMap = useMemo(() => {
+    const cache = globalCache.get<Record<string, number>>(cacheKey) || {};
+    const newCache = items.reduce(
+      (acc, item) => {
+        if (cache[item.id]) return acc;
+        const row = rows[Math.floor(Math.random() * rows.length)];
+        acc[item.id] = row;
+        return acc;
+      },
+      { ...cache }
+    );
+    globalCache.set(cacheKey, newCache);
+    return newCache;
+  }, [globalCache, items]);
 
   return (
     <div className={styles.masonry} style={{ columnCount }}>
       {items.map(item => (
         <DocCard
           key={item.id}
+          className={styles.masonryItem}
+          previewRows={previewRowsMap[item.id]}
           showTags={showTags}
           meta={item}
-          className={styles.masonryItem}
         />
       ))}
     </div>