qml: marry BlockClock and NetworkIndicator

Greetings. I am pleased to inform you that the BlockClock component and
the Network Indicator component are merging in a most harmonious and
efficient manner. This event brings me great joy and excitement, as it
represents a significant milestone in the world of Bitcoin.

BlockClock, you have been diligent in displaying the last 12 hours of
blocks mined on the Bitcoin blockchain, consistently providing valuable
information to users. Network Indicator, your expertise in indicating
the current network - main, test, or signet - has been indispensable.

As I observe this union within the BlockClock.qml file, I cannot help
but feel a sense of pride and satisfaction. This integration will
undoubtedly lead to enhanced functionality and streamlined user
experience.

I offer my sincerest congratulations to BlockClock and
Network Indicator on their momentous union. May your combined efforts
bring about continued success and increased stability in the Bitcoin
ecosystem.

To the moon, my fellow components. To the moon.

Author: jarolrod

src/qml/components/BlockClock.qml

@@ -14,7 +14,7 @@ Item {
     id: root
 
     implicitWidth: 200
-    implicitHeight: 200
+    implicitHeight: 200 + networkIndicator.height + networkIndicator.anchors.topMargin
 
     property alias header: mainText.text
     property alias headerSize: mainText.font.pixelSize
@@ -28,7 +28,8 @@ Item {
 
     BlockClockDial {
         id: dial
-        anchors.fill: parent
+        width: 200
+        height: 200
         timeRatioList: chainModel.timeRatioList
         verificationProgress: nodeModel.verificationProgress
         paused: root.paused
@@ -68,7 +69,7 @@ Item {
 
     Label {
         id: mainText
-        anchors.centerIn: parent
+        anchors.centerIn: dial
         font.family: "Inter"
         font.styleName: "Semi Bold"
         font.pixelSize: 32
@@ -102,6 +103,13 @@ Item {
         paused: root.paused
     }
 
+    NetworkIndicator {
+        id: networkIndicator
+        anchors.top: dial.bottom
+        anchors.topMargin: networkIndicator.visible ? 30 : 0
+        anchors.horizontalCenter: root.horizontalCenter
+    }
+
     MouseArea {
         anchors.fill: dial
         cursorShape: Qt.PointingHandCursor

src/qml/pages/node/NodeRunner.qml

@@ -18,14 +18,7 @@ Page {
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();
 
-    ColumnLayout {
-        spacing: 30
+    BlockClock {
         anchors.centerIn: parent
-        BlockClock {
-            Layout.alignment: Qt.AlignCenter
-        }
-        NetworkIndicator {
-            Layout.alignment: Qt.AlignCenter
-        }
     }
 }