From 9bf86e3f614bce42d020f2edf8927d10df5d16be Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 27 May 2025 09:20:18 +0000
Subject: [PATCH] fix(core): add invite members button to sidebar (#12491)

fix AF-2661

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added an "Invite Members" button to the sidebar, allowing users to quickly access workspace member settings (visible only for non-local workspaces).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/root-app-sidebar/index.tsx |  2 ++
 .../invite-members-button.tsx                 | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 packages/frontend/core/src/components/root-app-sidebar/invite-members-button.tsx

diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index bbecdc139..6b9be76b5 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -44,6 +44,7 @@ import {
   workspaceAndUserWrapper,
   workspaceWrapper,
 } from './index.css';
+import { InviteMembersButton } from './invite-members-button';
 import { AppSidebarJournalButton } from './journal-button';
 import { NotificationButton } from './notification-button';
 import { SidebarAudioPlayer } from './sidebar-audio-player';
@@ -211,6 +212,7 @@ export const RootAppSidebar = memo((): ReactElement => {
           >
             <span data-testid="import-modal-trigger">{t['Import']()}</span>
           </MenuItem>
+          <InviteMembersButton />
           <TemplateDocEntrance />
           <ExternalMenuLinkItem
             href="https://affine.pro/blog?tag=Release+Note"
diff --git a/packages/frontend/core/src/components/root-app-sidebar/invite-members-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/invite-members-button.tsx
new file mode 100644
index 000000000..a3efb76fe
--- /dev/null
+++ b/packages/frontend/core/src/components/root-app-sidebar/invite-members-button.tsx
@@ -0,0 +1,36 @@
+import { MenuItem } from '@affine/core/modules/app-sidebar/views';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { useI18n } from '@affine/i18n';
+import { CollaborationIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
+import { useCallback } from 'react';
+
+export const InviteMembersButton = () => {
+  const workspace = useService(WorkspaceService).workspace;
+
+  const isLocal = workspace.flavour === 'local';
+
+  const dialogService = useService(WorkspaceDialogService);
+  const onOpenInviteMembersModal = useCallback(() => {
+    dialogService.open('setting', {
+      activeTab: `workspace:members`,
+    });
+  }, [dialogService]);
+
+  const t = useI18n();
+
+  if (isLocal) {
+    return null;
+  }
+
+  return (
+    <MenuItem
+      data-testid="slider-bar-invite-members-button"
+      icon={<CollaborationIcon />}
+      onClick={onOpenInviteMembersModal}
+    >
+      {t['Invite Members']()}
+    </MenuItem>
+  );
+};