added PageHome, PageSettings, PageShare, PageStart

- renamed old PageStart to PageSetupWizardStart
- added various text types
- moved servers model to "global" scope

client/amnezia_application.cpp

@@ -103,6 +103,9 @@ void AmneziaApplication::init()
     m_containersModel.reset(new ContainersModel(m_settings, this));
     m_engine->rootContext()->setContextProperty("ContainersModel", m_containersModel.get());
 
+    m_serversModel.reset(new ServersModel(m_settings, this));
+    m_engine->rootContext()->setContextProperty("ServersModel", m_serversModel.get());
+
     m_uiLogic->registerPagesLogic();
 
 #if defined(Q_OS_IOS)

client/amnezia_application.h

@@ -12,6 +12,8 @@
 
 #include "ui/uilogic.h"
 #include "configurators/vpn_configurator.h"
+#include "ui/models/servers_model.h"
+#include "ui/models/containers_model.h"
 
 #define amnApp (static_cast<AmneziaApplication *>(QCoreApplication::instance()))
 
@@ -57,6 +59,7 @@ private:
     QCommandLineParser m_parser;
 
     QScopedPointer<ContainersModel> m_containersModel;
+    QScopedPointer<ServersModel> m_serversModel;
 
 };
 

client/images/controls/home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 22V12H15V22" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/images/controls/settings-2.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 7H11" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 17H5" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 20C18.6569 20 20 18.6569 20 17C20 15.3431 18.6569 14 17 14C15.3431 14 14 15.3431 14 17C14 18.6569 15.3431 20 17 20Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 10C8.65685 10 10 8.65685 10 7C10 5.34315 8.65685 4 7 4C5.34315 4 4 5.34315 4 7C4 8.65685 5.34315 10 7 10Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/images/controls/share-2.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.58997 13.5098L15.42 17.4898" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.41 6.50977L8.58997 10.4898" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/resources.qrc

@@ -182,7 +182,7 @@
         <file>ui/qml/Controls2/CheckBoxType.qml</file>
         <file>images/controls/check.svg</file>
         <file>ui/qml/Controls2/DropDownType.qml</file>
-        <file>ui/qml/Pages2/PageStart.qml</file>
+        <file>ui/qml/Pages2/PageSetupWizardStart.qml</file>
         <file>ui/qml/main2.qml</file>
         <file>ui/qml/PageLoader.qml</file>
         <file>images/amneziaBigLogo.png</file>
@@ -195,7 +195,7 @@
         <file>ui/qml/Pages2/PageSetupWizardEasy.qml</file>
         <file>images/controls/chevron-down.svg</file>
         <file>images/controls/chevron-up.svg</file>
-        <file>ui/qml/Controls2/TextTypes/BodyTextType.qml</file>
+        <file>ui/qml/Controls2/TextTypes/ParagraphTextType.qml</file>
         <file>ui/qml/Controls2/TextTypes/Header2TextType.qml</file>
         <file>ui/qml/Controls2/HorizontalRadioButton.qml</file>
         <file>ui/qml/Controls2/VerticalRadioButton.qml</file>
@@ -209,5 +209,17 @@
         <file>images/controls/qr-code.svg</file>
         <file>images/controls/text-cursor.svg</file>
         <file>ui/qml/Pages2/PageSetupWizardTextKey.qml</file>
+        <file>ui/qml/Pages2/PageStart.qml</file>
+        <file>ui/qml/Controls2/TabImageButtonType.qml</file>
+        <file>images/controls/home.svg</file>
+        <file>images/controls/settings-2.svg</file>
+        <file>images/controls/share-2.svg</file>
+        <file>ui/qml/Pages2/PageHome.qml</file>
+        <file>ui/qml/Pages2/PageSettings.qml</file>
+        <file>ui/qml/Pages2/PageShare.qml</file>
+        <file>ui/qml/Controls2/TextTypes/Header1TextType.qml</file>
+        <file>ui/qml/Controls2/TextTypes/LabelTextType.qml</file>
+        <file>ui/qml/Controls2/TextTypes/ButtonTextType.qml</file>
+        <file>ui/qml/Controls2/Header2Type.qml</file>
     </qresource>
 </RCC>

client/ui/models/servers_model.cpp

@@ -1,29 +1,42 @@
 #include "servers_model.h"
 
-ServersModel::ServersModel(QObject *parent) :
+ServersModel::ServersModel(std::shared_ptr<Settings> settings, QObject *parent) : m_settings(settings), QAbstractListModel(parent)
-    QAbstractListModel(parent)
 {
-
+    const QJsonArray &servers = m_settings->serversArray();
+    int defaultServer = m_settings->defaultServerIndex();
+    QVector<ServerModelContent> serverListContent;
+    for(int i = 0; i < servers.size(); i++) {
+        ServerModelContent c;
+        auto server = servers.at(i).toObject();
+        c.desc = server.value(config_key::description).toString();
+        c.address = server.value(config_key::hostName).toString();
+        if (c.desc.isEmpty()) {
+            c.desc = c.address;
+        }
+        c.isDefault = (i == defaultServer);
+        serverListContent.push_back(c);
+    }
+    setContent(serverListContent);
 }
 
 void ServersModel::clearData()
 {
     beginResetModel();
-    content.clear();
+    m_content.clear();
     endResetModel();
 }
 
-void ServersModel::setContent(const std::vector<ServerModelContent> &data)
+void ServersModel::setContent(const QVector<ServerModelContent> &data)
 {
     beginResetModel();
-    content = data;
+    m_content = data;
     endResetModel();
 }
 
 int ServersModel::rowCount(const QModelIndex &parent) const
 {
     Q_UNUSED(parent);
-    return static_cast<int>(content.size());
+    return static_cast<int>(m_content.size());
 }
 
 QHash<int, QByteArray> ServersModel::roleNames() const {
@@ -37,17 +50,17 @@ QHash<int, QByteArray> ServersModel::roleNames() const {
 QVariant ServersModel::data(const QModelIndex &index, int role) const
 {
     if (!index.isValid() || index.row() < 0
-            || index.row() >= static_cast<int>(content.size())) {
+            || index.row() >= static_cast<int>(m_content.size())) {
         return QVariant();
     }
     if (role == DescRole) {
-        return content[index.row()].desc;
+        return m_content[index.row()].desc;
     }
     if (role == AddressRole) {
-        return content[index.row()].address;
+        return m_content[index.row()].address;
     }
     if (role == IsDefaultRole) {
-        return content[index.row()].isDefault;
+        return m_content[index.row()].isDefault;
     }
     return QVariant();
 }

client/ui/models/servers_model.h

@@ -2,8 +2,8 @@
 #define SERVERSMODEL_H
 
 #include <QAbstractListModel>
-#include <vector>
+
-#include <utility>
+#include "settings.h"
 
 struct ServerModelContent {
     QString desc;
@@ -15,7 +15,7 @@ class ServersModel : public QAbstractListModel
 {
     Q_OBJECT
 public:
-    ServersModel(QObject *parent = nullptr);
+    ServersModel(std::shared_ptr<Settings> settings, QObject *parent = nullptr);
 public:
     enum SiteRoles {
         DescRole = Qt::UserRole + 1,
@@ -24,7 +24,7 @@ public:
     };
 
     void clearData();
-    void setContent(const std::vector<ServerModelContent>& data);
+    void setContent(const QVector<ServerModelContent>& data);
     int rowCount(const QModelIndex &parent = QModelIndex()) const override;
 
     QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
@@ -33,7 +33,8 @@ protected:
     QHash<int, QByteArray> roleNames() const override;
 
 private:
-    std::vector<ServerModelContent> content;
+    QVector<ServerModelContent> m_content;
+    std::shared_ptr<Settings> m_settings;
 };
 
 #endif // SERVERSMODEL_H

client/ui/pages.h

@@ -28,9 +28,11 @@ enum class Page {Start = 0, NewServer, NewServerProtocols, Vpn,
            ProtocolSettings, ProtocolShare, QrDecoder, QrDecoderIos, About, ViewConfig,
            AdvancedServerSettings, ClientManagement, ClientInfo,
 
-           PageStart, PageTest, PageSetupWizardCredentials, PageSetupWizardProtocols, PageSetupWizardEasy,
+           PageSetupWizardStart, PageTest, PageSetupWizardCredentials, PageSetupWizardProtocols, PageSetupWizardEasy,
            PageSetupWizardProtocolSettings, PageSetupWizardInstalling, PageSetupWizardConfigSource,
-           PageSetupWizardTextKey};
+           PageSetupWizardTextKey,
+
+           PageStart, PageHome, PageSettings, PageShare};
 Q_ENUM_NS(Page)
 
 static void declareQmlPageEnum() {

client/ui/pages_logic/ServerListLogic.cpp

@@ -6,7 +6,7 @@
 
 ServerListLogic::ServerListLogic(UiLogic *logic, QObject *parent):
     PageLogicBase(logic, parent),
-    m_serverListModel{new ServersModel(this)}
+    m_serverListModel{new ServersModel(m_settings, this)}
 {
 
 }
@@ -33,7 +33,7 @@ void ServerListLogic::onUpdatePage()
 {
     const QJsonArray &servers = m_settings->serversArray();
     int defaultServer = m_settings->defaultServerIndex();
-    std::vector<ServerModelContent> serverListContent;
+    QVector<ServerModelContent> serverListContent;
     for(int i = 0; i < servers.size(); i++) {
         ServerModelContent c;
         auto server = servers.at(i).toObject();

client/ui/qml/Controls2/DropDownType.qml

@@ -12,14 +12,20 @@ Item {
 
     property var onClickedFunc
     property string buttonImage: "qrc:/images/controls/chevron-down.svg"
+    property string buttonImageColor: "#494B50"
+
 
     property string defaultColor: "#1C1D21"
 
+    property string textColor: "#d7d8db"
+
     property string borderColor: "#494B50"
+    property int borderWidth: 1
 
     property alias menuModel: menuContent.model
 
-    height: buttonContent.implicitHeight
+    implicitWidth: buttonContent.implicitWidth
+    implicitHeight: buttonContent.implicitHeight
 
     Rectangle {
         id: buttonBackground
@@ -28,6 +34,7 @@ Item {
         radius: 16
         color: defaultColor
         border.color: borderColor
+        border.width: borderWidth
 
         Behavior on border.width {
             PropertyAnimation { duration: 200 }
@@ -37,72 +44,55 @@ Item {
     RowLayout {
         id: buttonContent
         anchors.fill: parent
-        anchors.rightMargin: 16
+
-        anchors.leftMargin: 16
+        spacing: 0
 
         ColumnLayout {
             Layout.leftMargin: 16
-            Layout.rightMargin: 16
-            Layout.topMargin: 16
-            Layout.bottomMargin: 16
 
-            Text {
+            LabelTextType {
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
                 visible: root.descriptionText !== ""
 
-                font.family: "PT Root UI"
-                font.styleName: "normal"
-                font.pixelSize: 13
-                font.letterSpacing: 0.02
                 color: "#878B91"
                 text: root.descriptionText
-                wrapMode: Text.WordWrap
-
-                Layout.fillWidth: true
-                height: 16   
-
-                horizontalAlignment: Text.AlignLeft
-                verticalAlignment: Text.AlignVCenter
             }
 
-            Text {
+            ButtonTextType {
-                font.family: "PT Root UI"
+                horizontalAlignment: Text.AlignHCenter
-                font.styleName: "normal"
-                font.pixelSize: 16
-                color: "#d7d8db"
-                text: root.text
-
-                Layout.fillWidth: true
-                height: 24
-
-                horizontalAlignment: Text.AlignLeft
                 verticalAlignment: Text.AlignVCenter
+
+                color: root.textColor
+                text: root.text
             }
         }
 
         ImageButtonType {
             id: button
 
+            Layout.leftMargin: 4
             Layout.rightMargin: 16
 
             hoverEnabled: false
             image: buttonImage
+            imageColor: buttonImageColor
             onClicked: {
                 if (onClickedFunc && typeof onClickedFunc === "function") {
                     onClickedFunc()
                 }
             }
-
-            Layout.alignment: Qt.AlignRight
         }
     }
 
     MouseArea {
-        anchors.fill: parent
+        anchors.fill: buttonContent
         cursorShape: Qt.PointingHandCursor
         hoverEnabled: true
 
         onEntered: {
-            buttonBackground.border.width = 1
+            buttonBackground.border.width = borderWidth
         }
 
         onExited: {
@@ -119,7 +109,7 @@ Item {
 
         edge: Qt.BottomEdge
         width: parent.width
-        height: parent.height * 0.8
+        height: parent.height * 0.9
 
         clip: true
         modal: true
@@ -129,6 +119,9 @@ Item {
             anchors.bottomMargin: -radius
             radius: 16
             color: "#1C1D21"
+
+            border.color: borderColor
+            border.width: 1
         }
 
         Overlay.modal: Rectangle {

client/ui/qml/Controls2/Header2Type.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Layouts
+
+import "TextTypes"
+
+Item {
+    id: root
+
+    property string buttonImage
+    property string headerText
+    property string descriptionText
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    ColumnLayout {
+        id: content
+        anchors.fill: parent
+
+        ImageButtonType {
+            id: backButton
+
+            Layout.leftMargin: -6
+
+            image: root.buttonImage
+            imageColor: "#D7D8DB"
+
+            visible: image ? true : false
+
+            onClicked: {
+                UiLogic.closePage()
+            }
+        }
+
+        Header2TextType {
+            id: header
+
+            Layout.fillWidth: true
+
+            text: root.headerText
+        }
+
+        ParagraphTextType {
+            id: description
+
+            Layout.topMargin: 16
+            Layout.fillWidth: true
+
+            text: root.descriptionText
+
+            color: "#878B91"
+
+            visible: root.descriptionText !== ""
+        }
+    }
+}

client/ui/qml/Controls2/HeaderType.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 
+import "TextTypes"
+
 Item {
     id: root
 
@@ -30,39 +32,23 @@ Item {
             }
         }
 
-        Text {
+        Header1TextType {
             id: header
 
-            text: root.headerText
-
-            color: "#D7D8DB"
-            font.pixelSize: 36
-            font.weight: 700
-            font.family: "PT Root UI VF"
-            font.letterSpacing: -0.03
-
-            wrapMode: Text.WordWrap
-
-            height: 38
             Layout.fillWidth: true
+
+            text: root.headerText
         }
 
-        Text {
+        ParagraphTextType {
             id: description
 
+            Layout.topMargin: 16
+            Layout.fillWidth: true
+
             text: root.descriptionText
 
             color: "#878B91"
-            font.pixelSize: 16
-            font.weight: 400
-            font.family: "PT Root UI VF"
-            font.letterSpacing: -0.03
-
-            wrapMode: Text.WordWrap
-
-            height: 24
-            Layout.topMargin: 16
-            Layout.fillWidth: true
         }
     }
 }

client/ui/qml/Controls2/TabImageButtonType.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls
+
+TabButton {
+    id: root
+
+    property string hoveredColor: "#412102"
+    property string defaultColor: "#D7D8DB"
+    property string selectedColor: "#FBB26A"
+
+    property string image
+
+    property bool isSelected: false
+
+    hoverEnabled: true
+
+    icon.source: image
+    icon.color: isSelected ? selectedColor : defaultColor
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+    }
+}

client/ui/qml/Controls2/TextTypes/ButtonTextType.qml

@@ -0,0 +1,12 @@
+import QtQuick
+
+Text {
+    height: 24
+
+    color: "#D7D8DB"
+    font.pixelSize: 16
+    font.weight: 500
+    font.family: "PT Root UI VF"
+
+    wrapMode: Text.WordWrap
+}

client/ui/qml/Controls2/TextTypes/Header1TextType.qml

@@ -0,0 +1,14 @@
+import QtQuick
+
+Text {
+    height: 38
+
+    color: "#D7D8DB"
+    font.pixelSize: 36
+    font.weight: 700
+    font.family: "PT Root UI VF"
+    font.letterSpacing: -0.03
+
+    wrapMode: Text.WordWrap
+}
+

client/ui/qml/Controls2/TextTypes/Header2TextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
 Text {
+    height: 30
+
     color: "#D7D8DB"
     font.pixelSize: 25
     font.weight: 700
     font.family: "PT Root UI VF"
 
-    height: 30
+    wrapMode: Text.WordWrap
 }

client/ui/qml/Controls2/TextTypes/LabelTextType.qml

@@ -0,0 +1,13 @@
+import QtQuick
+
+Text {
+    height: 16
+
+    color: "#878B91"
+    font.pixelSize: 13
+    font.weight: 400
+    font.family: "PT Root UI VF"
+    font.letterSpacing: 0.02
+
+    wrapMode: Text.WordWrap
+}

client/ui/qml/Controls2/TextTypes/ParagraphTextType.qml

@@ -1,12 +1,12 @@
 import QtQuick
 
 Text {
-    text: root.bodyText
+    height: 24
-    wrapMode: Text.WordWrap
+
     color: "#D7D8DB"
     font.pixelSize: 16
     font.weight: 400
     font.family: "PT Root UI VF"
 
-    height: 24
+    wrapMode: Text.WordWrap
 }

client/ui/qml/PageLoader.qml

@@ -3,5 +3,5 @@ import QtQuick.Controls
 
 StackView {
     id: stackView
-    initialItem: "PageStart"
+    initialItem: "PageSetupWizardStart"
 }

client/ui/qml/Pages2/PageHome.qml

@@ -0,0 +1,266 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import PageEnum 1.0
+
+import "./"
+import "../Pages"
+import "../Controls2"
+import "../Controls2/TextTypes"
+import "../Config"
+
+PageBase {
+    id: root
+    page: PageEnum.PageHome
+
+    property string defaultColor: "#1C1D21"
+
+    property string borderColor: "#2C2D30"
+
+    property string currentServerName: menuContent.currentItem.delegateData.desc
+    property string currentServerDescription: menuContent.currentItem.delegateData.address
+
+    Rectangle {
+        id: buttonBackground
+        anchors.fill: buttonContent
+        anchors.bottomMargin: -radius
+
+        radius: 16
+        color: defaultColor
+        border.color: borderColor
+        border.width: 1
+
+        Rectangle {
+            width: parent.width
+            height: 1
+            y: parent.height - height - parent.radius
+
+            color: borderColor
+        }
+    }
+
+    ColumnLayout {
+        id: buttonContent
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+
+        RowLayout {
+            Layout.topMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Header1TextType {
+                text: currentServerName
+            }
+
+            Image {
+                Layout.preferredWidth: 18
+                Layout.preferredHeight: 18
+
+                source: "qrc:/images/controls/chevron-down.svg"
+            }
+        }
+
+        LabelTextType {
+            Layout.bottomMargin: 44
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            text: currentServerDescription
+        }
+    }
+
+    MouseArea {
+        anchors.fill: buttonBackground
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+
+        onClicked: {
+            menu.visible = true
+        }
+    }
+
+    Drawer {
+        id: menu
+
+        edge: Qt.BottomEdge
+        width: parent.width
+        height: parent.height * 0.90
+
+        clip: true
+        modal: true
+
+        background: Rectangle {
+            anchors.fill: parent
+            anchors.bottomMargin: -radius
+            radius: 16
+
+            color: "#1C1D21"
+            border.color: borderColor
+            border.width: 1
+        }
+
+        Overlay.modal: Rectangle {
+            color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
+        }
+
+        ColumnLayout {
+            id: menuHeader
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.left: parent.left
+
+            Header1TextType {
+                Layout.topMargin: 24
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+                text: currentServerName
+            }
+
+            LabelTextType {
+                Layout.bottomMargin: 24
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+                text: currentServerDescription
+            }
+
+            RowLayout {
+
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                spacing: 8
+
+                DropDownType {
+                    implicitHeight: 40
+
+                    borderWidth: 0
+                    buttonImageColor: "#0E0E11"
+
+                    defaultColor: "#D7D8DB"
+
+                    textColor: "#0E0E11"
+                    text: "testtesttest"
+                }
+
+                BasicButtonType {
+                    implicitHeight: 40
+
+                    text: "Amnezia DNS"
+                }
+            }
+
+            Header2Type {
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                headerText: "Серверы"
+            }
+        }
+
+
+//        Header2TextType {
+//            id: menuHeader
+//            width: parent.width
+
+//            text: "Данные для подключения"
+//            wrapMode: Text.WordWrap
+
+//            anchors.top: parent.top
+//            anchors.left: parent.left
+//            anchors.right: parent.right
+//            anchors.topMargin: 16
+//            anchors.leftMargin: 16
+//            anchors.rightMargin: 16
+//        }
+
+        FlickableType {
+            anchors.top: menuHeader.bottom
+            anchors.topMargin: 16
+            contentHeight: col.implicitHeight
+
+            Column {
+                id: col
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+
+                spacing: 16
+
+                ButtonGroup {
+                    id: radioButtonGroup
+                }
+
+                ListView {
+                    id: menuContent
+                    width: parent.width
+                    height: menuContent.contentItem.height
+
+                    model: ServersModel
+                    currentIndex: 0
+
+                    clip: true
+                    interactive: false
+
+                    delegate: Item {
+                        id: menuContentDelegate
+
+                        property variant delegateData: model
+
+                        implicitWidth: menuContent.width
+                        implicitHeight: radioButton.implicitHeight
+
+                        RadioButton {
+                            id: radioButton
+
+                            implicitWidth: parent.width
+                            implicitHeight: radioButtonContent.implicitHeight
+
+                            hoverEnabled: true
+
+                            ButtonGroup.group: radioButtonGroup
+
+                            indicator: Rectangle {
+                                anchors.fill: parent
+                                color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
+                            }
+
+                            RowLayout {
+                                id: radioButtonContent
+                                anchors.fill: parent
+
+                                anchors.rightMargin: 16
+                                anchors.leftMargin: 16
+
+                                z: 1
+
+                                Text {
+                                    id: text
+
+                                    text: desc
+                                    color: "#D7D8DB"
+                                    font.pixelSize: 16
+                                    font.weight: 400
+                                    font.family: "PT Root UI VF"
+
+                                    height: 24
+
+                                    Layout.fillWidth: true
+                                    Layout.topMargin: 20
+                                    Layout.bottomMargin: 20
+                                }
+
+                                Image {
+                                    source: "qrc:/images/controls/check.svg"
+                                    visible: radioButton.checked
+                                    width: 24
+                                    height: 24
+
+                                    Layout.rightMargin: 8
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

client/ui/qml/Pages2/PageSettings.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Item {
+
+}

client/ui/qml/Pages2/PageSetupWizardConfigSource.qml

@@ -64,7 +64,6 @@ PageBase {
 
                 FileDialog {
                     id: fileDialog
-//                    currentFolder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
                     onAccepted: {
 
                     }
@@ -76,7 +75,7 @@ PageBase {
                 color: "#2C2D30"
             }
 
-            //todo ifdef mobile platforms>
+            //todo ifdef mobile platforms
             LabelWithButtonType {
                 Layout.fillWidth: true
 

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -41,7 +41,7 @@ PageBase {
                 descriptionText: "Эти настройки можно будет изменить позже"
             }
 
-            BodyTextType {
+            ParagraphTextType {
                 Layout.topMargin: 16
 
                 text: "Network protocol"

client/ui/qml/Pages2/PageSetupWizardStart.qml

@@ -0,0 +1,163 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import PageEnum 1.0
+
+import "./"
+import "../Pages"
+import "../Controls2"
+import "../Config"
+import "../Controls2/TextTypes"
+
+PageBase {
+    id: root
+    page: PageEnum.PageSetupWizardStart
+
+    FlickableType {
+        id: fl
+        anchors.top: root.top
+        anchors.bottom: root.bottom
+        contentHeight: content.height
+
+        ColumnLayout {
+            id: content
+
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            Image {
+                id: image
+                source: "qrc:/images/amneziaBigLogo.png"
+
+                Layout.alignment: Qt.AlignCenter
+                Layout.topMargin: 32
+                Layout.leftMargin: 8
+                Layout.rightMargin: 8
+                Layout.preferredWidth: 344
+                Layout.preferredHeight: 279
+            }
+
+            ParagraphTextType {
+                Layout.fillWidth: true
+                Layout.topMargin: 50
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                text: "Бесплатный сервис для создания личного VPN на вашем сервере. Помогаем получать доступ к заблокированному контенту, не раскрывая конфиденциальность даже провайдерам VPN."
+            }
+
+            BasicButtonType {
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                text: qsTr("У меня есть данные для подключения")
+
+                onClicked: {
+                    drawer.visible = true
+                }
+            }
+
+            BasicButtonType {
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                defaultColor: "transparent"
+                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                disabledColor: "#878B91"
+                textColor: "#D7D8DB"
+                borderWidth: 1
+
+                text: qsTr("У меня ничего нет")
+
+                onClicked: {
+                    UiLogic.goToPage(PageEnum.PageTest)
+                }
+            }
+        }
+
+        Drawer {
+            id: drawer
+
+            edge: Qt.BottomEdge
+            width: parent.width
+            height: parent.height * 0.4375
+
+            clip: true
+            modal: true
+
+            background: Rectangle {
+                anchors.fill: parent
+                anchors.bottomMargin: -radius
+                radius: 16
+                color: "#1C1D21"
+
+                border.color: borderColor
+                border.width: 1
+            }
+
+            Overlay.modal: Rectangle {
+                color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
+            }
+
+            ColumnLayout {
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+
+                anchors.rightMargin: 16
+                anchors.leftMargin: 16
+
+                Header2TextType {
+                    Layout.fillWidth: true
+                    Layout.topMargin: 24
+                    Layout.alignment: Qt.AlignHCenter
+
+                    text: "Данные для подключения"
+                    wrapMode: Text.WordWrap
+                }
+
+                LabelWithButtonType {
+                    id: ip
+                    Layout.fillWidth: true
+                    Layout.topMargin: 32
+
+                    text: "IP, логин и пароль от сервера"
+                    buttonImage: "qrc:/images/controls/chevron-right.svg"
+
+                    onClickedFunc: function() {
+                        UiLogic.goToPage(PageEnum.PageSetupWizardCredentials)
+                        drawer.visible = false
+                    }
+                }
+                Rectangle {
+                    Layout.fillWidth: true
+                    height: 1
+                    color: "#2C2D30"
+                }
+                LabelWithButtonType {
+                    Layout.fillWidth: true
+
+                    text: "QR-код, ключ или файл настроек"
+                    buttonImage: "qrc:/images/controls/chevron-right.svg"
+
+                    onClickedFunc: function() {
+                        UiLogic.goToPage(PageEnum.PageSetupWizardConfigSource)
+                        drawer.visible = false
+                    }
+                }
+                Rectangle {
+                    Layout.fillWidth: true
+                    height: 1
+                    color: "#2C2D30"
+                }
+            }
+        }
+    }
+}

client/ui/qml/Pages2/PageShare.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Item {
+
+}

client/ui/qml/Pages2/PageStart.qml

@@ -7,154 +7,74 @@ import PageEnum 1.0
 import "./"
 import "../Pages"
 import "../Controls2"
-import "../Config"
 import "../Controls2/TextTypes"
+import "../Config"
 
 PageBase {
     id: root
     page: PageEnum.PageStart
 
-    FlickableType {
+    StackLayout {
-        id: fl
+        id: stackLayout
-        anchors.top: root.top
+        currentIndex: tabBar.currentIndex
-        anchors.bottom: root.bottom
-        contentHeight: content.height
 
-        ColumnLayout {
+        anchors.top: parent.top
-            id: content
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: tabBar.top
 
-            anchors.top: parent.top
+        width: {
-            anchors.left: parent.left
+            console.log(parent.width)
-            anchors.right: parent.right
+            return parent.width
-
+        }
-            Image {
+        height: {
-                id: image
+            console.log(root.height - tabBar.implicitHeight)
-                source: "qrc:/images/amneziaBigLogo.png"
+            return root.height - tabBar.implicitHeight
-
-                Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 32
-                Layout.leftMargin: 8
-                Layout.rightMargin: 8
-                Layout.preferredWidth: 344
-                Layout.preferredHeight: 279
-            }
-
-            BodyTextType {
-                Layout.fillWidth: true
-                Layout.topMargin: 50
-                Layout.leftMargin: 16
-                Layout.rightMargin: 16
-
-                text: "Бесплатный сервис для создания личного VPN на вашем сервере. Помогаем получать доступ к заблокированному контенту, не раскрывая конфиденциальность даже провайдерам VPN."
-            }
-
-            BasicButtonType {
-                Layout.fillWidth: true
-                Layout.topMargin: 32
-                Layout.leftMargin: 16
-                Layout.rightMargin: 16
-
-                text: qsTr("У меня есть данные для подключения")
-
-                onClicked: {
-                    drawer.visible = true
-                }
-            }
-
-            BasicButtonType {
-                Layout.fillWidth: true
-                Layout.topMargin: 8
-                Layout.leftMargin: 16
-                Layout.rightMargin: 16
-
-                defaultColor: "transparent"
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
-                disabledColor: "#878B91"
-                textColor: "#D7D8DB"
-                borderWidth: 1
-
-                text: qsTr("У меня ничего нет")
-
-                onClicked: {
-                    UiLogic.goToPage(PageEnum.PageTest)
-                }
-            }
         }
 
-        Drawer {
+        PageHome {
-            id: drawer
+        }
 
-            edge: Qt.BottomEdge
+        PageSetupWizardEasy {
-            width: parent.width
-            height: parent.height * 0.4375
-
-            clip: true
-            modal: true
-
-            background: Rectangle {
-                anchors.fill: parent
-                anchors.bottomMargin: -radius
-                radius: 16
-                color: "#1C1D21"
-            }
-
-            Overlay.modal: Rectangle {
-                color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
-            }
-
-            ColumnLayout {
-                anchors.top: parent.top
-                anchors.left: parent.left
-                anchors.right: parent.right
-
-                anchors.rightMargin: 16
-                anchors.leftMargin: 16
-
-                Header2TextType {
-                    Layout.fillWidth: true
-                    Layout.topMargin: 24
-                    Layout.alignment: Qt.AlignHCenter
-
-                    text: "Данные для подключения"
-                    wrapMode: Text.WordWrap
-                }
-
-                LabelWithButtonType {
-                    id: ip
-                    Layout.fillWidth: true
-                    Layout.topMargin: 32
-
-                    text: "IP, логин и пароль от сервера"
-                    buttonImage: "qrc:/images/controls/chevron-right.svg"
-
-                    onClickedFunc: function() {
-                        UiLogic.goToPage(PageEnum.PageSetupWizardCredentials)
-                        drawer.visible = false
-                    }
-                }
-                Rectangle {
-                    Layout.fillWidth: true
-                    height: 1
-                    color: "#2C2D30"
-                }
-                LabelWithButtonType {
-                    Layout.fillWidth: true
-
-                    text: "QR-код, ключ или файл настроек"
-                    buttonImage: "qrc:/images/controls/chevron-right.svg"
-
-                    onClickedFunc: function() {
-                        UiLogic.goToPage(PageEnum.PageSetupWizardConfigSource)
-                        drawer.visible = false
-                    }
-                }
-                Rectangle {
-                    Layout.fillWidth: true
-                    height: 1
-                    color: "#2C2D30"
-                }
-            }
         }
     }
+
+    TabBar {
+        id: tabBar
+
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+
+        topPadding: 8
+        bottomPadding: 34
+        leftPadding: 96
+        rightPadding: 96
+
+        background: Rectangle {
+            color: "#1C1D21"
+        }
+
+
+        TabImageButtonType {
+            isSelected: tabBar.currentIndex === 0
+            image: "qrc:/images/controls/home.svg"
+        }
+        TabImageButtonType {
+            isSelected: tabBar.currentIndex === 1
+            image: "qrc:/images/controls/share-2.svg"
+        }
+        TabImageButtonType {
+            isSelected: tabBar.currentIndex === 2
+            image: "qrc:/images/controls/settings-2.svg"
+        }
+    }
+
+    MouseArea {
+        anchors.fill: tabBar
+        anchors.leftMargin: 96
+        anchors.rightMargin: 96
+        cursorShape: Qt.PointingHandCursor
+        enabled: false
+    }
 }

client/ui/uilogic.cpp

@@ -151,10 +151,10 @@ void UiLogic::initializeUiLogic()
 
     if (m_settings->serversCount() > 0) {
         if (m_settings->defaultServerIndex() < 0) m_settings->setDefaultServer(0);
-        emit goToPage(Page::Vpn, true, false);
+        emit goToPage(Page::PageStart, true, false);
     }
     else {
-        emit goToPage(Page::PageStart, true, false);
+        emit goToPage(Page::PageSetupWizardStart, true, false);
     }
 
     m_selectedServerIndex = m_settings->defaultServerIndex();