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)
+        text: room && room.topic ? room.topic.replace(replaceLinks, "<a href=\"$1\">$1</a>") : i18n("No Topic")
-        QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+        readonly property var replaceLinks: /(http[s]?:\/\/[^ \r\n]*)/g
-
+        textFormat: TextEdit.MarkdownText
-        QQC2.TextArea {
+        wrapMode: Text.Wrap
-            id: topicText
+        onLinkActivated: UrlHelper.openUrl(link)
-            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,124 +97,14 @@ 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
                     }
                 }
             }
 
-            Loader {
-                active: true
-                Layout.fillWidth: true
-                sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
-            }
-
-            Kirigami.ListSectionHeader {
-                label: i18n("Options")
-                activeFocusOnTab: false
-            }
-
-            Kirigami.BasicListItem {
-                id: devtoolsButton
-
-                icon: "tools"
-                text: i18n("Open developer tools")
-                visible: Config.developerTools
-
-                onClicked: {
-                    applicationWindow().pageStack.layers.push("qrc:/DevtoolsPage.qml", {room: room}, {title: i18n("Developer Tools")})
-                    roomDrawer.close();
-                }
-            }
-            Kirigami.BasicListItem {
-                id: searchButton
-
-                icon: "search"
-                text: i18n("Search in this room")
-
-                onClicked: {
-                    pageStack.pushDialogLayer("qrc:/SearchPage.qml", {
-                        currentRoom: room
-                    }, {
-                        title: i18nc("@action:title", "Search")
-                    })
-                }
-            }
-            Kirigami.BasicListItem {
-                id: locationsButton
-
-                icon: "map-flat"
-                text: i18n("Show locations for this room")
-
-                onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", {
-                    room: room
-                }, {
-                    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")
-                activeFocusOnTab: false
-                spacing: 0
-                visible: !room.isDirectChat()
-
-                QQC2.ToolButton {
-                    id: memberSearchToggle
-                    checkable: true
-                    icon.name: "search"
-                    QQC2.ToolTip.text: i18n("Search user in room")
-                    QQC2.ToolTip.visible: hovered
-                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                    onToggled: {
-                        userListSearchField.text = "";
-                    }
-                }
-
-                QQC2.ToolButton {
-                    visible: roomDrawer.room.canSendState("invite")
-                    icon.name: "list-add-user"
-
-                    onClicked: {
-                        applicationWindow().pageStack.layers.push("qrc:/InviteUserPage.qml", {room: roomDrawer.room})
-                        roomDrawer.close();
-                    }
-
-                    QQC2.ToolTip.text: i18n("Invite user to room")
-                    QQC2.ToolTip.visible: hovered
-                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                }
-
-                QQC2.Label {
-                    Layout.alignment: Qt.AlignRight
-                    text: room ? i18np("%1 member", "%1 members", room.joinedCount) : i18n("No member count")
-                }
-            }
-
-            Kirigami.SearchField {
-                id: userListSearchField
-                visible: memberSearchToggle.checked
-
-                onVisibleChanged: if (visible) forceActiveFocus()
-                Layout.fillWidth: true
-                Layout.leftMargin: Kirigami.Units.largeSpacing - 1
-                Layout.rightMargin: Kirigami.Units.largeSpacing - 1
-                Layout.bottomMargin: Kirigami.Units.smallSpacing
-
-                focusSequence: "Ctrl+Shift+F"
-
-                onAccepted: sortedMessageEventModel.filterString = text;
-            }
-
             QQC2.ScrollView {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -226,11 +114,130 @@ Kirigami.OverlayDrawer {
 
                 ListView {
                     id: userListView
-                    clip: true
-                    activeFocusOnTab: true
-                    visible: !room.isDirectChat()
 
-                    model: KSortFilterProxyModel {
+                    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
+                        }
+
+                        Kirigami.ListSectionHeader {
+                            label: i18n("Options")
+                            activeFocusOnTab: false
+                        }
+
+                        Kirigami.BasicListItem {
+                            id: devtoolsButton
+
+                            icon: "tools"
+                            text: i18n("Open developer tools")
+                            visible: Config.developerTools
+
+                            onClicked: {
+                                applicationWindow().pageStack.layers.push("qrc:/DevtoolsPage.qml", {room: room}, {title: i18n("Developer Tools")})
+                                roomDrawer.close();
+                            }
+                        }
+                        Kirigami.BasicListItem {
+                            id: searchButton
+
+                            icon: "search"
+                            text: i18n("Search in this room")
+
+                            onClicked: {
+                                pageStack.pushDialogLayer("qrc:/SearchPage.qml", {
+                                    currentRoom: room
+                                }, {
+                                    title: i18nc("@action:title", "Search")
+                                })
+                            }
+                        }
+                        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
+
+                            icon: "map-flat"
+                            text: i18n("Show locations for this room")
+
+                            onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", {
+                                room: room
+                            }, {
+                                title: i18nc("Locations on a map", "Locations")
+                            })
+                        }
+
+                        Kirigami.ListSectionHeader {
+                            label: i18n("Members")
+                            activeFocusOnTab: false
+                            spacing: 0
+                            visible: !room.isDirectChat()
+
+                            QQC2.ToolButton {
+                                id: memberSearchToggle
+                                checkable: true
+                                icon.name: "search"
+                                QQC2.ToolTip.text: i18n("Search user in room")
+                                QQC2.ToolTip.visible: hovered
+                                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                                onToggled: {
+                                    userListSearchField.text = "";
+                                }
+                            }
+
+                            QQC2.ToolButton {
+                                visible: roomDrawer.room.canSendState("invite")
+                                icon.name: "list-add-user"
+
+                                onClicked: {
+                                    applicationWindow().pageStack.layers.push("qrc:/InviteUserPage.qml", {room: roomDrawer.room})
+                                    roomDrawer.close();
+                                }
+
+                                QQC2.ToolTip.text: i18n("Invite user to room")
+                                QQC2.ToolTip.visible: hovered
+                                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                            }
+
+                            QQC2.Label {
+                                Layout.alignment: Qt.AlignRight
+                                text: room ? i18np("%1 member", "%1 members", room.joinedCount) : i18n("No member count")
+                            }
+                        }
+
+                        Kirigami.SearchField {
+                            id: userListSearchField
+                            visible: memberSearchToggle.checked
+
+                            onVisibleChanged: if (visible) forceActiveFocus()
+                            Layout.fillWidth: true
+                            Layout.leftMargin: Kirigami.Units.largeSpacing - 1
+                            Layout.rightMargin: Kirigami.Units.largeSpacing - 1
+                            Layout.bottomMargin: Kirigami.Units.smallSpacing
+
+                            focusSequence: "Ctrl+Shift+F"
+
+                            onAccepted: sortedMessageEventModel.filterString = text;
+                        }
+                    }
+
+                    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