Add search clear buttons to sidebar search inputs #442

[cyco77]

Please fill in this template.

• Use a meaningful title for the pull request.
• Follow the guidelines from the CONTRIBUTING.md.
• Mention the bug or the feature number the PR will be targeting.
• Test the change in your own code. (Compile and run)
• Resolve all GH Copilot comments.

[Copilot]

Pull request overview

This PR adds inline “clear search” buttons to the renderer sidebar search inputs (Installed, Connections, Marketplace) so users can quickly reset filtering without manually deleting text.

Changes:

• Wrapes each sidebar search input in a positioned container and adds a clear (“×”) button wired to the corresponding input.
• Adds new sidebar search clear-button styles (including show/hide behavior) and adjusts search input padding to make room.
• Includes a couple of unrelated window-behavior tweaks (e.g., alwaysOnTop changes) and some formatting-only CSS/HTML cleanups.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/renderer/index.html	Adds clear buttons and wrapper markup to the three sidebar search inputs.
src/renderer/styles.scss	Adds styles for the clear button + wrapper and adjusts search input padding; also contains some formatting-only transition changes.
src/renderer/modules/initialization.ts	Binds click handlers for .search-clear-btn elements to clear their target inputs and trigger filtering via input events.
src/renderer/modules/autoUpdateManagement.ts	Removes alwaysOnTop from the update notification modal options.
src/main/managers/loadingOverlayWindowManager.ts	Sets alwaysOnTop to false for the loading overlay window and makes minor formatting changes.

Comments suppressed due to low confidence (1)

src/renderer/styles.scss:2008

• .search-input is defined earlier in this file as well, and this new block changes padding/background/transition globally. This duplication makes it hard to reason about which styles apply and can unintentionally affect any future .search-input usage outside the sidebar. Consider consolidating to a single definition or scoping these rules to the sidebar (e.g., .sidebar-search-bar .search-input).

.search-input {
    width: 100%;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: all 0.2s;
}

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Adds inline “clear search” buttons to the sidebar search inputs (Installed, Connections, Marketplace) to improve usability in the renderer UI.

Changes:

• Adds a clear (“×”) button next to each sidebar search input in index.html.
• Introduces sidebar search input wrapper + clear button styles in styles.scss.
• Wires up click handlers in renderer initialization to clear the target input and trigger existing live-search behavior.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/renderer/styles.scss	Adds layout/styling for a clear button inside sidebar search inputs; includes some style formatting cleanups.
src/renderer/modules/initialization.ts	Registers click handlers for the new clear buttons, clearing the target input and dispatching an input event.
src/renderer/index.html	Wraps sidebar search inputs in a container and adds the clear buttons with accessibility labels.

Comments suppressed due to low confidence (1)

src/renderer/styles.scss:2007

• styles.scss defines .search-input in two separate places (one earlier around the “Marketplace Search” section and this one under the sidebar search bar). Having duplicate global selectors makes it easy to introduce unintended overrides/cascade bugs. Consider scoping the sidebar rule (e.g., under .sidebar-search-bar/.sidebar-search-input-wrapper) or renaming one of the selectors so each search input style is unambiguous.

.search-input {
    width: 100%;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: all 0.2s;

---

You can also share your feedback on Copilot code review. Take the survey.

[Power-Maverick]

Nice implementation. Will test it tonight and get it merged. Thanks.

[Power-Maverick]

Clear Search missing on two modals:

• Single-select Connection
• Multi-select Connection

Can you update those as well? Thanks

[Copilot]

Pull request overview

Adds inline “clear search” (×) buttons to search inputs so users can quickly reset filters without manual deletion, improving sidebar and modal search UX in the renderer.

Changes:

• Added clear buttons next to sidebar search inputs and wired them to clear + re-trigger filtering via input events.
• Added clear buttons to connection selection modals (single + multi) with matching styles and handlers.
• Refactored some CSS formatting and introduced wrapper elements to position the clear buttons.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/renderer/styles.scss	Adds sidebar search input wrapper + clear button styling and adjusts input padding to accommodate the button.
src/renderer/modules/initialization.ts	Registers click handlers for sidebar clear buttons (clears target input + dispatches input).
src/renderer/modals/sharedStyles.ts	Adds modal search input wrapper + modal clear button styling.
src/renderer/modals/selectMultiConnection/view.ts	Wraps modal search input and adds a clear button element.
src/renderer/modals/selectMultiConnection/controller.ts	Wires modal clear button to clear the search input and dispatch input.
src/renderer/modals/selectConnection/view.ts	Wraps modal search input and adds a clear button element.
src/renderer/modals/selectConnection/controller.ts	Wires modal clear button to clear the search input and dispatch input.
src/renderer/index.html	Adds sidebar clear buttons for tools/connections/marketplace search inputs.

Comments suppressed due to low confidence (1)

src/renderer/styles.scss:2007

• .search-input is defined twice in this stylesheet (also earlier around the "Marketplace Search" section). Since this later definition is global, it will override the earlier one for all .search-input elements, which makes the final styling order-dependent and harder to maintain. Consider scoping this block to the sidebar (e.g., .sidebar-search-bar .search-input) or renaming the sidebar class to avoid duplicate global selectors, and remove/adjust the earlier definition if it’s no longer used.

.search-input {
    width: 100%;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: all 0.2s;

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Adds inline “clear search” buttons to the sidebar search inputs (and corresponding modal search inputs) to improve search UX across the app’s navigation surfaces.

Changes:

• Added clear-button markup next to sidebar search inputs and modal connection search inputs.
• Introduced wrapper + styling to position clear buttons inside search inputs and show them only when the input has content.
• Added renderer initialization logic to wire sidebar clear buttons to clear + re-trigger filtering.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/renderer/styles.scss	Adds sidebar search input wrapper styling and clear-button styling/visibility rules; also includes minor transition formatting changes.
src/renderer/modules/initialization.ts	Wires sidebar clear buttons to clear their target input and dispatch an input event.
src/renderer/modals/sharedStyles.ts	Adds modal search input wrapper styling and clear-button styling/visibility rules.
src/renderer/modals/selectMultiConnection/view.ts	Wraps modal search input and adds a clear button to the multi-connection modal.
src/renderer/modals/selectMultiConnection/controller.ts	Adds click handling to clear the multi-connection modal search input and re-trigger filtering.
src/renderer/modals/selectConnection/view.ts	Wraps modal search input and adds a clear button to the select-connection modal.
src/renderer/modals/selectConnection/controller.ts	Adds click handling to clear the select-connection modal search input and re-trigger filtering.
src/renderer/index.html	Wraps sidebar search inputs and adds clear buttons with data-clear-target wiring.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Adds inline “clear search” (×) buttons to search inputs so users can quickly reset filters and continue typing, primarily in the renderer sidebar and also in connection-selection modals.

Changes:

• Add clear (×) buttons next to the sidebar search inputs and wire up click handlers to clear + refocus the corresponding input.
• Add the same clear-button UX to the select-connection and select-multi-connection modals, including shared modal styling updates.
• Minor formatting/cleanup updates (doctype casing, condensed CSS transition declarations).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/renderer/styles.scss	Adds sidebar search input wrapper + clear button styling; minor transition formatting cleanups.
src/renderer/modules/initialization.ts	Initializes sidebar clear-button click handlers that clear + dispatch input + refocus.
src/renderer/modals/sharedStyles.ts	Adds modal search input wrapper + clear button styling for modal search bars.
src/renderer/modals/selectMultiConnection/view.ts	Wraps modal search input and adds clear button markup.
src/renderer/modals/selectMultiConnection/controller.ts	Adds clear-button click handler to reset modal search input and rerender.
src/renderer/modals/selectConnection/view.ts	Wraps modal search input and adds clear button markup.
src/renderer/modals/selectConnection/controller.ts	Adds clear-button click handler to reset modal search input and rerender.
src/renderer/index.html	Adds sidebar clear button markup for tools/connections/marketplace search inputs; minor inline-style formatting.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Adds inline “clear” (×) buttons to search inputs so users can quickly reset filtering in the sidebar (tools/connections/marketplace) and in connection-selection modals, aligning behavior across the UI.

Changes:

• Added clear buttons beside sidebar search inputs and wired them up during renderer initialization.
• Added clear buttons + wrapper styling for modal search inputs (Select Connection + Select Multi-Connection).
• Minor stylesheet formatting cleanup (transition declarations / background formatting).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/renderer/index.html	Wrapes sidebar search inputs and adds clear buttons with data-clear-target.
src/renderer/styles.scss	Adds sidebar search input wrapper + clear button styling; formatting cleanups.
src/renderer/modules/initialization.ts	Registers click handlers for sidebar clear buttons to reset and refocus inputs.
src/renderer/modals/sharedStyles.ts	Adds modal search input wrapper + clear button styling.
src/renderer/modals/selectConnection/view.ts	Adds modal clear button markup for the select-connection search field.
src/renderer/modals/selectConnection/controller.ts	Wires modal clear button click to clear + dispatch an input event.
src/renderer/modals/selectMultiConnection/view.ts	Adds modal clear button markup for the multi-connection search field.
src/renderer/modals/selectMultiConnection/controller.ts	Wires modal clear button click to clear + dispatch an input event.

Comments suppressed due to low confidence (1)

src/renderer/styles.scss:2007

• .search-input is defined earlier in this stylesheet as well (around the “Marketplace Search” section). This later, generic .search-input block will override the earlier one globally, which makes the final styling order-dependent and easy to break if another non-sidebar search input is added. Consider scoping these rules to the sidebar context (e.g., .sidebar-search-bar .search-input) or consolidating the duplicated .search-input styles to a single definition.

.search-input {
    width: 100%;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: all 0.2s;

---

You can also share your feedback on Copilot code review. Take the survey.