Make room pane resizable, spacing between accounts

harmonyqml/AccountDelegate.qml

@@ -2,41 +2,50 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
 
-Rectangle {
+Column {
     readonly property string displayName:
         Backend.getUser(section).display_name
 
-    color: "#111"
     width: roomListView.width
-    height: childrenRect.height
+    height: paddingItem.height + row.height
 
-    RowLayout {
+    Item { id: paddingItem; width: 1; height: row.height / 2 }
+
+    Row {
         id: row
-        spacing: 1
         width: parent.width
+        height: avatar.height
 
         Avatar { id: avatar; username: displayName }
 
-        ColumnLayout {
-            spacing: 1
+        Rectangle {
+            color: "#111"
+            width: parent.width - avatar.width
+            height: parent.height
 
-            PlainLabel {
-                id: accountLabel
-                text: displayName
-                color: "#CCC"
-                elide: Text.ElideRight
-                maximumLineCount: 1
-                Layout.fillWidth: true
-            }
-            TextField {
-                id: statusEdit
-                placeholderText: qsTr("Set status message")
-                background: Rectangle { color: "#333" }
-                color: "#CCC"
-                selectByMouse: true
-                font.family: "Roboto"
-                font.pixelSize: 12
-                Layout.fillWidth: true
+            ColumnLayout {
+                anchors.fill: parent
+                spacing: 1
+
+                PlainLabel {
+                    id: accountLabel
+                    text: displayName
+                    horizontalAlignment: Qt.AlignHCenter
+                    color: "#CCC"
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                    Layout.fillWidth: true
+                }
+                TextField {
+                    id: statusEdit
+                    placeholderText: qsTr("Set status message")
+                    background: Rectangle { color: "#333" }
+                    color: "#CCC"
+                    selectByMouse: true
+                    font.family: "Roboto"
+                    font.pixelSize: 12
+                    Layout.fillWidth: true
+                }
             }
         }
     }

harmonyqml/RoomPane.qml

@@ -4,12 +4,17 @@ import QtQuick.Layouts 1.4
 
 Rectangle {
     id: roomPane
-    Layout.preferredWidth: 150
+    width: 180
+    Layout.minimumWidth: 48
     Layout.fillHeight: true
     color: "gray"
+    clip: true  // Avoid artifacts when resizing pane width to minimum
 
     Column {
-        anchors.fill: parent
+        x: parent.x
+        y: parent.y - 48 / 2
+        width: parent.width
+        height: parent.height + 48 / 2
         ListView {
             width: parent.width
             height: parent.height - actionBar.height

harmonyqml/UI.qml

@@ -1,9 +1,9 @@
+import QtQuick.Controls 1.4 as Controls1
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 
-RowLayout {
+Controls1.SplitView {
     anchors.fill: parent
-    spacing: 0
 
     RoomPane {}