refactor(core): move setting dialog to workspace scope (#9706)

packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx

@@ -1,6 +1,6 @@
 import { Button, FlexWrapper, notify } from '@affine/component';
 import { SubscriptionService } from '@affine/core/modules/cloud';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
@@ -50,18 +50,18 @@ export const AIOnboardingEdgeless = () => {
   const notifyId = useLiveData(edgelessNotifyId$);
   const generalAIOnboardingOpened = useLiveData(showAIOnboardingGeneral$);
   const aiSubscription = useLiveData(subscriptionService.subscription.ai$);
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const mode = useLiveData(editorService.editor.mode$);
 
   const goToPricingPlans = useCallback(() => {
     track.$.aiOnboarding.dialog.viewPlans();
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'aiPricingPlan',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   useEffect(() => {
     if (generalAIOnboardingOpened) return;

packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx

@@ -1,7 +1,7 @@
 import { Button, IconButton, Modal } from '@affine/component';
 import { useBlurRoot } from '@affine/core/components/hooks/use-blur-root';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { Trans, useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
@@ -95,7 +95,7 @@ export const AIOnboardingGeneral = () => {
   const aiSubscription = useLiveData(subscriptionService.subscription.ai$);
   const [index, setIndex] = useState(0);
   const list = useMemo(() => getPlayList(t), [t]);
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const readyToOpen = isLoggedIn;
   useBlurRoot(open && readyToOpen);
 
@@ -110,13 +110,13 @@ export const AIOnboardingGeneral = () => {
     toggleGeneralAIOnboarding(false);
   }, []);
   const goToPricingPlans = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'aiPricingPlan',
     });
     track.$.aiOnboarding.dialog.viewPlans();
     closeAndDismiss();
-  }, [closeAndDismiss, globalDialogService]);
+  }, [closeAndDismiss, workspaceDialogService]);
   const onPrev = useCallback(() => {
     setIndex(i => Math.max(0, i - 1));
   }, []);

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -2,7 +2,7 @@ import { Loading, Scrollable } from '@affine/component';
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { Modal, useConfirmModal } from '@affine/component/ui/modal';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
@@ -187,18 +187,18 @@ const PlanPrompt = () => {
   }, [permissionService]);
 
   const [planPromptClosed, setPlanPromptClosed] = useAtom(planPromptClosedAtom);
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const closeFreePlanPrompt = useCallback(() => {
     setPlanPromptClosed(true);
   }, [setPlanPromptClosed]);
 
   const onClickUpgrade = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'cloudPricingPlan',
     });
     track.$.docHistory.$.viewPlans();
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const t = useI18n();
 

packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx

@@ -1,7 +1,7 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { openQuotaModalAtom } from '@affine/core/components/atoms';
 import { UserQuotaService } from '@affine/core/modules/cloud';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { WorkspaceService } from '@affine/core/modules/workspace';
@@ -42,16 +42,16 @@ export const CloudQuotaModal = () => {
     )
   );
 
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const handleUpgradeConfirm = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'cloudPricingPlan',
     });
 
     track.$.paywall.storage.viewPlans();
     setOpen(false);
-  }, [globalDialogService, setOpen]);
+  }, [workspaceDialogService, setOpen]);
 
   const description = useMemo(() => {
     if (userQuota && isOwner) {

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -7,7 +7,7 @@ import {
 } from '@affine/core/components/hooks/affine/use-share-url';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { ServerService } from '@affine/core/modules/cloud';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { ShareInfoService } from '@affine/core/modules/share-doc';
@@ -81,13 +81,13 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
 
   const permissionService = useService(WorkspacePermissionService);
   const isOwner = useLiveData(permissionService.permission.isOwner$);
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
 
   const onOpenWorkspaceSettings = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'workspace:preference',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const onClickAnyoneReadOnlyShare = useAsyncCallback(async () => {
     if (isSharedPage) {

packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts

@@ -1,6 +1,9 @@
 import { AppSidebarService } from '@affine/core/modules/app-sidebar';
 import { DesktopApiService } from '@affine/core/modules/desktop-api';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import {
+  GlobalDialogService,
+  WorkspaceDialogService,
+} from '@affine/core/modules/dialogs';
 import { I18nService } from '@affine/core/modules/i18n';
 import { UrlService } from '@affine/core/modules/url';
 import { WorkspaceService } from '@affine/core/modules/workspace';
@@ -76,6 +79,7 @@ export function useRegisterWorkspaceCommands() {
   const [editor] = useActiveBlocksuiteEditor();
   const cmdkQuickSearchService = useService(CMDKQuickSearchService);
   const editorSettingService = useService(EditorSettingService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const globalDialogService = useService(GlobalDialogService);
   const appSidebarService = useService(AppSidebarService);
   const i18n = useService(I18nService).i18n;
@@ -115,7 +119,7 @@ export function useRegisterWorkspaceCommands() {
       t,
       docCollection: currentWorkspace.docCollection,
       navigationHelper,
-      globalDialogService,
+      workspaceDialogService,
     });
 
     return () => {
@@ -127,6 +131,7 @@ export function useRegisterWorkspaceCommands() {
     currentWorkspace.docCollection,
     navigationHelper,
     globalDialogService,
+    workspaceDialogService,
   ]);
 
   // register AffineSettingsCommands
@@ -182,11 +187,11 @@ export function useRegisterWorkspaceCommands() {
     const unsub = registerAffineHelpCommands({
       t,
       urlService,
-      globalDialogService,
+      workspaceDialogService,
     });
 
     return () => {
       unsub();
     };
-  }, [t, globalDialogService, urlService]);
+  }, [t, globalDialogService, urlService, workspaceDialogService]);
 }

packages/frontend/core/src/components/over-capacity/index.tsx

@@ -1,5 +1,5 @@
 import { notify } from '@affine/component';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { useI18n } from '@affine/i18n';
@@ -20,13 +20,13 @@ export const OverCapacityNotification = () => {
     permissionService.permission.revalidate();
   }, [permissionService]);
 
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const jumpToPricePlan = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'cloudPricingPlan',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   // debounce sync engine status
   useEffect(() => {

packages/frontend/core/src/components/providers/workspace-side-effects.tsx

@@ -14,7 +14,10 @@ import {
   FetchService,
   GraphQLService,
 } from '@affine/core/modules/cloud';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import {
+  GlobalDialogService,
+  WorkspaceDialogService,
+} from '@affine/core/modules/dialogs';
 import { DocsService } from '@affine/core/modules/doc';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { useRegisterNavigationCommands } from '@affine/core/modules/navigation/view/use-register-navigation-commands';
@@ -123,11 +126,12 @@ export const WorkspaceSideEffects = () => {
     workbench,
   ]);
 
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const globalDialogService = useService(GlobalDialogService);
 
   useEffect(() => {
     const disposable = AIProvider.slots.requestUpgradePlan.on(() => {
-      globalDialogService.open('setting', {
+      workspaceDialogService.open('setting', {
         activeTab: 'billing',
       });
       track.$.paywall.aiAction.viewPlans();
@@ -135,7 +139,7 @@ export const WorkspaceSideEffects = () => {
     return () => {
       disposable.dispose();
     };
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const graphqlService = useService(GraphQLService);
   const eventSourceService = useService(EventSourceService);
@@ -158,9 +162,10 @@ export const WorkspaceSideEffects = () => {
   }, [
     eventSourceService,
     fetchService,
-    globalDialogService,
+    workspaceDialogService,
     graphqlService,
     networkSearchService,
+    globalDialogService,
   ]);
 
   useRegisterWorkspaceCommands();

packages/frontend/core/src/components/pure/help-island/index.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import type { SettingTab } from '@affine/core/modules/dialogs/constant';
 import { GlobalContextService } from '@affine/core/modules/global-context';
 import { UrlService } from '@affine/core/modules/url';
@@ -36,18 +36,18 @@ export const HelpIsland = () => {
   });
   const docId = useLiveData(globalContextService.globalContext.docId.$);
   const docMode = useLiveData(globalContextService.globalContext.docMode.$);
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const [spread, setShowSpread] = useState(false);
   const t = useI18n();
   const openSettingModal = useCallback(
     (tab: SettingTab) => {
       setShowSpread(false);
 
-      globalDialogService.open('setting', {
+      workspaceDialogService.open('setting', {
         activeTab: tab,
       });
     },
-    [globalDialogService]
+    [workspaceDialogService]
   );
   const openAbout = useCallback(
     () => openSettingModal('about'),

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,3 +1,4 @@
+// Import is already correct, no changes needed
 import {
   AddPageButton,
   AppDownloadButton,
@@ -10,10 +11,7 @@ import {
   SidebarScrollableContainer,
 } from '@affine/core/modules/app-sidebar/views';
 import { ExternalMenuLinkItem } from '@affine/core/modules/app-sidebar/views/menu-item/external-menu-link-item';
-import {
-  GlobalDialogService,
-  WorkspaceDialogService,
-} from '@affine/core/modules/dialogs';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import {
   ExplorerCollections,
   ExplorerFavorites,
@@ -95,7 +93,6 @@ export const RootAppSidebar = memo((): ReactElement => {
     CMDKQuickSearchService,
   });
   const t = useI18n();
-  const globalDialogService = useService(GlobalDialogService);
   const workspaceDialogService = useService(WorkspaceDialogService);
   const workbench = workbenchService.workbench;
   const onOpenQuickSearchModal = useCallback(() => {
@@ -103,11 +100,11 @@ export const RootAppSidebar = memo((): ReactElement => {
   }, [cMDKQuickSearchService]);
 
   const onOpenSettingModal = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'appearance',
     });
     track.$.navigationPanel.$.openSettings();
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const handleOpenDocs = useCallback(
     (result: {

packages/frontend/core/src/components/root-app-sidebar/user-info.tsx

@@ -8,7 +8,10 @@ import {
   type MenuProps,
   Skeleton,
 } from '@affine/component';
-import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import {
+  GlobalDialogService,
+  WorkspaceDialogService,
+} from '@affine/core/modules/dialogs';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { AccountIcon, SignOutIcon } from '@blocksuite/icons/rc';
@@ -75,15 +78,15 @@ const UnauthorizedUserInfo = () => {
 };
 
 const AccountMenu = () => {
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const openSignOutModal = useSignOut();
 
   const onOpenAccountSetting = useCallback(() => {
     track.$.navigationPanel.profileAndBadge.openSettings({ to: 'account' });
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'account',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const t = useI18n();
 
@@ -112,13 +115,13 @@ const CloudUsage = () => {
   const quota = useService(UserQuotaService).quota;
   const quotaError = useLiveData(quota.error$);
 
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const handleClick = useCatchEventCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'cloudPricingPlan',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   useEffect(() => {
     // revalidate quota to get the latest status
@@ -192,20 +195,20 @@ const AIUsage = () => {
   const loading = copilotActionLimit === null || copilotActionUsed === null;
   const loadError = useLiveData(copilotQuotaService.copilotQuota.error$);
 
-  const globalDialogService = useService(GlobalDialogService);
+  const workspaceDialogService = useService(WorkspaceDialogService);
 
   const goToAIPlanPage = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'plans',
       scrollAnchor: 'aiPricingPlan',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   const goToAccountSetting = useCallback(() => {
-    globalDialogService.open('setting', {
+    workspaceDialogService.open('setting', {
       activeTab: 'account',
     });
-  }, [globalDialogService]);
+  }, [workspaceDialogService]);
 
   if (loading) {
     if (loadError) console.error(loadError);