Fix toggling of the spoiler form

sass/_chatbox.scss

@@ -321,6 +321,15 @@
                 width: 100%;
             }
 
+            .chat-textarea, input {
+                &:active, &:focus{
+                    outline-color: var(--chat-head-color);
+                }
+                &.correcting {
+                    background-color: var(--chat-correcting-color);
+                }
+            }
+
             .chat-textarea {
                 color: var(--chat-textarea-color);
                 background-color: var(--chat-textarea-background-color);
@@ -336,15 +345,9 @@
                 min-height: var(--chat-textarea-height);
                 margin-bottom: -4px; // Not clear why this is necessar :(
                 resize: none;
-                &:active, &:focus{
-                    outline-color: var(--chat-head-color);
-                }
                 &.spoiler {
                     height: 42px;
                 }
-                &.correcting {
-                    background-color: var(--chat-correcting-color);
-                }
             }
         }
         .dragresize {

sass/_chatrooms.scss

@@ -375,15 +375,17 @@
             .suggestion-box__results--above {
                 bottom: 4.5em;
             }
-            .chat-textarea {
+            .chat-textarea, input {
                 &:active, &:focus{
                     outline-color: var(--chatroom-head-bg-color);
                 }
-                border-bottom-right-radius: 0;
                 &.correcting {
                     background-color: var(--chatroom-correcting-color);
                 }
             }
+            .chat-textarea {
+                border-bottom-right-radius: 0;
+            }
         }
 
         .room-invite {

src/components/toolbar.js

@@ -20,6 +20,7 @@ export class ChatToolbar extends CustomElement {
     static get properties () {
         return {
             chatview: { type: Object }, // Used by getToolbarButtons hooks
+            composing_spoiler: { type: Boolean },
             hidden_occupants: { type: Boolean },
             is_groupchat: { type: Boolean },
             message_limit: { type: Number },
@@ -100,12 +101,13 @@ export class ChatToolbar extends CustomElement {
     }
 
     getSpoilerButton () {
-        if (!this.is_groupchat && this.model.presence.resources.length === 0) {
+        const model = this.model;
+        if (!this.is_groupchat && model.presence.resources.length === 0) {
             return;
         }
 
         let i18n_toggle_spoiler;
-        if (this.model.get('composing_spoiler')) {
+        if (this.composing_spoiler) {
             i18n_toggle_spoiler = __("Click to write as a normal (non-spoiler) message");
         } else {
             i18n_toggle_spoiler = __("Click to write your message as a spoiler");
@@ -122,9 +124,9 @@ export class ChatToolbar extends CustomElement {
         if (this.is_groupchat) {
             return markup;
         } else {
-            const contact_jid = this.model.get('jid');
+            const contact_jid = model.get('jid');
             const spoilers_promise = Promise.all(
-                this.model.presence.resources.map(
+                model.presence.resources.map(
                     r => api.disco.supports(Strophe.NS.SPOILER, `${contact_jid}/${r.get('name')}`)
                 )).then(results => results.reduce((acc, val) => (acc && val), true));
             return html`${until(spoilers_promise.then(() => markup), '')}`;

src/converse-chatview.js

@@ -189,6 +189,7 @@ converse.plugins.add('converse-chatview', {
                 this.listenTo(this.model, 'destroy', this.remove);
                 this.listenTo(this.model, 'show', this.show);
                 this.listenTo(this.model, 'vcard:change', this.renderHeading);
+                this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
 
                 if (this.model.contact) {
                     this.listenTo(this.model.contact, 'destroy', this.renderHeading);
@@ -351,8 +352,6 @@ converse.plugins.add('converse-chatview', {
                 const form_container = this.el.querySelector('.message-form-container');
                 render(tpl_chatbox_message_form(
                     Object.assign(this.model.toJSON(), {
-                        '__': __,
-                        'message_limit': api.settings.get('message_limit'),
                         'hint_value': this.el.querySelector('.spoiler-hint')?.value,
                         'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
                         'label_spoiler_hint': __('Optional hint'),
@@ -954,12 +953,6 @@ converse.plugins.add('converse-chatview', {
                 u.placeCaretAtEnd(textarea);
             },
 
-            toggleComposeSpoilerMessage () {
-                this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
-                this.renderMessageForm();
-                this.focus();
-            },
-
             onPresenceChanged (item) {
                 const show = item.get('show');
                 const fullname = this.model.getDisplayName();

src/converse-muc-views.js

@@ -456,6 +456,7 @@ converse.plugins.add('converse-muc-views', {
                 this.initDebounced();
 
                 this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250));
+                this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
                 this.listenTo(this.model, 'change:hidden_occupants', this.renderToolbar);
                 this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
                 this.listenTo(this.model, 'destroy', this.hide);

src/templates/toolbar.js

@@ -12,6 +12,7 @@ export default (o) => {
         <converse-chat-toolbar
             .chatview=${o.chatview}
             .model=${o.model}
+            ?composing_spoiler="${o.composing_spoiler}"
             ?hidden_occupants="${o.hidden_occupants}"
             ?is_groupchat="${o.is_groupchat}"
             ?show_call_button="${show_call_button}"