Use `repeat` directive to render roster items

spec/controlbox.js

@@ -116,7 +116,7 @@ describe("The Controlbox", function () {
             await u.waitUntil(() => el.querySelector('.restore-chat .message-count')?.textContent === '2');
             expect(rosterview.querySelector('.msgs-indicator').textContent).toBe('2');
             chatview.model.set({'minimized': false});
-            expect(_converse.chatboxviews.el.querySelector('.restore-chat .message-count')).toBe(null);
+            expect(el.querySelector('.restore-chat .message-count')).toBe(null);
             await u.waitUntil(() => rosterview.querySelector('.msgs-indicator') === null);
             done();
         }));

src/plugins/rosterview/contactview.js

@@ -68,7 +68,7 @@ class RosterContact extends CustomElement {
         }
     }
 
-    renderRosterItem (item) { // eslint-disable-line class-methods-use-this
+    renderRosterItem (item) {
         const STATUSES = {
             'dnd': __('This contact is busy'),
             'online': __('This contact is online'),
@@ -101,8 +101,7 @@ class RosterContact extends CustomElement {
                 'removeContact':  ev => this.removeContact(ev),
                 'getAvatarData': () => this.getAvatarData(),
                 'desc_status': STATUSES[show],
-                'num_unread': item.get('num_unread') || 0,
-                classes: ''
+                'num_unread': item.get('num_unread') || 0
             })
         );
     }

src/plugins/rosterview/templates/roster.js

@@ -3,6 +3,7 @@ import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
 import { contactsComparator, groupsComparator } from '@converse/headless/plugins/roster/utils.js';
 import { html } from "lit-html";
+import { repeat } from 'lit-html/directives/repeat.js';
 import { shouldShowContact, shouldShowGroup } from '../utils.js';
 
 
@@ -54,7 +55,7 @@ export default () => {
         </div>
         <converse-roster-filter></converse-roster-filter>
         <div class="list-container roster-contacts">
-            ${ groupnames?.map(name => {
+            ${ repeat(groupnames, n => n, name => {
                 const contacts = contacts_map[name].filter(c => shouldShowContact(c));
                 contacts.sort(contactsComparator);
                 if (contacts.length) {