feat: Make onboarding and login possible on portrait mode

storybook/pages/ReceiveModalPage.qml

@@ -50,7 +50,8 @@ SplitView {
 
             store: WalletStores.RootStore
 
-            onUpdateSelectedAddress: {
+            onUpdateSelectedAddress: function(address) {
+                // Update the selected account based on the new address
                dialog.selectedAccount = ModelUtils.getByKey(dialog.accounts, "address", address)
             }
         }

storybook/pages/StatusSectionLayoutPage.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import StatusQ.Layout 0.1
+
+Page {
+    id: root
+
+    header: ToolBar {
+        id: toolbar
+        width: parent.width
+        Flow {
+            anchors.fill: parent
+            spacing: 5
+            ComboBox {
+                id: layoutChooser
+                model: ["landscape", "portrait"]
+                currentIndex: 0
+            }
+            CheckBox {
+                id: leftPanelCheckBox
+                text: "Show Left Panel"
+                checked: true
+            }
+            CheckBox {
+                id: centerPanelCheckBox
+                text: "Show Center Panel"
+                checked: true
+            }
+            CheckBox {
+                id: rightPanelCheckBox
+                text: "Show Right Panel"
+                checked: true
+            }
+            Button {
+                text: "Next Panel"
+                onClicked: sectionLayout.goToNextPanel()
+            }
+        }
+    }
+
+    Page {
+        id: leftPanel
+        objectName: "leftPanel"
+        title: "Left Panel"
+        implicitWidth: 200
+        implicitHeight: 400
+        Rectangle {
+            color: "red"
+            anchors.fill: parent
+        }
+        Label {
+            text: "This is the left panel"
+            anchors.centerIn: parent
+        }
+    }
+
+    Page {
+        id: centerPanel
+        objectName: "centerPanel"
+        title: "Center Panel"
+        implicitWidth: 400
+        implicitHeight: 400
+        Rectangle {
+            color: "blue"
+            anchors.fill: parent
+        }
+        Label {
+            text: "This is the center panel"
+            anchors.centerIn: parent
+        }
+    }
+    Page {
+        id: rightPanel
+        title: "Right Panel"
+        implicitWidth: 200
+        implicitHeight: 400
+        Rectangle {
+            color: "green"
+            anchors.fill: parent
+        }
+        Label {
+            text: "This is the right panel"
+            anchors.centerIn: parent
+        }
+    }
+
+    Page {
+        id: navBarItem
+        implicitWidth: 78
+        Rectangle {
+            color: "yellow"
+            anchors.fill: parent
+            Label {
+                text: "NavBar"
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    Page {
+        id: footerItem
+        implicitWidth: 400
+        implicitHeight: 50
+        Rectangle {
+            color: "gray"
+            anchors.fill: parent
+            Label {
+                text: "Footer Content"
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    Frame {
+        id: wrapper
+        width: layoutChooser.currentValue === "portrait" ? 400 : 800
+        height: layoutChooser.currentValue === "portrait" ? 800 : 400
+        anchors.centerIn: parent
+        contentItem: StatusSectionLayout {
+            id: sectionLayout
+            clip: true
+            leftPanel: leftPanelCheckBox.checked ? leftPanel : null
+            centerPanel: centerPanelCheckBox.checked ? centerPanel : null
+            rightPanel: rightPanel
+            showRightPanel: rightPanelCheckBox.checked
+            navBar: navBarItem
+            footer: footerItem
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/StatusChatList.qml

@@ -27,6 +27,7 @@ Item {
     property var isEnsVerified: function(pubKey) { return false }
 
     signal chatItemSelected(string categoryId, string id)
+    signal chatItemClicked(string id)
     signal chatItemUnmuted(string id)
     signal categoryReordered(string categoryId, int to)
     signal chatItemReordered(string categoryId, string chatId, int to)
@@ -227,6 +228,7 @@ Item {
                             if (!statusChatListItem.selected) {
                                 root.chatItemSelected(statusChatListItem.categoryId, statusChatListItem.chatId)
                             }
+                            root.chatItemClicked(statusChatListItem.chatId)
                         }
 
                         onUnmute: root.chatItemUnmuted(statusChatListItem.chatId)

ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -25,6 +25,7 @@ Item {
     property alias popupMenu: popupMenuSlot.sourceComponent
 
     signal chatItemSelected(string categoryId, string id)
+    signal chatItemClicked(string id)
     signal chatItemUnmuted(string id)
     signal chatItemReordered(string categoryId, string chatId, int to)
     signal chatListCategoryReordered(string categoryId, int to)
@@ -48,6 +49,7 @@ Item {
             width: parent.width
             visible: statusChatList.model.count > 0
             onChatItemSelected: root.chatItemSelected(categoryId, id)
+            onChatItemClicked: root.chatItemClicked(id)
             onChatItemUnmuted: root.chatItemUnmuted(id)
             onChatItemReordered: root.chatItemReordered(categoryId, chatId, to)
             onCategoryReordered: root.chatListCategoryReordered(categoryId, to)

ui/StatusQ/src/StatusQ/Layout/+qt6/StatusSectionLayout.qml

@@ -0,0 +1,203 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+/*!
+     \qmltype StatusSectionLayout
+     \inherits LayoutChooser
+     \inqmlmodule StatusQ.Layout
+     \since StatusQ.Layout 0.1
+     \brief Displays a three column layout in landscape mode or a three views swipeview in portrait mode, with a header in the central panel.
+     Inherits \l{https://doc.qt.io/qt-6/qml-qtquick-controls2-splitview.html}{SplitView}.
+
+     The \c StatusSectionLayout displays a three column layout in landscape mode or a three views swipeview in portrait mode, with a header in the central panel to be used as the base layout of all application
+     sections.
+     For example:
+
+     \qml
+    StatusSectionLayout {
+        id: root
+
+        notificationCount: 1
+        onNotificationButtonClicked: { showActivityCenter(); }
+
+        headerContent: RowLayout {
+            ...
+        }
+
+        leftPanel: Item {
+            ...
+        }
+
+        centerPanel: Item {
+            ...
+        }
+
+        rightPanel: Item {
+            ...
+        }
+     }
+     \endqml
+
+     For a list of components available see StatusQ.
+*/
+
+LayoutChooser {
+    id: root
+    implicitWidth: 822
+    implicitHeight: 600
+
+    property Component handle: Item { }
+
+    /*!
+        \qmlproperty Item StatusSectionLayout::leftPanel
+        This property holds the left panel of the component.
+    */
+    property Item leftPanel
+    /*!
+        \qmlproperty Item StatusSectionLayout::centerPanel
+        This property holds the center panel of the component.
+    */
+    property Item centerPanel
+    /*!
+        \qmlproperty Component StatusSectionLayout::rightPanel
+        This property holds the right panel of the component.
+    */
+    property Item rightPanel
+    /*!
+        \qmlproperty Item StatusSectionLayout::navBar
+        This property holds the navigation bar of the component. Usually displayed next to the leftPanel.
+    */
+    property Item navBar
+    /*!
+        \qmlproperty Item StatusSectionLayout::footer
+        This property holds the footer of the component.
+    */
+    property Item footer
+    /*!
+        \qmlproperty Component StatusAppLayout::headerBackground
+        This property holds the headerBackground of the component.
+    */
+    property Item headerBackground
+    /*!
+        \qmlproperty bool StatusSectionLayout::showRightPanel
+        This property sets the right panel component's visibility to true/false.
+        Default value is false.
+    */
+    property bool showRightPanel: false
+
+    /*!
+        \qmlproperty int StatusSectionLayout::rightPanelWidth
+        This property sets the right panel component's width.
+        Default value is 250.
+    */
+    property int rightPanelWidth: 250
+    /*!
+        \qmlproperty bool StatusSectionLayout::showHeader
+        This property sets the header component's visibility to true/false.
+        Default value is true.
+    */
+    property bool showHeader: true
+
+    /*!
+        \qmlproperty int StatusSectionLayout::notificationCount
+        This property holds a reference to the notificationCount property of the
+        header component.
+    */
+    property int notificationCount
+
+    /*!
+        \qmlproperty bool StatusSectionLayout::hasUnseenNotifications
+        This property holds a reference to the hasUnseenNotifications property of the
+        header component.
+    */
+    property bool hasUnseenNotifications
+
+    /*!
+        \qmlproperty string StatusSectionLayout::backButtonName
+        This property holds a reference to the backButtonName property of the
+        header component.
+    */
+    property string backButtonName
+
+    /*!
+        \qmlproperty Item StatusSectionLayout::headerContent
+        This property holds a reference to the custom header content of
+        the header component.
+    */
+    property Item headerContent
+    /*!
+        \qmlproperty Item StatusSectionLayout::notificationButton
+        This property holds a reference to the notification button of the header
+        component.
+    */
+    property Item notificationButton
+
+    /*!
+        \qmlsignal
+        This signal is emitted when the back button of the header component
+        is pressed.
+    */
+
+    signal backButtonClicked()
+
+    /*!
+        \qmlsignal
+        This signal is emitted when the notification button of the header component
+        is pressed.
+    */
+    signal notificationButtonClicked()
+    /*!
+        \qmlmethod StatusSectionLayout::goToNextPanel()
+        This method is used to focus the panel that needs to be active.
+    */
+    function goToNextPanel() {
+        if (portraitView.visible)
+            portraitView.currentIndex = portraitView.currentIndex + 1;
+    }
+
+    criteria: [
+        root.height > root.width && root.width < root.implicitWidth, // Portrait mode
+        true // Defaults to landscape mode
+    ]
+
+    layoutChoices: [
+        portraitView,
+        landscapeView
+    ]
+
+    StatusSectionLayoutLandscape {
+        id: landscapeView
+        anchors.fill: parent
+        handle: root.handle
+        leftPanel: root.leftPanel
+        centerPanel: root.centerPanel
+        rightPanel: root.rightPanel
+        navBar: root.navBar
+        footer: root.footer
+        headerBackground: root.headerBackground
+        showRightPanel: root.showRightPanel
+        rightPanelWidth: root.rightPanelWidth
+        showHeader: root.showHeader
+
+        onNotificationButtonClicked: root.notificationButtonClicked()
+        onBackButtonClicked: root.backButtonClicked()
+    }
+
+    StatusSectionLayoutPortrait {
+        id: portraitView
+        anchors.fill: parent
+        leftPanel: root.leftPanel
+        centerPanel: root.centerPanel
+        rightPanel: root.rightPanel
+        navBar: root.navBar
+        footer: root.footer
+        headerBackground: root.headerBackground
+        showRightPanel: root.showRightPanel
+        rightPanelWidth: root.rightPanelWidth
+        showHeader: root.showHeader
+
+        onNotificationButtonClicked: root.notificationButtonClicked()
+        onBackButtonClicked: root.backButtonClicked()
+    }
+}