From 7234e2344b98513de5967061aa4846261d619a00 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 7 May 2024 03:19:40 +0000
Subject: [PATCH] feat(core): replace setting content scroll with radix
 ScrollArea (#6787)

Use global scroll-area style

![CleanShot 2024-05-07 at 10.58.01@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/5330b59d-fea0-4b2b-a046-1740c8099a19.png)
---
 .../general-setting/plans/layout.css.ts       |  7 +-
 .../components/affine/setting-modal/index.tsx | 91 ++++++++++---------
 .../affine/setting-modal/style.css.ts         |  5 -
 3 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts
index 59657ef14..cce52eb51 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts
@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { keyframes, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 export const plansLayoutRoot = style({
   display: 'flex',
   flexDirection: 'column',
@@ -100,7 +100,6 @@ export const aiScrollTip = style({
   justifyContent: 'space-between',
   padding: '12px 20px 12px 16px',
   boxShadow: cssVar('shadow1'),
-  display: 'flex',
   marginBottom: -100,
 
   animation: `${slideInBottom} 0.3s ease 0.5s forwards`,
@@ -112,6 +111,10 @@ export const aiScrollTip = style({
     },
   },
 });
+// to override `display: contents !important` in `scrollable.tsx`
+globalStyle(`div.${aiScrollTip}`, {
+  display: 'flex !important',
+});
 export const aiScrollTipLabel = style({
   display: 'flex',
   alignItems: 'center',
diff --git a/packages/frontend/core/src/components/affine/setting-modal/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
index 048ed26f9..473968904 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
@@ -1,4 +1,4 @@
-import { Loading } from '@affine/component';
+import { Loading, Scrollable } from '@affine/component';
 import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import type { ModalProps } from '@affine/component/ui/modal';
 import { Modal } from '@affine/component/ui/modal';
@@ -139,51 +139,54 @@ const SettingModalInner = ({
         onTabChange={onTabChange}
         selectedWorkspaceId={workspaceMetadata?.id ?? null}
       />
-      <div
-        data-testid="setting-modal-content"
-        className={style.wrapper}
-        ref={modalContentWrapperRef}
-      >
-        <div ref={modalContentRef} className={style.centerContainer}>
-          <div className={style.content}>
-            <Suspense fallback={<WorkspaceDetailSkeleton />}>
-              {activeTab.startsWith('workspace:') && workspaceMetadata ? (
-                <WorkspaceSetting
-                  subTab={activeTab.split(':')[1] as WorkspaceSubTab}
-                  key={workspaceMetadata.id}
-                  workspaceMetadata={workspaceMetadata}
-                />
-              ) : null}
-              {isGeneralSetting(activeTab) ? (
-                <GeneralSetting generalKey={activeTab} />
-              ) : null}
-              {activeTab === 'account' && loginStatus === 'authenticated' ? (
-                <AccountSetting />
-              ) : null}
-            </Suspense>
-          </div>
-          <div className={style.footer}>
-            <ContactWithUsIcon fontSize={16} />
-            <Trans
-              i18nKey={'com.affine.settings.suggestion-2'}
-              components={{
-                1: (
-                  <span
-                    className={style.link}
-                    onClick={handleOpenStarAFFiNEModal}
+      <Scrollable.Root>
+        <Scrollable.Viewport
+          data-testid="setting-modal-content"
+          className={style.wrapper}
+          ref={modalContentWrapperRef}
+        >
+          <div ref={modalContentRef} className={style.centerContainer}>
+            <div className={style.content}>
+              <Suspense fallback={<WorkspaceDetailSkeleton />}>
+                {activeTab.startsWith('workspace:') && workspaceMetadata ? (
+                  <WorkspaceSetting
+                    subTab={activeTab.split(':')[1] as WorkspaceSubTab}
+                    key={workspaceMetadata.id}
+                    workspaceMetadata={workspaceMetadata}
                   />
-                ),
-                2: (
-                  <span
-                    className={style.link}
-                    onClick={handleOpenIssueFeedbackModal}
-                  />
-                ),
-              }}
-            />
+                ) : null}
+                {isGeneralSetting(activeTab) ? (
+                  <GeneralSetting generalKey={activeTab} />
+                ) : null}
+                {activeTab === 'account' && loginStatus === 'authenticated' ? (
+                  <AccountSetting />
+                ) : null}
+              </Suspense>
+            </div>
+            <div className={style.footer}>
+              <ContactWithUsIcon fontSize={16} />
+              <Trans
+                i18nKey={'com.affine.settings.suggestion-2'}
+                components={{
+                  1: (
+                    <span
+                      className={style.link}
+                      onClick={handleOpenStarAFFiNEModal}
+                    />
+                  ),
+                  2: (
+                    <span
+                      className={style.link}
+                      onClick={handleOpenIssueFeedbackModal}
+                    />
+                  ),
+                }}
+              />
+            </div>
           </div>
-        </div>
-      </div>
+          <Scrollable.Scrollbar />
+        </Scrollable.Viewport>
+      </Scrollable.Root>
     </>
   );
 };
diff --git a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
index 8b95a4e82..09585539c 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
@@ -5,13 +5,8 @@ export const wrapper = style({
   height: '100%',
   // margin: '0 auto',
   padding: '40px 15px 20px 15px',
-  overflowX: 'hidden',
-  overflowY: 'auto',
   display: 'flex',
   justifyContent: 'center',
-  '::-webkit-scrollbar': {
-    display: 'none',
-  },
 });
 export const centerContainer = style({
   width: '100%',