Updating Converse upstream (with bootstrap5):

* bootstrap 5 compatibility
* other Converse updates integration
* hack to get the sidebar work as with Converse v10.
* modal onHide was renamed close.
* fix slow mode infobox margin.
* fix margin
* shorter action label, for better dropdown UX.

conversejs/custom/shared/modals/livechat-external-login.js

@@ -20,8 +20,8 @@ class ExternalLoginModal extends BaseModal {
     return __(LOC_login_using_external_account)
   }
 
-  onHide () {
-    super.onHide()
+  close () {
+    super.close()
     // kill the externalAuthGetResult handler if still there
     try {
       if (window.externalAuthGetResult) { window.externalAuthGetResult() }

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -8,7 +8,7 @@
   .dropdown-menu {
     // Fixing all dropdown colors
     --text-color: #212529; // default bootstrap color for dropdown-items
-    --text-color-lighten-15-percent: #8c8c8c; // default ConverseJS theme color
+    --inverse-link-color: #8c8c8c; // default ConverseJS theme color
 
     background-color: #fff; // this is the default bootstrap color, used by ConverseJS
 
@@ -27,6 +27,7 @@
       border: 1px dashed var(--peertube-menu-background);
       color: var(--peertube-main-foreground);
       background-color: var(--peertube-main-background);
+      margin: 0 5px;
 
       .livechat-hide-slow-mode-info-box {
         cursor: pointer;

conversejs/custom/shared/styles/_variables.scss

@@ -35,6 +35,7 @@ body.converse-embedded converse-root.theme-peertube {
   --foreground: var(--peertube-main-foreground);
   --background: var(--peertube-main-background);
   --subdued-color: #a8aba1;
+  --muc-color: var(--peertube-button-background);
   --green: #3aa569; // only in this file
   --redder-orange: #e77051; // only in this file
   --orange: #e7a151; // only in this file
@@ -55,7 +56,6 @@ body.converse-embedded converse-root.theme-peertube {
   --text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
   --text-color: var(--peertube-input-foreground);
   --controlbox-text-color: var(--peertube-input-foreground); // Note: controlbox is not used
-  --text-color-lighten-15-percent: var(--peertube-input-foreground);
   --message-text-color: var(--peertube-input-foreground);
   --message-receipt-color: var(--green);
   --save-button-color: var(--green);
@@ -73,7 +73,6 @@ body.converse-embedded converse-root.theme-peertube {
   --chat-correcting-color: var(--peertube-grey-background);
   --chat-head-color-dark: #1e9652; // should not be used in this plugin
   --chat-head-color-darker: #0e763b; // should not be used in this plugin
-  --chat-head-color-lighten-50-percent: #e7f7ee;  // should not be used in this plugin
   --chat-head-color: var(--green);
   --chat-head-text-color: var(--peertube-input-foreground);
   --chat-toolbar-btn-color: var(--peertube-button-background);
@@ -106,7 +105,6 @@ body.converse-embedded converse-root.theme-peertube {
   --controlbox-pane-background-color: #333;
   --controlbox-pane-bg-hover-color: #464646;
   --panel-divider-color: #333;
-  --chat-gutter: 0.5em;
   --minimized-chats-width: 130px;
   --mobile-chat-width: 100%;
   --mobile-chat-height: 400px;
@@ -119,9 +117,10 @@ body.converse-embedded converse-root.theme-peertube {
   --chatroom-badge-color: var(--peertube-button-background);
   --chatroom-badge-hover-color: var(--peertube-button-background);
   --chatroom-correcting-color: var(--peertube-grey-background);
-  --chatroom-head-bg-color-dark: #d24e2b;
+  --chatroom-head-bg-color-dark: var(--peertube-button-background);
   --chatroom-head-bg-color: var(--peertube-menu-background);
-  --chatroom-head-border-bottom: 1px solid var(--peertube-grey-foreground);
+  --chatroom-head-border-bottom: 0.15em solid var(--peertube-grey-foreground);
+  --chatroom-head-fg-color: var(--subdued-color);
   --chatroom-head-button-color: #999;
   --chatroom-head-color: var(--peertube-menu-foreground);
   --chatroom-head-description-border-left: 1px solid #ddd;
@@ -163,6 +162,7 @@ body.converse-embedded converse-root.theme-peertube {
   --fullpage-chat-width: 100%;
   --fullpage-emoji-picker-height: 300px;
   --fullpage-max-chat-textarea-height: 15em;
+  --overlayed-chat-gutter: 1em;
   --overlayed-chat-head-height: 55px;
   --overlayed-chat-height: 450px;
   --overlayed-chat-width: 300px;

conversejs/custom/shared/styles/livechat.scss

@@ -60,7 +60,7 @@ body.livechat-readonly.livechat-noscroll {
   }
 }
 
-// Viewer mode
+// Viewer mode (before the user has chosen its nickname)
 .livechat-viewer-mode-content {
   display: none;
 
@@ -73,7 +73,7 @@ body.livechat-readonly.livechat-noscroll {
     gap: 0.5em 10px;
     align-items: baseline;
 
-    .form-group,
+    fieldset,
     label {
       margin-bottom: 0 !important; // replaced by the gap on .livechat-viewer-mode-content
     }
@@ -171,7 +171,8 @@ body.converse-embedded {
 #peertube-plugin-livechat-container {
   converse-muc-message-form {
     // For an unknown reason, message field in truncated... so adding a bottom margin.
-    margin-bottom: 6px;
+    // We also add left and right margin, as Converse v11 adds a g-0 class on converse-muc-chatarea
+    margin: 0 1px 6px 5px;
   }
 }
 
@@ -187,4 +188,38 @@ body.converse-embedded {
     // So we must revert appearance:
     appearance: revert !important;
   }
+
+  .toolbar-buttons {
+    // Converse v11 removed the toggle_occupant button on the right.
+    // To add it back, we must ensure that this toolbar takes all the width, and
+    // that the toggle-occupants button is on the right.
+    flex-grow: 2;
+
+    .toggle-occupants {
+      // Cancelling the flex-grow from btn-group
+      flex-grow: 0 !important;
+
+      // This margin-left trick is to align the button on the right.
+      margin-left: auto !important;
+      order: 99;
+    }
+  }
+
+  // These CSS are tricks: Converse v11 tries to hide the MUC when screen width is under 768px.
+  // We don't want that, so we cancel the d-none.
+  // FIXME: these hacks should be temporary, waiting for some improvement on Converse.
+  converse-muc-chatarea {
+    .chat-area.d-none {
+      display: flex !important;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    converse-muc-sidebar {
+      width: auto !important;
+
+      .occupants {
+        width: 100%;
+      }
+    }
+  }
 }