Improve RoomDrawer for direct chats

Don't show irrelevant stuff like the member list, description, alias

BUG: 466895

src/neochatroom.cpp

@@ -1913,3 +1913,16 @@ QByteArray NeoChatRoom::roomAcountDataJson(const QString &eventType)
 {
     return QJsonDocument(accountData(eventType)->fullJson()).toJson();
 }
+
+QUrl NeoChatRoom::avatarForMember(NeoChatUser *user) const
+{
+#ifdef QUOTIENT_07
+    return connection()->makeMediaUrl(memberAvatarUrl(user->id()));
+#else
+    QUrl url(QStringLiteral("mxc://%1").arg(user->avatarMediaId()));
+    QUrlQuery q(url.query());
+    q.addQueryItem(QStringLiteral("user_id"), user->id());
+    url.setQuery(q);
+    return url;
+#endif
+}

src/neochatroom.h

@@ -754,6 +754,8 @@ public:
      */
     Q_INVOKABLE QByteArray roomAcountDataJson(const QString &eventType);
 
+    Q_INVOKABLE [[nodiscard]] QUrl avatarForMember(NeoChatUser *user) const;
+
 private:
     QSet<const Quotient::RoomEvent *> highlights;
 

src/qml/Dialog/UserDetailDialog.qml

@@ -19,8 +19,7 @@ Kirigami.OverlaySheet {
     property var user
 
     property string displayName: user.displayName
-    property string avatarMediaId: user.avatarMediaId
+    readonly property string avatar: room.avatarForMember(user)
-    property string avatarUrl: user.avatarUrl
 
     parent: applicationWindow().overlay
 
@@ -46,7 +45,7 @@ Kirigami.OverlaySheet {
                 Layout.preferredHeight: Kirigami.Units.iconSizes.huge
 
                 name: displayName
-                source: avatarMediaId ? ("image://mxc/" + avatarMediaId) : ""
+                source: avatar ?? ""
                 color: user.color
             }
 

src/qml/Panel/DirectChatDrawerHeader.qml

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+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.neochat 1.0
+
+ColumnLayout {
+    Layout.fillWidth: true
+    Layout.alignment: Qt.AlignVCenter
+    spacing: 0
+
+    Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
+    }
+    Kirigami.Avatar {
+        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 : ""
+        source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+
+        Rectangle {
+            visible: room.usesEncryption
+            color: Kirigami.Theme.backgroundColor
+
+            width: Kirigami.Units.gridUnit
+            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
+            }
+        }
+        actions.main: Kirigami.Action {
+            onTriggered: {
+                const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                    room: room,
+                    user: room.directChatRemoteUser,
+                })
+                popup.closed.connect(function() {
+                    userListItem.highlighted = false
+                })
+                if (roomDrawer.modal) {
+                    roomDrawer.close()
+                }
+                popup.open()
+            }
+        }
+    }
+
+    Kirigami.Heading {
+        Layout.fillWidth: true
+        level: 1
+        type: Kirigami.Heading.Type.Primary
+        wrapMode: QQC2.Label.Wrap
+        text: room.displayName
+        textFormat: Text.PlainText
+        horizontalAlignment: Text.AlignHCenter
+    }
+}

src/qml/Panel/GroupChatDrawerHeader.qml

@@ -0,0 +1,99 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+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.neochat 1.0
+
+ColumnLayout {
+    id: root
+    Layout.fillWidth: true
+    RowLayout {
+        Layout.fillWidth: true
+        Layout.leftMargin: Kirigami.Units.largeSpacing
+        spacing: Kirigami.Units.largeSpacing
+
+        Kirigami.Avatar {
+            Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
+
+            name: room ? room.displayName : ""
+            source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+
+            Rectangle {
+                visible: room.usesEncryption
+                color: Kirigami.Theme.backgroundColor
+
+                width: Kirigami.Units.gridUnit
+                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
+                }
+            }
+        }
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+
+            Kirigami.Heading {
+                Layout.fillWidth: true
+                level: 1
+                type: Kirigami.Heading.Type.Primary
+                wrapMode: QQC2.Label.Wrap
+                text: room ? room.displayName : i18n("No name")
+                textFormat: Text.PlainText
+            }
+            Kirigami.SelectableLabel {
+                Layout.fillWidth: true
+                textFormat: TextEdit.PlainText
+                text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias")
+            }
+        }
+    }
+
+    QQC2.ScrollView {
+        Layout.leftMargin: Kirigami.Units.largeSpacing
+        Layout.rightMargin: Kirigami.Units.largeSpacing
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        Layout.maximumHeight: Math.min(topicText.contentHeight, Kirigami.Units.gridUnit * 15)
+
+        // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+        QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+        QQC2.TextArea {
+            id: topicText
+            padding: 0
+            text: room && room.topic ? room.topic.replace(replaceLinks, "<a href=\"$1\">$1</a>") : i18n("No Topic")
+            readonly property var replaceLinks: /(http[s]?:\/\/[^ \r\n]*)/g
+            textFormat: TextEdit.MarkdownText
+            wrapMode: Text.Wrap
+            selectByMouse: true
+            color: Kirigami.Theme.textColor
+            selectedTextColor: Kirigami.Theme.highlightedTextColor
+            selectionColor: Kirigami.Theme.highlightColor
+            onLinkActivated: UrlHelper.openUrl(link)
+            readOnly: true
+            width: parent.width
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton
+                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
+            }
+            background: Item {}
+        }
+    }
+
+}

src/qml/Panel/RoomDrawer.qml

@@ -106,87 +106,10 @@ Kirigami.OverlayDrawer {
                 }
             }
 
-            RowLayout {
+            Loader {
+                active: true
                 Layout.fillWidth: true
-                Layout.leftMargin: Kirigami.Units.largeSpacing
+                sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
-                spacing: Kirigami.Units.largeSpacing
-
-                Kirigami.Avatar {
-                    Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
-                    Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
-
-                    name: room ? room.displayName : ""
-                    source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
-
-                    Rectangle {
-                        visible: room.usesEncryption
-                        color: Kirigami.Theme.backgroundColor
-
-                        width: Kirigami.Units.gridUnit
-                        height: Kirigami.Units.gridUnit
-                        anchors.bottom: parent.bottom
-                        anchors.right: parent.right
-
-                        radius: width / 2
-
-                        Kirigami.Icon {
-                            source: "channel-secure-symbolic"
-                            anchors.fill: parent
-                        }
-                    }
-                }
-
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignVCenter
-                    spacing: 0
-
-                    Kirigami.Heading {
-                        Layout.fillWidth: true
-                        level: 1
-                        type: Kirigami.Heading.Type.Primary
-                        wrapMode: QQC2.Label.Wrap
-                        text: room ? room.displayName : i18n("No name")
-                        textFormat: Text.PlainText
-                    }
-                    Kirigami.SelectableLabel {
-                        Layout.fillWidth: true
-                        textFormat: TextEdit.PlainText
-                        text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias")
-                    }
-                }
-            }
-
-            QQC2.ScrollView {
-                Layout.leftMargin: Kirigami.Units.largeSpacing
-                Layout.rightMargin: Kirigami.Units.largeSpacing
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                Layout.minimumHeight: Math.min(topicText.contentHeight, Kirigami.Units.gridUnit * 15)
-
-                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
-                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
-
-                QQC2.TextArea {
-                    id: topicText
-                    padding: 0
-                    text: room && room.topic ? room.topic.replace(replaceLinks, "<a href=\"$1\">$1</a>") : i18n("No Topic")
-                    readonly property var replaceLinks: /(http[s]?:\/\/[^ \r\n]*)/g
-                    textFormat: TextEdit.MarkdownText
-                    wrapMode: Text.WordWrap
-                    selectByMouse: true
-                    color: Kirigami.Theme.textColor
-                    selectedTextColor: Kirigami.Theme.highlightedTextColor
-                    selectionColor: Kirigami.Theme.highlightColor
-                    onLinkActivated: UrlHelper.openUrl(link)
-                    readOnly: true
-                    MouseArea {
-                        anchors.fill: parent
-                        acceptedButtons: Qt.NoButton
-                        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
-                    }
-                    background: Item {}
-                }
             }
 
             Kirigami.ListSectionHeader {
@@ -233,6 +156,7 @@ Kirigami.OverlayDrawer {
                 label: i18n("Members")
                 activeFocusOnTab: false
                 spacing: 0
+                visible: !room.isDirectChat()
 
                 QQC2.ToolButton {
                     id: memberSearchToggle
@@ -284,7 +208,6 @@ Kirigami.OverlayDrawer {
             QQC2.ScrollView {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                Layout.minimumHeight: Math.min(topicText.contentHeight, Kirigami.Units.gridUnit * 15)
 
                 // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
                 QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
@@ -293,6 +216,7 @@ Kirigami.OverlayDrawer {
                     id: userListView
                     clip: true
                     activeFocusOnTab: true
+                    visible: !room.isDirectChat()
 
                     model: KSortFilterProxyModel {
                         id: sortedMessageEventModel
@@ -317,7 +241,10 @@ Kirigami.OverlayDrawer {
                         labelItem.textFormat: Text.PlainText
 
                         onClicked: {
-                            const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {room: room, user: user, displayName: name, avatarMediaId: avatar})
+                            const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {
+                                room: room,
+                                user: user, displayName: name,
+                            })
                             popup.closed.connect(function() {
                                 userListItem.highlighted = false
                             })
@@ -364,4 +291,14 @@ Kirigami.OverlayDrawer {
 
         UserDetailDialog {}
     }
+
+    Component {
+        id: groupChatDrawerHeader
+        GroupChatDrawerHeader {}
+    }
+
+    Component {
+        id: directChatDrawerHeader
+        DirectChatDrawerHeader {}
+    }
 }

src/res.qrc

@@ -73,6 +73,8 @@
         <file alias="LoginMethod.qml">qml/Component/Login/LoginMethod.qml</file>
         <file alias="Sso.qml">qml/Component/Login/Sso.qml</file>
         <file alias="RoomDrawer.qml">qml/Panel/RoomDrawer.qml</file>
+        <file alias="DirectChatDrawerHeader.qml">qml/Panel/DirectChatDrawerHeader.qml</file>
+        <file alias="GroupChatDrawerHeader.qml">qml/Panel/GroupChatDrawerHeader.qml</file>
         <file alias="UserDetailDialog.qml">qml/Dialog/UserDetailDialog.qml</file>
         <file alias="CreateRoomDialog.qml">qml/Dialog/CreateRoomDialog.qml</file>
         <file alias="EmojiDialog.qml">qml/Dialog/EmojiDialog.qml</file>