feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/components/setting-components/setting-row.tsx

@@ -3,14 +3,15 @@ import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 
 import { settingRow } from './share.css';
 
-type SettingRowProps = {
+export type SettingRowProps = PropsWithChildren<{
   name: ReactNode;
   desc: ReactNode;
   style?: CSSProperties;
   onClick?: () => void;
   spreadCol?: boolean;
   'data-testid'?: string;
-};
+  disabled?: boolean;
+}>;
 
 export const SettingRow = ({
   name,
@@ -19,12 +20,14 @@ export const SettingRow = ({
   onClick,
   style,
   spreadCol = true,
+  disabled = false,
   ...props
 }: PropsWithChildren<SettingRowProps>) => {
   return (
     <div
       className={clsx(settingRow, {
         'two-col': spreadCol,
+        disabled,
       })}
       style={style}
       onClick={onClick}

packages/component/src/components/setting-components/share.css.ts

@@ -53,6 +53,18 @@ export const settingRow = style({
     '&:last-of-type': {
       marginBottom: '0',
     },
+    '&.disabled': {
+      position: 'relative',
+    },
+    '&.disabled::after': {
+      content: '',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(255,255,255,0.5)',
+    },
   },
 });