Roomlist Drag Improvements

- Move the room list drag handler and logic to RoomList.qml.
- Make the compact mode logic not rely on a saved width value from Config as this was causing the room list to have large icons the first launch after a recent update.
- Instead save the compact mode state and initialise the width based upon that.

src/neochatconfig.kcfg

@@ -41,9 +41,6 @@
       <label>"Show your messages on the right</label>
       <default>true</default>
     </entry>
-    <entry name="RoomListPageWidth" type="int">
-      <default>-1</default>
-    </entry>
     <entry name="RoomDrawerWidth" type="int">
       <default>-1</default>
     </entry>
@@ -108,6 +105,10 @@
       <label>Show avatar in the room drawer</label>
       <default>true</default>
     </entry>
+    <entry name="Collapsed" type="bool">
+      <label>Save the collapsed state of the room list</label>
+      <default>false</default>
+    </entry>
   </group>
   <group name="NetworkProxy">
     <entry name="ProxyType" type="Enum">

src/qml/Page/RoomListPage.qml

@@ -15,8 +15,21 @@ import org.kde.neochat 1.0
 Kirigami.ScrollablePage {
     id: page
 
+    /**
+     * @brief The current width of the room list.
+     *
+     * @note Other objects can access the value but the private function makes sure
+     *       that only the internal members can modify it.
+     */
+    readonly property int currentWidth: _private.currentWidth
+
+    readonly property bool collapsed: Config.collapsed
+    onCollapsedChanged: if (collapsed) {
+        sortFilterRoomListModel.filterText = "";
+    }
+
     header: ColumnLayout {
-        visible: !page.collapsedMode
+        visible: !page.collapsed
         spacing: 0
 
         ListView {
@@ -116,11 +129,6 @@ Kirigami.ScrollablePage {
     }
 
     property var enteredRoom
-    property bool collapsedMode: Config.roomListPageWidth < applicationWindow().minPageWidth && applicationWindow().shouldUseSidebars
-
-    onCollapsedModeChanged: if (collapsedMode) {
-        sortFilterRoomListModel.filterText = "";
-    }
 
     Connections {
         target: RoomManager
@@ -170,7 +178,7 @@ Kirigami.ScrollablePage {
     titleDelegate: ExploreComponent {
         Layout.fillWidth: true
         desiredWidth: page.width - Kirigami.Units.largeSpacing
-        collapsed: collapsedMode
+        collapsed: page.collapsed
     }
 
     ListView {
@@ -180,7 +188,7 @@ Kirigami.ScrollablePage {
         clip: AccountRegistry.count > 1
 
         header: QQC2.ItemDelegate {
-            visible: page.collapsedMode
+            visible: page.collapsed
             action: Kirigami.Action {
                 id: enterRoomAction
                 onTriggered: quickView.item.open();
@@ -243,7 +251,7 @@ Kirigami.ScrollablePage {
         }
 
         section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null
-        section.delegate: page.collapsedMode ? foldButton : sectionHeader
+        section.delegate: page.collapsed ? foldButton : sectionHeader
 
         Component {
             id: sectionHeader
@@ -287,7 +295,7 @@ Kirigami.ScrollablePage {
         reuseItems: true
         currentIndex: -1 // we don't want any room highlighted by default
 
-        delegate: page.collapsedMode ? collapsedModeListComponent : normalModeListComponent
+        delegate: page.collapsed ? collapsedModeListComponent : normalModeListComponent
 
         Component {
             id: collapsedModeListComponent
@@ -437,6 +445,61 @@ Kirigami.ScrollablePage {
 
     footer: UserInfo {
         width: parent.width
-        visible: !page.collapsedMode
+        visible: !page.collapsed
+    }
+
+    MouseArea {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        parent: applicationWindow().overlay.parent
+
+        x: page.currentWidth - width / 2
+        width: Kirigami.Units.smallSpacing * 2
+        z: page.z + 1
+        enabled: RoomManager.hasOpenRoom && applicationWindow().width >= Kirigami.Units.gridUnit * 35
+        visible: enabled
+        cursorShape: Qt.SplitHCursor
+
+        property int _lastX
+
+        onPressed: mouse => {
+            _lastX = mouse.x;
+        }
+        onPositionChanged: mouse => {
+            if (_lastX == -1) {
+                return;
+            }
+            if (mouse.x > _lastX) {
+                // we moved to the right
+                if (_private.currentWidth < _private.collapseWidth && _private.currentWidth + (mouse.x - _lastX) >= _private.collapseWidth) {
+                    // Here we get back directly to a more wide mode.
+                    _private.currentWidth = _private.collapseWidth;
+                    Config.collapsed = false;
+                } else if (_private.currentWidth >= _private.collapseWidth) {
+                    // Increase page width
+                    _private.currentWidth = Math.min(_private.defaultWidth, _private.currentWidth + (mouse.x - _lastX));
+                }
+            } else if (mouse.x < _lastX) {
+                const tmpWidth = _private.currentWidth - (_lastX - mouse.x);
+                if (tmpWidth < _private.collapseWidth) {
+                    _private.currentWidth = Qt.binding(() => _private.collapsedSize + (page.contentItem.QQC2.ScrollBar.vertical.visible ? page.contentItem.QQC2.ScrollBar.vertical.width : 0));
+                    Config.collapsed = true;
+                } else {
+                    _private.currentWidth = tmpWidth;
+                }
+            }
+        }
+    }
+
+    /*
+     * Hold the modifiable currentWidth in a private object so that only internal
+     * members can modify it.
+     */
+    QtObject {
+        id: _private
+        property int currentWidth: Config.collapsed ? collapsedSize : defaultWidth
+        readonly property int defaultWidth: Kirigami.Units.gridUnit * 17
+        readonly property int collapseWidth: Kirigami.Units.gridUnit * 10
+        readonly property int collapsedSize: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3
     }
 }

src/qml/main.qml

@@ -15,7 +15,7 @@ Kirigami.ApplicationWindow {
 
     property int columnWidth: Kirigami.Units.gridUnit * 13
 
-    minimumWidth: Kirigami.Units.gridUnit * 15
+    minimumWidth: Kirigami.Units.gridUnit * 20
     minimumHeight: Kirigami.Units.gridUnit * 15
 
     visible: false // Will be overridden in Component.onCompleted
@@ -163,71 +163,9 @@ Kirigami.ApplicationWindow {
         handleVisible: enabled
     }
 
-    readonly property int defaultPageWidth: Kirigami.Units.gridUnit * 17
+    pageStack.defaultColumnWidth: roomListPage ? roomListPage.currentWidth : 0
-    readonly property int minPageWidth: Kirigami.Units.gridUnit * 10
-    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) {
-            return defaultPageWidth;
-        } else if (Config.roomListPageWidth < minPageWidth) {
-            return collapsedPageWidth;
-        } else {
-            return Config.roomListPageWidth;
-        }
-    }
-
-    pageStack.defaultColumnWidth: pageWidth
     pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
     pageStack.globalToolBar.showNavigationButtons: pageStack.currentIndex > 0 ? Kirigami.ApplicationHeaderStyle.ShowBackButton : 0
-    pageStack.columnView.columnResizeMode: shouldUseSidebars ? Kirigami.ColumnView.FixedColumns : Kirigami.ColumnView.SingleColumn
-
-    MouseArea {
-        visible: root.pageStack.wideMode
-        z: 500
-
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-
-        x: root.pageStack.defaultColumnWidth - (width / 2)
-        width: 2
-
-        property int _lastX: -1
-        enabled: !Kirigami.Settings.isMobile
-
-        cursorShape: !Kirigami.Settings.isMobile ? Qt.SplitHCursor : undefined
-
-        onPressed: _lastX = mouseX
-        onReleased: Config.save();
-
-        onPositionChanged: {
-            if (_lastX == -1) {
-                return;
-            }
-
-            if (mouse.x > _lastX) {
-                // we moved to the right
-                if (Config.roomListPageWidth === root.collapsedPageWidth && root.pageWidth + (mouse.x - _lastX) >= root.minPageWidth) {
-                    // Here we get back directly to a more wide mode.
-                    Config.roomListPageWidth = root.minPageWidth;
-                    if (root.width < Kirigami.Units.gridUnit * 35) {
-                        root.width = Kirigami.Units.gridUnit * 35;
-                    }
-                } else if (Config.roomListPageWidth !== root.collapsedPageWidth) {
-                    // Increase page width
-                    Config.roomListPageWidth = Math.min(root.defaultPageWidth, root.pageWidth + (mouse.x - _lastX));
-                }
-            } else if (mouse.x < _lastX) {
-                const tmpWidth = root.pageWidth - (_lastX - mouse.x);
-
-                if (tmpWidth < root.minPageWidth) {
-                    Config.roomListPageWidth = root.collapsedPageWidth;
-                } else {
-                    Config.roomListPageWidth = tmpWidth;
-                }
-            }
-        }
-    }
 
     ConfirmLogoutDialog {
         id: confirmLogoutDialog