Use bootstrap's collapse feature to show/hide entity features

Author: jcbrand

src/plugins/roomslist/styles/roomsgroups.scss

@@ -1,6 +1,11 @@
 .conversejs {
-
     #chatrooms {
+        .collapsed {
+            height: 0 !important;
+            overflow: hidden !important;
+            padding: 0 !important;
+        }
+
         .muc-domain-group-toggle {
             margin: 0.75em 0 0.25em 0;
         }

src/plugins/rosterview/styles/roster.scss

@@ -1,6 +1,11 @@
 .conversejs {
-
     #controlbox {
+        .collapsed {
+            height: 0 !important;
+            overflow: hidden !important;
+            padding: 0 !important;
+        }
+
         .open-contacts-toggle, .open-contacts-toggle .fa {
             color: var(--chat-color) !important;
             &:hover {

src/plugins/todo/modals/add-todo-modal.js

@@ -1,3 +1,4 @@
+import { default as Collapse } from 'bootstrap/js/src/collapse.js';
 import { _converse, api, converse, parsers } from '@converse/headless';
 import BaseModal from 'plugins/modal/modal.js';
 import { __ } from 'i18n';
@@ -6,7 +7,6 @@ import tplAddTodo from './templates/add-todo-modal.js';
 const { Strophe } = converse.env;
 
 export default class AddTodoModal extends BaseModal {
-
     static get properties() {
         return {
             ...super.properties,
@@ -27,6 +27,14 @@ export default class AddTodoModal extends BaseModal {
         );
     }
 
+    /**
+     * @param {import('lit').PropertyValues} changed
+     */
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.collapse = new Collapse(/** @type {HTMLElement} */ (this));
+    }
+
     renderModal() {
         return tplAddTodo(this);
     }

src/plugins/todo/modals/templates/add-todo-modal.js

@@ -21,25 +21,41 @@ export default (el) => {
                   ? html`<div class="mb-3">
                         <label class="form-label">${__('Available PubSub services:')}</label>
                         <div class="list-group">
-                            ${el._entities.map(/** @param {import('@converse/headless').DiscoEntity} entity */(entity) => {
-                                const jid = entity.get('jid');
-                                const features = entity.features
-                                    .map((f) => f.get('var'))
-                                    .filter((f) => f.includes('pubsub'));
-                                return html`<div class="form-check">
-                                    <input
-                                        class="form-check-input"
-                                        type="radio"
-                                        name="pubsub_service"
-                                        id="${jid}"
-                                        value="${jid}"
-                                    />
-                                    <label class="form-check-label fw-bold" for="${jid}">${jid}</label>
-                                    <ul class="list-unstyled mt-2 text-muted small">
-                                        ${features.map((feature) => html`<li>${feature}</li>`)}
-                                    </ul>
-                                </div>`;
-                            })}
+                            ${el._entities.map(
+                                /** @param {import('@converse/headless').DiscoEntity} entity */ (entity) => {
+                                    const jid = entity.get('jid');
+                                    const features = entity.features
+                                        .map((f) => f.get('var'))
+                                        .filter((f) => f.includes('pubsub'));
+                                    return html`<div class="form-check">
+                                        <input
+                                            class="form-check-input"
+                                            type="radio"
+                                            name="jid"
+                                            id="${jid}"
+                                            value="${jid}"
+                                        />
+                                        <label class="form-check-label fw-bold" for="${jid}">${jid}</label>
+                                        <button
+                                            class="btn btn-link p-0"
+                                            type="button"
+                                            data-bs-toggle="collapse"
+                                            data-bs-target="#collapse-${jid}"
+                                            aria-expanded="false"
+                                            aria-controls="collapse-${jid}"
+                                        >
+                                            ${__('Show Features')}
+                                        </button>
+                                        <div class="collapse" id="collapse-${jid}">
+                                            <div class="card card-body">
+                                                <ul class="list-unstyled mt-2 text-muted small">
+                                                    ${features.map((feature) => html`<li>${feature}</li>`)}
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>`;
+                                }
+                            )}
                         </div>
                     </div>`
                   : html`<div class="mb-3">

src/shared/components/dropdownbase.js

@@ -3,6 +3,9 @@ import EventHandler from "bootstrap/js/src/dom/event-handler.js";
 import { CustomElement } from "./element.js";
 
 export default class DropdownBase extends CustomElement {
+    /**
+     * @param {import('lit').PropertyValues} changed
+     */
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.menu = this.querySelector(".dropdown-menu");

src/shared/styles/_core.scss

@@ -383,12 +383,6 @@
         animation-timing-function: ease-in-out;
     }
 
-    .collapsed {
-        height: 0 !important;
-        overflow: hidden !important;
-        padding: 0 !important;
-    }
-
     .locked {
         padding-inline-end: 22px;
     }