feat(editor): group configuration of note styles to panel from toolbar (#12230)

Close [BS-3401](https://linear.app/affine-design/issue/BS-3401/note-style-需要合并同类项)

![CleanShot 2025-05-12 at 14.23.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/ddf8623f-aa9c-491e-a7bf-90419fb19848.png)

tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts

@@ -315,8 +315,9 @@ test.describe('edgeless note element toolbar', () => {
       },
     });
 
-    await toolbar.getByRole('button', { name: 'Shadow style' }).click();
-    await toolbar.getByTestId('affine-note-shadow-film').click();
+    await toolbar.getByRole('button', { name: 'Note Style' }).click();
+    const noteStylePanel = page.locator('edgeless-note-style-panel');
+    await noteStylePanel.getByTestId('affine-note-shadow-film').click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {
@@ -327,10 +328,11 @@ test.describe('edgeless note element toolbar', () => {
       },
     });
 
-    await toolbar.getByRole('button', { name: 'Border style' }).click();
-    await toolbar.locator('.mode-solid').click();
-    await toolbar.getByRole('button', { name: 'Border style' }).click();
-    await toolbar.locator('affine-slider').getByLabel('8').click();
+    const borderStylePanel = noteStylePanel.getByTestId(
+      'affine-note-border-style-panel'
+    );
+    await borderStylePanel.locator('.mode-solid').click();
+    await borderStylePanel.locator('affine-slider').getByLabel('8').click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {
@@ -341,12 +343,10 @@ test.describe('edgeless note element toolbar', () => {
       },
     });
 
-    await toolbar.getByRole('button', { name: 'Corners' }).click();
-    // TODO(@fundon): delete duplicate components
-    await toolbar
-      .locator('affine-size-dropdown-menu')
-      .getByText('Large')
-      .click();
+    const cornerPanel = noteStylePanel.getByTestId(
+      'affine-note-corner-radius-panel'
+    );
+    await cornerPanel.locator('affine-slider').getByLabel('24').click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {
@@ -357,6 +357,8 @@ test.describe('edgeless note element toolbar', () => {
       },
     });
 
+    await pressEscape(page);
+
     const headerToolbar = page.getByTestId('edgeless-page-block-header');
     const toggleButton = headerToolbar.getByTestId(
       'edgeless-note-toggle-button'

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -301,12 +301,12 @@ test('should focus on input of popover on toolbar', async ({ page }) => {
   const scaleValue = await scaleInput.inputValue();
   expect(scaleValue).toBe('150');
 
-  const cornersMenu = toolbar.locator('.corners-menu');
-  const cornersInput = cornersMenu.locator('input');
-  const cornersButton = cornersMenu.getByLabel('Corners');
+  const stylePanelButton = toolbar.locator('edgeless-note-style-panel');
+  const cornersInput = stylePanelButton.locator(
+    '.edgeless-note-corner-radius-panel input'
+  );
 
-  await expect(cornersInput).toBeHidden();
-  await cornersButton.click();
+  await stylePanelButton.click();
 
   await cornersInput.click();
   await expect(cornersInput).toBeFocused();

tests/blocksuite/e2e/clipboard/list.spec.ts

@@ -499,7 +499,7 @@ test(scoped`paste note block with background`, async ({ page }) => {
   await switchEditorMode(page);
   await selectNoteInEdgeless(page, ids.noteId);
 
-  await triggerComponentToolbarAction(page, 'changeNoteColor');
+  await triggerComponentToolbarAction(page, 'changeNoteStyle');
   await changeEdgelessNoteBackground(page, 'White');
   await assertEdgelessNoteBackground(
     page,

tests/blocksuite/e2e/edgeless/auto-complete.spec.ts

@@ -191,7 +191,7 @@ test.describe('auto-complete', () => {
       await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2);
       await waitNextFrame(page);
 
-      await triggerComponentToolbarAction(page, 'changeNoteColor');
+      await triggerComponentToolbarAction(page, 'changeNoteStyle');
       await changeEdgelessNoteBackground(page, 'Red');
 
       // move to arrow icon

tests/blocksuite/e2e/edgeless/element-toolbar.spec.ts

@@ -57,7 +57,7 @@ test('tooltip should be hidden after clicking on button', async ({ page }) => {
   await expect(page.locator('note-display-mode-panel')).toBeVisible();
 
   const colorBtn = toolbar.getByRole('button', {
-    name: 'Background',
+    name: 'Note Style',
   });
 
   await colorBtn.hover();

tests/blocksuite/e2e/edgeless/note/note.spec.ts

@@ -317,7 +317,7 @@ test('change note color', async ({ page }) => {
   );
 
   await selectNoteInEdgeless(page, noteId);
-  await triggerComponentToolbarAction(page, 'changeNoteColor');
+  await triggerComponentToolbarAction(page, 'changeNoteStyle');
   await changeEdgelessNoteBackground(page, 'Green');
   await assertEdgelessNoteBackground(
     page,

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -1057,7 +1057,7 @@ type Action =
   | 'sendBackward'
   | 'sendToBack'
   | 'copyAsPng'
-  | 'changeNoteColor'
+  | 'changeNoteStyle'
   | 'changeShapeStyle'
   | 'changeShapeColor'
   | 'changeShapeFillColor'
@@ -1253,10 +1253,10 @@ export async function triggerComponentToolbarAction(
       await button.click();
       break;
     }
-    case 'changeNoteColor': {
-      const button = locatorComponentToolbar(page).getByRole('button', {
-        name: 'Background',
-      });
+    case 'changeNoteStyle': {
+      const button = locatorComponentToolbar(page).locator(
+        'edgeless-note-style-panel'
+      );
       await button.click();
       break;
     }
@@ -1373,7 +1373,7 @@ export async function triggerComponentToolbarAction(
 
 export async function changeEdgelessNoteBackground(page: Page, label: string) {
   const colorButton = page
-    .locator('edgeless-color-picker-button')
+    .locator('edgeless-note-style-panel')
     .locator('edgeless-color-panel')
     .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click();