Port most Avatar usage to new KirigamiAddons Avatar

(cherry picked from commit 847f41e1ad)

src/qml/Component/AvatarTabButton.qml

@@ -8,6 +8,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Templates 2.15 as T
 import org.kde.kirigami 2.20 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 Delegates.RoundedItemDelegate {
     id: root
@@ -30,7 +31,7 @@ Delegates.RoundedItemDelegate {
         onTapped: root.contextMenuRequested()
     }
 
-    contentItem: Kirigami.Avatar {
+    contentItem: KirigamiComponents.Avatar {
         source: root.source
         name: root.text
     }

src/qml/Component/ChatBox/CompletionMenu.qml

@@ -8,6 +8,8 @@ import QtQuick.Controls 2.15 as QQC2
 import Qt.labs.qmlmodels 1.0
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -43,6 +45,7 @@ QQC2.Popup {
     rightPadding: 0
     topPadding: 0
     bottomPadding: 0
+
     implicitHeight: Math.min(completions.contentHeight, Kirigami.Units.gridUnit * 10)
 
     contentItem: ListView {
@@ -53,23 +56,35 @@ QQC2.Popup {
         currentIndex: 0
         keyNavigationWraps: true
         highlightMoveDuration: 100
-        delegate: Kirigami.BasicListItem {
+        delegate: Delegates.RoundedItemDelegate {
-            text: model.text
+            id: completionDelegate
-            subtitle: model.subtitle ?? ""
+
-            labelItem.textFormat: Text.PlainText
+            required property int index
-            subtitleItem.textFormat: Text.PlainText
+            required property string displayName
-            leading: RowLayout {
+            required property string subtitle
-                Kirigami.Avatar {
+            required property string iconName
-                    visible: model.icon !== "invalid"
+
-                    Layout.preferredWidth: height
+            text: displayName
-                    Layout.fillHeight: true
+
-                    source: model.icon === "invalid" ? "" : ("image://mxc/" + model.icon)
+            contentItem: RowLayout {
-                    name: model.text
+                KirigamiComponents.Avatar {
+                    visible: completionDelegate.iconName !== "invalid"
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
+                    source: completionDelegate.iconName === "invalid" ? "" : ("image://" + completionDelegate.iconName)
+                    name: completionDelegate.text
+                }
+                Delegates.SubtitleContentItem {
+                    itemDelegate: completionDelegate
+                    labelItem.textFormat: Text.PlainText
+                    subtitle: completionDelegate.subtitle ?? ""
+                    subtitleItem.textFormat: Text.PlainText
                 }
             }
-            onClicked: completionMenu.chatDocumentHandler.complete(model.index)
+            onClicked: completionMenu.chatDocumentHandler.complete(completionDelegate.index)
         }
     }
+
     background: Rectangle {
         color: Kirigami.Theme.backgroundColor
     }

src/qml/Component/ChatBox/ReplyPane.qml

@@ -6,7 +6,8 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15 as QQC2
 
-import org.kde.kirigami 2.14 as Kirigami
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -40,7 +41,7 @@ GridLayout {
         implicitWidth: Kirigami.Units.smallSpacing
         color: userColor
     }
-    Kirigami.Avatar {
+    KirigamiComponents.Avatar {
         id: replyAvatar
 
         implicitWidth: Kirigami.Units.iconSizes.small

src/qml/Component/LocationMapItem.qml

@@ -9,6 +9,7 @@ import QtLocation 5.15
 import QtPositioning 5.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -44,7 +45,7 @@ MapQuickItem {
             isMask: true
             color: parent.color
         }
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -parent.height / 8
             visible: root.asset === "m.self"

src/qml/Component/Timeline/AvatarFlow.qml

@@ -5,6 +5,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 Flow {
     id: root
@@ -17,11 +18,11 @@ Flow {
     spacing: -avatarSize / 2
     Repeater {
         id: avatarFlowRepeater
-        delegate: Kirigami.Avatar {
+        delegate: KirigamiComponents.Avatar {
-            topInset: Kirigami.Units.smallSpacing / 2
+            required property var modelData
-            topPadding: Kirigami.Units.smallSpacing / 2
+
-            implicitWidth: avatarSize
+            implicitWidth: root.avatarSize
-            implicitHeight: avatarSize + Kirigami.Units.smallSpacing / 2
+            implicitHeight: root.avatarSize
 
             name: modelData.displayName
             source: modelData.avatarSource

src/qml/Component/Timeline/ReplyComponent.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -93,7 +94,7 @@ Item {
             implicitWidth: Kirigami.Units.smallSpacing
             color: root.author.color
         }
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             id: replyAvatar
 
             implicitWidth: Kirigami.Units.iconSizes.small

src/qml/Component/Timeline/StateComponent.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -21,14 +22,23 @@ RowLayout {
 
     implicitHeight: Math.max(label.contentHeight, stateAvatar.implicitHeight)
 
-    Kirigami.Avatar {
+    KirigamiComponents.Avatar {
         id: stateAvatar
+
         Layout.preferredWidth: Kirigami.Units.iconSizes.small
         Layout.preferredHeight: Kirigami.Units.iconSizes.small
 
         name: root.name
         color: root.color
 
+        Rectangle {
+            radius: height
+            height: 4
+            width: 4
+            color: root.color
+            anchors.centerIn: parent
+        }
+
         MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor

src/qml/Component/Timeline/StateDelegate.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -71,34 +72,61 @@ QQC2.Control {
             Flow {
                 visible: columnLayout.folded
                 spacing: -Kirigami.Units.iconSizes.small / 2
+
                 Repeater {
                     model: authorList
-                    delegate: Kirigami.Avatar {
+                    delegate: Item {
-                        topInset: Kirigami.Units.smallSpacing / 2
+                        id: avatarDelegate
-                        topPadding: Kirigami.Units.smallSpacing / 2
+
+                        required property var modelData
+
                         implicitWidth: Kirigami.Units.iconSizes.small
                         implicitHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing / 2
 
-                        name: modelData.displayName
+                        KirigamiComponents.Avatar {
-                        source: modelData.avatarSource
+                            y: Kirigami.Units.smallSpacing / 2
-                        color: modelData.color
+
+                            implicitWidth: Kirigami.Units.iconSizes.small
+                            implicitHeight: Kirigami.Units.iconSizes.small
+
+                            name: parent.modelData.displayName
+                            source: parent.modelData.avatarSource
+                            color: parent.modelData.color
+
+                            Rectangle {
+                                radius: height
+                                height: 4
+                                width: 4
+                                color: avatarDelegate.modelData.color
+                                anchors.centerIn: parent
+                            }
+                        }
                     }
                 }
+
                 QQC2.Label {
                     id: excessAuthorsLabel
+
                     text: model.excessAuthors
                     visible: model.excessAuthors !== ""
                     color: Kirigami.Theme.textColor
                     horizontalAlignment: Text.AlignHCenter
                     background: Kirigami.ShadowedRectangle {
-                        color: Kirigami.Theme.backgroundColor
                         Kirigami.Theme.inherit: false
                         Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+                        color: Kirigami.Theme.backgroundColor
                         radius: height / 2
-                        shadow.size: Kirigami.Units.smallSpacing
+
-                        shadow.color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                        shadow {
-                        border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                            size: Kirigami.Units.smallSpacing
-                        border.width: 1
+                            color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                        }
+
+                        border {
+                            color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
+                            width: 1
+                        }
                     }
 
                     height: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing
@@ -125,13 +153,13 @@ QQC2.Control {
                 visible: !columnLayout.folded
             }
             QQC2.ToolButton {
-                icon.name: (!columnLayout.folded ? "go-up" : "go-down")
+                icon {
-                icon.width: Kirigami.Units.iconSizes.small
+                    name: (!columnLayout.folded ? "go-up" : "go-down")
-                icon.height: Kirigami.Units.iconSizes.small
+                    width: Kirigami.Units.iconSizes.small
-
+                    height: Kirigami.Units.iconSizes.small
-                onClicked: {
-                    columnLayout.toggleFolded()
                 }
+
+                onClicked: columnLayout.toggleFolded()
             }
         }
         Repeater {

src/qml/Component/Timeline/TimelineContainer.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -353,15 +354,10 @@ ColumnLayout {
             }
         }
 
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
             id: avatar
-            width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0
+            width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0
             height: width
-            padding: Kirigami.Units.smallSpacing
-            topInset: Kirigami.Units.smallSpacing
-            bottomInset: Kirigami.Units.smallSpacing
-            leftInset: Kirigami.Units.smallSpacing
-            rightInset: Kirigami.Units.smallSpacing
             anchors {
                 left: parent.left
                 leftMargin: Kirigami.Units.smallSpacing

src/qml/Dialog/UserDetailDialog.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -37,7 +38,7 @@ Kirigami.OverlaySheet {
             Layout.bottomMargin: Kirigami.Units.largeSpacing
             spacing: Kirigami.Units.largeSpacing
 
-            Kirigami.Avatar {
+            KirigamiComponents.Avatar {
                 Layout.preferredWidth: Kirigami.Units.iconSizes.huge
                 Layout.preferredHeight: Kirigami.Units.iconSizes.huge
 

src/qml/Menu/Timeline/MessageDelegateContextMenu.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -222,11 +223,11 @@ Loader {
                         Layout.fillWidth: true
                         Layout.margins: Kirigami.Units.largeSpacing
                         spacing: Kirigami.Units.largeSpacing
-                        Kirigami.Avatar {
+                        KirigamiComponents.Avatar {
                             id: avatar
                             source: author.avatarSource
-                            Layout.preferredWidth: Kirigami.Units.gridUnit * 3
+                            Layout.preferredWidth: Kirigami.Units.gridUnit * 2
-                            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+                            Layout.preferredHeight: Kirigami.Units.gridUnit * 2
                             Layout.alignment: Qt.AlignTop
                         }
                         ColumnLayout {

src/qml/Page/InviteUserPage.qml

@@ -6,6 +6,8 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -68,38 +70,51 @@ Kirigami.ScrollablePage {
             text: i18n("No users available")
         }
 
-        delegate: Kirigami.BasicListItem {
+        delegate: Delegates.RoundedItemDelegate {
             id: delegate
+
+            required property string userID
+            required property string name
+            required property string avatar
+
             property bool inRoom: room && room.containsUser(userID)
 
-            label: model.name
+            text: name
-            subtitle: model.userID
 
-            leading: Kirigami.Avatar {
+            contentItem: RowLayout {
-                implicitWidth: height
+                KirigamiComponents.Avatar {
-                source: model.avatar ? ("image://mxc/" + model.avatar) : ""
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
-                name: model.name
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
-            }
+                    source: delegate.avatar ? ("image://mxc/" + delegate.avatar) : ""
-            trailing: QQC2.ToolButton {
+                    name: delegate.name
-                id: inviteButton
-                icon.name: "document-send"
-                text: i18n("Send invitation")
-                checkable: true
-                checked: inRoom
-                opacity: inRoom ? 0.5 : 1
-
-                onToggled: {
-                    if (inRoom) {
-                        checked = true
-                    } else {
-                        room.inviteToRoom(model.userID);
-                        applicationWindow().pageStack.layers.pop();
-                    }
                 }
 
-                QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited")
+                Delegates.SubtitleContentItem {
-                QQC2.ToolTip.visible: inviteButton.hovered
+                    itemDelegate: delegate
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    subtitle: delegate.userID
+                }
+
+                QQC2.ToolButton {
+                    id: inviteButton
+                    icon.name: "document-send"
+                    text: i18n("Send invitation")
+                    checkable: true
+                    checked: inRoom
+                    opacity: inRoom ? 0.5 : 1
+
+                    onToggled: {
+                        if (inRoom) {
+                            checked = true
+                        } else {
+                            room.inviteToRoom(delegate.userID);
+                            applicationWindow().pageStack.layers.pop();
+                        }
+                    }
+
+                    QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited")
+                    QQC2.ToolTip.visible: inviteButton.hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
             }
         }
     }

src/qml/Page/JoinRoomPage.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 import Qt.labs.qmlmodels 1.0
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -202,7 +203,7 @@ Kirigami.ScrollablePage {
                 applicationWindow().pageStack.layers.pop();
             }
             contentItem: RowLayout {
-                Kirigami.Avatar {
+                KirigamiComponents.Avatar {
                     Layout.preferredWidth: Kirigami.Units.gridUnit * 2
                     Layout.preferredHeight: Kirigami.Units.gridUnit * 2
 

src/qml/Page/RoomList/CollapsedRoomDelegate.qml

@@ -7,6 +7,7 @@ import QtQuick.Layouts 1.15
 import QtQml.Models 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -32,7 +33,7 @@ QQC2.ItemDelegate {
 
     visible: root.categoryVisible || filterText.length > 0 || Config.mergeRoomList
 
-    contentItem: Kirigami.Avatar {
+    contentItem: KirigamiComponents.Avatar {
         source: root.avatar ? `image://mxc/${root.avatar}` : ""
         name: root.displayName
 

src/qml/Page/RoomList/ContextMenu.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -157,7 +158,7 @@ Loader {
                     Layout.fillWidth: true
                     Layout.margins: Kirigami.Units.largeSpacing
                     spacing: Kirigami.Units.largeSpacing
-                    Kirigami.Avatar {
+                    KirigamiComponents.Avatar {
                         id: avatar
                         source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
                         name: room.displayName

src/qml/Page/RoomList/RoomDelegate.qml

@@ -8,6 +8,7 @@ import QtQml.Models 2.15
 
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as Components
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -39,7 +40,7 @@ Delegates.RoundedItemDelegate {
     }
 
     contentItem: RowLayout {
-        Kirigami.Avatar {
+        Components.Avatar {
             source: root.avatar ? "image://mxc/" +  root.avatar : ""
             name: root.displayName
             implicitWidth: visible ? height : 0

src/qml/Page/RoomList/SpaceListContextMenu.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -78,7 +79,7 @@ Loader {
                     Layout.fillWidth: true
                     Layout.margins: Kirigami.Units.largeSpacing
                     spacing: Kirigami.Units.largeSpacing
-                    Kirigami.Avatar {
+                    KirigamiComponents.Avatar {
                         id: avatar
                         source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : ""
                         Layout.preferredWidth: Kirigami.Units.gridUnit * 3

src/qml/Page/RoomList/UserInfo.qml

@@ -5,6 +5,8 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
 
 import org.kde.neochat 1.0
 
@@ -27,34 +29,28 @@ QQC2.ToolBar {
 
             header: Kirigami.Separator {}
 
-            footer: Kirigami.BasicListItem {
+            footer: Delegates.RoundedItemDelegate {
+                id: addButton
                 width: parent.width
-                highlighted: focus
+                highlighted: focus || (addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed
-                background: Rectangle {
-                    id: background
-                    color: addAccount.backgroundColor
-
-                    Rectangle {
-                        anchors.fill: parent
-                        visible: !Kirigami.Settings.tabletMode && addAccount.hoverEnabled
-                        color: addAccount.activeBackgroundColor
-                        opacity: {
-                            if ((addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed) {
-                                return .6
-                            } else if (addAccount.hovered && !addAccount.pressed) {
-                                return .3
-                            } else {
-                                return 0
-                            }
-                        }
-                    }
-                }
                 Component.onCompleted: userInfo.addAccount = this
-                icon: "list-add"
+                icon {
+                    name: "list-add"
+                    width: Kirigami.Units.iconSizes.smallMedium
+                    height: Kirigami.Units.iconSizes.smallMedium
+                }
                 text: i18n("Add Account")
-                subtitle: i18n("Log in to an existing account")
+                contentItem: Delegates.SubtitleContentItem {
+                    itemDelegate: parent
+                    subtitle: i18n("Log in to an existing account")
+                    labelItem.textFormat: Text.PlainText
+                    subtitleItem.textFormat: Text.PlainText
+                }
+
                 onClicked: {
-                    pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, {title: i18nc("@title:window", "Login")})
+                    pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, {
+                        title: i18nc("@title:window", "Login"),
+                    });
                     if (switchUserButton.checked) {
                         switchUserButton.checked = false
                     }
@@ -101,26 +97,36 @@ QQC2.ToolBar {
 
             width: parent.width
             Layout.preferredHeight: contentHeight
-            delegate: Kirigami.BasicListItem {
+            delegate: Delegates.RoundedItemDelegate {
-                leftPadding: topPadding
+                id: userDelegate
-                leading: Kirigami.Avatar {
+
-                    implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                required property var connection
-                    implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+
-                    sourceSize {
-                        width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                        height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
-                    }
-                    source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : ""
-                    name: model.connection.localUser.displayName ?? model.connection.localUser.id
-                }
                 width: parent.width
-                text: model.connection.localUser.displayName
+                text: connection.localUser.displayName
-                labelItem.textFormat: Text.PlainText
+
-                subtitleItem.textFormat: Text.PlainText
+                contentItem: RowLayout {
-                subtitle: model.connection.localUser.id
+                    KirigamiComponents.Avatar {
+                        implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        sourceSize {
+                            width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                            height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
+                        }
+                        source: userDelegate.connection.localUser.avatarMediaId ? ("image://mxc/" + userDelegate.connection.localUser.avatarMediaId) : ""
+                        name: userDelegate.connection.localUser.displayName ?? userDelegate.connection.localUser.id
+                    }
+
+                    Delegates.SubtitleContentItem {
+                        itemDelegate: userDelegate
+                        subtitle: userDelegate.connection.localUser.id
+                        labelItem.textFormat: Text.PlainText
+                        subtitleItem.textFormat: Text.PlainText
+                    }
+                }
 
                 onClicked: {
-                    Controller.activeConnection = model.connection
+                    Controller.activeConnection = userDelegate.connection
                     if (switchUserButton.checked) {
                         switchUserButton.checked = false
                     }
@@ -139,29 +145,31 @@ QQC2.ToolBar {
             Layout.bottomMargin: Kirigami.Units.smallSpacing
             Layout.minimumHeight: Kirigami.Units.gridUnit * 2 - 2 // HACK: -2 here is to ensure the ChatBox and the UserInfo have the same height
 
-            Kirigami.Avatar {
+            QQC2.AbstractButton {
-                readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId
-
                 Layout.preferredWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
                 Layout.preferredHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
                 Layout.leftMargin: Kirigami.Units.largeSpacing
 
-                source: mediaId ? ("image://mxc/" + mediaId) : ""
-                name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id
-                actions.main: Kirigami.Action {
-                    text: i18n("Edit this account")
-                    icon.name: "document-edit"
-                    onTriggered: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), {
-                        connection: Controller.activeConnection
-                    }, {
-                        title: i18n("Account editor")
-                    });
-                }
                 TapHandler {
                     acceptedButtons: Qt.RightButton
                     acceptedDevices: PointerDevice.Mouse
                     onTapped: accountMenu.open()
                 }
+
+                text: i18n("Edit this account")
+
+                onClicked: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), {
+                    connection: Controller.activeConnection
+                }, {
+                    title: i18n("Account editor")
+                });
+
+                contentItem: KirigamiComponents.Avatar {
+                    readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId
+
+                    source: mediaId ? ("image://mxc/" + mediaId) : ""
+                    name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id
+                }
             }
 
             ColumnLayout {

src/qml/Panel/DirectChatDrawerHeader.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -18,43 +19,45 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
     }
-    Kirigami.Avatar {
+
+    QQC2.AbstractButton {
         Layout.preferredWidth: Math.round(Kirigami.Units.gridUnit * 3.5)
         Layout.preferredHeight: Math.round(Kirigami.Units.gridUnit * 3.5)
         Layout.alignment: Qt.AlignHCenter
 
-        name: room ? room.displayName : ""
+        onClicked: {
-        source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+            const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
-
+                room: room,
-        Rectangle {
+                user: room.getUser(room.directChatRemoteUser.id),
-            visible: room.usesEncryption
+            })
-            color: Kirigami.Theme.backgroundColor
+            popup.closed.connect(() => {
-
+                userListItem.highlighted = false
-            width: Kirigami.Units.gridUnit
+            })
-            height: Kirigami.Units.gridUnit
+            if (roomDrawer.modal) {
-            anchors.bottom: parent.bottom
+                roomDrawer.close()
-            anchors.right: parent.right
-
-            radius: Math.round(width / 2)
-
-            Kirigami.Icon {
-                source: "channel-secure-symbolic"
-                anchors.fill: parent
             }
+            popup.open()
         }
-        actions.main: Kirigami.Action {
+
-            onTriggered: {
+        contentItem: KirigamiComponents.Avatar {
-                const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+            name: room ? room.displayName : ""
-                    room: room,
+            source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
-                    user: room.getUser(room.directChatRemoteUser.id),
+
-                })
+            Rectangle {
-                popup.closed.connect(() => {
+                visible: room.usesEncryption
-                    userListItem.highlighted = false
+                color: Kirigami.Theme.backgroundColor
-                })
+
-                if (roomDrawer.modal) {
+                width: Kirigami.Units.gridUnit
-                    roomDrawer.close()
+                height: Kirigami.Units.gridUnit
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+
+                radius: Math.round(width / 2)
+
+                Kirigami.Icon {
+                    source: "channel-secure-symbolic"
+                    anchors.fill: parent
                 }
-                popup.open()
             }
         }
     }

src/qml/Panel/GroupChatDrawerHeader.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.20 as Kirigami
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -19,9 +20,9 @@ ColumnLayout {
         Layout.leftMargin: Kirigami.Units.largeSpacing
         spacing: Kirigami.Units.largeSpacing
 
-        Kirigami.Avatar {
+        KirigamiComponents.Avatar {
-            Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
+            Layout.preferredWidth: Kirigami.Units.iconSizes.large
-            Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
+            Layout.preferredHeight: Kirigami.Units.iconSizes.large
 
             name: room ? room.displayName : ""
             source: room && room.avatarMediaId ? ("image://mxc/" +  room.avatarMediaId) : ""
@@ -47,6 +48,7 @@ ColumnLayout {
             }
         }
 
+
         ColumnLayout {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter
@@ -54,14 +56,13 @@ ColumnLayout {
 
             Kirigami.Heading {
                 Layout.fillWidth: true
-                type: Kirigami.Heading.Type.Primary
-                wrapMode: QQC2.Label.Wrap
                 text: room ? room.displayName : i18n("No name")
                 textFormat: Text.PlainText
             }
 
             Kirigami.SelectableLabel {
                 Layout.fillWidth: true
+                font: Kirigami.Theme.smallFont
                 textFormat: TextEdit.PlainText
                 text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias")
             }

src/qml/Panel/RoomDrawer.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.20 as Kirigami
 import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 import org.kde.kitemmodels 1.0
 
 import org.kde.neochat 1.0
@@ -302,7 +303,7 @@ Kirigami.OverlayDrawer {
                         }
 
                         contentItem: RowLayout {
-                            Kirigami.Avatar {
+                            KirigamiComponents.Avatar {
                                 implicitWidth: height
                                 sourceSize {
                                     height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5