Add onboarding

src/qml/LogosStorageButton.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Controls
+import Logos.Theme
+
+Button {
+    id: control
+    padding: Theme.spacing.small
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: Theme.typography.primaryText
+        color: control.enabled ? Theme.palette.text : Theme.palette.textMuted
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        color: {
+            if (!control.enabled)
+                return Theme.palette.backgroundElevated
+            if (control.hovered)
+                return Theme.palette.backgroundTertiary
+            return Theme.palette.backgroundSecondary
+        }
+        border.width: 1
+        border.color: Theme.palette.border
+        radius: Theme.spacing.tiny
+
+        Behavior on color {
+            ColorAnimation {
+                duration: 150
+            }
+        }
+    }
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+}

src/qml/LogosTextField.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Controls
+import Logos.Theme
+
+TextField {
+    id: root
+
+    property bool isValid: acceptableInput && text.length > 0
+
+    placeholderTextColor: Theme.palette.textPlaceholder
+    color: isValid ? Theme.palette.text : Theme.palette.error
+    selectByMouse: true
+    background: Rectangle {
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.backgroundSecondary
+        }
+
+        // Border bottom
+        Rectangle {
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: 1
+            color: root.isValid ? Theme.palette.textMuted : Theme.palette.error
+        }
+    }
+}

src/qml/StartNode.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import QtQuick.Layouts
+import Logos.Controls
+import Logos.Theme
+
+Rectangle {
+    id: root
+    color: Theme.palette.background
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    implicitWidth: 600
+    implicitHeight: 400
+
+    property var backend
+    property string status: ""
+    property bool starting: true
+    property bool success: false
+
+    signal back
+    signal next
+
+    Connections {
+        target: root.backend
+
+        function onStartCompleted() {
+            console.log("onStartCompleted received")
+            root.starting = false
+            root.status = "Logos Storage started successfully."
+            root.success = true
+        }
+
+        function onStartFailed(error) {
+            console.log("onStartFailed received")
+            root.starting = false
+            root.status = "Failed to start: " + error
+        }
+    }
+
+    ColumnLayout {
+        anchors.centerIn: parent
+        spacing: Theme.spacing.medium
+        width: 400
+
+        LogosText {
+            id: titleText
+            font.pixelSize: Theme.typography.titleText
+            text: "Starting your node...."
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        LogosText {
+            id: statusText
+            font.pixelSize: Theme.typography.primaryText
+            text: root.status
+            Layout.alignment: Qt.AlignHCenter
+        }
+    }
+
+    LogosStorageButton {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.bottomMargin: 10
+        anchors.leftMargin: 10
+        text: "Back"
+        onClicked: root.back()
+        enabled: root.starting == false
+    }
+
+    LogosStorageButton {
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.bottomMargin: 10
+        anchors.rightMargin: 10
+        text: "Next"
+        onClicked: root.next()
+        enabled: root.success == true
+    }
+}