feat(sync): show a very minimal list of connected peers

cf #2267

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/js/modules/sync/engine.js

@@ -146,9 +146,8 @@ export class SyncEngine {
     updater.applyMessage(operation)
   }
 
-  getNumberOfConnectedPeers() {
-    if (this.peers) return Object.keys(this.peers).length
-    return 0
+  getPeers() {
+    return this.peers || {}
   }
 
   /**

umap/static/umap/js/modules/ui/bar.js

@@ -2,6 +2,7 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 import { WithTemplate } from '../utils.js'
 import ContextMenu from './contextmenu.js'
+import * as Utils from '../utils.js'
 
 const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
@@ -96,13 +97,16 @@ export class TopBar extends WithTemplate {
       }
     })
 
-    const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
     this.elements.peers.addEventListener('mouseover', () => {
-      if (!connectedPeers) return
+      const connectedPeers = this._umap.sync.getPeers()
+      if (!Object.keys(connectedPeers).length) return
+      const ul = Utils.loadTemplate(
+        `<ul>${Object.entries(connectedPeers)
+          .map(([id, name]) => `<li>${name || translate('Anonymous')}</li>`)
+          .join('')}</ul>`
+      )
       this._umap.tooltip.open({
-        content: translate('{connectedPeers} peer(s) currently connected to this map', {
-          connectedPeers: connectedPeers,
-        }),
+        content: ul,
         anchor: this.elements.peers,
         position: 'bottom',
         delay: 500,

umap/static/umap/js/modules/ui/tooltip.js

@@ -21,7 +21,11 @@ export default class Tooltip extends Positioned {
 
   open(opts) {
     const showIt = () => {
+      if (opts.content.nodeType === 1) {
+        this.container.appendChild(opts.content)
+      } else {
         this.container.innerHTML = Utils.escapeHTML(opts.content)
+      }
       this.parent.classList.add('umap-tooltip')
       this.openAt(opts)
     }

umap/static/umap/js/modules/umap.js

@@ -1351,7 +1351,7 @@ export default class Umap extends ServerStored {
       numberOfConnectedPeers: () => {
         Utils.eachElement('.connected-peers span', (el) => {
           if (this.sync.websocketConnected) {
-            el.textContent = this.sync.getNumberOfConnectedPeers()
+            el.textContent = Object.keys(this.sync.getPeers()).length
           } else {
             el.textContent = translate('Disconnected')
           }