From 5b33fe96f31cbd729b80afafdfe211d3d4736d38 Mon Sep 17 00:00:00 2001
From: uncor3 <contactuncor3@gmail.com>
Date: Fri, 22 May 2026 11:57:15 +0000
Subject: [PATCH] refactor: update HowToConnect dialog and integrate
 NetworkDevicesToConnect component in Welcome.qml

---
 src/ui/HowToConnect.qml | 47 +++++++++++++++--------------------------
 src/ui/Welcome.qml      | 27 +++++++++++------------
 2 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/ui/HowToConnect.qml b/src/ui/HowToConnect.qml
index 5667b78..57456da 100644
--- a/src/ui/HowToConnect.qml
+++ b/src/ui/HowToConnect.qml
@@ -1,12 +1,14 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import "./base"
 
 Dialog {
     id: dlg
     modal: true
     focus: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    anchors.centerIn: parent
 
     width: 560
     height: 560
@@ -14,17 +16,11 @@ Dialog {
     property int currentIndex: 0
     property bool loading: true
 
-    onOpened: {
-        loading = true
-        currentIndex = 0
-        loadTimer.restart()
-    }
-
     Timer {
         id: loadTimer
-        interval: 500
+        interval: 300
         repeat: false
-        onTriggered: dlg.loading = false
+        onTriggered: stateView.viewState = StateView.State.Content
     }
 
     function updateNav() {
@@ -33,7 +29,10 @@ Dialog {
     }
 
     onCurrentIndexChanged: updateNav()
-    Component.onCompleted: updateNav()
+    Component.onCompleted: {
+        updateNav()
+        loadTimer.start()
+    }
 
     background: Rectangle {
         radius: 10
@@ -42,10 +41,11 @@ Dialog {
         border.width: 1
     }
 
-    contentItem: Item {
+    contentItem: StateView {
+        id: stateView
         anchors.fill: parent
-
-        ColumnLayout {
+        viewState: StateView.State.Loading 
+        contentItem : ColumnLayout {
             anchors.fill: parent
             anchors.margins: 16
             spacing: 12
@@ -135,10 +135,10 @@ Dialog {
                                 Layout.fillWidth: true
                                 text: {
                                     if (Qt.platform.os === "windows")
-                                        return "You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later and the Bonjour service)."
+                                        return qsTr("You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later and the Bonjour service).")
                                     if (Qt.platform.os === "linux")
-                                        return "You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later and the Avahi daemon)."
-                                    return "You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later)."
+                                        return qsTr("You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later and the Avahi daemon).")
+                                    return qsTr("You can now unplug the device. iDescriptor will connect to it automatically (requires iOS 15 or later).")
                                 }
                                 horizontalAlignment: Text.AlignHCenter
                                 wrapMode: Text.WordWrap
@@ -161,17 +161,6 @@ Dialog {
                         }
                     }
                 }
-
-                Rectangle {
-                    anchors.fill: parent
-                    visible: dlg.loading
-                    color: Qt.rgba(0, 0, 0, 0.06)
-
-                    BusyIndicator {
-                        anchors.centerIn: parent
-                        running: dlg.loading
-                    }
-                }
             }
 
             RowLayout {
@@ -182,8 +171,7 @@ Dialog {
 
                 Button {
                     id: prevBtn
-                    text: "Previous"
-                    icon.source: "qrc:/resources/icons/MaterialSymbolsArrowLeftAlt.png"
+                    icon.source: "qrc:/resources/icons/material-symbols_arrow-left-alt.svg"
                     Layout.preferredWidth: 48
                     onClicked: {
                         if (dlg.currentIndex > 0) dlg.currentIndex -= 1
@@ -192,8 +180,7 @@ Dialog {
 
                 Button {
                     id: nextBtn
-                    text: "Next"
-                    icon.source: "qrc:/resources/icons/MaterialSymbolsArrowRightAlt.png"
+                    icon.source: "qrc:/resources/icons/material-symbols_arrow-right-alt.svg"
                     Layout.preferredWidth: 48
                     onClicked: {
                         if (dlg.currentIndex < stack.count - 1) dlg.currentIndex += 1
diff --git a/src/ui/Welcome.qml b/src/ui/Welcome.qml
index 249a84d..2c98304 100644
--- a/src/ui/Welcome.qml
+++ b/src/ui/Welcome.qml
@@ -68,21 +68,9 @@ Item {
                 spacing: 12
 
                 // FIXME: implement
-                Rectangle {
+                NetworkDevicesToConnect {
                     Layout.preferredWidth: 360
-                    Layout.preferredHeight: 180
-                    radius: 8
-                    color: "#1e40af" // blue
-                    border.color: "#0b2a7a"
-                    border.width: 1
-
-                    Text {
-                        anchors.centerIn: parent
-                        text: "NetworkDevicesToConnectWidget"
-                        color: "white"
-                        font.pixelSize: 14
-                        font.weight: Font.DemiBold
-                    }
+                    Layout.preferredHeight: 580
                 }
 
                 Text {
@@ -97,7 +85,16 @@ Item {
                     MouseArea {
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
-                        onClicked: root.howToConnectRequested()
+                        onClicked: {
+                            try {
+                                const comp = Qt.createComponent("HowToConnect.qml")
+                                const win = comp.createObject(root)
+                                win.open()
+                            } catch(e) {
+                                console.log("errror",e)
+                            }
+                            
+                        }
                     }
                 }