Make the whole right sidebar scrollable

The sidebar grew a lot and now contains some tools. This makes the space
left for the room members very small. Particuliary on mobile.

So make the whole sidebar contained inside the ScrollView

This also refactor a few things (e.g. use a plain ToolBar for the header)

src/qml/Panel/DirectChatDrawerHeader.qml

@@ -48,7 +48,7 @@ ColumnLayout {
                     room: room,
                     user: room.getUser(room.directChatRemoteUser.id),
                 })
-                popup.closed.connect(function() {
+                popup.closed.connect(() => {
                     userListItem.highlighted = false
                 })
                 if (roomDrawer.modal) {
@@ -61,7 +61,6 @@ ColumnLayout {
 
     Kirigami.Heading {
         Layout.fillWidth: true
-        level: 1
         type: Kirigami.Heading.Type.Primary
         wrapMode: QQC2.Label.Wrap
         text: room.displayName

src/qml/Panel/GroupChatDrawerHeader.qml

@@ -11,7 +11,9 @@ import org.kde.neochat 1.0
 
 ColumnLayout {
     id: root
+
     Layout.fillWidth: true
+
     RowLayout {
         Layout.fillWidth: true
         Layout.leftMargin: Kirigami.Units.largeSpacing
@@ -30,8 +32,11 @@ ColumnLayout {
 
                 width: Kirigami.Units.gridUnit
                 height: Kirigami.Units.gridUnit
-                anchors.bottom: parent.bottom
+
-                anchors.right: parent.right
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                }
 
                 radius: Math.round(width / 2)
 
@@ -49,12 +54,12 @@ ColumnLayout {
 
             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
@@ -63,36 +68,15 @@ ColumnLayout {
         }
     }
 
-    QQC2.ScrollView {
+    Kirigami.SelectableLabel {
+        Layout.fillWidth: true
         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
-            MouseArea {
-                anchors.fill: parent
-                acceptedButtons: Qt.NoButton
-                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
-            }
-            background: Item {}
     }
 }
-
-}

src/qml/Panel/RoomDrawer.qml

@@ -71,26 +71,24 @@ Kirigami.OverlayDrawer {
     contentItem: Loader {
         id: loader
         active: roomDrawer.drawerOpen
+
         sourceComponent: ColumnLayout {
-            id: columnLayout
+            readonly property string userSearchText: userListView.headerItem.userListSearchField.text
-            property alias userSearchText: userListSearchField.text
             property alias highlightedUser: userListView.currentIndex
-            spacing: Kirigami.Units.largeSpacing
 
-            Kirigami.AbstractApplicationHeader {
+            spacing: 0
+
+            QQC2.ToolBar {
                 Layout.fillWidth: true
-                topPadding: Kirigami.Units.smallSpacing / 2;
-                bottomPadding: Kirigami.Units.smallSpacing / 2;
-                rightPadding: Kirigami.Units.largeSpacing
-                leftPadding: Kirigami.Units.largeSpacing
 
-                RowLayout {
+                Layout.preferredHeight: pageStack.globalToolBar.preferredHeight
-                    anchors.fill: parent
+
+                contentItem: RowLayout {
                     Kirigami.Heading {
                         Layout.fillWidth: true
                         text: i18n("Room information")
-                        level: 1
                     }
+
                     QQC2.ToolButton {
                         id: settingsButton
 
@@ -99,16 +97,36 @@ Kirigami.OverlayDrawer {
                         display: QQC2.AbstractButton.IconOnly
 
                         onClicked: QQC2.ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/Categories.qml', {room: room}, { title: i18n("Room Settings") })
-                        QQC2.ToolTip {
+
-                            text: settingsButton.text
+                        QQC2.ToolTip.text: text
-                        }
+                        QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                        QQC2.ToolTip.visible: hovered
                     }
                 }
             }
 
+            QQC2.ScrollView {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+                ListView {
+                    id: userListView
+
+                    header: ColumnLayout {
+                        id: columnLayout
+
+                        property alias userListSearchField: userListSearchField
+
+                        spacing: Kirigami.Units.largeSpacing
+                        width: userListView.width
+
                         Loader {
                             active: true
                             Layout.fillWidth: true
+                            Layout.topMargin: Kirigami.Units.smallSpacing
                             sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
                         }
 
@@ -143,6 +161,15 @@ Kirigami.OverlayDrawer {
                                 })
                             }
                         }
+                        Kirigami.BasicListItem {
+                            id: favouriteButton
+
+                            icon: room && room.isFavourite ? "rating" : "rating-unrated"
+                            text: room && room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite")
+
+                            onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
+                        }
+
                         Kirigami.BasicListItem {
                             id: locationsButton
 
@@ -155,14 +182,6 @@ Kirigami.OverlayDrawer {
                                 title: i18nc("Locations on a map", "Locations")
                             })
                         }
-            Kirigami.BasicListItem {
-                id: favouriteButton
-
-                icon: room && room.isFavourite ? "rating" : "rating-unrated"
-                text: room && room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite")
-
-                onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
-            }
 
                         Kirigami.ListSectionHeader {
                             label: i18n("Members")
@@ -216,21 +235,9 @@ Kirigami.OverlayDrawer {
 
                             onAccepted: sortedMessageEventModel.filterString = text;
                         }
+                    }
 
-            QQC2.ScrollView {
+                    KSortFilterProxyModel {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
-                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
-
-                ListView {
-                    id: userListView
-                    clip: true
-                    activeFocusOnTab: true
-                    visible: !room.isDirectChat()
-
-                    model: KSortFilterProxyModel {
                         id: sortedMessageEventModel
 
                         sourceModel: UserListModel {
@@ -243,6 +250,11 @@ Kirigami.OverlayDrawer {
                         filterCaseSensitivity: Qt.CaseInsensitive
                     }
 
+                    model: room.isDirectChat() ? 0 : sortedMessageEventModel
+
+                    clip: true
+                    activeFocusOnTab: true
+
                     delegate: Kirigami.BasicListItem {
                         id: userListItem