From 61dc4a56f90e852b58350e50410cacfbc54d408f Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Fri, 3 Nov 2023 14:16:25 +0800
Subject: [PATCH] fix(core): implement pricing plans scroll area with radix
 (#4824)

---
 .../general-setting/plans/layout.css.ts       | 27 +++++++++++++------
 .../general-setting/plans/layout.tsx          | 16 ++++++++---
 .../components/affine/setting-modal/index.tsx |  4 +--
 .../setting-modal/setting-sidebar/index.tsx   |  4 ++-
 4 files changed, 37 insertions(+), 14 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 72ab6ab5b..738ba740a 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
@@ -13,15 +13,26 @@ export const scrollArea = style({
   overflowX: 'auto',
   scrollSnapType: 'x mandatory',
   paddingBottom: '21px',
+});
 
-  '::-webkit-scrollbar': {
-    display: 'block',
-    height: '5px',
-    background: 'transparent',
-  },
-  '::-webkit-scrollbar-thumb': {
-    background: 'var(--affine-icon-secondary)',
-    borderRadius: '5px',
+export const scrollBar = style({
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  touchAction: 'none',
+  height: '9px',
+  width: '100%',
+});
+
+export const scrollThumb = style({
+  background: 'var(--affine-icon-secondary)',
+  opacity: 0.6,
+  overflow: 'hidden',
+  height: '4px',
+  borderRadius: '4px',
+
+  vars: {
+    '--radix-scroll-area-thumb-height': '4px',
   },
 });
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
index 89388f406..bbb946db0 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.tsx
@@ -1,6 +1,7 @@
 import { SettingHeader } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightBigIcon } from '@blocksuite/icons';
+import * as ScrollArea from '@radix-ui/react-scroll-area';
 import type { HtmlHTMLAttributes, ReactNode } from 'react';
 
 import * as styles from './layout.css';
@@ -49,9 +50,18 @@ export const PlanLayout = ({
         subtitle={subtitle}
       />
       {tabs}
-      <div ref={scrollRef} className={styles.scrollArea}>
-        {scroll}
-      </div>
+      <ScrollArea.Root>
+        <ScrollArea.Viewport ref={scrollRef} className={styles.scrollArea}>
+          {scroll}
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          forceMount
+          orientation="horizontal"
+          className={styles.scrollBar}
+        >
+          <ScrollArea.Thumb className={styles.scrollThumb}></ScrollArea.Thumb>
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
       {footer}
     </div>
   );
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 0a6dca33d..2a217fb5f 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
@@ -3,7 +3,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ContactWithUsIcon } from '@blocksuite/icons';
 import { Modal, type ModalProps } from '@toeverything/components/modal';
 import { debounce } from 'lodash-es';
-import { Suspense, useCallback, useEffect, useRef } from 'react';
+import { Suspense, useCallback, useLayoutEffect, useRef } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { AccountSetting } from './account-setting';
@@ -41,7 +41,7 @@ export const SettingModal = ({
   const modalContentRef = useRef<HTMLDivElement>(null);
   const modalContentWrapperRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!modalProps.open) return;
     let animationFrameId: number;
     const onResize = debounce(() => {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index a2c8744e3..337439b45 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -162,7 +162,9 @@ export const SettingSidebar = ({
         ) : null}
 
         {runtimeConfig.enableCloud && loginStatus === 'authenticated' ? (
-          <UserInfo onAccountSettingClick={onAccountSettingClick} />
+          <Suspense>
+            <UserInfo onAccountSettingClick={onAccountSettingClick} />
+          </Suspense>
         ) : null}
       </div>
     </div>