feat: layouts for the Profile screens

Work on this PR started before the build system was updated and at one point I
upgraded `nim_status_client.nimble` to use NimScript so the nimble command
would stop warning that the old format was being used. In team chat it was
discussed that since we're no longer using nimble for package management we
could simply delete `nim_status_client.nimble` to avoid confusion, which can be
done in another PR.

Introduce a BrowserLayout stub so the index will be calcualted correctly re:
the active tab.

Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`,
respectively.

Introduce ProfileLayout which uses a "LeftTab" approach similar to that of
WalletLayout. There remains quite a bit of styling work to be done in
ProfileLayout and its LeftTab. Also, it may be better to start over using a
SplitView like the ChatLayout, I'm not really sure.

It wasn't clear what should be the default view for the right-pane when Profile
is selected in the left-most TabBar. In this PR, it defaults to showing the
view corresponding to the ENS usernames button.

In the archived Figma for the desktop design, it seemed a picture could be set,
e.g. there is a headshot of a woman used in the Profile screen. To that end I
explored how to take a square image and clip/mask it so it appears round and I
included a larger placeholder image for that purpose. In the new design, and
with respect to mobile, it may not be possible to set a profile picture so the
code that rounds the image can maybe be dropped.

.gitignore

@@ -1,7 +1,3 @@
-libstatus.a
-libstatus.dylib
-nim_status_client
-nim_libstatus
 data/
 noBackup/
 .idea

nim_status_client.nimble

@@ -1,10 +1,13 @@
-[Package]
+# Package
+
 version       = "0.1.0"
 author        = "Richard Ramos"
 description   = "A new awesome nimble package"
 license       = "MIT"
 srcDir        = "src"
-bin           = "nim_status_client"
+bin           = @["nim_status_client"]
+skipExt       = @["nim"]
 
-[Deps]
+# Deps
-Requires: "nim >= 1.0.0, nimqml >= 0.7.0, stint"
+
+requires "nim >= 1.0.0", " nimqml >= 0.7.0", "stint"

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../imports"
+import "../../../shared"
+
+Item {
+    id: browserView
+    x: 0
+    y: 0
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    // Those anchors show a warning too, but whithout them, there is a gap on the right
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+
+    StackLayout {
+        id: browserContainer
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+
+        Text {
+            id: element1
+            text: qsTr("Ðapp Browser")
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            anchors.top: parent.top
+            anchors.topMargin: 24
+            font.weight: Font.Medium
+            font.pixelSize: 20
+      }
+  }
+}

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls 1.3
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
-import "../../imports"
+import "../../../imports"
 
 SplitView {
     property alias searchStr: searchText.text
@@ -75,7 +75,7 @@ SplitView {
                         anchors.leftMargin: 10
                         anchors.verticalCenter: parent.verticalCenter
                         fillMode: Image.PreserveAspectFit
-                        source: "../img/search.svg"
+                        source: "../../img/search.svg"
                     }
 
                     MouseArea {

ui/app/AppLayouts/Node/NodeLayout.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls 1.3
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
-import "../../imports"
+import "../../../imports"
 
 SplitView {
     id: nodeView

ui/app/AppLayouts/Profile/LeftTab.qml

@@ -0,0 +1,367 @@
+import QtGraphicalEffects 1.12
+import QtQuick 2.3
+import QtQuick.Controls 1.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../imports"
+import "../../../shared"
+
+ColumnLayout {
+    readonly property int w: 340
+    property alias currentTab: profileScreenButtons.currentIndex
+
+    id: profileInfoContainer
+    width: w
+    spacing: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+    anchors.top: parent.top
+    anchors.topMargin: 0
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: 0
+
+    RowLayout {
+        id: profileHeader
+        height: 240
+        Layout.fillWidth: true
+        width: profileInfoContainer.w
+
+        Rectangle {
+            id: profileHeaderContent
+            height: parent.height
+            Layout.fillWidth: true
+
+            Item {
+                id: profileImgNameContainer
+                width: profileHeaderContent.width
+                height: profileHeaderContent.height
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+
+                Image {
+                    id: profileImg
+                    source: "../../img/placeholder-profile-large.jpg"
+                    width: 80
+                    height: 80
+                    fillMode: Image.PreserveAspectCrop
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    property bool rounded: true
+                    property bool adapt: false
+                    y: 78
+
+                    layer.enabled: rounded
+                    layer.effect: OpacityMask {
+                        maskSource: Item {
+                            width: profileImg.width
+                            height: profileImg.height
+                            Rectangle {
+                                anchors.centerIn: parent
+                                width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height)
+                                height: profileImg.adapt ? profileImg.height : width
+                                radius: Math.min(width, height)
+                            }
+                        }
+                    }
+                }
+
+                Text {
+                    id: profileName
+                    text: qsTr("Happy Extraneous Dancer")
+                    anchors.top: profileImg.bottom
+                    anchors.topMargin: 10
+                    anchors.horizontalCenterOffset: 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.weight: Font.Medium
+                    font.pixelSize: 20
+                }
+            }
+        }
+    }
+
+    RowLayout {
+        readonly property int btnheight: 42
+
+        id: profileTabBar
+        width: profileInfoContainer.w
+        height: btnheight * 10
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        Rectangle {
+            id: profileTabBarBg
+            color: "#ffffff"
+            height: parent.height
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            TabBar {
+                id: profileScreenButtons
+                width: profileInfoContainer.w
+                height: parent.height
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 0
+                currentIndex: 0
+                spacing: 0
+                background: Rectangle {
+                    color: "#00000000"
+                }
+
+                TabButton {
+                    id: ensTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.top: parent.top
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element1
+                        color: "#000000"
+                        text: qsTr("ENS usernames")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: contactsTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: ensTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element2
+                        color: "#000000"
+                        text: qsTr("Contacts")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: privacyTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: contactsTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element3
+                        color: "#000000"
+                        text: qsTr("Privacy and security")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: syncTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: privacyTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element4
+                        color: "#000000"
+                        text: qsTr("Sync settings")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: languageTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: syncTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element5
+                        color: "#000000"
+                        text: qsTr("Language settings")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: notificationsTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: languageTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element6
+                        color: "#000000"
+                        text: qsTr("Notifications settings")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: advancedTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: notificationsTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element7
+                        color: "#000000"
+                        text: qsTr("Advanced settings")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: helpTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: advancedTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element8
+                        color: "#000000"
+                        text: qsTr("Need help?")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: aboutTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: helpTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element9
+                        color: "#000000"
+                        text: qsTr("About")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+
+                TabButton {
+                    id: signoutTabButton
+                    width: profileInfoContainer.w
+                    height: profileTabBar.btnheight
+                    text: ""
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: aboutTabButton.bottom
+                    anchors.topMargin: 0
+                    background: Rectangle {
+                        color: Theme.transparent
+                    }
+
+                    Text {
+                        id: element10
+                        color: "#000000"
+                        text: qsTr("Sign out")
+                        anchors.left: parent.left
+                        anchors.leftMargin: 72
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Medium
+                        font.pixelSize: 14
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:15;anchors_height:56}
+}
+##^##*/

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -0,0 +1,235 @@
+import QtGraphicalEffects 1.12
+import QtQuick 2.3
+import QtQuick.Controls 1.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../imports"
+import "../../../shared"
+import "."
+
+Item {
+    id: profileView
+    x: 0
+    y: 0
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    // Those anchors show a warning too, but whithout them, there is a gap on the right
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+
+    LeftTab {
+        id: leftTab
+    }
+
+    StackLayout {
+        id: profileContainer
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: leftTab.right
+        anchors.leftMargin: 0
+        currentIndex: leftTab.currentTab
+
+        Item {
+            id: ensContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element1
+                text: qsTr("ENS usernames")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: contactsContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element2
+                text: qsTr("Contacts")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: privacyContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element3
+                text: qsTr("Privacy and security settings")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: syncContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element4
+                text: qsTr("Sync settings")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: languageContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element5
+                text: qsTr("Language settings")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: notificationsContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element6
+                text: qsTr("Notifications settings")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: advancedContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element7
+                text: qsTr("Advanced settings")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: helpContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element8
+                text: qsTr("Help menus: FAQ, Glossary, etc.")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: aboutContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element9
+                text: qsTr("About the app")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+
+        Item {
+            id: signoutContainer
+            width: 200
+            height: 200
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Text {
+                id: element10
+                text: qsTr("Sign out controls")
+                anchors.left: parent.left
+                anchors.leftMargin: 24
+                anchors.top: parent.top
+                anchors.topMargin: 24
+                font.weight: Font.Bold
+                font.pixelSize: 20
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

ui/app/AppLayouts/Profile/qmldir

@@ -0,0 +1 @@
+LeftTab 1.0 LeftTab.qml

ui/app/AppLayouts/qmldir

@@ -1,3 +1,5 @@
-ChatLayout 1.0 ChatLayout.qml
+BrowserLayout 1.0 Browser/BrowserLayout.qml
-NodeLayout 1.0 NodeLayout.qml
+ChatLayout 1.0 Chat/ChatLayout.qml
+NodeLayout 1.0 Node/NodeLayout.qml
+ProfileLayout 1.0 Profile/ProfileLayout.qml
 WalletLayout 1.0 Wallet/WalletLayout.qml

ui/app/AppMain.qml

@@ -172,12 +172,18 @@ RowLayout {
             Layout.fillHeight: true
         }
 
-        Item {
+        BrowserLayout {
-            // browser
+            id: browserLayoutContainer
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.fillHeight: true
         }
 
-        Item {
+        ProfileLayout {
-            // profile
+            id: profileLayoutContainer
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.fillHeight: true
         }
 
         NodeLayout {

ui/nim-status-client.pro

@@ -49,8 +49,10 @@ DISTFILES += \
     Inter-ThinItalic.otf \
     Inter-V.otf \
     Theme.qml \
-    app/AppLayouts/ChatLayout.qml \
+    app/AppLayouts/Browser/BrowserLayout.qml \
-    app/AppLayouts/NodeLayout.qml \
+    app/AppLayouts/Chat/ChatLayout.qml \
+    app/AppLayouts/Node/NodeLayout.qml \
+    app/AppLayouts/Profile/ProfileLayout.qml \
     app/AppLayouts/Wallet/LeftTab.qml \
     app/AppLayouts/Wallet/WalletLayout.qml \
     app/AppLayouts/Wallet/qmldir \