Show the creator or future room's avatar

src/qml/Pages/AddChat/AddChat.qml

@@ -4,13 +4,18 @@ import QtQuick.Layouts 1.12
 import "../../Base"
 
 HPage {
+    id: addChatPage
     onFocusChanged: createRoom.forceActiveFocus()
 
+
+    property string userId
+
+
     HColumnLayout {
         Layout.alignment: Qt.AlignCenter
         Layout.minimumWidth: Layout.maximumWidth
         Layout.maximumWidth:
-            Math.max(tabBar.implicitWidth, swipeView.contentWidth)
+            Math.max(tabBar.contentWidth, swipeView.contentWidth)
 
         TabBar {
             id: tabBar

src/qml/Pages/AddChat/CreateRoom.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../Base"
+import "../../utils.js" as Utils
 
 HBox {
     id: addChatBox
@@ -16,6 +17,33 @@ HBox {
     buttonCallbacks: ({
     })
 
+    HRoomAvatar {
+        // TODO: click to change the avatar
+        id: avatar
+        clientUserId: addChatPage.userId
+        displayName: nameField.text
+
+        Layout.alignment: Qt.AlignCenter
+        Layout.preferredWidth: 128
+        Layout.preferredHeight: Layout.preferredWidth
+
+        HUserAvatar {
+            anchors.fill: parent
+            z: 10
+            opacity: nameField.text ? 0 : 1
+            visible: opacity > 0
+            clientUserId: parent.clientUserId
+            userId: clientUserId
+            displayName: account ? account.display_name : ""
+            mxc: account ? account.avatar_url : ""
+
+            readonly property var account:
+                Utils.getItem(modelSources["Account"] || [], "user_id", userId)
+
+            Behavior on opacity { HNumberAnimation {} }
+        }
+    }
+
     HTextField {
         id: nameField
         placeholderText: qsTr("Name")

src/qml/SidePane/AccountDelegate.qml

@@ -63,7 +63,9 @@ HTileDelegate {
         icon.name: "add-account"  // TODO
         backgroundColor: "transparent"
         toolTip.text: qsTr("Add new chat")
-        onClicked: pageLoader.showPage("AddChat/AddChat")
+        onClicked: pageLoader.showPage(
+            "AddChat/AddChat", {userId: model.data.user_id},
+        )
 
         leftPadding: theme.spacing / 2
         rightPadding: leftPadding