feat(editor): add collapse/expand functionality to code block component (#14884)

This PR fixes #14040 

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

* **New Features**
* Code blocks can be collapsed and expanded via a toolbar toggle
(visible when the document is editable).
* Collapsed code blocks show a limited preview (~8 lines) with a bottom
fade overlay and reduced padding.
* Toolbar button updates icon and tooltip to reflect collapsed/expanded
state.
* Collapse state is preserved on the block so its current
collapsed/expanded setting is retained.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -9,6 +9,7 @@ import { WithDisposable } from '@blocksuite/global/lit';
 import { noop } from '@blocksuite/global/utils';
 import { MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
+import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
@@ -108,6 +109,17 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
     this.closeCurrentMenu();
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+    // Mirror the collapsed$ signal from the block component into local @state
+    // so this LitElement re-renders when it changes.
+    this.disposables.add(
+      effect(() => {
+        this._collapsed = this.context.blockComponent.collapsed$.value;
+      })
+    );
+  }
+
   override render() {
     return html`
       <editor-toolbar class="code-toolbar-container" data-without-bg>
@@ -136,6 +148,9 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
   @state()
   private accessor _moreMenuOpen = false;
 
+  @state()
+  private accessor _collapsed = false;
+
   @property({ attribute: false })
   accessor context!: CodeBlockToolbarContext;