feat(editor): update footnote popup style (#11932)

Closes: [BS-3113](https://linear.app/affine-design/issue/BS-3113/footnote-popup-ui-更新)

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

- **New Features**
  - Added a description display below the chip in the footnote popup when available.

- **Style**
  - Improved the appearance of footnote popups with enhanced border radius, padding, and layout.
  - Updated font styling for labels and descriptions.
  - Simplified chip styling by reducing height and removing unnecessary CSS properties.

- **Bug Fixes**
  - Tooltip content for URL references now displays both the link preview title and URL when available.

- **Refactor**
  - Simplified click handling by attaching it to the container instead of individual elements.
  - Removed unused click event properties from the footnote popup chip.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup-chip.ts

@@ -1,20 +1,23 @@
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { baseTheme } from '@toeverything/theme';
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type TemplateResult,
+  unsafeCSS,
+} from 'lit';
 import { property } from 'lit/decorators.js';
 
 export class FootNotePopupChip extends LitElement {
   static override styles = css`
     .popup-chip-container {
       display: flex;
-      border-radius: 4px;
-      max-width: 173px;
-      height: 24px;
-      padding: 4px;
+      height: 22px;
       align-items: center;
       gap: 8px;
       box-sizing: border-box;
-      cursor: default;
-      transition: width 0.3s ease-in-out;
     }
 
     .prefix-icon {
@@ -45,16 +48,15 @@ export class FootNotePopupChip extends LitElement {
       color: ${unsafeCSSVarV2('text/primary')};
       font-size: var(--affine-font-sm);
       font-weight: 500;
+      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
     }
   `;
 
   override render() {
     return html`
-      <div class="popup-chip-container" @click=${this.onClick}>
+      <div class="popup-chip-container">
         ${this.prefixIcon
-          ? html`<div class="prefix-icon" @click=${this.onPrefixClick}>
-              ${this.prefixIcon}
-            </div>`
+          ? html`<div class="prefix-icon">${this.prefixIcon}</div>`
           : nothing}
         <div class="popup-chip-label" title=${this.tooltip}>${this.label}</div>
       </div>
@@ -69,10 +71,4 @@ export class FootNotePopupChip extends LitElement {
 
   @property({ attribute: false })
   accessor tooltip: string = '';
-
-  @property({ attribute: false })
-  accessor onClick: (() => void) | undefined = undefined;
-
-  @property({ attribute: false })
-  accessor onPrefixClick: (() => void) | undefined = undefined;
 }

blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts

@@ -14,7 +14,8 @@ import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import type { BlockStdScope } from '@blocksuite/std';
 import { computed, signal } from '@preact/signals-core';
-import { css, html, LitElement } from 'lit';
+import { baseTheme } from '@toeverything/theme';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { FootNotePopupClickHandler } from './footnote-config';
@@ -22,10 +23,29 @@ import type { FootNotePopupClickHandler } from './footnote-config';
 export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
   static override styles = css`
     .footnote-popup-container {
-      border-radius: 4px;
+      border-radius: 8px;
       box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
       background-color: ${unsafeCSSVarV2('layer/background/primary')};
       border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      max-width: 260px;
+      padding: 4px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      transition: 0.3s ease-in-out;
+      cursor: pointer;
+    }
+
+    .footnote-popup-description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+      font-size: var(--affine-font-xs);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      height: 20px;
     }
   `;
 
@@ -96,7 +116,9 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
   private readonly _tooltip$ = computed(() => {
     const referenceType = this.footnote.reference.type;
     if (referenceType === 'url') {
-      return this.footnote.reference.url ?? '';
+      const title = this._linkPreview$.value?.title;
+      const url = this.footnote.reference.url;
+      return [title, url].filter(Boolean).join(' ') || '';
     }
     return this._popupLabel$.value;
   });
@@ -106,7 +128,7 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
     return theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;
   };
 
-  private readonly _onChipClick = () => {
+  private readonly _onClick = () => {
     this.onPopupClick(this.footnote, this.abortController);
     this.abortController.abort();
   };
@@ -153,14 +175,18 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
   }
 
   override render() {
+    const description = this._linkPreview$.value?.description;
+
     return html`
-      <div class="footnote-popup-container">
+      <div class="footnote-popup-container" @click=${this._onClick}>
         <footnote-popup-chip
           .prefixIcon=${this._prefixIcon$.value}
           .label=${this._popupLabel$.value}
-          .onClick=${this._onChipClick}
           .tooltip=${this._tooltip$.value}
         ></footnote-popup-chip>
+        ${description
+          ? html` <div class="footnote-popup-description">${description}</div> `
+          : nothing}
       </div>
     `;
   }