feat(mobile): add share button (#8109)

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

@@ -270,9 +270,11 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
           <span className={styles.copyLinkLabelStyle}>
             {t['com.affine.share-menu.copy']()}
           </span>
-          <span className={styles.copyLinkShortcutStyle}>
+          {!environment.isMobile && (
-            {isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
+            <span className={styles.copyLinkShortcutStyle}>
-          </span>
+              {isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
+            </span>
+          )}
         </Button>
         <Menu
           contentOptions={{

packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.tsx

@@ -1,4 +1,3 @@
-import { IconButton } from '@affine/component';
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
@@ -11,7 +10,6 @@ import { EditorService } from '@affine/core/modules/editor';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import { DetailPageWrapper } from '@affine/core/pages/workspace/detail-page/detail-page-wrapper';
-import { WorkspaceFlavour } from '@affine/env/workspace';
 import type { PageRootService } from '@blocksuite/blocks';
 import {
   BookmarkBlockService,
@@ -22,7 +20,6 @@ import {
   ImageBlockService,
 } from '@blocksuite/blocks';
 import { DisposableGroup } from '@blocksuite/global/utils';
-import { ShareiOsIcon } from '@blocksuite/icons/rc';
 import { type AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
 import {
@@ -30,7 +27,6 @@ import {
   FrameworkScope,
   GlobalContextService,
   useLiveData,
-  useService,
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
@@ -42,6 +38,7 @@ import { PageHeader } from '../../../components';
 import { JournalIconButton } from './journal-icon-button';
 import * as styles from './mobile-detail-page.css';
 import { PageHeaderMenuButton } from './page-header-more-button';
+import { PageHeaderShareButton } from './page-header-share-button';
 
 const DetailPageImpl = () => {
   const { editorService, docService, workspaceService, globalContextService } =
@@ -221,7 +218,6 @@ const notFound = (
 export const Component = () => {
   const params = useParams();
   const pageId = params.pageId;
-  const workspace = useService(WorkspaceService).workspace;
 
   if (!pageId) {
     return null;
@@ -239,14 +235,8 @@ export const Component = () => {
           className={styles.header}
           suffix={
             <>
-              {workspace.meta.flavour !== WorkspaceFlavour.LOCAL && (
+              <PageHeaderShareButton />
-                <IconButton
+              <PageHeaderMenuButton />
-                  size={24}
-                  style={{ padding: 10 }}
-                  icon={<ShareiOsIcon />}
-                />
-              )}
-              <PageHeaderMenuButton docId={pageId} />
             </>
           }
         />

packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx

@@ -19,19 +19,17 @@ import {
   PageIcon,
   TocIcon,
 } from '@blocksuite/icons/rc';
-import { useLiveData, useService } from '@toeverything/infra';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
 
 import * as styles from './page-header-more-button.css';
 import { DocInfoSheet } from './sheets/doc-info';
 
-type PageMenuProps = {
+export const PageHeaderMenuButton = () => {
-  docId: string;
-};
-
-export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => {
   const t = useI18n();
 
+  const docId = useService(DocService).doc.id;
+
   const editorService = useService(EditorService);
   const editorContainer = useLiveData(editorService.editor.editorContainer$);
 

packages/frontend/mobile/src/pages/workspace/detail/page-header-share-button.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  padding: '0 20px',
+});

packages/frontend/mobile/src/pages/workspace/detail/page-header-share-button.tsx

@@ -0,0 +1,42 @@
+import { IconButton, MobileMenu } from '@affine/component';
+import { SharePage } from '@affine/core/components/affine/share-page-modal/share-menu/share-page';
+import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { ShareiOsIcon } from '@blocksuite/icons/rc';
+import { DocService, useServices, WorkspaceService } from '@toeverything/infra';
+
+import * as styles from './page-header-share-button.css';
+
+export const PageHeaderShareButton = () => {
+  const { workspaceService, docService } = useServices({
+    WorkspaceService,
+    DocService,
+  });
+  const workspace = workspaceService.workspace;
+  const doc = docService.doc.blockSuiteDoc;
+  const confirmEnableCloud = useEnableCloud();
+
+  if (workspace.meta.flavour === WorkspaceFlavour.LOCAL) {
+    return null;
+  }
+
+  return (
+    <MobileMenu
+      items={
+        <div className={styles.content}>
+          <SharePage
+            workspaceMetadata={workspace.meta}
+            currentPage={doc}
+            onEnableAffineCloud={() =>
+              confirmEnableCloud(workspace, {
+                openPageId: doc.id,
+              })
+            }
+          />
+        </div>
+      }
+    >
+      <IconButton size={24} style={{ padding: 10 }} icon={<ShareiOsIcon />} />
+    </MobileMenu>
+  );
+};