refactor(database): context-menu ui and ux

packages/affine/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts

@@ -1,12 +1,16 @@
-import { popMenu } from '@blocksuite/affine-components/context-menu';
+import {
+  menu,
+  popMenu,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import {
   CopyIcon,
   DoneIcon,
   ExpandCloseIcon,
   SettingsIcon,
 } from '@blocksuite/icons/lit';
-import { flip, offset } from '@floating-ui/dom';
+import { autoPlacement, flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
@@ -66,39 +70,35 @@ export class EmbedHtmlFullscreenToolbar extends LitElement {
 
   private _popSettings = () => {
     this._popperVisible = true;
-    popMenu(this._fullScreenToolbarContainer, {
+    popMenu(popupTargetFromElement(this._fullScreenToolbarContainer), {
       options: {
         items: [
-          {
-            type: 'custom',
-            render: () =>
-              html`<div class="settings-header">
-                <span>Settings</span>
-              </div>`,
-          },
-
-          {
-            type: 'group',
+          () =>
+            html` <div class="settings-header">
+              <span>Settings</span>
+            </div>`,
+          menu.group({
             name: 'thing',
-            children: () => [
-              {
-                type: 'toggle-switch',
+            items: [
+              menu.toggleSwitch({
                 name: 'Hide toolbar',
                 on: this.autoHideToolbar,
                 onChange: on => {
                   this.autoHideToolbar = on;
                 },
-              },
+              }),
             ],
-          },
+          }),
         ],
         onClose: () => {
           this._popperVisible = false;
         },
       },
-
-      placement: 'top-end',
-      middleware: [flip(), offset({ mainAxis: 4, crossAxis: -40 })],
+      middleware: [
+        autoPlacement({ allowedPlacements: ['top-end'] }),
+        flip(),
+        offset({ mainAxis: 4, crossAxis: -40 }),
+      ],
       container: this.embedHtml.iframeWrapper,
     });
   };
@@ -135,25 +135,26 @@ export class EmbedHtmlFullscreenToolbar extends LitElement {
   override render() {
     const hideToolbar = !this._popperVisible && this.autoHideToolbar;
 
-    return html`<div
-      data-auto-hide=${hideToolbar}
-      class="toolbar-toggle-control"
-    >
-      <div class="fullscreen-toolbar-container">
-        <icon-button @click=${this.embedHtml.close}
-          >${ExpandCloseIcon()}</icon-button
-        >
-        <icon-button @click=${this._popSettings} hover=${this._popperVisible}
-          >${SettingsIcon()}</icon-button
-        >
-
-        <div class="short-v-divider"></div>
-
-        <icon-button class="copy-button" @click=${this.copyCode}
-          >${this._copied ? DoneIcon() : CopyIcon()}
-        </icon-button>
+    return html`
+      <div data-auto-hide="${hideToolbar}" class="toolbar-toggle-control">
+        <div class="fullscreen-toolbar-container">
+          <icon-button @click="${this.embedHtml.close}"
+            >${ExpandCloseIcon()}
+          </icon-button>
+          <icon-button
+            @click="${this._popSettings}"
+            hover="${this._popperVisible}"
+            >${SettingsIcon()}
+          </icon-button>
+
+          <div class="short-v-divider"></div>
+
+          <icon-button class="copy-button" @click="${this.copyCode}"
+            >${this._copied ? DoneIcon() : CopyIcon()}
+          </icon-button>
+        </div>
       </div>
-    </div> `;
+    `;
   }
 
   @state()

packages/affine/components/src/context-menu/button.ts

@@ -0,0 +1,222 @@
+import type { ReadonlySignal } from '@preact/signals-core';
+
+import {
+  CheckBoxCkeckSolidIcon,
+  CheckBoxUnIcon,
+  DoneIcon,
+} from '@blocksuite/icons/lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, type TemplateResult, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { keyed } from 'lit/directives/keyed.js';
+
+import type { MenuClass, MenuItemRender } from './types.js';
+
+import { MenuFocusable } from './focusable.js';
+
+export type MenuButtonData = {
+  content: () => TemplateResult;
+  class: string;
+  select: (ele: HTMLElement) => void | false;
+  onHover?: (hover: boolean) => void;
+};
+
+export class MenuButton extends MenuFocusable {
+  static override styles = css`
+    .affine-menu-button {
+      display: flex;
+      width: 100%;
+      font-size: 20px;
+      cursor: pointer;
+      align-items: center;
+      padding: 4px;
+      gap: 8px;
+      border-radius: 4px;
+      color: var(--affine-icon-color);
+    }
+
+    .affine-menu-button:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    .affine-menu-button .affine-menu-action-text {
+      flex: 1;
+      font-size: 14px;
+      line-height: 22px;
+      color: var(--affine-text-primary-color);
+    }
+
+    .affine-menu-button.focused {
+      outline: 1px solid
+        ${unsafeCSS(cssVarV2('layer/insideBorder/primaryBorder'))};
+    }
+
+    .affine-menu-button.delete-item:hover {
+      background-color: var(--affine-background-error-color);
+      color: var(--affine-error-color);
+    }
+
+    .affine-menu-button.delete-item:hover .affine-menu-action-text {
+      color: var(--affine-error-color);
+    }
+  `;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.disposables.addFromEvent(this, 'mouseenter', () => {
+      this.data.onHover?.(true);
+      this.menu.closeSubMenu();
+    });
+    this.disposables.addFromEvent(this, 'mouseleave', () => {
+      this.data.onHover?.(false);
+    });
+    this.disposables.addFromEvent(this, 'click', this.onClick);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.data.onHover?.(false);
+  }
+
+  onClick() {
+    if (this.data.select(this) !== false) {
+      this.menu.options.onComplete?.();
+      this.menu.close();
+    }
+  }
+
+  override onPressEnter() {
+    this.onClick();
+  }
+
+  protected override render(): unknown {
+    const classString = classMap({
+      [this.data.class ?? '']: true,
+      'affine-menu-button': true,
+      focused: this.isFocused$.value,
+    });
+    return html` <div class="${classString}">${this.data.content()}</div>`;
+  }
+
+  @property({ attribute: false })
+  accessor data!: MenuButtonData;
+}
+
+export const menuButtonItems = {
+  action:
+    (config: {
+      name: string;
+      label?: () => TemplateResult;
+      prefix?: TemplateResult;
+      postfix?: TemplateResult;
+      isSelected?: boolean;
+      select: (ele: HTMLElement) => void | false;
+      onHover?: (hover: boolean) => void;
+      class?: MenuClass;
+      hide?: () => boolean;
+    }) =>
+    menu => {
+      if (config.hide?.() || !menu.search(config.name)) {
+        return;
+      }
+      const data: MenuButtonData = {
+        content: () => html`
+          ${config.prefix}
+          <div class="affine-menu-action-text">
+            ${config.label?.() ?? config.name}
+          </div>
+          ${config.postfix ?? (config.isSelected ? DoneIcon() : undefined)}
+        `,
+        onHover: config.onHover,
+        select: config.select,
+        class: config.class ?? (config.isSelected ? 'selected-item' : ''),
+      };
+      return html`${keyed(
+        config.name,
+        html`<affine-menu-button
+          .data="${data}"
+          .menu="${menu}"
+        ></affine-menu-button>`
+      )}`;
+    },
+  checkbox:
+    (config: {
+      name: string;
+      checked: ReadonlySignal<boolean>;
+      postfix?: TemplateResult;
+      label?: () => TemplateResult;
+      select: (checked: boolean) => boolean;
+      class?: string;
+    }) =>
+    menu => {
+      if (!menu.search(config.name)) {
+        return;
+      }
+      const data: MenuButtonData = {
+        content: () => html`
+          ${config.checked.value
+            ? CheckBoxCkeckSolidIcon({ style: `color:#1E96EB` })
+            : CheckBoxUnIcon()}
+          <div class="affine-menu-action-text">
+            ${config.label?.() ?? config.name}
+          </div>
+          ${config.postfix}
+        `,
+        select: () => {
+          config.select(config.checked.value);
+          return false;
+        },
+        class: config.class ?? '',
+      };
+      return html`${keyed(
+        config.name,
+        html`<affine-menu-button
+          .data="${data}"
+          .menu="${menu}"
+        ></affine-menu-button>`
+      )}`;
+    },
+  toggleSwitch:
+    (config: {
+      name: string;
+      on: boolean;
+      postfix?: TemplateResult;
+      label?: () => TemplateResult;
+      onChange: (on: boolean) => void;
+      class?: string;
+    }) =>
+    menu => {
+      if (!menu.search(config.name)) {
+        return;
+      }
+      const onChange = (on: boolean) => {
+        config.onChange(on);
+      };
+
+      const data: MenuButtonData = {
+        content: () => html`
+          <div class="affine-menu-action-text">
+            ${config.label?.() ?? config.name}
+          </div>
+          <toggle-switch
+            .on="${config.on}"
+            .onChange="${onChange}"
+          ></toggle-switch>
+          ${config.postfix}
+        `,
+        select: () => {
+          config.onChange(config.on);
+          return false;
+        },
+        class: config.class ?? '',
+      };
+      return html`${keyed(
+        config.name,
+        html`<affine-menu-button
+          .data="${data}"
+          .menu="${menu}"
+        ></affine-menu-button>`
+      )}`;
+    },
+} satisfies Record<string, MenuItemRender<never>>;

packages/affine/components/src/context-menu/focusable.ts

@@ -0,0 +1,18 @@
+import { computed } from '@preact/signals-core';
+
+import { MenuItem } from './item.js';
+
+export abstract class MenuFocusable extends MenuItem {
+  isFocused$ = computed(() => this.menu.currentFocused$.value === this);
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.dataset.focusable = 'true';
+  }
+
+  override focus() {
+    this.menu.focusTo(this);
+  }
+
+  abstract onPressEnter(): void;
+}

packages/affine/components/src/context-menu/group.ts

@@ -0,0 +1,20 @@
+import { html, type TemplateResult } from 'lit';
+
+import type { MenuConfig } from './menu.js';
+import type { MenuItemRender } from './types.js';
+
+export const menuGroupItems = {
+  group: (config: { name?: string; items: MenuConfig[] }) => (menu, index) => {
+    const items = menu.renderItems(config.items);
+    if (!items.length) {
+      return;
+    }
+    const result: TemplateResult = html` ${index === 0
+        ? ''
+        : html` <div
+            style="height: 1px;background-color: var(--affine-divider-color);margin: 4px 0"
+          ></div>`}
+      <div style="display: flex;flex-direction: column;gap:4px">${items}</div>`;
+    return result;
+  },
+} satisfies Record<string, MenuItemRender<never>>;