refactor(editor): edgeless attacment toolbar config extension (#10710)

blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts

@@ -21,8 +21,10 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 
 import {
+  EmbedCardDarkCubeIcon,
   EmbedCardDarkHorizontalIcon,
   EmbedCardDarkListIcon,
+  EmbedCardLightCubeIcon,
   EmbedCardLightHorizontalIcon,
   EmbedCardLightListIcon,
 } from '../icons';
@@ -30,11 +32,15 @@ import {
 const cardStyleMap: Record<ColorScheme, Record<string, TemplateResult>> = {
   light: {
     horizontal: EmbedCardLightHorizontalIcon,
+    horizontalThin: EmbedCardLightListIcon,
     list: EmbedCardLightListIcon,
+    cubeThick: EmbedCardLightCubeIcon,
   },
   dark: {
     horizontal: EmbedCardDarkHorizontalIcon,
+    horizontalThin: EmbedCardDarkListIcon,
     list: EmbedCardDarkListIcon,
+    cubeThick: EmbedCardDarkCubeIcon,
   },
 };
 
@@ -53,9 +59,6 @@ export class CardStyleDropdownMenu extends SignalWatcher(ShadowlessElement) {
   @property({ attribute: false })
   accessor style$!: Signal<string> | ReadonlySignal<string>;
 
-  @property({ attribute: false })
-  accessor toggle: ((e: CustomEvent<boolean>) => void) | undefined;
-
   icons$ = computed(
     () => cardStyleMap[this.context.themeProvider.theme$.value]
   );
@@ -64,14 +67,12 @@ export class CardStyleDropdownMenu extends SignalWatcher(ShadowlessElement) {
     const {
       actions,
       context,
-      toggle,
       style$: { value: style },
       icons$: { value: icons },
     } = this;
 
     return html`
       <editor-menu-button
-        @toggle=${toggle}
         .contentPadding="${'8px'}"
         .button=${html`
           <editor-icon-button
@@ -88,12 +89,13 @@ export class CardStyleDropdownMenu extends SignalWatcher(ShadowlessElement) {
             action => action.id,
             ({ id, label, icon, disabled, run }) => html`
               <editor-icon-button
-                aria-label="${label}"
+                aria-label="${ifDefined(label)}"
                 data-testid="${id}"
                 .tooltip="${label}"
                 .activeMode="${'border'}"
                 .iconContainerWidth="${'76px'}"
                 .iconContainerHeight="${'76px'}"
+                .justify="${'center'}"
                 ?active="${id === style}"
                 ?disabled="${ifDefined(disabled)}"
                 @click=${() => run?.(context)}

blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts

@@ -30,20 +30,15 @@ export class ViewDropdownMenu extends SignalWatcher(ShadowlessElement) {
   @property({ attribute: false })
   accessor viewType$!: Signal<string> | ReadonlySignal<string>;
 
-  @property({ attribute: false })
-  accessor toggle: ((e: CustomEvent<boolean>) => void) | undefined;
-
   override render() {
     const {
       actions,
       context,
-      toggle,
       viewType$: { value: viewType },
     } = this;
 
     return html`
       <editor-menu-button
-        @toggle=${toggle}
         .contentPadding="${'8px'}"
         .button=${html`
           <editor-icon-button
@@ -67,7 +62,7 @@ export class ViewDropdownMenu extends SignalWatcher(ShadowlessElement) {
             action => action.id,
             ({ id, label, disabled, run }) => html`
               <editor-menu-action
-                aria-label="${label}"
+                aria-label="${ifDefined(label)}"
                 data-testid="${`link-to-${id}`}"
                 ?data-selected="${label === viewType}"
                 ?disabled="${ifDefined(