From 95c2e20cb5ee81ac9b834ec81ad60b424275d1b2 Mon Sep 17 00:00:00 2001
From: Pratik Kumar <kpratik1929@gmail.com>
Date: Thu, 6 Jul 2023 11:26:08 +0530
Subject: [PATCH] fix(component): all page list UI padding (#3046)

Co-authored-by: Alex Yang <himself65@outlook.com>
---
 .../src/components/page-list/all-page.tsx     | 111 ++++++++++--------
 1 file changed, 65 insertions(+), 46 deletions(-)

diff --git a/packages/component/src/components/page-list/all-page.tsx b/packages/component/src/components/page-list/all-page.tsx
index 199d938b8..49513adb9 100644
--- a/packages/component/src/components/page-list/all-page.tsx
+++ b/packages/component/src/components/page-list/all-page.tsx
@@ -6,7 +6,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowDownBigIcon, ArrowUpBigIcon } from '@blocksuite/icons';
 import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
-import { type CSSProperties } from 'react';
+import { type CSSProperties, useMemo } from 'react';
 
 import {
   ScrollableContainer,
@@ -46,53 +46,67 @@ const AllPagesHead = ({
   propertiesMeta: PropertiesMeta;
 }) => {
   const t = useAFFiNEI18N();
-  const titleList = [
-    {
-      key: 'title',
-      content: t['Title'](),
-      proportion: 0.5,
-    },
-    {
-      key: 'tags',
-      content: t['Tags'](),
-      proportion: 0.2,
-    },
-    {
-      key: 'createDate',
-      content: t['Created'](),
-      proportion: 0.1,
-    },
-    {
-      key: 'updatedDate',
-      content: t['Updated'](),
-      proportion: 0.1,
-    },
-    {
-      key: 'unsortable_action',
-      content: (
-        <NewPageButton
-          createNewPage={createNewPage}
-          createNewEdgeless={createNewEdgeless}
-          importFile={importFile}
-        />
-      ),
-      showWhen: () => !isPublicWorkspace,
-      sortable: false,
-      styles: {
-        justifyContent: 'flex-end',
-      } satisfies CSSProperties,
-    },
-  ];
-  return (
-    <TableHead>
-      <TableHeadRow>
-        {titleList
-          .filter(({ showWhen = () => true }) => showWhen())
-          .map(({ key, content, proportion, sortable = true, styles }) => (
+  const titleList = useMemo(
+    () => [
+      {
+        key: 'title',
+        content: t['Title'](),
+        proportion: 0.5,
+      },
+      {
+        key: 'tags',
+        content: t['Tags'](),
+        proportion: 0.2,
+      },
+      {
+        key: 'createDate',
+        content: t['Created'](),
+        proportion: 0.1,
+      },
+      {
+        key: 'updatedDate',
+        content: t['Updated'](),
+        proportion: 0.1,
+      },
+      {
+        key: 'unsortable_action',
+        content: (
+          <NewPageButton
+            createNewPage={createNewPage}
+            createNewEdgeless={createNewEdgeless}
+            importFile={importFile}
+          />
+        ),
+        showWhen: () => !isPublicWorkspace,
+        sortable: false,
+        tableCellStyle: {
+          minWidth: '130px',
+        } satisfies CSSProperties,
+        styles: {
+          justifyContent: 'flex-end',
+        } satisfies CSSProperties,
+      },
+    ],
+    [createNewEdgeless, createNewPage, importFile, isPublicWorkspace, t]
+  );
+  const tableItem = useMemo(
+    () =>
+      titleList
+        .filter(({ showWhen = () => true }) => showWhen())
+        .map(
+          ({
+            key,
+            content,
+            proportion,
+            sortable = true,
+            styles,
+            tableCellStyle,
+          }) => (
             <TableCell
               key={key}
               proportion={proportion}
               active={sorter.key === key}
+              style={tableCellStyle}
               onClick={
                 sortable
                   ? () => sorter.shiftOrder(key as keyof ListData)
@@ -115,8 +129,13 @@ const AllPagesHead = ({
                   ))}
               </div>
             </TableCell>
-          ))}
-      </TableHeadRow>
+          )
+        ),
+    [sorter, titleList]
+  );
+  return (
+    <TableHead>
+      <TableHeadRow>{tableItem}</TableHeadRow>
       <CollectionBar
         columnsCount={titleList.length}
         getPageInfo={getPageInfo}