misc: save split view states

This commit simplifies the view coordinator and restructures the main view stack to not include a split view.

This removes workaround logic for single pane view support that was previously in the view coordinator.

The main view is now a stack that may contain both single and dual pane views.

The ListSelectionView further specializes DualPaneView to add an index-based or custom selection mechanism.

Gitlab: #902
Change-Id: I81c9fe579b95c8d4774c3e491a16d7600323c40c

src/app/MainApplicationWindow.qml

@@ -89,7 +89,7 @@ ApplicationWindow {
                 !UtilsAdapter.getAccountListSize()) {
             // Save the window geometry and state before quitting.
             layoutManager.saveWindowSettings()
-            viewCoordinator.dismissAll()
+            viewCoordinator.deinit()
             Qt.quit()
         } else {
             layoutManager.closeToTray()
@@ -160,11 +160,13 @@ ApplicationWindow {
 
                 // Present the welcome view once the viewCoordinator is setup.
                 viewCoordinator.initialized.connect(function() {
+                    viewCoordinator.preload("SidePanel")
+                    viewCoordinator.preload("SettingsSidePanel")
                     viewCoordinator.present("WelcomePage")
                     viewCoordinator.preload("ConversationView")
                 })
                 // Set the viewCoordinator's root item.
-                viewCoordinator.setRootView(item)
+                viewCoordinator.init(item)
             }
             if (Qt.platform.os.toString() === "osx") {
                 MainApplication.setEventFilter()

src/app/ViewCoordinator.qml

@@ -22,104 +22,54 @@ import QtQuick.Layouts
 import net.jami.Constants 1.1
 import net.jami.Models 1.1
 
-// This object should be implemented as a QML singleton, or be instantiated
-// once in the main application window component. The top-level application window
-// contains a loader[mainview, wizardview] and "rootView" MUST parent a horizontal
-// SplitView with a StackView in each pane.
+import "commoncomponents"
+
 QtObject {
     id: root
 
     required property QtObject viewManager
 
+    signal initialized
     signal requestAppWindowWizardView
 
     // A map of view names to file paths for QML files that define each view.
     property variant resources: {
-        "WelcomePage": "mainview/components/WelcomePage.qml",
         "SidePanel": "mainview/components/SidePanel.qml",
+        "WelcomePage": "mainview/components/WelcomePage.qml",
         "ConversationView": "mainview/ConversationView.qml",
         "NewSwarmPage": "mainview/components/NewSwarmPage.qml",
         "WizardView": "wizardview/WizardView.qml",
         "SettingsView": "settingsview/SettingsView.qml",
+        "SettingsSidePanel": "settingsview/SettingsSidePanel.qml",
     }
 
-    // Maybe this state needs to be toggled because the SidePanel content is replaced.
-    // This makes it so the state can't be inferred from loaded views in single pane mode.
-    property bool inSettings: viewManager.hasView("SettingsView")
-    property bool inWizard: viewManager.hasView("WizardView")
-    property bool inNewSwarm: viewManager.hasView("NewSwarmPage")
-    property bool inhibitConversationView: inSettings || inWizard || inNewSwarm
-
-    property bool busy: false
-
     // The `main` view of the application window.
-    property Item rootView: null
-
-    // HACKS.
-    property real mainViewWidth: rootView ? rootView.width : 0
-    property real previousWidth: mainViewWidth
-    property real mainViewSidePanelRectWidth: sv1 ? sv1.width : 0
-    property real lastSideBarSplitSize: mainViewSidePanelRectWidth
-    onMainViewWidthChanged: resolvePanes()
-
-    function resolvePanes(force=false) {
-        if (forceSinglePane) return
-        const isExpanding = previousWidth < mainViewWidth
-        if (mainViewWidth < JamiTheme.chatViewHeaderMinimumWidth + mainViewSidePanelRectWidth
-                && sv2.visible && (!isExpanding || force)) {
-            lastSideBarSplitSize = mainViewSidePanelRectWidth
-            singlePane = true
-        } else if (mainViewWidth >= lastSideBarSplitSize + JamiTheme.chatViewHeaderMinimumWidth
-                   && !sv2.visible && (isExpanding || force) && !layoutManager.isFullScreen) {
-            singlePane = false
-        }
-        previousWidth = mainViewWidth
-    }
-
-    // Must be the child of `rootView`.
-    property Item splitView: null
+    property StackView rootView
 
-    // StackView objects, which are children of `splitView`.
-    property StackView sv1: null
-    property StackView sv2: null
+    property var currentViewName: rootView && rootView.currentItem.objectName || null
 
-    // The StackView object that is currently active, determined by the value
-    // of singlePane.
-    readonly property StackView activeStackView: singlePane ? sv1 : sv2
-
-    readonly property string currentViewName: {
-        if (activeStackView == null || activeStackView.depth === 0) return ''
-        return activeStackView.currentItem.objectName
+    function init(appWindow) {
+        rootView = Qt.createQmlObject(`import QtQuick; import QtQuick.Controls
+                                      StackView { anchors.fill: parent }`,
+                                      appWindow)
+        initialized()
     }
 
-    readonly property var currentView: {
-        return activeStackView ? activeStackView.currentItem : null
+    function deinit() {
+        viewManager.destroyAllViews()
+        rootView.destroy()
     }
 
-    // Handle single/dual pane mode.
-    property bool forceSinglePane: false
-    property bool singlePane
-    onForceSinglePaneChanged: {
-        if (forceSinglePane) singlePane = true
-        else resolvePanes(true)
+    // Finds a view and gets its index within the StackView it's in.
+    function getStackIndex(viewName) {
+        for (const [key, value] of Object.entries(viewManager.views)) {
+            if (value.objectName === viewName) {
+                return value.StackView.index
             }
-
-    onSinglePaneChanged: {
-        // Hiding sv2 before moving items from, and after moving
-        // items to, reduces stack item visibility change events.
-        if (singlePane) {
-            sv2.visible = false
-            if (forceSinglePane) Qt.callLater(move, sv2, sv1)
-            else move(sv2, sv1)
-        } else {
-            move(sv1, sv2)
-            sv2.visible = true
         }
+        return -1
     }
 
-    // Emitted once at the end of setRootView.
-    signal initialized()
-
     // Create, present, and return a dialog object.
     function presentDialog(parent, path, props={}) {
         // Open the dialog once the object is created
@@ -135,120 +85,42 @@ QtObject {
         }, props)
     }
 
-    // Dismiss all views.
-    function dismissAll() {
-        for (var path in viewManager.views) {
-            viewManager.destroyView(path)
-        }
-    }
-
-    // Get a view regardless of whether it is currently active.
-    function getView(viewName) {
-        if (!viewManager.hasView(viewName)) {
-            return null
-        }
-        return viewManager.views[viewManager.viewPaths[viewName]]
-    }
-
-    // Sets object references, onInitialized is a good time to present views.
-    function setRootView(obj) {
-        rootView = obj
-        splitView = rootView.splitView
-        sv1 = rootView.sv1
-        sv1.parent = Qt.binding(() => singlePane ? rootView : splitView)
-        sv1.anchors.fill = Qt.binding(() => singlePane ? rootView : undefined)
-        sv2 = rootView.sv2
-
-        initialized()
-        resolvePanes()
-    }
-
-    // Finds a view and gets its index within the StackView it's in.
-    function getStackIndex(viewName) {
-        for (const [key, value] of Object.entries(viewManager.views)) {
-            if (value.objectName === viewName) {
-                return value.StackView.index
-            }
-        }
-        return -1
-    }
-
-    // Load a view without presenting it.
-    function preload(viewName) {
-        if (!viewManager.createView(resources[viewName], null)) {
-            console.log("Failed to load view: " + viewName)
-        }
-    }
-
-    // This function presents the view with the given viewName in the
-    // specified StackView. Return the view if successful.
-    function present(viewName, sv=activeStackView) {
-        if (!rootView) return
+    // Present a view by name.
+    function present(viewName, props) {
+        const path = resources[viewName]
 
-        if (viewName === "ConversationView" && inhibitConversationView) {
+        // Check if the current view should inhibit the presentation of this view.
+        if (rootView.currentItem && rootView.currentItem.inhibits.includes(viewName)) {
+            print("inhibiting view:", viewName)
             return
         }
 
         // If the view already exists in the StackView, the function will attempt
         // to navigate to its StackView position by dismissing elevated views.
-        if (sv.find(function(item) {
+        if (rootView.find(function(item) {
             return item.objectName === viewName;
-        })) {
+        }, StackView.DontLoad)) {
             const viewIndex = getStackIndex(viewName)
-            if (viewIndex >= 0) {
-                for (var i = (sv.depth - 1); i > viewIndex; i--) {
-                    dismissObj(sv.get(i, StackView.DontLoad))
+            for (var i = (rootView.depth - 1); i > viewIndex; i--) {
+                dismissObj(rootView.get(i, StackView.DontLoad))
             }
-                return true
-            }
-            return false
+            return
         }
 
-        // If we are in single-pane mode and the view was previously forced into
-        // sv2, we can move it back to the top of sv1.
-        if (singlePane && sv === sv1) {
-            // See if the item is at the top of sv2
-            if (sv2.currentItem && sv2.currentItem.objectName === viewName) {
-                // Move it to the top of sv1
-                const view = sv2.pop(StackView.Immediate)
-                sv1.push(view, StackView.Immediate)
-                view.presented()
-                return view
-            }
+        if (!viewManager.createView(path, rootView, function(view) {
+            // push the view onto the stack if it's not already there
+            if (rootView.currentItem !== view) {
+                rootView.push(view, StackView.Immediate)
             }
-
-        const obj = viewManager.createView(resources[viewName], appWindow)
-        if (!obj) {
+            if (!view.managed) view.presented()
+        }, props)) {
             print("could not create view:", viewName)
-            return null
-        }
-        if (obj === currentView) {
-            print("view is current:", viewName)
-            return null
         }
-
-        // If we are in single-pane mode and the view should start hidden
-        // (requiresIndex), we can push it into sv2.
-        if (singlePane && sv === sv1 && obj.requiresIndex) {
-            sv = sv2
-        } else {
-            forceSinglePane = obj.singlePaneOnly
-        }
-
-        const view = sv.push(obj, StackView.Immediate)
-        if (!view) {
-            return null
-        }
-        if (view.objectName === '') {
-            view.objectName = viewName
-        }
-        view.presented()
-        return view
     }
 
     // Dismiss by object.
-    function dismissObj(obj, sv=activeStackView) {
-        if (obj.StackView.view !== sv) {
+    function dismissObj(obj) {
+        if (obj.StackView.view !== rootView) {
             print("view not in the stack:", obj)
             return
         }
@@ -256,27 +128,28 @@ QtObject {
         // If we are dismissing a view that is not at the top of the stack,
         // we need to store each of the views on top into a temporary stack
         // and then restore them after the view is dismissed.
-        // So we get the index of the view we are dismissing.
         const viewIndex = obj.StackView.index
         var tempStack = []
-        for (var i = (sv.depth - 1); i > viewIndex; i--) {
-            var item = sv.pop(StackView.Immediate)
+        for (var i = (rootView.depth - 1); i > viewIndex; i--) {
+            var item = rootView.pop(StackView.Immediate)
             tempStack.push(item)
         }
         // And we define a function to restore and resolve the views.
         var resolveStack = () => {
             for (var i = 0; i < tempStack.length; i++) {
-                sv.push(tempStack[i], StackView.Immediate)
+                rootView.push(tempStack[i], StackView.Immediate)
             }
-
-            forceSinglePane = sv.currentItem.singlePaneOnly
-            sv.currentItem.presented()
+            if (rootView.depth > 0) rootView.currentItem.presented()
         }
 
         // Now we can dismiss the view at the top of the stack.
-        const depth = sv.depth
-        if (obj === sv.get(depth - 1, StackView.DontLoad)) {
-            var view = sv.pop(StackView.Immediate)
+        const depth = rootView.depth
+        if (obj === rootView.get(depth - 1, StackView.DontLoad)) {
+            var view
+            if (rootView.depth === 1) {
+                view = rootView.currentItem
+                rootView.clear()
+            } else view = rootView.pop(StackView.Immediate)
             if (!view) {
                 print("could not pop view:", obj.objectName)
                 resolveStack()
@@ -290,51 +163,37 @@ QtObject {
                 if (!viewManager.destroyView(resources[objectName])) {
                     print("could not destroy view:", objectName)
                 }
-            } else {
-                view.dismissed()
-            }
+            } else view.dismissed()
         }
         resolveStack()
     }
 
-    // Dismiss by view name.
-    function dismiss(viewName) {
-        if (!rootView) return
-
-        const depth = activeStackView.depth
+    // Dismiss a view by name or the top view if unspecified.
+    function dismiss(viewName=undefined) {
+        if (!rootView || rootView.depth === 0) return
+        if (viewName !== undefined) {
+            const depth = rootView.depth
             for (var i = (depth - 1); i >= 0; i--) {
-            const view = activeStackView.get(i, StackView.DontLoad)
+                const view = rootView.get(i, StackView.DontLoad)
                 if (view.objectName === viewName) {
                     dismissObj(view)
                     return
                 }
             }
-
-        // Check if the view is hidden on the top of sv2 (if in single-pane mode),
-        // and dismiss it in that case.
-        if (singlePane && sv2.currentItem && sv2.currentItem.objectName === viewName) {
-            dismissObj(sv2.currentItem, sv2)
+            return
+        } else {
+            dismissObj(rootView.currentItem)
         }
     }
 
-    // Move items from one stack to another. We avoid the recursive technique to
-    // avoid  visibility change events.
-    function move(from, to, depth=1) {
-        busy = true
-        var tempStack = []
-        while (from.depth > depth) {
-            var item = from.pop(StackView.Immediate)
-            tempStack.push(item)
-        }
-        while (tempStack.length) {
-            to.push(tempStack.pop(), StackView.Immediate)
-        }
-        busy = false
+    function getView(viewName) {
+        return viewManager.getView(viewName)
     }
 
-    // Effectively hide the current view by moving it to the other StackView.
-    // This function only works when in single-pane mode.
-    function hideCurrentView() {
-        if (singlePane) move(sv1, sv2)
+   // Load a view without presenting it.
+   function preload(viewName) {
+       if (!viewManager.createView(resources[viewName], null)) {
+           console.log("Failed to load view: " + viewName)
+       }
    }
 }

src/app/ViewManager.qml

@@ -27,9 +27,19 @@ QtObject {
     // The number of views.
     property int nViews: 0
 
+    // Destroy all views.
+    function destroyAllViews() {
+        for (var path in views) {
+            destroyView(path)
+        }
+    }
+
     function createView(path, parent=null, cb=null, props={}) {
         if (views[path] !== undefined) {
             // an instance of <path> already exists
+            if (cb !== null) {
+                cb(views[path])
+            }
             return views[path]
         }
 
@@ -84,4 +94,8 @@ QtObject {
     function hasView(viewName) {
         return nViews && viewPaths[viewName] !== undefined
     }
+
+    function getView(viewName) {
+        return views[viewPaths[viewName]] || null
+    }
 }

src/app/appsettingsmanager.cpp

@@ -40,9 +40,9 @@ AppSettingsManager::AppSettingsManager(QObject* parent)
 }
 
 QVariant
-AppSettingsManager::getValue(const Settings::Key key)
+AppSettingsManager::getValue(const QString& key, const QVariant& defaultValue)
 {
-    auto value = settings_->value(Settings::toString(key), Settings::defaultValue(key));
+    auto value = settings_->value(key, defaultValue);
 
     if (QString(value.typeName()) == "QString"
         && (value.toString() == "false" || value.toString() == "true"))
@@ -51,10 +51,22 @@ AppSettingsManager::getValue(const Settings::Key key)
     return value;
 }
 
+void
+AppSettingsManager::setValue(const QString& key, const QVariant& value)
+{
+    settings_->setValue(key, value);
+}
+
+QVariant
+AppSettingsManager::getValue(const Settings::Key key)
+{
+    return getValue(Settings::toString(key), Settings::defaultValue(key));
+}
+
 void
 AppSettingsManager::setValue(const Settings::Key key, const QVariant& value)
 {
-    settings_->setValue(Settings::toString(key), value);
+    setValue(Settings::toString(key), value);
 }
 
 QString

src/app/appsettingsmanager.h

@@ -109,8 +109,12 @@ public:
     explicit AppSettingsManager(QObject* parent = nullptr);
     ~AppSettingsManager() = default;
 
+    Q_INVOKABLE QVariant getValue(const QString& key, const QVariant& defaultValue = {});
+    Q_INVOKABLE void setValue(const QString& key, const QVariant& value = {});
+
     Q_INVOKABLE QVariant getValue(const Settings::Key key);
-    Q_INVOKABLE void setValue(const Settings::Key key, const QVariant& value);
+    Q_INVOKABLE void setValue(const Settings::Key key, const QVariant& value = {});
+
     QString getLanguage();
 
     void loadTranslations();

src/app/commoncomponents/BaseView.qml

@@ -25,12 +25,8 @@ Rectangle {
     // only be destroyed when its parent is destroyed.
     property bool managed: true
 
-    // True if this view functions in a single-pane context only.
-    property bool singlePaneOnly: false
-
-    // True if this view requires and initial selection from
-    // a group of menu options when in single-pane mode (e.g. settings).
-    property bool requiresIndex: false
+    // A list of view names that this view inhibits the presentation of.
+    property var inhibits: []
 
     function dismiss() { viewCoordinator.dismiss(objectName) }
 

src/app/commoncomponents/DualPaneView.qml

+/*
+ * Copyright (C) 2023 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Controls
+
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+
+BaseView {
+    id: viewNode
+
+    required property Item leftPaneItem
+    required property Item rightPaneItem
+
+    property alias leftPane: leftPane
+    property alias rightPane: rightPane
+
+    property alias splitViewStateKey: splitView.splitViewStateKey
+
+    property real leftPaneMinWidth: JamiTheme.mainViewLeftPaneMinWidth
+    property real rightPaneMinWidth: JamiTheme.mainViewPaneMinWidth
+
+    property bool isSinglePane
+
+    onPresented: {
+        leftPaneItem.parent = leftPane
+        rightPaneItem.parent = rightPane
+
+        splitView.restoreSplitViewState()
+
+        resolvePanes()
+    }
+    onDismissed: splitView.saveSplitViewState()
+
+    Component.onCompleted: {
+        // Avoid double triggering this handler during instantiation.
+        onIsSinglePaneChanged.connect(isSinglePaneChangedHandler)
+    }
+
+    property real previousLeftPaneWidth: leftPane.width
+    onWidthChanged: resolvePanes()
+    function resolvePanes() {
+        isSinglePane = width < rightPaneMinWidth + previousLeftPaneWidth
+    }
+
+    // Override this if needed.
+    property var isSinglePaneChangedHandler: function() {
+        rightPaneItem.parent = isSinglePane ? leftPane : rightPane
+    }
+
+    JamiSplitView {
+        id: splitView
+        anchors.fill: parent
+        splitViewStateKey: viewNode.objectName
+
+        Item {
+            id: leftPane
+            onWidthChanged: if (!isSinglePane) previousLeftPaneWidth = width
+            SplitView.minimumWidth: isSinglePane ?
+                                        viewNode.width :
+                                        viewNode.leftPaneMinWidth
+            SplitView.maximumWidth: isSinglePane ?
+                                        viewNode.width :
+                                        viewNode.width - rightPaneMinWidth
+            SplitView.preferredWidth: viewNode.leftPaneMinWidth
+            clip: true
+        }
+        Item {
+            id: rightPane
+            clip: true
+        }
+    }
+}

src/app/commoncomponents/JamiSplitView.qml

+/*
+ * Copyright (C) 2023 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Controls
+
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+
+SplitView {
+    id: root
+
+    property string splitViewStateKey: objectName
+    property bool autoManageState: !(parent instanceof BaseView)
+
+    function saveSplitViewState() {
+        UtilsAdapter.setAppValue("sv_" + splitViewStateKey, root.saveState())
+    }
+
+    function restoreSplitViewState() {
+        root.restoreState(UtilsAdapter.getAppValue("sv_" + splitViewStateKey))
+    }
+
+    onResizingChanged: if (!resizing) saveSplitViewState()
+    onVisibleChanged: {
+        if (!autoManageState) return
+        visible ? restoreSplitViewState() : saveSplitViewState()
+    }
+
+    handle: Rectangle {
+        implicitWidth: JamiTheme.splitViewHandlePreferredWidth
+        implicitHeight: root.height
+        color: JamiTheme.primaryBackgroundColor
+        Rectangle {
+            implicitWidth: 1
+            implicitHeight: root.height
+            color: JamiTheme.tabbarBorderColor
+        }
+    }
+}

src/app/commoncomponents/ListSelectionView.qml

+/*
+ * Copyright (C) 2023 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+
+DualPaneView {
+    id: viewNode
+
+    property bool hideRightPaneInSinglePaneMode : false
+
+    Component.onCompleted: {
+        if (hideRightPaneInSinglePaneMode) return
+        onIndexChanged.connect(function() {
+            if (hasValidSelection) {
+                if (selectionFallback && isSinglePane)
+                    rightPaneItem.parent = leftPane
+                return
+            }
+            if (!isSinglePane) dismiss()
+            else isSinglePaneChangedHandler()
+        })
+    }
+
+    // True if we should dismiss to the left pane if in single pane mode.
+    // Also causes selection of a default index (0) in dual pane mode.
+    property bool selectionFallback: false
+
+    // When this property is set, the view updates its display to show the
+    // corresponding item if `hasValidSelection` has no override.
+    property int index: -1
+    function selectIndex(index) { viewNode.index = index }
+
+    // Override this predicate if needed.
+    property bool hasValidSelection: viewNode.index >= 0
+    onHasValidSelectionChanged: isSinglePaneChangedHandler()
+
+    // Override BaseView.dismiss with some selection logic.
+    function dismiss() {
+        if (isSinglePane) {
+            if (!selectionFallback) viewCoordinator.dismiss(objectName)
+            else if (isSinglePane && leftPane.children.length > 1) {
+                rightPaneItem.parent = null
+                leftPaneItem.deselect()
+            }
+        } else viewCoordinator.dismiss(objectName)
+    }
+
+    onPresented: isSinglePaneChangedHandler()
+
+    onDismissed: {
+        if (leftPaneItem) {
+            leftPaneItem.indexSelected.disconnect(selectIndex)
+            leftPaneItem.deselect()
+        }
+    }
+
+    onLeftPaneItemChanged: {
+        if (leftPaneItem) leftPaneItem.indexSelected.connect(selectIndex)
+    }
+    isSinglePaneChangedHandler: () => {
+        if (hideRightPaneInSinglePaneMode) return
+        // When transitioning from split to single pane, we need to move
+        // the right pane item to left stack view if it has a valid index.
+        if (isSinglePane) {
+            if (hasValidSelection) {
+                rightPaneItem.parent = leftPane
+            }
+        } else {
+            rightPaneItem.parent = rightPane
+            // We may need a default selection of item 0 here.
+            if (!hasValidSelection && selectionFallback) leftPaneItem.select(0)
+        }
+    }
+}

src/app/commoncomponents/ModalTextEdit.qml

@@ -17,6 +17,7 @@
 
 import QtQuick
 
+import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
 
 // This component is used to display and edit a value.
@@ -32,6 +33,7 @@ Loader {
     required property string placeholderText
     property string staticText: ""
     property string dynamicText
+
     property bool inputIsValid: true
     property string infoTipText
     property bool isPersistent: true

src/app/commoncomponents/SidePanelBase.qml

+import QtQuick
+
+Rectangle {
+    id: root
+
+    anchors.fill: parent
+
+    // Override these if needed.
+    property var select: function() {}
+    property var deselect: function() {}
+
+    signal indexSelected(int index)
+    signal deselected
+}

src/app/constant/JamiTheme.qml

@@ -290,6 +290,8 @@ Item {
 
 
     // Sizes
+    property real mainViewLeftPaneMinWidth: 300
+    property real mainViewPaneMinWidth: 430
     property real qrCodeImageSize: 256
     property real splitViewHandlePreferredWidth: 4
     property real indicatorFontSize: calcSize(6)
@@ -421,7 +423,6 @@ Item {
     property real chatViewHairLineSize: 1
     property real chatViewMaximumWidth: 900
     property real chatViewHeaderPreferredHeight: 64
-    property real chatViewHeaderMinimumWidth: 430
     property real chatViewFooterPreferredHeight: 50
     property real chatViewFooterMaximumHeight: 280
     property real chatViewFooterRowSpacing: 1

src/app/currentconversation.h

@@ -69,6 +69,7 @@ public:
     CurrentConversationMembers* uris() const;
 
 Q_SIGNALS:
+    void reloadInteractions();
     void scrollTo(const QString& msgId);
     void showDetails();
 

src/app/mainview/ConversationView.qml

@@ -27,15 +27,19 @@ import net.jami.Constants 1.1
 import "../commoncomponents"
 import "components"
 
-BaseView {
-    id: root
+ListSelectionView {
+    id: viewNode
     objectName: "ConversationView"
     managed: false
 
-    onPresented: {
-        if (!visible && viewCoordinator.singlePane &&
-                CurrentConversation.id !== '') {
-            viewCoordinator.present(objectName)
+    splitViewStateKey: "Main"
+    hasValidSelection: CurrentConversation.id !== ''
+
+    Connections {
+        target: CurrentConversation
+        function onReloadInteractions() {
+            UtilsAdapter.clearInteractionsCache(CurrentAccount.id, CurrentConversation.id)
+            MessagesAdapter.loadMoreMessages()
         }
     }
 
@@ -54,13 +58,15 @@ BaseView {
 
     color: JamiTheme.transparentColor
 
-    StackLayout {
+    leftPaneItem: viewCoordinator.getView("SidePanel")
+
+    rightPaneItem: StackLayout {
         currentIndex: !CurrentConversation.hasCall ? 0 : 1
-        onCurrentIndexChanged: chatView.parent = currentIndex == 1 ?
+        onCurrentIndexChanged: chatView.parent = currentIndex === 1 ?
                                    callStackView.chatViewContainer :
                                    chatViewContainer
 
-        anchors.fill: root
+        anchors.fill: parent
 
         Item {
             id: chatViewContainer
@@ -86,7 +92,7 @@ BaseView {
 
                 onDismiss: {
                     if (parent == chatViewContainer) {
-                        root.dismiss()
+                        viewNode.dismiss()
                     } else {
                         callStackView.chatViewContainer.visible = false
                         callStackView.contentView.forceActiveFocus()

src/app/mainview/MainView.qml

@@ -59,48 +59,6 @@ Rectangle {
     onWidthChanged: Qt.callLater(JamiQmlUtils.updateMessageBarButtonsPoints)
     onHeightChanged: Qt.callLater(JamiQmlUtils.updateMessageBarButtonsPoints)
 
-    // Needed by ViewCoordinator.
-    property alias splitView: splitView
-    property alias sv1: sv1
-    property alias sv2: sv2
-
-    StackView {
-        id: mainStackView
-        anchors.fill: parent
-
-        initialItem: SplitView {
-            id: splitView
-
-            handle: Rectangle {
-                implicitWidth: JamiTheme.splitViewHandlePreferredWidth
-                implicitHeight: splitView.height
-                color: JamiTheme.primaryBackgroundColor
-                Rectangle {
-                    implicitWidth: 1
-                    implicitHeight: splitView.height
-                    color: JamiTheme.tabbarBorderColor
-                }
-            }
-
-            StackView {
-                id: sv1
-                objectName: "sv1"
-                SplitView.minimumWidth: 300
-                SplitView.preferredWidth: 300
-                SplitView.fillHeight: true
-                clip: true
-                initialItem: SidePanel {}
-            }
-
-            StackView {
-                id: sv2
-                objectName: "sv2"
-                SplitView.fillHeight: true
-                clip: true
-            }
-        }
-    }
-
     Component.onCompleted: {
         JamiQmlUtils.mainViewRectObj = mainView
     }

src/app/mainview/components/AccountComboBox.qml

@@ -30,9 +30,13 @@ import "../../commoncomponents"
 Label {
     id: root
 
-    signal settingBtnClicked
     property alias popup: comboBoxPopup
 
+    width: parent ? parent.width : o
+    height: JamiTheme.accountListItemHeight
+
+    property bool inSettings: viewCoordinator.currentViewName === "SettingsView"
+
     // TODO: remove these refresh hacks use QAbstractItemModels correctly
     Connections {
         target: AccountAdapter
@@ -86,6 +90,7 @@ Label {
 
     MouseArea {
         id: mouseArea
+        enabled: visible
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
@@ -206,18 +211,20 @@ Label {
                 id: settingsButton
 
                 anchors.verticalCenter: parent.verticalCenter
-                source: !viewCoordinator.inSettings ?
+                source: !inSettings ?
                             JamiResources.settings_24dp_svg :
                             JamiResources.round_close_24dp_svg
 
                 normalColor: JamiTheme.backgroundColor
                 imageColor: JamiTheme.textColor
-                toolTipText: !viewCoordinator.inSettings ?
+                toolTipText: !inSettings ?
                                  JamiStrings.openSettings :
                                  JamiStrings.closeSettings
 
                 onClicked: {
-                    settingBtnClicked()
+                    !inSettings ?
+                                viewCoordinator.present("SettingsView") :
+                                viewCoordinator.dismiss("SettingsView")
                     background.state = "normal"
                 }
             }

src/app/mainview/components/ChatView.qml

@@ -110,7 +110,7 @@ Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: JamiTheme.chatViewHeaderPreferredHeight
             Layout.maximumHeight: JamiTheme.chatViewHeaderPreferredHeight
-            Layout.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
+            Layout.minimumWidth: JamiTheme.mainViewPaneMinWidth
 
             DropArea {
                 anchors.fill: parent
@@ -125,7 +125,7 @@ Rectangle {
                 if (!swarmDetailsPanel.visible && !messagesResearchPanel.visible) {
                     chatContents.visible = true
                 } else {
-                    if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.chatViewHeaderMinimumWidth)
+                    if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.mainViewPaneMinWidth)
                         chatContents.visible = false
                 }
             }
@@ -157,7 +157,7 @@ Rectangle {
 
                 if (!swarmDetailsPanel.visible && !addMemberPanel.visible && !messagesResearchPanel.visible)
                     return
-                if (chatViewHeader.width < JamiTheme.detailsPageMinWidth + JamiTheme.chatViewHeaderMinimumWidth
+                if (chatViewHeader.width < JamiTheme.detailsPageMinWidth + JamiTheme.mainViewPaneMinWidth
                         && !isExpanding && chatContents.visible) {
                     lastContentsSplitSize = chatContents.width
                     lastDetailsSplitSize = Math.min(JamiTheme.detailsPageMinWidth, (swarmDetailsPanel.visible
@@ -166,7 +166,7 @@ Rectangle {
                                                                                     ? addMemberPanel.width
                                                                                     : messagesResearchPanel.width))
                     chatContents.visible = false
-                } else if (chatViewHeader.width >= JamiTheme.chatViewHeaderMinimumWidth + lastDetailsSplitSize
+                } else if (chatViewHeader.width >= JamiTheme.mainViewPaneMinWidth + lastDetailsSplitSize
                            && isExpanding && !layoutManager.isFullScreen && !chatContents.visible) {
                     chatContents.visible = true
                 }
@@ -199,7 +199,7 @@ Rectangle {
                 if (addMemberPanel.visible) {
                     chatContents.visible = true
                 } else {
-                    if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.chatViewHeaderMinimumWidth)
+                    if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.mainViewPaneMinWidth)
                         chatContents.visible = false
                 }
                 addMemberPanel.visible = !addMemberPanel.visible
@@ -277,19 +277,19 @@ Rectangle {
 
             handle: Rectangle {
                 implicitWidth: JamiTheme.splitViewHandlePreferredWidth
-                implicitHeight: viewCoordinator.splitView.height
+                implicitHeight: root.height
                 color: JamiTheme.primaryBackgroundColor
                 Rectangle {
                     implicitWidth: 1
-                    implicitHeight: viewCoordinator.splitView.height
+                    implicitHeight: root.height
                     color: JamiTheme.tabbarBorderColor
                 }
             }
 
             ColumnLayout {
                 id: chatContents
-                SplitView.maximumWidth: viewCoordinator.splitView.width
-                SplitView.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
+                SplitView.maximumWidth: root.width
+                SplitView.minimumWidth: JamiTheme.mainViewPaneMinWidth
                 SplitView.fillWidth: true
 
                 StackLayout {
@@ -362,7 +362,7 @@ Rectangle {
                 id: messagesResearchPanel
 
                 visible: false
-                SplitView.maximumWidth: viewCoordinator.splitView.width
+                SplitView.maximumWidth: root.width
                 SplitView.minimumWidth: JamiTheme.detailsPageMinWidth
                 SplitView.preferredWidth: JamiTheme.detailsPageMinWidth
             }
@@ -371,7 +371,7 @@ Rectangle {
                 id: swarmDetailsPanel
                 visible: false
 
-                SplitView.maximumWidth: viewCoordinator.splitView.width
+                SplitView.maximumWidth: root.width
                 SplitView.preferredWidth: JamiTheme.detailsPageMinWidth
                 SplitView.minimumWidth: JamiTheme.detailsPageMinWidth
             }
@@ -380,7 +380,7 @@ Rectangle {
                 id: addMemberPanel
                 visible: false
 
-                SplitView.maximumWidth: viewCoordinator.splitView.width
+                SplitView.maximumWidth: root.width
                 SplitView.preferredWidth: JamiTheme.detailsPageMinWidth
                 SplitView.minimumWidth: JamiTheme.detailsPageMinWidth
             }

src/app/mainview/components/NewSwarmPage.qml

@@ -26,10 +26,9 @@ import net.jami.Constants 1.1
 
 import "../../commoncomponents"
 
-BaseView {
-    id: root
-
-    color: JamiTheme.chatviewBgColor
+DualPaneView {
+    id: viewNode
+    objectName: "NewSwarmPage"
 
     signal createSwarmClicked(string title, string description, string avatar)
     signal removeMember(string convId, string member)
@@ -42,13 +41,23 @@ BaseView {
 
     property var members: []
 
+    splitViewStateKey: "Main"
+    inhibits: ["ConversationView"]
+
+    leftPaneItem: viewCoordinator.getView("SidePanel")
+    rightPaneItem: Rectangle {
+        id: root
+        color: JamiTheme.chatviewBgColor
+
+        anchors.fill: parent
+
         RowLayout {
             id: labelsMember
             Layout.topMargin: 16
             Layout.preferredWidth: root.width
             Layout.preferredHeight: childrenRect.height
             spacing: 16
-        visible: root.members.length
+            visible: viewNode.members.length
 
             Label {
                 text: JamiStrings.to
@@ -93,13 +102,13 @@ BaseView {
                                 normalColor: "transparent"
                                 imageColor: "transparent"
 
-                            onClicked: root.removeMember(modelData.convId, modelData.uri)
+                                onClicked: removeMember(modelData.convId, modelData.uri)
                             }
                         }
 
                         color: JamiTheme.selectedColor
                     }
-                model: root.members
+                    model: viewNode.members
                 }
             }
         }
@@ -227,3 +236,4 @@ BaseView {
             }
         }
     }
+}

src/app/mainview/components/OngoingCallPage.qml

@@ -119,7 +119,7 @@ Rectangle {
     }
 
     onWidthChanged: {
-        if (chatViewContainer.visible && root.width < JamiTheme.chatViewHeaderMinimumWidth * 2) {
+        if (chatViewContainer.visible && root.width < JamiTheme.mainViewPaneMinWidth * 2) {
             callPageMainRect.visible = false
         } else {
             callPageMainRect.visible = true
@@ -146,7 +146,7 @@ Rectangle {
             id: callPageMainRect
 
             SplitView.preferredHeight: mainColumnLayout.isHorizontal ? root.height : (root.height / 3) * 2
-            SplitView.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
+            SplitView.minimumWidth: JamiTheme.mainViewPaneMinWidth
             SplitView.fillWidth: true
 
             TapHandler {
@@ -404,15 +404,15 @@ Rectangle {
                                            root.height :
                                            root.height / 3
             SplitView.preferredWidth: mainColumnLayout.isHorizontal ?
-                                          JamiTheme.chatViewHeaderMinimumWidth :
+                                          JamiTheme.mainViewPaneMinWidth :
                                           root.width
-            SplitView.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
+            SplitView.minimumWidth: JamiTheme.mainViewPaneMinWidth
             visible: false
             clip: true
             property bool showDetails: false
 
             onVisibleChanged: {
-                if (visible && root.width < JamiTheme.chatViewHeaderMinimumWidth * 2) {
+                if (visible && root.width < JamiTheme.mainViewPaneMinWidth * 2) {
                     callPageMainRect.visible = false
                 } else {
                     callPageMainRect.visible = true

src/app/mainview/components/SidePanel.qml

@@ -29,7 +29,7 @@ import net.jami.Models 1.1
 import "../../commoncomponents"
 import "../../settingsview/components"
 
-BaseView {
+SidePanelBase {
     id: root
     objectName: "SidePanel"
 
@@ -67,9 +67,9 @@ BaseView {
     }
 
     function toggleCreateSwarmView() {
-        if (!viewCoordinator.inNewSwarm) {
+        if (!inNewSwarm) {
             viewCoordinator.present("NewSwarmPage")
-            const newSwarmPage = viewCoordinator.currentView
+            const newSwarmPage = viewCoordinator.getView("NewSwarmPage")
             newSwarmPage.removeMember.connect((convId, member) => {
                 removeMember(convId, member)
             })
@@ -84,7 +84,6 @@ BaseView {
                 let convuid = ConversationsAdapter.createSwarm(title, description, avatar, uris)
                 viewCoordinator.dismiss("NewSwarmPage")
                 LRCInstance.selectConversation(convuid)
-
             })
         } else {
             viewCoordinator.dismiss("NewSwarmPage")
@@ -99,10 +98,12 @@ BaseView {
         sidePanelTabBar.selectTab(tabIndex)
     }
 
+    property bool inNewSwarm: viewCoordinator.currentViewName === "NewSwarmPage"
+
     property var highlighted: []
     property var highlightedMembers: []
     onHighlightedMembersChanged: {
-        if (viewCoordinator.inNewSwarm) {
+        if (inNewSwarm) {
             const newSwarmPage = viewCoordinator.getView("NewSwarmPage")
             newSwarmPage.members = highlightedMembers
         }
@@ -180,31 +181,10 @@ BaseView {
             color: JamiTheme.backgroundColor
         }
 
-        header: AccountComboBox {
-            width: parent.width
-            height: JamiTheme.accountListItemHeight
-            onSettingBtnClicked: {
-                !viewCoordinator.inSettings ?
-                            viewCoordinator.present("SettingsView") :
-                            viewCoordinator.dismiss("SettingsView")}
-        }
-
-        StackLayout {
-            anchors.fill: parent
-
-            currentIndex: viewCoordinator.inSettings ? 0 : 1
-
-            SettingsMenu {
-                id: settingsMenu
-                objectName: "settingsMenu"
-
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
+        header: AccountComboBox {}
 
         Item {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+            anchors.fill: parent
 
             RowLayout {
                 id: titleBar
@@ -276,7 +256,6 @@ BaseView {
                     Layout.fillWidth: true
 
                     onContactSearchBarTextChanged: function (text) {
-                            print(text)
                         // not calling positionViewAtBeginning will cause
                         // sort animation visual bugs
                         conversationListView.positionViewAtBeginning()
@@ -408,7 +387,7 @@ BaseView {
             ColumnLayout {
                 id: swarmMemberSearchList
 
-                    visible: viewCoordinator.inNewSwarm
+                visible: inNewSwarm
 
                 width: parent.width
                 anchors.top: searchStatusRect.bottom
@@ -500,4 +479,3 @@ BaseView {
         }
     }
 }
-}