fix: a series of setting issues (#3032)

apps/web/src/components/affine/setting-modal/index.tsx

@@ -2,18 +2,15 @@ import {
   SettingModal as SettingModalBase,
   type SettingModalProps,
 } from '@affine/component/setting-components';
-import type {
-  AffineCloudWorkspace,
-  LocalWorkspace,
-} from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ContactWithUsIcon } from '@blocksuite/icons';
 import type React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useWorkspaces } from '../../../hooks/use-workspaces';
+import type { AllWorkspace } from '../../../shared';
 import { AccountSetting } from './account-setting';
 import {
   GeneralSetting,
@@ -22,80 +19,79 @@ import {
 } from './general-setting';
 import { SettingSidebar } from './setting-sidebar';
 import { settingContent } from './style.css';
-import type { Workspace } from './type';
 import { WorkSpaceSetting } from './workspace-setting';
 
-export const SettingModal: React.FC<SettingModalProps> = ({
+type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
+export type SettingProps = {
+  activeTab?: ActiveTab;
+  workspace?: AllWorkspace;
+  onSettingClick: (params: {
+    activeTab: ActiveTab;
+    workspace?: AllWorkspace;
+  }) => void;
+};
+export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
   open,
   setOpen,
+  activeTab = 'appearance',
+  workspace = null,
+  onSettingClick,
 }) => {
   const t = useAFFiNEI18N();
+
   const workspaces = useWorkspaces();
   const [currentWorkspace] = useCurrentWorkspace();
   const generalSettingList = useGeneralSettingList();
   const workspaceList = useMemo(() => {
     return workspaces.filter(
       ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
-    ) as Workspace[];
+    ) as AllWorkspace[];
   }, [workspaces]);
 
-  const [currentRef, setCurrentRef] = useState<{
-    workspace: Workspace | null;
-    generalKey: GeneralSettingKeys | null;
-    isAccount: boolean;
-  }>({
-    workspace: null,
-    generalKey: generalSettingList[0].key,
-    isAccount: false,
-  });
-
-  const onGeneralSettingClick = useCallback((key: GeneralSettingKeys) => {
-    setCurrentRef({
-      workspace: null,
-      generalKey: key,
-      isAccount: false,
-    });
-  }, []);
-  const onWorkspaceSettingClick = useCallback((workspace: Workspace) => {
-    setCurrentRef({
-      workspace: workspace,
-      generalKey: null,
-      isAccount: false,
-    });
-  }, []);
+  const onGeneralSettingClick = useCallback(
+    (key: GeneralSettingKeys) => {
+      onSettingClick({
+        activeTab: key,
+      });
+    },
+    [onSettingClick]
+  );
+  const onWorkspaceSettingClick = useCallback(
+    (workspace: AllWorkspace) => {
+      onSettingClick({
+        activeTab: 'workspace',
+        workspace,
+      });
+    },
+    [onSettingClick]
+  );
   const onAccountSettingClick = useCallback(() => {
-    setCurrentRef({
-      workspace: null,
-      generalKey: null,
-      isAccount: true,
-    });
-  }, []);
+    onSettingClick({ activeTab: 'account' });
+  }, [onSettingClick]);
 
   return (
     <SettingModalBase open={open} setOpen={setOpen}>
       <SettingSidebar
         generalSettingList={generalSettingList}
         onGeneralSettingClick={onGeneralSettingClick}
-        currentWorkspace={
-          currentWorkspace as AffineCloudWorkspace | LocalWorkspace
-        }
+        currentWorkspace={currentWorkspace as AllWorkspace}
         workspaceList={workspaceList}
         onWorkspaceSettingClick={onWorkspaceSettingClick}
-        selectedGeneralKey={currentRef.generalKey}
-        selectedWorkspace={currentRef.workspace}
+        selectedGeneralKey={activeTab}
+        selectedWorkspace={workspace}
         onAccountSettingClick={onAccountSettingClick}
       />
 
       <div className={settingContent}>
         <div className="wrapper">
           <div className="content">
-            {currentRef.workspace ? (
-              <WorkSpaceSetting workspace={currentRef.workspace} />
+            {activeTab === 'workspace' && workspace ? (
+              <WorkSpaceSetting workspace={workspace} />
             ) : null}
-            {currentRef.generalKey ? (
-              <GeneralSetting generalKey={currentRef.generalKey} />
+            {generalSettingList.find(v => v.key === activeTab) ? (
+              <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
             ) : null}
-            {currentRef.isAccount ? <AccountSetting /> : null}
+            {activeTab === 'account' ? <AccountSetting /> : null}
           </div>
           <div className="footer">
             <ContactWithUsIcon />