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 -->

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts

@@ -2,8 +2,6 @@ import { embedNoteContentStyles } from '@blocksuite/affine-block-embed';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
-unsafeCSSVarV2('layer/background/linkedDocOnEdgeless');
-
 export const styles = css`
   .affine-embed-linked-doc-block {
     box-sizing: border-box;
@@ -12,6 +10,7 @@ export const styles = css`
     height: 100%;
     border-radius: 8px;
     border: 1px solid var(--affine-background-tertiary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
     position: relative;
   }

blocksuite/affine/blocks/note/src/configs/toolbar.ts

@@ -28,7 +28,7 @@ import {
   AutoHeightIcon,
   CornerIcon,
   CustomizedHeightIcon,
-  LinkedPageIcon,
+  InsertIntoPageIcon,
   ScissorsIcon,
 } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
@@ -125,7 +125,7 @@ const builtinSurfaceToolbarConfig = {
             data-testid="display-in-page"
             @click=${() => onSelect()}
           >
-            ${LinkedPageIcon()}
+            ${InsertIntoPageIcon()}
             <span class="label">${label$.value}</span>
           </editor-icon-button>`,
         };

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>

packages/frontend/i18n/src/i18n.gen.ts

@@ -7169,9 +7169,9 @@ export function useAFFiNEI18N(): {
       */
     ["com.affine.editor.edgeless-note-header.fold-page-block"](): string;
     /**
-      * `View in page`
+      * `Open in Page`
       */
-    ["com.affine.editor.edgeless-note-header.view-in-page"](): string;
+    ["com.affine.editor.edgeless-note-header.open-in-page"](): string;
     /**
       * `Fold`
       */

packages/frontend/i18n/src/resources/ar.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "إظهار",
   "com.affine.editor.bi-directional-link-panel.hide": "إخفاء",
   "com.affine.editor.edgeless-note-header.fold-page-block": "طي كتلة الصفحة",
-  "com.affine.editor.edgeless-note-header.view-in-page": "عرض في الصفحة",
+  "com.affine.editor.edgeless-note-header.open-in-page": "عرض في الصفحة",
   "com.affine.upgrade-to-team-page.title": "تعزيز فريقك بتعاون سلس",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "حدد مساحة عمل موجودة أو أنشئ واحدة جديدة",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "إنشاء مساحة عمل",

packages/frontend/i18n/src/resources/de.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Anzeigen",
   "com.affine.editor.bi-directional-link-panel.hide": "Verbergen",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Seitenblock falten",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Auf Seite anzeigen",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Auf Seite anzeigen",
   "com.affine.upgrade-to-team-page.title": "Befähige dein Team durch nahtlose Zusammenarbeit",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Wähle einen vorhandenen Workspace aus oder erstelle einen neuen",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Workspace erstellen",

packages/frontend/i18n/src/resources/el-GR.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Εμφάνιση",
   "com.affine.editor.bi-directional-link-panel.hide": "Απόκρυψη",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Σύμπτυξη μπλοκ σελίδας",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Προβολή στη σελίδα",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Άνοιγμα στη σελίδα",
   "com.affine.upgrade-to-team-page.title": "Δώστε δύναμη στην ομάδα σας με Αδιάλειπτη Συνεργασία",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Επιλέξτε έναν υπάρχοντα χώρο εργασίας ή δημιουργήστε έναν νέο",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Δημιουργία Χώρου Εργασίας",

packages/frontend/i18n/src/resources/en.json

@@ -1783,7 +1783,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Show",
   "com.affine.editor.bi-directional-link-panel.hide": "Hide",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Fold page block",
-  "com.affine.editor.edgeless-note-header.view-in-page": "View in page",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Open in Page",
   "com.affine.editor.edgeless-embed-synced-doc-header.fold": "Fold",
   "com.affine.editor.edgeless-embed-synced-doc-header.unfold": "Unfold",
   "com.affine.editor.edgeless-embed-synced-doc-header.open": "Open",

packages/frontend/i18n/src/resources/es.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Mostrar",
   "com.affine.editor.bi-directional-link-panel.hide": "Ocultar",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Plegar bloque de página",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Ver en la página",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Ver en la página",
   "com.affine.upgrade-to-team-page.title": "Potenciar a tu equipo con colaboración sin fisuras",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Selecciona un espacio de trabajo existente o crea uno nuevo",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Crear Espacio de trabajo",

packages/frontend/i18n/src/resources/fa.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "نمایش",
   "com.affine.editor.bi-directional-link-panel.hide": "پنهان کردن",
   "com.affine.editor.edgeless-note-header.fold-page-block": "بستن بلوک صفحه",
-  "com.affine.editor.edgeless-note-header.view-in-page": "مشاهده در صفحه",
+  "com.affine.editor.edgeless-note-header.open-in-page": "مشاهده در صفحه",
   "com.affine.upgrade-to-team-page.title": "تیم خود را با همکاری بی‌وقفه توانمند کنید",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "یک فضای کاری موجود را انتخاب کنید یا یک فضای جدید ایجاد کنید",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "ایجاد فضای کاری",

packages/frontend/i18n/src/resources/fr.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Afficher",
   "com.affine.editor.bi-directional-link-panel.hide": "Cacher",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Plier le bloc de page",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Voir dans la page",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Voir dans la page",
   "com.affine.upgrade-to-team-page.title": "Renforcez votre équipe avec une collaboration sans faille",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Sélectionnez un espace de travail existant ou créez-en un nouveau",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Créer un espace de travail",

packages/frontend/i18n/src/resources/it-IT.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Mostra",
   "com.affine.editor.bi-directional-link-panel.hide": "Nascondi",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Comprimi blocco pagina",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Visualizza nella pagina",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Visualizza nella pagina",
   "com.affine.upgrade-to-team-page.title": "Dai al tuo team una collaborazione senza soluzione di continuità",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Seleziona uno spazio di lavoro esistente o creane uno nuovo",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Crea Spazio di Lavoro",

packages/frontend/i18n/src/resources/ja.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "表示",
   "com.affine.editor.bi-directional-link-panel.hide": "非表示",
   "com.affine.editor.edgeless-note-header.fold-page-block": "ページブロックを折りたたむ",
-  "com.affine.editor.edgeless-note-header.view-in-page": "ページで見る",
+  "com.affine.editor.edgeless-note-header.open-in-page": "ページで見る",
   "com.affine.upgrade-to-team-page.title": "シームレスなコラボレーションでチームに力を与える",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "既存のワークスペースを選択するか、新しいワークスペースを作成",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "ワークスペースを作成",

packages/frontend/i18n/src/resources/pl.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Pokaż",
   "com.affine.editor.bi-directional-link-panel.hide": "Ukryj",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Zwiń blok strony",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Wyświetl na stronie",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Wyświetl na stronie",
   "com.affine.upgrade-to-team-page.title": "Wzmocnij swój zespół dzięki bezproblemowej współpracy",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Wybierz istniejącą przestrzeń roboczą lub utwórz nową",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Utwórz Przestrzeń Roboczą",

packages/frontend/i18n/src/resources/pt-BR.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Mostrar",
   "com.affine.editor.bi-directional-link-panel.hide": "Ocultar",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Dobrar bloco de página",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Ver na página",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Ver na página",
   "com.affine.upgrade-to-team-page.title": "Capacite Sua Equipe com Colaboração Sem Esforço",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Selecione um workspace existente ou crie um novo",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Criar workspace",

packages/frontend/i18n/src/resources/ru.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Показать",
   "com.affine.editor.bi-directional-link-panel.hide": "Скрыть",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Свернуть блок страницы",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Просмотреть на странице",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Просмотреть на странице",
   "com.affine.upgrade-to-team-page.title": "Усильте вашу команду при помощи безупречного взаимодействия",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Выберите существующее рабочее пространство или создайте новое",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Создать рабочее пространство",

packages/frontend/i18n/src/resources/sv-SE.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Visa",
   "com.affine.editor.bi-directional-link-panel.hide": "Dölj",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Vik ihop sidblock",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Visa på sidan",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Visa på sidan",
   "com.affine.upgrade-to-team-page.title": "Stärk ditt team med sömlöst samarbete",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Välj en befintlig arbetsyta eller skapa en ny",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Skapa Arbetsyta",

packages/frontend/i18n/src/resources/uk.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "Показати",
   "com.affine.editor.bi-directional-link-panel.hide": "Приховати",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Згорнути блок сторінки",
-  "com.affine.editor.edgeless-note-header.view-in-page": "Переглянути на сторінці",
+  "com.affine.editor.edgeless-note-header.open-in-page": "Переглянути на сторінці",
   "com.affine.upgrade-to-team-page.title": "Забезпечте свою команду безшовною співпрацею",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Виберіть існуючий робочий простір або створіть новий",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Створити робочий простір",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "展示",
   "com.affine.editor.bi-directional-link-panel.hide": "隐藏",
   "com.affine.editor.edgeless-note-header.fold-page-block": "折叠页面块",
-  "com.affine.editor.edgeless-note-header.view-in-page": "在页面中查看",
+  "com.affine.editor.edgeless-note-header.open-in-page": "在页面中查看",
   "com.affine.upgrade-to-team-page.title": "通过无缝协作来为您的团队赋能",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "选择现有工作区或创建新工作区",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "创建工作区",

packages/frontend/i18n/src/resources/zh-Hant.json

@@ -1752,7 +1752,7 @@
   "com.affine.editor.bi-directional-link-panel.show": "展示",
   "com.affine.editor.bi-directional-link-panel.hide": "隱藏",
   "com.affine.editor.edgeless-note-header.fold-page-block": "折疊頁面塊",
-  "com.affine.editor.edgeless-note-header.view-in-page": "在頁面中查看",
+  "com.affine.editor.edgeless-note-header.open-in-page": "在頁面中查看",
   "com.affine.upgrade-to-team-page.title": "使用無縫協作來賦能您的團隊",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "選擇現有的工作區或建立新工作區",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "建立工作區",