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,
-          icon,
-          action: () => {
-            blockComponent.setWrap(!wrapped);
-            close();
+          action: () => {},
+          render: () => {
+            const wrapped = blockComponent.model.props.wrap;
+            const label = wrapped ? 'Cancel wrap' : 'Wrap';
+            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>
+            `;
           },
         };
       },