lock: fix weird selection (fixes #2453)

dots/.config/quickshell/ii/modules/ii/lock/PasswordChars.qml

@@ -9,29 +9,62 @@ import Quickshell
 
 StyledFlickable {
     id: root
+
     required property int length
+    property int selectionStart
+    property int selectionEnd
+    property int cursorPosition
+
+    property color color: Appearance.colors.colPrimary
+    property color selectedTextColor: Appearance.colors.colOnSecondaryContainer
+    property color selectionColor: Appearance.colors.colSecondaryContainer
+
+    property int charSize: 20
+
     contentWidth: dotsRow.implicitWidth
     contentX: (Math.max(contentWidth - width, 0))
     Behavior on contentX {
         animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
     }
+
+    Rectangle {
+        id: cursor
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            leftMargin: root.charSize * root.cursorPosition
+        }
+        color: root.color
+        implicitWidth: 2
+        implicitHeight: root.charSize
+        Behavior on anchors.leftMargin {
+            animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(cursor)
+        }
+    }
+
     Row {
         id: dotsRow
         anchors {
             left: parent.left
             verticalCenter: parent.verticalCenter
-            leftMargin: 4
+            leftMargin: 4 - 5 // -5 to account for spacing being simulated by char item width
         }
-        spacing: 10
+        spacing: 0
+
         Repeater {
-            model: ScriptModel {
+            model: ScriptModel { // TODO: use proper custom object model to insert new char at the correct pos
                 values: Array(root.length)
             }
-            delegate: Item {
+
+            delegate: Rectangle {
                 id: charItem
                 required property int index
-                implicitWidth: 10
-                implicitHeight: 10
+                implicitWidth: root.charSize
+                implicitHeight: root.charSize
+                property bool selected: index >= root.selectionStart && index < root.selectionEnd
+
+                color: ColorUtils.transparentize(root.selectionColor, selected ? 0 : 1)
+                
                 MaterialShape {
                     id: materialShape
                     anchors.centerIn: parent
@@ -46,7 +79,7 @@ StyledFlickable {
                     ]
                     shape: charShapes[charItem.index % charShapes.length]
                     // Animate on appearance
-                    color: Appearance.colors.colPrimary
+                    color: charItem.selected ? root.selectedTextColor : root.color
                     implicitSize: 0
                     opacity: 0
                     scale: 0.5