diff --git a/src/icons/thin/user-power-100.svg b/src/icons/thin/user-power-100.svg
new file mode 100644
index 00000000..a005bb27
--- /dev/null
+++ b/src/icons/thin/user-power-100.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/thin/user-power-50.svg b/src/icons/thin/user-power-50.svg
new file mode 100644
index 00000000..030fd553
--- /dev/null
+++ b/src/icons/thin/user-power-50.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/qml/Base/HUserAvatar.qml b/src/qml/Base/HUserAvatar.qml
index bb6b3b0d..42bddb68 100644
--- a/src/qml/Base/HUserAvatar.qml
+++ b/src/qml/Base/HUserAvatar.qml
@@ -6,4 +6,36 @@ HAvatar {
property string userId
property string displayName
+ property int powerLevel: 0
+
+ readonly property bool admin: powerLevel >= 100
+ readonly property bool moderator: powerLevel >= 50 && ! admin
+
+
+ HLoader {
+ active: admin || moderator
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.topMargin: -16 / 2
+ anchors.leftMargin: anchors.topMargin
+ z: 100
+
+ sourceComponent: HIcon {
+ dimension: 16
+ svgName: "user-power-" + (admin ? "100" : "50")
+ colorize: admin ?
+ theme.chat.roomSidePane.member.adminIcon :
+ theme.chat.roomSidePane.member.moderatorIcon
+
+ HoverHandler { id: powerIconHover }
+
+ HToolTip {
+ visible: powerIconHover.hovered
+ text: admin ?
+ qsTr("Admin (%1 power)").arg(powerLevel) :
+ qsTr("Moderator (%1 power)").arg(powerLevel)
+ }
+ }
+ }
+
}
diff --git a/src/qml/Chat/RoomSidePane/MemberDelegate.qml b/src/qml/Chat/RoomSidePane/MemberDelegate.qml
index d7e5b097..beb2c0bd 100644
--- a/src/qml/Chat/RoomSidePane/MemberDelegate.qml
+++ b/src/qml/Chat/RoomSidePane/MemberDelegate.qml
@@ -10,6 +10,7 @@ HTileDelegate {
userId: model.user_id
displayName: model.display_name
mxc: model.avatar_url
+ powerLevel: model.power_level
}
title.text: model.display_name || model.user_id
diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl
index 52faf6f2..9ce77c6c 100644
--- a/src/themes/Default.qpl
+++ b/src/themes/Default.qpl
@@ -299,9 +299,11 @@ chat:
color background: colors.mediumBackground
member:
- color background: "transparent"
- color name: colors.text
- color subtitle: colors.dimText
+ color background: "transparent"
+ color name: colors.text
+ color subtitle: colors.dimText
+ color adminIcon: hsluv(60, colors.saturation * 2.25, 60)
+ color moderatorIcon: adminIcon
inviteButton:
color background: colors.inputBackground