fix(@desktop/statusq): Fix StatusQ and shared components as part of

new saved addresses UI implementation
  - Fixed StatusInput and StatusBaseInput to respect rich text.
  - Fixed AddressInput's height that breaks the layout when inside
of QtQuick Layout.
  - Added support for icon clicks in StatusListItem.
  - Fixed broken right alignment in ContactsListAndSearch.

Fixes #8599

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -34,6 +34,7 @@ Rectangle {
     property Component inlineTagDelegate
     property bool loading: false
     property bool loadingFailed: false
+    property bool iconHoverEnabled: false
 
     property StatusAssetSettings asset: StatusAssetSettings {
         height: isImage ? 40 : 20
@@ -80,6 +81,7 @@ Rectangle {
 
     signal clicked(string itemId, var mouse)
     signal titleClicked(string titleId)
+    signal iconClicked(var mouse)
 
     enum Type {
         Primary,
@@ -146,6 +148,9 @@ Rectangle {
             badge.border.color: statusListItem.color
             ringSettings: statusListItem.ringSettings
             loading: statusListItem.loading
+            hoverEnabled: statusListItem.iconHoverEnabled
+
+            onClicked: statusListItem.iconClicked(mouse)
         }
 
         Item {

ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml

@@ -13,12 +13,13 @@ Rectangle {
         bgWidth: 40
         bgHeight: 40
         bgColor: Theme.palette.primaryColor3
+        bgRadius: bgWidth / 2
     }
 
     color: asset.bgColor
     implicitWidth: asset.bgWidth
     implicitHeight: asset.bgHeight
-    radius: asset.bgWidth / 2
+    radius: asset.bgRadius
 
 
     StatusIcon {

ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -15,6 +15,7 @@ Loader {
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 40
         height: 40
+        bgRadius: bgWidth / 2
     }
 
     property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@@ -27,6 +28,10 @@ Loader {
                      !root.asset.isImage ? roundedIcon : roundedImage
 
     property bool loading: false
+    property bool hoverEnabled: false
+    readonly property bool hovered: (sourceComponent == roundedIcon && item) ?
+                     item.hovered : false
+    signal clicked()
 
     Component {
         id: roundedImage
@@ -35,7 +40,6 @@ Loader {
             width: root.asset.width
             height: root.asset.height
 
-
             StatusRoundedImage {
                 id: statusRoundImage
                 width: parent.width
@@ -65,15 +69,20 @@ Loader {
 
     Component {
         id: roundedIcon
-        StatusRoundIcon {
+
-            asset.bgWidth: root.asset.bgWidth
+        StatusRoundButton {
-            asset.bgHeight: root.asset.bgHeight
+            width: root.asset.bgWidth
-            asset.bgColor: root.asset.bgColor
+            height: root.asset.bgHeight
-            asset.width: root.asset.width
+            color: root.asset.bgColor
-            asset.height: root.asset.height
+            icon.width: root.asset.width
-            asset.name: root.asset.name
+            icon.height: root.asset.height
-            asset.rotation: root.asset.rotation
+            icon.name: root.asset.name
-            asset.color: root.asset.color
+            icon.rotation: root.asset.rotation
+            icon.color: root.asset.color
+            icon.hoverColor: root.asset.hoverColor
+            radius: root.asset.bgRadius
+            hoverEnabled: root.hoverEnabled
+            onClicked: root.clicked()
         }
     }
 

ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml

@@ -378,8 +378,8 @@ Item {
                                 if (utf8Length > root.maximumLength) {
                                     var cursor = cursorPosition
                                     text = previousText
-                                    if (cursor > text.length) {
+                                    if (cursor > length) {
-                                        cursorPosition = text.length
+                                        cursorPosition = length
                                     } else {
                                         cursorPosition = cursor - 1
                                     }
@@ -405,7 +405,7 @@ Item {
 
                         StatusBaseText {
                             id: placeholder
-                            visible: (edit.text.length === 0)
+                            visible: (edit.length === 0)
                             anchors.fill: parent
                             verticalAlignment: parent.verticalAlignment
                             font.pixelSize: 15
@@ -436,7 +436,7 @@ Item {
         id: clearButton
 
         StatusFlatRoundButton {
-            visible: edit.text.length != 0 && root.clearable && !root.multiline
+            visible: edit.length != 0 && root.clearable && !root.multiline
                      && edit.activeFocus
             type: StatusFlatRoundButton.Type.Secondary
             width: 24

ui/StatusQ/src/StatusQ/Controls/StatusInput.qml

@@ -263,10 +263,11 @@ Item {
         }
 
         statusBaseInput.valid = true
+        const rawText = statusBaseInput.edit.getText(0, statusBaseInput.edit.length)
         if (validators.length) {
             for (let idx in validators) {
                 let validator = validators[idx]
-                let result = validator.validate(statusBaseInput.text)
+                let result = validator.validate(rawText)
 
                 if (typeof result === "boolean" && result) {
                     statusBaseInput.valid = statusBaseInput.valid && true
@@ -284,6 +285,7 @@ Item {
 
                     // the only way to trigger bindings for var property
                     errors = errors
+
                     result.errorMessage = validator.errorMessage
 
                     statusBaseInput.valid = statusBaseInput.valid && false
@@ -297,8 +299,8 @@ Item {
                         // Undo the last input
                         const cursor = statusBaseInput.cursorPosition;
                         statusBaseInput.text = _previousText;
-                        if (statusBaseInput.cursor > statusBaseInput.text.length) {
+                        if (statusBaseInput.cursor > statusBaseInput.edit.length) {
-                            statusBaseInput.cursorPosition = statusBaseInput.text.length;
+                            statusBaseInput.cursorPosition = statusBaseInput.edit.length;
                         } else {
                             statusBaseInput.cursorPosition = cursor-1;
                         }
@@ -319,7 +321,7 @@ Item {
                 })
                 root.pending = true
                 pendingValidators.push(asyncValidator.name)
-                asyncValidator.asyncOperationInternal(statusBaseInput.text)
+                asyncValidator.asyncOperationInternal(rawText)
             }
         } else if (!asyncValidators.length && !Object.values(errors).length) {
             root.validatedValue = root.text

ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml

@@ -23,6 +23,8 @@ Rectangle {
                 return Theme.palette.primaryColor1;
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.dangerColor1;
+            case StatusRoundButton.Type.Quinary:
+                return Theme.palette.directColor1;
             }
         }
 
@@ -36,6 +38,8 @@ Rectangle {
                 return Theme.palette.baseColor1;
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.dangerColor1;
+            case StatusRoundButton.Type.Quinary:
+                return Theme.palette.directColor1;
             }
         }
 
@@ -49,6 +53,8 @@ Rectangle {
                 return Theme.palette.baseColor1;
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.baseColor1;
+            case StatusRoundButton.Type.Quinary:
+                return Theme.palette.baseColor1;
             }
         }
     }
@@ -56,6 +62,7 @@ Rectangle {
     property bool loading: false
 
     property alias hovered: sensor.containsMouse
+    property alias hoverEnabled: sensor.hoverEnabled
 
     property bool highlighted: false
 
@@ -70,7 +77,8 @@ Rectangle {
         Primary,
         Secondary,
         Tertiary,
-        Quaternary
+        Quaternary,
+        Quinary
     }
     /// Implementation
 
@@ -87,6 +95,8 @@ Rectangle {
                 return "transparent";
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.dangerColor3;
+            case StatusRoundButton.Type.Quinary:
+                return "transparent";
             }
         }
 
@@ -100,6 +110,8 @@ Rectangle {
                 return Theme.palette.primaryColor3;
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.dangerColor2;
+            case StatusRoundButton.Type.Quinary:
+                return Theme.palette.primaryColor3;
             }
         }
 
@@ -113,6 +125,8 @@ Rectangle {
                 return "transparent";
             case StatusRoundButton.Type.Quaternary:
                 return Theme.palette.baseColor2;
+            case StatusRoundButton.Type.Quinary:
+                return "transparent";
             }
         }
     }

ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml

@@ -29,6 +29,7 @@ QtObject {
     property real bgHeight
     property int bgRadius
     property color bgColor: "transparent"
+    property color bgBorderColor: "transparent"
 
     //image
     property bool isImage: false

ui/imports/shared/controls/AddressInput.qml

@@ -23,7 +23,7 @@ Item {
     property alias wrongInputValidationError: contactFieldAndList.wrongInputValidationError
     property alias ownAddressError: contactFieldAndList.ownAddressError
 
-    height: contactFieldAndList.chatKey.height
+    implicitHeight: contactFieldAndList.chatKey.height
 
     onSelectedAddressChanged: validate()
 

ui/imports/shared/controls/ContactsListAndSearch.qml

@@ -67,7 +67,6 @@ Item {
     ColumnLayout {
         id: column
         anchors.fill: parent
-        anchors.rightMargin: Style.current.bigPadding
         spacing: Style.current.smallPadding
 
         Input {