fix(editor): code block ui issues (#12609)

Close BS-3423
Close BS-3505

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

- **Style**
  - Updated toolbar button background color and adjusted layout spacing for toolbar and preview buttons to improve visual consistency.
- **Refactor**
  - Reorganized toolbar menu groups for better clarity, separating toggle and clipboard actions within the code block toolbar.
- **Bug Fixes**
  - Improved UI interaction in code block tests to ensure menus behave as expected without closing prematurely.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts

@@ -35,14 +35,10 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
 
     .code-toolbar-button {
       color: ${unsafeCSSVarV2('icon/primary')};
-      background-color: ${unsafeCSSVarV2('segment/background')};
+      background-color: ${unsafeCSSVarV2('button/secondary')};
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }
-
-    .copy-code {
-      margin-left: auto;
-    }
   `;
 
   private _currentOpenMenu: AbortController | null = null;

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -13,6 +13,10 @@ import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
 
 export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   static override styles = css`
+    :host {
+      margin-right: auto;
+    }
+
     .preview-toggle-container {
       display: flex;
       padding: 2px;

blocksuite/affine/blocks/code/src/code-toolbar/config.ts

@@ -117,13 +117,12 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
   },
 ];
 
-// Clipboard Group
-export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
-  type: 'clipboard',
+export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'toggle',
   items: [
     {
       type: 'wrap',
-      generate: ({ blockComponent, close }) => {
+      generate: ({ blockComponent }) => {
         return {
           action: () => {},
           render: () => {
@@ -134,7 +133,6 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
               <editor-menu-action
                 @click=${() => {
                   blockComponent.setWrap(!wrapped);
-                  close();
                 }}
                 aria-label=${label}
               >
@@ -155,7 +153,7 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
       when: ({ std }) =>
         std.getOptional(CodeBlockConfigExtension.identifier)?.showLineNumbers ??
         true,
-      generate: ({ blockComponent, close }) => {
+      generate: ({ blockComponent }) => {
         return {
           action: () => {},
           render: () => {
@@ -167,8 +165,6 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
                   blockComponent.store.updateBlock(blockComponent.model, {
                     lineNumber: !lineNumber,
                   });
-
-                  close();
                 }}
                 aria-label=${label}
               >
@@ -184,6 +180,13 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
         };
       },
     },
+  ],
+};
+
+// Clipboard Group
+export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'clipboard',
+  items: [
     {
       type: 'duplicate',
       label: 'Duplicate',
@@ -233,6 +236,7 @@ export const deleteGroup: MenuItemGroup<CodeBlockToolbarContext> = {
 };
 
 export const MORE_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
+  toggleGroup,
   clipboardGroup,
   deleteGroup,
 ];