Redesign addresses list and wallet settings pages

qml/bitcoin_qml.qrc

@@ -10,7 +10,6 @@
         <file>components/BitcoinAmountDisplayField.qml</file>
         <file>components/BitcoinAmountInputField.qml</file>
         <file>components/BlockClock.qml</file>
-        <file>components/BlockClockDisplayMode.qml</file>
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
         <file>components/ConnectionSettings.qml</file>
@@ -33,12 +32,14 @@
         <file>components/OptionPopup.qml</file>
         <file>components/PeersIndicator.qml</file>
         <file>components/ProxySettings.qml</file>
+        <file>components/SettingsPageContainer.qml</file>
         <file>components/SettingsRestartNotice.qml</file>
+        <file>components/SettingsSidebar.qml</file>
+        <file>components/SettingsView.qml</file>
         <file>components/StorageLocations.qml</file>
         <file>components/Separator.qml</file>
         <file>components/StorageOptions.qml</file>
         <file>components/StorageSettings.qml</file>
-        <file>components/ThemeSettings.qml</file>
         <file>components/ToastBanner.qml</file>
         <file>components/ToastPopup.qml</file>
         <file>components/TotalBytesIndicator.qml</file>
@@ -48,9 +49,9 @@
         <file>components/ReceiveOptionsPopup.qml</file>
         <file>components/Tooltip.qml</file>
         <file>components/LabeledValueField.qml</file>
+        <file>components/LabeledBitcoinAddressField.qml</file>
         <file>components/MultipleRecipientsSummary.qml</file>
         <file>components/SingleRecipientSummary.qml</file>
-        <file>components/WalletSettings.qml</file>
         <file>components/WalletMigrationPopup.qml</file>
         <file>components/WalletPassphrasePopup.qml</file>
         <file>controls/AddWalletButton.qml</file>
@@ -68,12 +69,19 @@
         <file>controls/EditableKeyValueRow.qml</file>
         <file>controls/ExternalLink.qml</file>
         <file>controls/FocusBorder.qml</file>
+        <file>controls/FormRow.qml</file>
+        <file>controls/FormSection.qml</file>
         <file>controls/Header.qml</file>
         <file>controls/Icon.qml</file>
         <file>controls/IconButton.qml</file>
         <file>controls/InformationPage.qml</file>
         <file>controls/KeyValueRow.qml</file>
+        <file>controls/LinkRow.qml</file>
+        <file>controls/ListRow.qml</file>
+        <file>controls/LabeledField.qml</file>
         <file>controls/LabeledTextInput.qml</file>
+        <file>controls/LabeledTextField.qml</file>
+        <file>controls/LabeledTextView.qml</file>
         <file>controls/LabeledCoinControlButton.qml</file>
         <file>controls/NavButton.qml</file>
         <file>controls/NavigationBar.qml</file>
@@ -83,7 +91,10 @@
         <file>controls/OptionSwitch.qml</file>
         <file>controls/OutlineButton.qml</file>
         <file>controls/PageIndicator.qml</file>
+        <file>controls/PageHeading.qml</file>
         <file>controls/PageStack.qml</file>
+        <file>controls/PasswordTextField.qml</file>
+        <file>controls/PopupPicker.qml</file>
         <file>controls/ProgressIndicator.qml</file>
         <file>controls/ProxyLocationInput.qml</file>
         <file>controls/QRImage.qml</file>
@@ -93,23 +104,24 @@
         <file>controls/SegmentedPicker.qml</file>
         <file>controls/Setting.qml</file>
         <file>controls/SettingsHeader.qml</file>
+        <file>controls/SettingsPage.qml</file>
         <file>controls/Skeleton.qml</file>
         <file>controls/SpinningIndicator.qml</file>
         <file>controls/TextButton.qml</file>
+        <file>controls/TextFieldRow.qml</file>
         <file>controls/Theme.qml</file>
         <file>controls/ToggleButton.qml</file>
         <file>controls/utils.js</file>
         <file>controls/ValueInput.qml</file>
+        <file>controls/ValueRow.qml</file>
         <file>controls/WalletTypeListItem.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/MainWindow.qml</file>
         <file>pages/preinit.qml</file>
         <file>pages/node/BannedPeers.qml</file>
         <file>pages/node/CommandConsole.qml</file>
         <file>pages/node/NetworkTraffic.qml</file>
-        <file>pages/node/MempoolInformationSettings.qml</file>
         <file>pages/node/NodeRunner.qml</file>
-        <file>pages/node/NodeSettings.qml</file>
         <file>pages/node/Peers.qml</file>
         <file>pages/node/PeerDetails.qml</file>
         <file>pages/node/Shutdown.qml</file>
@@ -121,19 +133,24 @@
         <file>pages/onboarding/OnboardingStrengthen.qml</file>
         <file>pages/onboarding/OnboardingWizard.qml</file>
         <file>pages/settings/SettingsAbout.qml</file>
-        <file>pages/settings/SettingsDisplayUnit.qml</file>
         <file>pages/settings/SettingsLanguage.qml</file>
-        <file>pages/settings/SettingsWindowBehavior.qml</file>
-        <file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
         <file>pages/settings/SettingsConnection.qml</file>
         <file>pages/settings/SettingsDebugLog.qml</file>
         <file>pages/settings/SettingsDesignSystem.qml</file>
         <file>pages/settings/SettingsDeveloper.qml</file>
-        <file>pages/settings/SettingsDisplay.qml</file>
         <file>pages/settings/SettingsProxy.qml</file>
-        <file>pages/settings/SettingsWallet.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
-        <file>pages/settings/SettingsTheme.qml</file>
+        <file>pages/settings/AboutSettingsPage.qml</file>
+        <file>pages/settings/ConnectionSettingsPage.qml</file>
+        <file>pages/settings/DisplaySettingsPage.qml</file>
+        <file>pages/settings/ExternalSignerSettingsPage.qml</file>
+        <file>pages/settings/MempoolSettingsPage.qml</file>
+        <file>pages/settings/NetworkTrafficSettingsPage.qml</file>
+        <file>pages/settings/ProxySettingsPage.qml</file>
+        <file>pages/settings/RpcConsoleSettingsPage.qml</file>
+        <file>pages/settings/StorageSettingsPage.qml</file>
+        <file>pages/settings/WalletSectionPage.qml</file>
+        <file>pages/settings/WindowBehaviorSettingsPage.qml</file>
         <file>pages/wallet/Activity.qml</file>
         <file>pages/wallet/ActivityDetails.qml</file>
         <file>pages/wallet/ActivityTransactionVisuals.qml</file>
@@ -163,7 +180,6 @@
         <file>pages/wallet/SignVerifyMessage.qml</file>
         <file>pages/wallet/WalletBadge.qml</file>
         <file>pages/wallet/WalletPasswordSettings.qml</file>
-        <file>pages/wallet/WalletSettings.qml</file>
         <file>pages/wallet/WalletSelect.qml</file>
     </qresource>
     <qresource prefix="/icons">

qml/components/AddressLabel.qml

@@ -13,17 +13,36 @@ AbstractButton {
     id: root
 
     property string address: ""
+    property bool truncated: false
+    property bool truncateWhenNeeded: false
+    property bool embedded: false
+    property int leadingCharacterCount: 8
+    property int trailingCharacterCount: 8
     property color primaryColor: Theme.color.neutral9
     property color secondaryColor: Theme.color.neutral7
+    property var textStyle: Theme.text.monoBody
+    property int textAlignment: Text.AlignLeft
     property var clipboard: Clipboard
-    readonly property string formattedText: formatAddressRichText(address)
+    readonly property bool isTruncated: truncated
+        || (truncateWhenNeeded && fullAddressMetrics.advanceWidth > availableWidth)
+    readonly property string displayAddress: isTruncated ? truncatedAddress(address) : address
+    readonly property string formattedText: formatAddressRichText(displayAddress)
     readonly property bool showCopiedStatus: copiedResetTimer.running
 
     signal copied()
 
-    function formatAddressRichText(value) {
-        if (!value) return ""
+    function truncatedAddress(value) {
+        if (!value) return value
+
+        const retainedCharacters = root.leadingCharacterCount + root.trailingCharacterCount
+        if (value.length <= retainedCharacters + 1) return value
+
+        return value.substring(0, root.leadingCharacterCount)
+            + "…"
+            + value.substring(value.length - root.trailingCharacterCount)
+    }
 
+    function formatChunks(value) {
         var html = ""
         for (var i = 0; i < value.length; i += 4) {
             var chunk = value.substring(i, Math.min(i + 4, value.length))
@@ -36,6 +55,28 @@ AbstractButton {
         return html
     }
 
+    function chunkedPlainText(value) {
+        var text = ""
+        for (var i = 0; i < value.length; i += 4) {
+            if (i > 0) text += " "
+            text += value.substring(i, Math.min(i + 4, value.length))
+        }
+        return text
+    }
+
+    function formatAddressRichText(value) {
+        if (!value) return ""
+
+        const ellipsisIndex = value.indexOf("…")
+        if (ellipsisIndex < 0) return root.formatChunks(value)
+
+        const leading = value.substring(0, ellipsisIndex)
+        const trailing = value.substring(ellipsisIndex + 1)
+        return root.formatChunks(leading)
+            + " <font color=\"" + root.secondaryColor + "\">…</font> "
+            + root.formatChunks(trailing)
+    }
+
     function copy() {
         if (root.address === "" || !root.clipboard) return
         root.clipboard.setText(root.address)
@@ -69,14 +110,14 @@ AbstractButton {
             anchors.right: parent.right
             anchors.top: parent.top
             height: paintedHeight
-            horizontalAlignment: Text.AlignLeft
+            horizontalAlignment: root.textAlignment
             verticalAlignment: Text.AlignTop
-            font: Theme.text.monoBody.font
-            lineHeight: Theme.text.monoBody.lineHeight
+            font: root.textStyle.font
+            lineHeight: root.textStyle.lineHeight
             lineHeightMode: Text.FixedHeight
             textFormat: Text.RichText
             text: root.formattedText
-            wrapMode: Text.WordWrap
+            wrapMode: root.isTruncated ? Text.NoWrap : Text.WordWrap
             opacity: root.showCopiedStatus ? 0 : 1
 
             Behavior on opacity {
@@ -111,22 +152,31 @@ AbstractButton {
             }
 
             CoreText {
+                objectName: root.objectName + "CopiedStatusText"
                 Layout.alignment: Qt.AlignVCenter
                 text: qsTr("Copied")
                 color: Theme.color.neutral9
-                font: Theme.text.body.font
-                lineHeight: Theme.text.body.lineHeight
+                font: root.textStyle.font
+                lineHeight: root.textStyle.lineHeight
                 lineHeightMode: Text.FixedHeight
             }
         }
     }
 
+    TextMetrics {
+        id: fullAddressMetrics
+        font: root.textStyle.font
+        text: root.chunkedPlainText(root.address)
+    }
+
     background: Rectangle {
+        objectName: root.objectName.length > 0 ? root.objectName + "Background" : ""
         radius: 5
-        color: root.hovered || root.down ? Theme.color.neutral2 : "transparent"
+        color: root.embedded ? Theme.color.neutral3 : Theme.color.neutral2
+        opacity: root.hovered || root.down ? 1 : 0
 
-        Behavior on color {
-            ColorAnimation { duration: 150 }
+        Behavior on opacity {
+            NumberAnimation { duration: 150 }
         }
     }
 

qml/components/BitcoinAddressInputField.qml

@@ -16,8 +16,14 @@ ColumnLayout {
     property string errorText: ""
     property string labelText: qsTr("Send to")
     property bool enabled: true
+    property bool embedded: false
+    property bool showLabel: true
     property alias inputObjectName: addressInput.objectName
     property bool interceptPaste: false
+    property alias inputText: addressInput.text
+    property alias placeholderText: addressInput.placeholderText
+    property alias readOnly: addressInput.readOnly
+    readonly property alias field: addressInput
 
     signal textChanged()
     signal editingFinished()
@@ -53,11 +59,12 @@ ColumnLayout {
     Item {
         id: inputRow
         Layout.fillWidth: true
-        implicitHeight: Math.max(56, addressInput.height + 16)
+        implicitHeight: root.embedded ? Math.max(52, addressInput.height) : Math.max(56, addressInput.height + 16)
 
         CoreText {
             id: label
-            width: 128
+            visible: root.showLabel
+            width: visible ? 128 : 0
             anchors.left: parent.left
             anchors.verticalCenter: addressInput.verticalCenter
             horizontalAlignment: Text.AlignLeft
@@ -88,8 +95,6 @@ ColumnLayout {
                 syncFromAddress()
                 return true
             }
-
-            objectName: root.inputObjectName
             anchors.left: label.right
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
@@ -98,15 +103,20 @@ ColumnLayout {
             text: ""
             Component.onCompleted: syncFromAddress()
             wrapMode: Text.WrapAnywhere
-            leftPadding: 0
-            topPadding: 0
-            rightPadding: 0
-            bottomPadding: 0
-            height: Math.max(contentHeight, 32)
+            leftPadding: root.embedded ? 16 : 0
+            topPadding: root.embedded ? 14 : 0
+            rightPadding: root.embedded ? 16 : 0
+            bottomPadding: root.embedded ? 14 : 0
+            height: root.embedded ? Math.max(52, contentHeight + topPadding + bottomPadding) : Math.max(contentHeight, 32)
             font: Theme.text.monoBody.font
             color: Theme.color.neutral9
             placeholderTextColor: enabled ? Theme.color.neutral7 : Theme.color.neutral4
-            background: Item {}
+            background: Rectangle {
+                color: root.embedded ? Theme.color.neutral2 : "transparent"
+                radius: root.embedded ? 10 : 0
+                border.width: root.embedded && addressInput.activeFocus ? 2 : 0
+                border.color: Theme.color.orange
+            }
             selectByMouse: true
 
             Keys.onPressed: (event) => {