Show `99+` when number of unread messages go over 99.

src/plugins/muc-views/muc.js

@@ -29,7 +29,7 @@ export default class MUCView extends BaseChatView {
     }
 
     render () {
-        return tplMuc({ 'model': this.model });
+        return tplMuc(this);
     }
 
     onConnectionStatusChanged () {

src/plugins/muc-views/styles/muc-occupants.scss

@@ -111,8 +111,11 @@
                             }
 
                             .msgs-indicator {
-                                margin-left: -0.5em;
+                                margin-left: -3em;
                                 margin-right: 0.5em;
+                                margin-top: -0.25em;
+                                position: absolute;
+                                font-size: xx-small;
                             }
 
                             .occupant-nick-badge {

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

@@ -8,14 +8,17 @@ import { html } from "lit";
 import { getChatRoomBodyTemplate } from '../utils.js';
 
 
-export default (o) => {
+/**
+ * @param {import('../muc').default} el
+ */
+export default (el) => {
     return html`
         <div class="flyout box-flyout">
             <converse-dragresize></converse-dragresize>
-            ${ o.model ? html`
-                <converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row g-0">
+            ${ el.model ? html`
+                <converse-muc-heading jid="${el.model.get('jid')}" class="chat-head chat-head-chatroom row g-0">
                 </converse-muc-heading>
-                <div class="chat-body chatroom-body row g-0">${getChatRoomBodyTemplate(o)}</div>
+                <div class="chat-body chatroom-body row g-0">${getChatRoomBodyTemplate(el.model)}</div>
             ` : '' }
         </div>`;
 }

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

@@ -178,7 +178,7 @@ export default (o, chat) => {
                            style="margin-top: -0.1em"
                            size="0.82em"
                            class="${classes} chat-status chat-status--avatar"></converse-icon>
-                        ${ num_unread ? html`<span class="msgs-indicator">${ num_unread }</span>` : '' }
+                        ${ num_unread ? html`<span class="msgs-indicator badge">${ num_unread }</span>` : '' }
                     </a>
                 </div>
                 <div class="col occupant-nick-badge">

src/plugins/muc-views/utils.js

@@ -103,11 +103,14 @@ export function getNicknameRequiredTemplate (model) {
     }
 }
 
-export function getChatRoomBodyTemplate (o) {
-    const view = o.model.session.get('view');
-    const jid = o.model.get('jid');
+/**
+ * @param {MUC} model
+ */
+export function getChatRoomBodyTemplate (model) {
+    const view = model.session.get('view');
+    const jid = model.get('jid');
     const RS = converse.ROOMSTATUS;
-    const conn_status =  o.model.session.get('connection_status');
+    const conn_status =  model.session.get('connection_status');
 
     if (view === converse.MUC.VIEWS.CONFIG) {
         return html`<converse-muc-config-form class="muc-form-container" jid="${jid}"></converse-muc-config-form>`;
@@ -116,7 +119,7 @@ export function getChatRoomBodyTemplate (o) {
             ${ conn_status == RS.PASSWORD_REQUIRED ? html`<converse-muc-password-form class="muc-form-container" jid="${jid}"></converse-muc-password-form>` : '' }
             ${ conn_status == RS.ENTERED ? html`<converse-muc-chatarea class="row g-0" jid="${jid}"></converse-muc-chatarea>` : '' }
             ${ conn_status == RS.CONNECTING ? tplSpinner({class: 'vertically-centered'}) : '' }
-            ${ conn_status == RS.NICKNAME_REQUIRED ? getNicknameRequiredTemplate(o.model) : '' }
+            ${ conn_status == RS.NICKNAME_REQUIRED ? getNicknameRequiredTemplate(model) : '' }
             ${ conn_status == RS.DISCONNECTED ? html`<converse-muc-disconnected jid="${jid}"></converse-muc-disconnected>` : '' }
             ${ conn_status == RS.BANNED ? html`<converse-muc-disconnected jid="${jid}"></converse-muc-disconnected>` : '' }
             ${ conn_status == RS.DESTROYED ? html`<converse-muc-destroyed jid="${jid}"></converse-muc-destroyed>` : '' }

src/plugins/roomslist/templates/roomslist.js

@@ -8,6 +8,7 @@ import 'plugins/muc-views/modals/add-muc.js';
 import 'plugins/muc-views/modals/muc-list.js';
 import { __ } from 'i18n';
 import { addBookmarkViaEvent } from 'plugins/bookmark-views/utils.js';
+import { getUnreadMsgsDisplay } from "shared/chat/utils";
 
 import '../styles/roomsgroups.scss';
 
@@ -39,7 +40,7 @@ function tplBookmark (room) {
 
 /** @param {MUC} room */
 function tplUnreadIndicator (room) {
-    return html`<span class="list-item-badge badge badge--muc msgs-indicator">${ room.get('num_unread') }</span>`;
+    return html`<span class="list-item-badge badge badge--muc msgs-indicator">${ getUnreadMsgsDisplay(room) }</span>`;
 }
 
 function tplActivityIndicator () {

src/plugins/rosterview/templates/roster_item.js

@@ -4,6 +4,7 @@
 import { __ } from 'i18n';
 import { api } from "@converse/headless";
 import { html } from "lit";
+import { getUnreadMsgsDisplay } from 'shared/chat/utils.js';
 import { STATUSES } from '../constants.js';
 
 /**
@@ -35,7 +36,7 @@ export default  (el) => {
         [classes, color] = ['fa fa-circle', 'subdued-color'];
     }
    const desc_status = STATUSES[show];
-   const num_unread = el.model.get('num_unread') || 0;
+   const num_unread = getUnreadMsgsDisplay(el.model);
    const display_name = el.model.getDisplayName();
    const jid = el.model.get('jid');
    const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', display_name, jid);
@@ -58,7 +59,7 @@ export default  (el) => {
             size="1em"
             class="${classes} chat-status chat-status--avatar"></converse-icon>
       </span>
-      ${ num_unread ? html`<span class="msgs-indicator">${ num_unread }</span>` : '' }
+      ${ num_unread ? html`<span class="msgs-indicator badge">${ num_unread }</span>` : '' }
       <span class="contact-name contact-name--${show} ${ num_unread ? 'unread-msgs' : ''}">${display_name}</span>
    </a>
    ${ api.settings.get('allow_contact_removal') ? tplRemoveLink(el) : '' }`;

src/shared/styles/messages.scss

@@ -6,11 +6,6 @@
     .msgs-indicator {
         color: var(--text-color-invert);
         background-color: var(--chat-color);
-        opacity: 1;
-        border-radius: 10%;
-        padding: 0.2em 0.4em;
-        font-size: var(--font-size-small);
-        margin-right: 0;
     }
 
     .message {

src/types/plugins/muc-views/templates/muc.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import("../muc").default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=muc.d.ts.map

src/types/plugins/muc-views/utils.d.ts

@@ -20,7 +20,10 @@ export function destroyMUC(model: MUC): Promise<any>;
  * @param {MUC} model
  */
 export function getNicknameRequiredTemplate(model: MUC): import("lit").TemplateResult<1>;
-export function getChatRoomBodyTemplate(o: any): import("lit").TemplateResult<1>;
+/**
+ * @param {MUC} model
+ */
+export function getChatRoomBodyTemplate(model: MUC): import("lit").TemplateResult<1>;
 /**
  * @param {MUC} muc
  * @param {Suggestion} text