chore(editor): adjust embed synced doc ui (#12162)

Close [BS-3400](https://linear.app/affine-design/issue/BS-3400/ui-issues)

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

- **New Features**
  - The "View in Page" button has been renamed to "Open in Page" and now uses a new icon for improved clarity.
  - The menu for embedded synced documents is now integrated directly into the Open button for a more streamlined interface.

- **Style**
  - Improved spacing and visual alignment in edgeless block headers, including dedicated styling for title icons and buttons.
  - Updated toolbar icon for better visual consistency.
  - Added background styling for embedded linked document blocks.

- **Localization**
  - Updated translation keys and text to reflect the "Open in Page" terminology across all supported languages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-block-header.css.ts

@@ -15,12 +15,20 @@ export const header = style({
 export const titleContainer = style({
   display: 'flex',
   alignItems: 'center',
+  padding: 4,
+  marginRight: 8,
   gap: 4,
   flex: 1,
   overflow: 'hidden',
   whiteSpace: 'nowrap',
 });
 
+export const titleIcon = style({
+  display: 'flex',
+  alignItems: 'center',
+  color: cssVarV2('icon/primary'),
+});
+
 const title = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -59,13 +67,12 @@ export const button = style({
   pointerEvents: 'auto',
   color: cssVarV2('icon/transparentBlack'),
   borderRadius: 4,
+  gap: 0,
 });
 
 export const buttonText = style([
   embedSyncedDocTitle,
   {
-    paddingLeft: 4,
-    paddingRight: 4,
     fontWeight: 500,
   },
 ]);

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx

@@ -98,7 +98,9 @@ const Title = ({ model }: { model: EmbedSyncedDocModel }) => {
       data-collapsed={!!model.props.preFoldHeight}
       data-testid="edgeless-embed-synced-doc-title"
     >
-      <LinkedPageIcon />
+      <span className={styles.titleIcon}>
+        <LinkedPageIcon />
+      </span>
       <span className={styles.embedSyncedDocTitle}>{title}</span>
     </div>
   );
@@ -130,7 +132,13 @@ const EmbedSyncedDocCopyLinkButton = ({
   );
 };
 
-const OpenButton = ({ model }: { model: EmbedSyncedDocModel }) => {
+const OpenButton = ({
+  std,
+  model,
+}: {
+  std: BlockStdScope;
+  model: EmbedSyncedDocModel;
+}) => {
   const t = useI18n();
   const workbench = useService(WorkbenchService).workbench;
 
@@ -141,21 +149,24 @@ const OpenButton = ({ model }: { model: EmbedSyncedDocModel }) => {
   }, [model.props.pageId, workbench]);
 
   return (
-    <Button
-      className={styles.button}
-      variant="plain"
-      size="custom"
-      onClick={open}
-      prefixStyle={{
-        width: `${styles.iconSize}px`,
-        height: `${styles.iconSize}px`,
-      }}
-      prefix={<ExpandFullIcon />}
-    >
-      <span className={styles.buttonText}>
-        {t['com.affine.editor.edgeless-embed-synced-doc-header.open']()}
-      </span>
-    </Button>
+    <div>
+      <Button
+        className={styles.button}
+        variant="plain"
+        size="custom"
+        onClick={open}
+        prefixStyle={{
+          width: `${styles.iconSize}px`,
+          height: `${styles.iconSize}px`,
+        }}
+        prefix={<ExpandFullIcon />}
+      >
+        <span className={styles.buttonText}>
+          {t['com.affine.editor.edgeless-embed-synced-doc-header.open']()}
+        </span>
+      </Button>
+      <MoreMenu model={model} std={std} />
+    </div>
   );
 };
 
@@ -256,8 +267,7 @@ export const EdgelessEmbedSyncedDocHeader = ({
     <div className={styles.header} onPointerDown={stopPropagation}>
       <ToggleButton model={model} />
       <Title model={model} />
-      <OpenButton model={model} />
-      <MoreMenu model={model} std={std} />
+      <OpenButton std={std} model={model} />
       <EmbedSyncedDocInfoButton model={model} />
       <EmbedSyncedDocCopyLinkButton model={model} />
     </div>

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-note-header.tsx

@@ -9,7 +9,7 @@ import { Bound } from '@blocksuite/affine/global/gfx';
 import { type NoteBlockModel } from '@blocksuite/affine/model';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
 import {
-  LinkedPageIcon,
+  ExpandFullIcon,
   ToggleDownIcon,
   ToggleRightIcon,
 } from '@blocksuite/icons/rc';
@@ -105,11 +105,11 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   );
 };
 
-const ViewInPageButton = () => {
+const OpenInPageButton = () => {
   const t = useI18n();
   const editor = useService(EditorService).editor;
 
-  const viewInPage = useCallback(() => {
+  const openInPage = useCallback(() => {
     track.edgeless.pageBlock.headerToolbar.switchPageMode();
     editor.setMode('page');
   }, [editor]);
@@ -118,11 +118,11 @@ const ViewInPageButton = () => {
     <IconButton
       className={styles.button}
       size={styles.iconSize}
-      tooltip={t['com.affine.editor.edgeless-note-header.view-in-page']()}
+      tooltip={t['com.affine.editor.edgeless-note-header.open-in-page']()}
       data-testid="edgeless-note-view-in-page-button"
-      onClick={viewInPage}
+      onClick={openInPage}
     >
-      <LinkedPageIcon />
+      <ExpandFullIcon />
     </IconButton>
   );
 };
@@ -165,7 +165,7 @@ export const EdgelessNoteHeader = ({ note }: { note: NoteBlockModel }) => {
   return (
     <div className={styles.header} data-testid="edgeless-page-block-header">
       <EdgelessNoteToggleButton note={note} />
-      <ViewInPageButton />
+      <OpenInPageButton />
       {!insidePeekView && <PageBlockInfoButton note={note} />}
       <NoteCopyLinkButton note={note} />
     </div>