fix(core): implement pricing plans scroll area with radix (#4824)

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',
   },
 });
 

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>
   );

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(() => {

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>