feat(editor): update code block ui (#12254)

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

- **New Features**
  - Updated the code block toolbar to use a toggle switch for the "wrap" option, providing a more interactive user experience.

- **Style**
  - Adjusted the height of the language selection button for consistent appearance.
  - Refined code block container padding and increased spacing for line numbers to improve readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -24,6 +24,7 @@ export class LanguageListButton extends WithDisposable(
       display: flex;
       gap: 4px;
       padding: 2px 4px;
+      height: 28px;
     }
 
     .lang-button:hover {

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

@@ -122,16 +122,28 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
     {
       type: 'wrap',
       generate: ({ blockComponent, close }) => {
-        const wrapped = blockComponent.model.props.wrap;
-        const label = wrapped ? 'Cancel wrap' : 'Wrap';
-        const icon = wrapped ? CancelWrapIcon : WrapIcon;
-
         return {
-          label,
+          action: () => {},
-          icon,
+          render: () => {
-          action: () => {
+            const wrapped = blockComponent.model.props.wrap;
-            blockComponent.setWrap(!wrapped);
+            const label = wrapped ? 'Cancel wrap' : 'Wrap';
-            close();
+            const icon = wrapped ? CancelWrapIcon : WrapIcon;
+            return html`
+              <editor-menu-action
+                @click=${() => {
+                  blockComponent.setWrap(!wrapped);
+                  close();
+                }}
+                aria-label=${label}
+              >
+                ${icon}
+                <span class="label">${label}</span>
+                <toggle-switch
+                  style="margin-left: auto;"
+                  .on="${wrapped}"
+                ></toggle-switch>
+              </editor-menu-action>
+            `;
           },
         };
       },

blocksuite/affine/blocks/code/src/styles.ts

@@ -6,7 +6,7 @@ export const codeBlockStyles = css`
     font-size: var(--affine-font-xs);
     line-height: var(--affine-line-height);
     position: relative;
-    padding: 28px 24px;
+    padding: 32px 20px;
     background: var(--affine-background-code-block);
     border-radius: 10px;
     box-sizing: border-box;
@@ -36,8 +36,8 @@ export const codeBlockStyles = css`
   .affine-code-block-container .line-number {
     position: sticky;
     text-align: left;
-    padding-right: 4px;
+    padding-right: 12px;
-    width: 24px;
+    width: 32px;
     word-break: break-word;
     white-space: nowrap;
     left: -0.5px;