Select badge to display

customize.dist/src/less2/include/badges.less

@@ -0,0 +1,28 @@
+@import (reference) "./colortheme-all.less";
+@import (reference) "./variables.less";
+.badges_vars(
+    @width: 30px
+) {
+    @badges-width: @width;
+}
+.badges_main(@width: 30px) {
+    --LessLoader_require: LessLoader_currentFile();
+    .badges_vars(@width);
+    --badges-width: @badges-width;
+    --badges-font: ceil(@badges-width*2/3);
+}
+& {
+    .badges_vars();
+    i.cp-badge {
+        width: var(--badges-width);
+        height: var(--badges-width);
+        box-sizing: border-box;
+        border: 1px solid @cryptpad_text_col;
+        border-radius: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        font-size: var(--badges-font);
+    }
+}
+

www/common/inner/badges.js

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+define([
+    'jquery',
+    '/common/common-interface.js',
+    '/common/hyperscript.js',
+    '/customize/messages.js',
+], function ($, UI, h, Messages, nThen) {
+    var Badges = {};
+
+    const badges = {
+        admin: 'fa-star-o',
+        moderator: 'fa-life-ring',
+        premium: 'fa-check-circle'
+    }
+
+    Badges.render = id => {
+        let icon = badges[id];
+        if (!icon) { return; }
+        let cls = icon.indexOf('cptools') === 0 ? 'cptools '+icon : 'fa '+icon;
+        return h('i', { 'class': `cp-badge ${cls}` });
+    };
+
+    return Badges;
+});
+
+

www/profile/app-profile.less

@@ -7,6 +7,7 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
 @import (reference) '../../customize/src/less2/include/variables.less';
+@import (reference) '../../customize/src/less2/include/badges.less';
 
 &.cp-app-profile {
 
@@ -26,6 +27,29 @@
         margin-top: 1rem;
     }
 
+    .cp-profile-badges {
+        display: flex;
+        align-items: center;
+        & > span {
+            margin-right: 1em;
+        }
+        .cp-profile-badges-list {
+            .badges_main(40px);
+            i {
+                cursor: pointer;
+                &:focus-visible {
+                    outline: @variables_focus_style;
+                }
+                &:not(:last-child) {
+                    margin-right: 0.5em;
+                }
+                &.cp-selected {
+                    border-color: @cryptpad_color_brand;
+                }
+            }
+        }
+    }
+
     #cp-app-profile-header {
         display: flex;
         flex-flow: row wrap;

www/profile/inner.js

@@ -17,6 +17,7 @@ define([
     '/common/common-realtime.js',
     '/common/clipboard.js',
     '/common/inner/common-mediatag.js',
+    '/common/inner/badges.js',
     '/common/hyperscript.js',
     '/customize/messages.js',
     '/customize/application_config.js',
@@ -48,6 +49,7 @@ define([
     Realtime,
     Clipboard,
     MT,
+    Badges,
     h,
     Messages,
     AppConfig,
@@ -459,10 +461,35 @@ define([
         var $block = $('<div>', {id: BADGES_ID, class:'cp-sidebarlayout-element'}).appendTo($container);
         APP.$badges = $(h('span')).appendTo($block);
     };
-    const refreshBadges = () => {
+    const refreshBadges = (obj) => {
         if (!APP.$badges) { return; }
         APP.badge.execCommand('LIST_BADGES', {}, data => {
-            console.error(data);
+            APP.$badges.empty();
+            let spinner;
+            let all = data.map(str => {
+                const i = Badges.render(str);
+                const $i = $(i).attr('tabindex', 0);
+                const selected = obj?.badge === str;
+                if (selected) { $i.addClass('cp-selected'); }
+                Util.onClickEnter($i, () => {
+                    let value = selected ? '' : str;
+                    spinner.spin();
+                    APP.module.execCommand('SET', {
+                        key: 'badge',
+                        value
+                    }, function (data) {
+                        spinner.hide();
+                        APP.updateValues(data);
+                    });
+                });
+                return i;
+            });
+            let content = h('div.cp-profile-badges', [
+                h('span', 'Badges'),
+                h('div.cp-profile-badges-list', all)
+            ]);
+            APP.$badges.append(content);
+            spinner = UI.makeSpinner(APP.$badges.find('> div'));
         });
     };
 
@@ -481,7 +508,7 @@ define([
             }, [
                 h('i.fa.fa-pencil', {'aria-hidden': 'true' }),
                 h('span#cp-profile-add-description-button', Messages.profile_addDescription)
-            ]);        
+            ]);
         APP.$descriptionEdit = $(button);
         var save = h('button.btn.btn-primary', Messages.settings_save);
         var text = h('textarea');