muc: add a add to contacts button

CHANGES.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Add a "Add to Contacts" button in MUC occupant modals
+
 ## 10.0.0 (2022-10-30)
 
 - Update to Strophe.js 1.6.0 which adds support for SCRAM-SHA-256 and SCRAM-SHA-512

src/plugins/muc-views/modals/occupant.js

@@ -1,7 +1,7 @@
 import BaseModal from "plugins/modal/modal.js";
 import tpl_occupant_modal from "./templates/occupant.js";
 import { _converse, api } from "@converse/headless/core";
-
+import { Model } from '@converse/skeletor/src/model.js';
 
 export default class OccupantModal extends BaseModal {
 
@@ -36,13 +36,27 @@ export default class OccupantModal extends BaseModal {
         const role = this.model?.get('role');
         const affiliation = this.model?.get('affiliation');
         const hats = this.model?.get('hats')?.length ? this.model.get('hats') : null;
-        return tpl_occupant_modal({ jid, vcard, nick, occupant_id, role, affiliation, hats });
+        const muc = this.model.collection.chatroom;
+        const addToContacts = api.contacts.get(jid).then(contact => {
+            if (!contact && muc.features.get('nonanonymous') && jid && jid != _converse.bare_jid) {
+                return this.addToContacts.bind(this);
+            }
+        });
+        return tpl_occupant_modal({ jid, vcard, nick, occupant_id, role, affiliation, hats, addToContacts });
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this
         const model = this.model ?? this.message;
         return model?.getDisplayName();
     }
+
+    addToContacts () {
+        const model = this.model ?? this.message;
+        const jid = model.get('jid');
+        if (jid) {
+            api.modal.show('converse-add-contact-modal', {'model': new Model({ jid })});
+        }
+    }
 }
 
 api.elements.define('converse-muc-occupant-modal', OccupantModal);

src/plugins/muc-views/modals/templates/occupant.js

@@ -1,9 +1,11 @@
 import 'shared/avatar/avatar.js';
 import { __ } from 'i18n';
 import { html } from "lit";
+import { until } from 'lit/directives/until.js';
 
 
 export default (o) => {
+    const addToContacts = o.addToContacts.then(add => add ? html`<li><button class="btn btn-primary" type="button" @click=${add}>${__('Add to Contacts')}</button></li>` : '');
     return html`
         <div class="row">
             <div class="col-auto">
@@ -33,6 +35,7 @@ export default (o) => {
                     <li>
                         ${ o.occupant_id ? html`<div class="row"><strong>${__('Occupant Id')}:</strong></div><div class="row">${o.occupant_id}</div>` : '' }
                     </li>
+                    ${ until(addToContacts, '') }
                 </ul>
             </div>
         </div>