From b9d84fe0072864d5af2f2cbd49bab412a9159388 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 18 Jul 2024 04:06:02 +0000
Subject: [PATCH] fix(core): select page modal's list is not visiable (#7531)

fix AF-1076

![CleanShot 2024-07-18 at 10.18.41.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/9bff1f9e-f752-4cb2-87ad-0da62d69effa.gif)
---
 .../page-list/view/edit-collection/select-page.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
index 08c9feffea..b51dc18fbc 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
@@ -9,6 +9,9 @@ import { useCallback, useState } from 'react';
 
 import { FilterList } from '../../filter';
 import { VariableSelect } from '../../filter/vars';
+import { usePageHeaderColsDef } from '../../header-col-def';
+import { PageListItemRenderer } from '../../page-group';
+import { ListTableHeader } from '../../page-header';
 import type { ListItem } from '../../types';
 import { VirtualizedList } from '../../virtualized-list';
 import { AffineShapeIcon } from '../affine-shape';
@@ -38,6 +41,7 @@ export const SelectPage = ({
   }, []);
   const favAdapter = useService(FavoriteItemsAdapter);
   const favourites = useLiveData(favAdapter.favorites$);
+  const pageHeaderColsDef = usePageHeaderColsDef();
   const {
     clickFilter,
     createFilter,
@@ -63,6 +67,14 @@ export const SelectPage = ({
     [allPageListConfig]
   );
 
+  const pageHeaderRenderer = useCallback(() => {
+    return <ListTableHeader headerCols={pageHeaderColsDef} />;
+  }, [pageHeaderColsDef]);
+
+  const pageItemRenderer = useCallback((item: ListItem) => {
+    return <PageListItemRenderer {...item} />;
+  }, []);
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <input
@@ -125,6 +137,8 @@ export const SelectPage = ({
             selectedIds={value}
             isPreferredEdgeless={allPageListConfig.isEdgeless}
             operationsRenderer={operationsRenderer}
+            itemRenderer={pageItemRenderer}
+            headerRenderer={pageHeaderRenderer}
           />
         ) : (
           <EmptyList search={searchText} />