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/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();