From 9f24f04cd4ace59dc336850ca12197bca48df43d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 27 Jun 2026 20:14:20 +0000
Subject: [PATCH] feat(profile): conditionally render clear search icon and fix
filter reset
* Conditionally render trailing clear icon in Textfield
* Use 'clear search' aria-label instead of generic 'cancel'
* Dynamically bind withTrailingIcon property to preserve layout
* Add missing 'else' statement to reset filtered domains when search is empty
* Add .jules/ and static/ to .prettierignore
Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
.jules/palette.md | 4 ++++
.prettierignore | 2 ++
src/routes/profile/+page.svelte | 18 +++++++++++-------
3 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 00f41cdf..01465757 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,7 @@
## 2024-10-24 - Accessible Icon Props and Loading Button State
**Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
**Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.
+
+## 2024-11-05 - Conditionally rendering and labeling clear buttons in inputs
+**Learning:** Always conditionally render trailing clear icons in text fields (e.g., `{#if search !== ''}`) so they don't receive keyboard focus when the input is already empty. Also dynamically bind the `withTrailingIcon` property so layout stays consistent, and replace generic 'cancel' aria-labels with specific ones like 'clear search' to give screen reader users context.
+**Action:** Apply conditional rendering to the trailing icon fragment, bind `withTrailingIcon` dynamically, and use a descriptive `aria-label`.
diff --git a/.prettierignore b/.prettierignore
index 38972655..a1b71b85 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,5 @@ node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock
+.jules/
+static/
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7f290736..391ccfc6 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -17,6 +17,8 @@
$: if (search !== '') {
domainsFiltered = domains.filter((domain) => isFuzzyMatch(domain.name, search));
+ } else {
+ domainsFiltered = domains;
}
walletAddress.subscribe(async (address) => {
@@ -39,7 +41,7 @@
if (trimmedDomain.startsWith(trimmedSearch) || trimmedDomain.includes(trimmedSearch))
return true;
- else false;
+ else return false;
}
@@ -55,14 +57,16 @@
label="Search"
bind:value={search}
variant="outlined"
- withTrailingIcon
+ withTrailingIcon={search !== ''}
>
-
-
-
-
-
+ {#if search !== ''}
+
+
+
+
+
+ {/if}