From 6abca6a6a034e52b49587800f895b4eeb672f20e Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Thu, 8 Aug 2024 07:54:21 +0000
Subject: [PATCH 01/11] add  SimpleBar  to PageSelectModal

---
 .../PageSelectModal.module.scss               |  3 ++
 .../PageSelectModal/PageSelectModal.tsx       | 46 +++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss b/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss
new file mode 100644
index 00000000000..9b0507b0582
--- /dev/null
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss
@@ -0,0 +1,3 @@
+.grw-page-select-modal-wrapper {
+  height: 50vh;
+}
diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index f59c5a76ce6..117bc95909f 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import {
   Suspense, useState, useCallback,
+  memo,
 } from 'react';
 
 import nodePath from 'path';
@@ -19,9 +20,30 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { ItemsTree } from '../ItemsTree';
 import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
+import { StickyStretchableScroller } from '../StickyStretchableScroller';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
+import 'simplebar';
+import 'simplebar/dist/simplebar.css';
+
+const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
+
+  const { children } = props;
+
+  const calcViewHeight = useCallback(() => {
+    return window.innerHeight / 2;
+  }, []);
+
+  return (
+    <div className="grw-page-select-modal-wrapper">
+      <div data-simplebar>
+        { children }
+      </div>
+    </div>
+  );
+});
+
 export const PageSelectModal: FC = () => {
   const {
     data: PageSelectModalData,
@@ -85,17 +107,21 @@ export const PageSelectModal: FC = () => {
       size="sm"
     >
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
-      <ModalBody>
+      <ModalBody className="p-0">
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
-          <ItemsTree
-            CustomTreeItem={TreeItemForModal}
-            isEnableActions={!isGuestUser}
-            isReadOnlyUser={!!isReadOnlyUser}
-            targetPath={targetPath}
-            targetPathOrId={targetPathOrId}
-            targetAndAncestorsData={targetAndAncestorsData}
-            onClickTreeItem={onClickTreeItem}
-          />
+          <TreeForModalWrapper>
+            <div className="p-3">
+              <ItemsTree
+                CustomTreeItem={TreeItemForModal}
+                isEnableActions={!isGuestUser}
+                isReadOnlyUser={!!isReadOnlyUser}
+                targetPath={targetPath}
+                targetPathOrId={targetPathOrId}
+                targetAndAncestorsData={targetAndAncestorsData}
+                onClickTreeItem={onClickTreeItem}
+              />
+            </div>
+          </TreeForModalWrapper>
         </Suspense>
       </ModalBody>
       <ModalFooter>

From b88291a47934a664305a8c9d8c9a23f6e202d306 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Fri, 9 Aug 2024 05:18:24 +0000
Subject: [PATCH 02/11]  StickyStretchableScroller delete

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 117bc95909f..a0cd4bdefa4 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -20,7 +20,6 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { ItemsTree } from '../ItemsTree';
 import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
-import { StickyStretchableScroller } from '../StickyStretchableScroller';
 
 import { TreeItemForModal } from './TreeItemForModal';
 

From 40c528af495466c3c2ed85804c790db732da3cad Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Fri, 9 Aug 2024 05:20:54 +0000
Subject: [PATCH 03/11] calcViewHeight  delete

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index a0cd4bdefa4..8bcfe6f5cf0 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -30,9 +30,6 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
 
   const { children } = props;
 
-  const calcViewHeight = useCallback(() => {
-    return window.innerHeight / 2;
-  }, []);
 
   return (
     <div className="grw-page-select-modal-wrapper">

From cc50ee76be7fa604db276a8dc4ee6936f86a9e1b Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Fri, 9 Aug 2024 08:22:10 +0000
Subject: [PATCH 04/11] SimpleBar add

---
 .../components/PageSelectModal/PageSelectModal.tsx     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 8bcfe6f5cf0..6342f21ee8b 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
+import SimpleBar from 'simplebar-react';
 
 import type { IPageForItem } from '~/interfaces/page';
 import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
@@ -23,19 +24,16 @@ import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
-import 'simplebar';
-import 'simplebar/dist/simplebar.css';
+import 'simplebar-react/dist/simplebar.min.css';
 
 const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
 
   const { children } = props;
-
-
   return (
     <div className="grw-page-select-modal-wrapper">
-      <div data-simplebar>
+      <SimpleBar style={{ maxHeight: 500 }}>
         { children }
-      </div>
+      </SimpleBar>
     </div>
   );
 });

From 13957f2b57685427b2477f80f6b69f0361bfa09a Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 26 Aug 2024 06:59:28 +0000
Subject: [PATCH 05/11] size change

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 6342f21ee8b..16a018604a8 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -31,7 +31,7 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
   const { children } = props;
   return (
     <div className="grw-page-select-modal-wrapper">
-      <SimpleBar style={{ maxHeight: 500 }}>
+      <SimpleBar style={{ maxHeight: 350 }}>
         { children }
       </SimpleBar>
     </div>
@@ -98,7 +98,7 @@ export const PageSelectModal: FC = () => {
       isOpen={isOpened}
       toggle={closeModal}
       centered
-      size="sm"
+      size="lg"
     >
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
       <ModalBody className="p-0">

From a5b70e7af4f20c052d568cb9c9c7250c20f18ef8 Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 2 Sep 2024 07:52:38 +0000
Subject: [PATCH 06/11] component delete

---
 .../PageSelectModal/PageSelectModal.tsx           | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 16a018604a8..2d21927d3cc 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -26,17 +26,6 @@ import { TreeItemForModal } from './TreeItemForModal';
 
 import 'simplebar-react/dist/simplebar.min.css';
 
-const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
-
-  const { children } = props;
-  return (
-    <div className="grw-page-select-modal-wrapper">
-      <SimpleBar style={{ maxHeight: 350 }}>
-        { children }
-      </SimpleBar>
-    </div>
-  );
-});
 
 export const PageSelectModal: FC = () => {
   const {
@@ -103,7 +92,7 @@ export const PageSelectModal: FC = () => {
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
       <ModalBody className="p-0">
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
-          <TreeForModalWrapper>
+          <SimpleBar style={{ maxHeight: 350 }}>
             <div className="p-3">
               <ItemsTree
                 CustomTreeItem={TreeItemForModal}
@@ -115,7 +104,7 @@ export const PageSelectModal: FC = () => {
                 onClickTreeItem={onClickTreeItem}
               />
             </div>
-          </TreeForModalWrapper>
+          </SimpleBar>
         </Suspense>
       </ModalBody>
       <ModalFooter>

From 15d620693c3cf2a9e46d419d8b9257a52e5e3cdb Mon Sep 17 00:00:00 2001
From: kazutoweseek <kazuto-u@weseek.co.jp>
Date: Mon, 2 Sep 2024 08:42:25 +0000
Subject: [PATCH 07/11] memo delete

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 2d21927d3cc..14eb46881ba 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import {
   Suspense, useState, useCallback,
-  memo,
 } from 'react';
 
 import nodePath from 'path';

From 80072af8f56df658f5e91f5a01c8a3dc5a9b1916 Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 2 Sep 2024 13:48:20 +0000
Subject: [PATCH 08/11] remove unnecessary file

---
 .../components/PageSelectModal/PageSelectModal.module.scss     | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss b/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss
deleted file mode 100644
index 9b0507b0582..00000000000
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.grw-page-select-modal-wrapper {
-  height: 50vh;
-}

From d29282360095db638845facb44aaf04575650932 Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 2 Sep 2024 13:49:23 +0000
Subject: [PATCH 09/11] improve modal size

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 14eb46881ba..87d1d984b12 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -86,7 +86,6 @@ export const PageSelectModal: FC = () => {
       isOpen={isOpened}
       toggle={closeModal}
       centered
-      size="lg"
     >
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
       <ModalBody className="p-0">

From e5810a2d1e43c03e39479febc2317e42b649f9ab Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 2 Sep 2024 13:49:33 +0000
Subject: [PATCH 10/11] improve simple-bar height calculation

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 87d1d984b12..5e6abc6410c 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -90,7 +90,7 @@ export const PageSelectModal: FC = () => {
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
       <ModalBody className="p-0">
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
-          <SimpleBar style={{ maxHeight: 350 }}>
+          <SimpleBar style={{ maxHeight: 'calc(85vh - 133px)' }}> {/* 133px = 63px(ModalHeader) + 70px(ModalFooter) */}
             <div className="p-3">
               <ItemsTree
                 CustomTreeItem={TreeItemForModal}

From f1e7df6d783e60ddfb9550cf2f576c7f1d7fb6bf Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 2 Sep 2024 13:51:59 +0000
Subject: [PATCH 11/11] remove unnecessary style imports

---
 .../src/client/components/PageSelectModal/PageSelectModal.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
index 5e6abc6410c..c9fbc1ed780 100644
--- a/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
@@ -23,8 +23,6 @@ import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
-import 'simplebar-react/dist/simplebar.min.css';
-
 
 export const PageSelectModal: FC = () => {
   const {