Use a Loader instead of StackView for pageStack

TODO.md

@@ -139,7 +139,6 @@
   - Direct chats category
   - Markdown: don't turn #things (no space) and `thing\n---` into title,
     disable `__` syntax for bold/italic
-  - Push instead of replacing in stack view (remove getMemberFilter when done)
   - `<pre>` scrollbar on overflow
   - When inviting someone to direct chat, room is "Empty room" until accepted,
     it should be the peer's display name instead.

src/qml/Chat/Banners/LeftBanner.qml

@@ -24,7 +24,7 @@ Banner {
             py.callClientCoro(
                 chatPage.userId, "room_forget", [chatPage.roomId], () => {
                     button.loading = false
-                    Qt.callLater(pageStack.showPage, "Default")
+                    Qt.callLater(pageLoader.showPage, "Default")
             })
         }
     })

src/qml/Chat/SendBox.qml

@@ -49,7 +49,7 @@ HRectangle {
     Layout.fillWidth: true
     Layout.minimumHeight: theme.baseElementsHeight
     Layout.preferredHeight: areaScrollView.implicitHeight
-    Layout.maximumHeight: pageStack.height / 2
+    Layout.maximumHeight: pageLoader.height / 2
     color: theme.chat.sendBox.background
 
     HRowLayout {

src/qml/Pages/EditAccount/EditAccount.qml

@@ -42,7 +42,7 @@ HPage {
 
             Layout.maximumWidth: Math.min(parent.width, 640)
             Layout.preferredWidth:
-                pageStack.isWide ? parent.width : avatarPreferredSize
+                pageLoader.isWide ? parent.width : avatarPreferredSize
 
             Layout.preferredHeight: childrenRect.height
 

src/qml/Pages/EditAccount/Encryption.qml

@@ -24,7 +24,7 @@ HColumnLayout {
             "rooms can be exported to a passphrase-protected file.%1" +
             "You will then be able to import this file in another " +
             "Matrix client."
-        ).arg(pageStack.isWide ? "\n" :"\n\n")
+        ).arg(pageLoader.isWide ? "\n" :"\n\n")
 
         Layout.fillWidth: true
         Layout.margins: currentSpacing

src/qml/Pages/EditAccount/Profile.qml

@@ -46,7 +46,7 @@ HGridLayout {
     }
 
     columns: 2
-    flow: pageStack.isWide ? GridLayout.LeftToRight : GridLayout.TopToBottom
+    flow: pageLoader.isWide ? GridLayout.LeftToRight : GridLayout.TopToBottom
     rowSpacing: currentSpacing
 
     Component.onCompleted: nameField.field.forceActiveFocus()

src/qml/Pages/SignIn.qml

@@ -41,7 +41,7 @@ HPage {
                         (rememberAccount.checked ? "add": "delete"),
                         [data]
                     )
-                    pageStack.showPage(
+                    pageLoader.showPage(
                         "EditAccount/EditAccount", {userId: data}
                     )
 

src/qml/SidePane/DelegateAccount.qml

@@ -37,7 +37,7 @@ HInteractiveRectangle {
     }
 
     function activate() {
-        pageStack.showPage(
+        pageLoader.showPage(
             "EditAccount/EditAccount", { "userId": model.data.user_id }
         )
     }

src/qml/SidePane/DelegateRoom.qml

@@ -33,7 +33,7 @@ HInteractiveRectangle {
     }
 
     function activate() {
-        pageStack.showRoom(model.user_id, model.data.room_id)
+        pageLoader.showRoom(model.user_id, model.data.room_id)
     }
 
 

src/qml/SidePane/PaneToolBar.qml

@@ -16,7 +16,7 @@ HRowLayout {
         backgroundColor: theme.sidePane.settingsButton.background
         Layout.preferredHeight: parent.height
 
-        onClicked: pageStack.showPage("SignIn")
+        onClicked: pageLoader.showPage("SignIn")
     }
 
     HTextField {

src/qml/UI.qml

@@ -11,7 +11,7 @@ HRectangle {
     Component.onCompleted: window.mainUI = mainUI
 
     property alias sidePane: sidePane
-    property alias pageStack: pageStack
+    property alias pageLoader: pageLoader
     property alias pressAnimation: _pressAnimation
 
     SequentialAnimation {
@@ -63,13 +63,13 @@ HRectangle {
             Behavior on Layout.minimumWidth { HNumberAnimation {} }
         }
 
-        StackView {
+        HLoader {
-            id: pageStack
+            id: pageLoader
             property bool isWide: width > theme.contentIsWideAbove
 
             Component.onCompleted: {
                 if (! py.startupAnyAccountsSaved) {
-                    pageStack.showPage("SignIn")
+                    pageLoader.showPage("SignIn")
                     return
                 }
 
@@ -77,14 +77,14 @@ HRectangle {
                 let props = window.uiState.pageProperties
 
                 if (page == "Chat/Chat.qml") {
-                    pageStack.showRoom(props.userId, props.roomId)
+                    pageLoader.showRoom(props.userId, props.roomId)
                 } else {
-                    pageStack._show(page, props)
+                    pageLoader._show(page, props)
                 }
             }
 
             function _show(componentUrl, properties={}) {
-                pageStack.replace(componentUrl, properties)
+                pageLoader.setSource(componentUrl, properties)
             }
 
             function showPage(name, properties={}) {
@@ -104,14 +104,20 @@ HRectangle {
                 window.uiStateChanged()
             }
 
-            onCurrentItemChanged: if (currentItem) {
+            onStatusChanged: if (status == Loader.Ready) {
-                currentItem.forceActiveFocus()
+                item.forceActiveFocus()
+                appearAnimation.start()
             }
 
-            // Buggy
+            clip: appearAnimation.running
-            replaceExit: null
+            XAnimator {
-            popExit: null
+                id: appearAnimation
-            pushExit: null
+                target: pageLoader.item
+                from: -300
+                to: 0
+                easing.type: Easing.OutBack
+                duration: theme.animationDuration * 2
+            }
         }
     }
 }