Refactor Notepad search

Modules/Notepad/NotepadSettings.qml

@@ -156,30 +156,34 @@ Item {
                 }
             }
 
-            Rectangle {
+            StyledRect {
                 width: parent.width
-                height: 48
+                height: 60
-                color: findMouseArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.05) : "transparent"
+                radius: Theme.cornerRadius
+                color: "transparent"
 
-                MouseArea {
+                StateLayer {
-                    id: findMouseArea
                     anchors.fill: parent
-                    hoverEnabled: true
+                    anchors.leftMargin: -Theme.spacingM
-                    cursorShape: Qt.PointingHandCursor
+                    width: parent.width + Theme.spacingM
+                    stateColor: Theme.primary
+                    cornerRadius: parent.radius
                     onClicked: root.findRequested()
                 }
 
                 Row {
                     anchors.left: parent.left
                     anchors.leftMargin: -Theme.spacingM
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingM
                     anchors.verticalCenter: parent.verticalCenter
                     spacing: Theme.spacingM
 
-                    DankActionButton {
+                    DankIcon {
-                        iconName: "search"
+                        name: "search"
-                        iconSize: Theme.iconSize - 2
+                        size: Theme.iconSize - 2
-                        iconColor: Theme.primary
+                        color: Theme.primary
-                        onClicked: root.findRequested()
+                        anchors.verticalCenter: parent.verticalCenter
                     }
 
                     Column {
@@ -189,13 +193,14 @@ Item {
                         StyledText {
                             text: "Find in Text"
                             font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
                             color: Theme.surfaceText
                         }
 
                         StyledText {
                             text: "Open search bar to find text"
                             font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceTextMedium
+                            color: Theme.surfaceVariantText
                         }
                     }
                 }

Modules/Notepad/NotepadTextEditor.qml

@@ -183,8 +183,8 @@ Column {
         visible: searchVisible
         opacity: searchVisible ? 1 : 0
         color: Qt.rgba(Theme.surfaceContainerHigh.r, Theme.surfaceContainerHigh.g, Theme.surfaceContainerHigh.b, 0.95)
-        border.color: Theme.primary
+        border.color: searchField.activeFocus ? Theme.primary : Theme.outlineMedium
-        border.width: 1
+        border.width: searchField.activeFocus ? 2 : 1
         radius: Theme.cornerRadius
 
         Behavior on opacity {
@@ -200,94 +200,89 @@ Column {
             anchors.rightMargin: Theme.spacingM
             spacing: Theme.spacingS
 
-            StyledRect {
+            // Search icon
-                Layout.fillWidth: true
+            DankIcon {
                 Layout.alignment: Qt.AlignVCenter
-                height: 40
+                name: "search"
-                radius: Theme.cornerRadius
+                size: Theme.iconSize - 2
-                color: Theme.surface
+                color: searchField.activeFocus ? Theme.primary : Theme.surfaceVariantText
-                border.color: searchField.activeFocus ? Theme.primary : Theme.outlineMedium
-                border.width: searchField.activeFocus ? 2 : 1
-
-                Item {
-                    anchors.fill: parent
-                    anchors.margins: 1
-
-                    DankIcon {
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.leftMargin: Theme.spacingM
-                        name: "search"
-                        size: Theme.iconSize - 2
-                        color: searchField.activeFocus ? Theme.primary : Theme.surfaceVariantText
-                    }
-
-                    TextInput {
-                        id: searchField
-                        anchors.left: parent.left
-                        anchors.leftMargin: Theme.spacingM + (Theme.iconSize - 2) + Theme.spacingM
-                        anchors.right: parent.right
-                        anchors.rightMargin: Theme.spacingM + 96 + Theme.spacingS * 2
-                        anchors.verticalCenter: parent.verticalCenter
-                        height: parent.height
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceText
-                        verticalAlignment: TextInput.AlignVCenter
-                        selectByMouse: true
-                        clip: true
-                        
-                        Component.onCompleted: {
-                            text = root.searchQuery
-                        }
-                        
-                        Connections {
-                            target: root
-                            function onSearchQueryChanged() {
-                                if (searchField.text !== root.searchQuery) {
-                                    searchField.text = root.searchQuery
-                                }
-                            }
-                        }
-                        
-                        onTextChanged: {
-                            if (root.searchQuery !== text) {
-                                root.searchQuery = text
-                                root.performSearch()
-                            }
-                        }
-                        Keys.onEscapePressed: event => {
-                            root.hideSearch()
-                            event.accepted = true
-                        }
-                        Keys.onReturnPressed: event => {
-                            if (event.modifiers & Qt.ShiftModifier) {
-                                root.findPrevious()
-                            } else {
-                                root.findNext()
-                            }
-                            event.accepted = true
-                        }
-                        Keys.onEnterPressed: event => {
-                            if (event.modifiers & Qt.ShiftModifier) {
-                                root.findPrevious()
-                            } else {
-                                root.findNext()
-                            }
-                            event.accepted = true
-                        }
-                    }
-                    
-                    StyledText {
-                        anchors.left: searchField.left
-                        anchors.verticalCenter: searchField.verticalCenter
-                        text: qsTr("Find in note...")
-                        font: searchField.font
-                        color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
-                        visible: searchField.text.length === 0 && !searchField.activeFocus
-                    }
-                }
             }
 
+            // Search input field
+            TextInput {
+                id: searchField
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                height: 32
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceText
+                verticalAlignment: TextInput.AlignVCenter
+                selectByMouse: true
+                clip: true
+                
+                Component.onCompleted: {
+                    text = root.searchQuery
+                }
+                
+                Connections {
+                    target: root
+                    function onSearchQueryChanged() {
+                        if (searchField.text !== root.searchQuery) {
+                            searchField.text = root.searchQuery
+                        }
+                    }
+                }
+                
+                onTextChanged: {
+                    if (root.searchQuery !== text) {
+                        root.searchQuery = text
+                        root.performSearch()
+                    }
+                }
+                Keys.onEscapePressed: event => {
+                    root.hideSearch()
+                    event.accepted = true
+                }
+                Keys.onReturnPressed: event => {
+                    if (event.modifiers & Qt.ShiftModifier) {
+                        root.findPrevious()
+                    } else {
+                        root.findNext()
+                    }
+                    event.accepted = true
+                }
+                Keys.onEnterPressed: event => {
+                    if (event.modifiers & Qt.ShiftModifier) {
+                        root.findPrevious()
+                    } else {
+                        root.findNext()
+                    }
+                    event.accepted = true
+                }
+            }
+            
+            // Placeholder text
+            StyledText {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                text: qsTr("Find in note...")
+                font: searchField.font
+                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+                visible: searchField.text.length === 0 && !searchField.activeFocus
+                Layout.leftMargin: -(searchField.width - 20) // Position over the input field
+            }
+
+            // Match count display
+            StyledText {
+                Layout.alignment: Qt.AlignVCenter
+                text: matchCount > 0 ? qsTr("%1/%2").arg(currentMatchIndex + 1).arg(matchCount) : searchQuery.length > 0 ? qsTr("No matches") : ""
+                font.pixelSize: Theme.fontSizeSmall
+                color: matchCount > 0 ? Theme.primary : Theme.surfaceTextMedium
+                visible: searchQuery.length > 0
+                Layout.rightMargin: Theme.spacingS
+            }
+
+            // Navigation buttons
             DankActionButton {
                 id: prevButton
                 Layout.alignment: Qt.AlignVCenter
@@ -308,6 +303,7 @@ Column {
                 onClicked: root.findNext()
             }
 
+            // Close button
             DankActionButton {
                 id: closeSearchButton
                 Layout.alignment: Qt.AlignVCenter
@@ -317,17 +313,6 @@ Column {
                 onClicked: root.hideSearch()
             }
         }
-
-        StyledText {
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.rightMargin: Theme.spacingM
-            anchors.topMargin: 2
-            text: matchCount > 0 ? qsTr("%1/%2").arg(currentMatchIndex + 1).arg(matchCount) : searchQuery.length > 0 ? qsTr("No matches") : ""
-            font.pixelSize: Theme.fontSizeSmall
-            color: matchCount > 0 ? Theme.primary : Theme.surfaceTextMedium
-            visible: searchQuery.length > 0
-        }
     }
 
     StyledRect {