Fix icons only mode

- Fix the headers in icons only mode.
- Allow section collapsing
- Show scrollbar when needed

[2022-12-12_19-06-46.mkv](/uploads/e1633058b2b4a24ef7b6144bf5392b9c/2022-12-12_19-06-46.mkv)

BUG: 462576

src/qml/Page/RoomListPage.qml

@@ -116,9 +116,7 @@ Kirigami.ScrollablePage {
     title: i18n("Rooms")
 
     property var enteredRoom
-    property bool collapsedMode: Config.roomListPageWidth === applicationWindow().collapsedPageWidth && applicationWindow().shouldUseSidebars
+    property bool collapsedMode: Config.roomListPageWidth < applicationWindow().minPageWidth && applicationWindow().shouldUseSidebars
-
-    verticalScrollBarPolicy: collapsedMode ? QQC2.ScrollBar.AlwaysOff : QQC2.ScrollBar.AsNeeded
 
     onCollapsedModeChanged: if (collapsedMode) {
         sortFilterRoomListModel.filterText = "";
@@ -180,7 +178,7 @@ Kirigami.ScrollablePage {
             leftPadding: Kirigami.Units.largeSpacing
             rightPadding: Kirigami.Units.largeSpacing
             bottomPadding: Kirigami.Units.largeSpacing
-            width: visible ? page.width : 0
+            width: visible ? ListView.view.width : 0
             height: visible ? Kirigami.Units.gridUnit * 2 : 0
 
             Kirigami.Icon {
@@ -234,19 +232,44 @@ Kirigami.ScrollablePage {
         }
 
         section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null
-        section.delegate: Kirigami.ListSectionHeader {
+        section.delegate: page.collapsedMode ? foldButton : sectionHeader
-            id: sectionHeader
-            height: implicitHeight
-            label: roomListModel.categoryName(section)
-            action: Kirigami.Action {
-                onTriggered: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
-            }
-            contentItem.children: QQC2.ToolButton {
-                icon.name: page.collapsedMode ? roomListModel.categoryIconName(section) : (roomListModel.categoryVisible(section) ? "go-up" : "go-down")
-                icon.width: Kirigami.Units.iconSizes.small
-                icon.height: Kirigami.Units.iconSizes.small
 
-                onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
+        Component {
+            id: sectionHeader
+            Kirigami.ListSectionHeader {
+                height: implicitHeight
+                label: roomListModel.categoryName(section)
+                action: Kirigami.Action {
+                    onTriggered: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
+                }
+                contentItem.children: QQC2.ToolButton {
+                    icon.name: (roomListModel.categoryVisible(section) ? "go-up" : "go-down")
+                    icon.width: Kirigami.Units.iconSizes.small
+                    icon.height: Kirigami.Units.iconSizes.small
+
+                    onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
+                }
+            }
+        }
+        Component {
+            id: foldButton
+            Item {
+                width: ListView.view.width
+                height: visible ? width : 0
+                QQC2.ToolButton {
+                    id: button
+                    anchors.centerIn: parent
+
+                    icon.name: hovered ? (roomListModel.categoryVisible(section) ? "go-up" : "go-down") : roomListModel.categoryIconName(section)
+                    icon.width: Kirigami.Units.iconSizes.smallMedium
+                    icon.height: Kirigami.Units.iconSizes.smallMedium
+
+                    onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
+
+                    QQC2.ToolTip.text: roomListModel.categoryName(section)
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
             }
         }
 
@@ -272,7 +295,8 @@ Kirigami.ScrollablePage {
                 rightPadding: Kirigami.Units.largeSpacing
                 bottomPadding: Kirigami.Units.largeSpacing
                 width: ListView.view.width
-                height: ListView.view.width
+                height: visible ? ListView.view.width : 0
+                visible: model.categoryVisible || sortFilterRoomListModel.filterText.length > 0 || Config.mergeRoomList
 
                 contentItem: Kirigami.Avatar {
                     source: avatar ? "image://mxc/" + avatar : ""

src/qml/main.qml

@@ -24,6 +24,7 @@ Kirigami.ApplicationWindow {
     pageStack.initialPage: LoadingPage {}
     pageStack.globalToolBar.canContainHandles: true
 
+    property RoomListPage roomListPage
     property bool roomListLoaded: false
 
     property RoomPage roomPage
@@ -164,7 +165,7 @@ Kirigami.ApplicationWindow {
 
     readonly property int defaultPageWidth: Kirigami.Units.gridUnit * 17
     readonly property int minPageWidth: Kirigami.Units.gridUnit * 10
-    readonly property int collapsedPageWidth: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3
+    readonly property int collapsedPageWidth: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3 + (roomListPage.contentItem.QQC2.ScrollBar.vertical.visible ? roomListPage.contentItem.QQC2.ScrollBar.vertical.width : 0)
     readonly property bool shouldUseSidebars: RoomManager.hasOpenRoom && (Config.roomListPageWidth > minPageWidth ? root.width >= Kirigami.Units.gridUnit * 35 : root.width > Kirigami.Units.gridUnit * 27) && roomListLoaded
     readonly property int pageWidth: {
         if (Config.roomListPageWidth === -1) {
@@ -351,6 +352,7 @@ Kirigami.ApplicationWindow {
                     activeConnection: Controller.activeConnection
                 });
                 roomListLoaded = true;
+                roomListPage = pageStack.currentItem
                 RoomManager.loadInitialRoom();
             }
         }