FEATURE: Redesigned bookmark modal and menu (#23071)

Adds the new quick menu for bookmarking. When you bookmark
a post (chat message behaviour will come later) we show this new quick
menu and bookmark the item straight away.

You can then choose a reminder quick option, or choose Custom... to open
the old modal. If you click on an existing bookmark, we show the same quick menu
but with Edit and Delete options.

A later PR will introduce a new bookmark modal, but for now we
are using the old modal for Edit and Custom... options.

app/assets/javascripts/float-kit/addon/components/d-menu.gjs

@@ -1,11 +1,14 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { getOwner } from "@ember/application";
-import { service } from "@ember/service";
+import { concat } from "@ember/helper";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import DFloatBody from "float-kit/components/d-float-body";
+import { MENU } from "float-kit/lib/constants";
 import DMenuInstance from "float-kit/lib/d-menu-instance";
 
 export default class DMenu extends Component {
@@ -13,9 +16,9 @@ export default class DMenu extends Component {
 
   @tracked menuInstance = null;
 
-  registerTrigger = modifier((element) => {
+  registerTrigger = modifier((element, [properties]) => {
     const options = {
-      ...this.args,
+      ...properties,
       ...{
         autoUpdate: true,
         listeners: true,
@@ -28,6 +31,8 @@ export default class DMenu extends Component {
 
     this.menuInstance = instance;
 
+    this.options.onRegisterApi?.(this.menuInstance);
+
     return () => {
       instance.destroy();
 
@@ -52,11 +57,22 @@ export default class DMenu extends Component {
     };
   }
 
+  @action
+  allowedProperties() {
+    const properties = {};
+    Object.keys(MENU.options).forEach((key) => {
+      const value = MENU.options[key];
+      properties[key] = this.args[key] ?? value;
+    });
+    return properties;
+  }
+
   <template>
     <DButton
       class={{concatClass
         "fk-d-menu__trigger"
         (if this.menuInstance.expanded "-expanded")
+        (concat this.options.identifier "-trigger")
       }}
       id={{this.menuInstance.id}}
       data-identifier={{this.options.identifier}}
@@ -67,7 +83,7 @@ export default class DMenu extends Component {
       @translatedTitle={{@title}}
       @disabled={{@disabled}}
       aria-expanded={{if this.menuInstance.expanded "true" "false"}}
-      {{this.registerTrigger}}
+      {{this.registerTrigger (this.allowedProperties)}}
       ...attributes
     >
       {{#if (has-block "trigger")}}
@@ -79,7 +95,10 @@ export default class DMenu extends Component {
       <DFloatBody
         @instance={{this.menuInstance}}
         @trapTab={{this.options.trapTab}}
-        @mainClass="fk-d-menu"
+        @mainClass={{concatClass
+          "fk-d-menu"
+          (concat this.options.identifier "-content")
+        }}
         @innerClass="fk-d-menu__inner-content"
         @role="dialog"
         @inline={{this.options.inline}}