minor: move the actions buttons outside of their drawer next to the message

src/plugins/sib-action-buttons-inline.js

+/**
+ * Render the action buttons off the drawer.
+ * The buttons should be shown on message hover, on the right side of the message.
+ */
+converse.plugins.add('sib-action-buttons-inline', {
+  initialize() {
+    const { html } = converse.env;
+    const _converse = this._converse;
+    const { api } = _converse;
+
+    const MessageActions = api.elements.registry['converse-message-actions'];
+
+    function getInlineActionsItem(o) {
+      return html`
+        <button class='chat-msg__action ${o.button_class}' @click='${o.handler}' title='${o.i18n_text}'>
+          <converse-icon class='${o.icon_class}'
+                         path-prefix='${api.settings.get('assets_path')}'
+                         color='var(--text-color-lighten-15-percent)'
+                         size='1em'></converse-icon>
+        </button>
+      `;
+    }
+
+    Object.assign(MessageActions.prototype, {
+      async renderActions() {
+        const buttons = await this.getActionButtons();
+        const items = buttons.map(b => getInlineActionsItem(b));
+
+        if (items.length) {
+          return html`
+            <div class='chat-msg__actions chat-msg__actions--inline'>${items}</div>
+          `;
+        } else {
+          return '';
+        }
+      },
+    });
+  },
+});

src/solid-xmpp-chat.js

@@ -6,6 +6,7 @@ import './conversejs/converse.min.js';
 import './conversejs/emojis.js';
 
 import './plugins/converse-rai.js';
+import './plugins/sib-action-buttons-inline.js';
 import './plugins/sib-chat-navigation.js';
 import './plugins/sib-custom-hats.js';
 import './plugins/sib-disconnected.js';
@@ -223,6 +224,7 @@ export const SolidXMPPChat = {
         },
         'whitelisted_plugins': [
           'converse-rai',
+          'sib-action-buttons-inline',
           'sib-chat-navigation',
           'sib-connected',
           'sib-custom-hats',

src/styles/index.scss

@@ -871,4 +871,14 @@
   .converse-chatboxes .chatbox .box-flyout {
     width: 100% !important;
   }
+
+  // Message actions (inline)
+
+  .chat-msg:not(:hover) .chat-msg__actions--inline {
+    display: none;
+  }
+
+  .chat-msg__actions--inline {
+    display: flex;
+  }
 }
\ No newline at end of file