From 357d140fa4978225c83efd01ef890173fb195f05 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Jul 2026 20:29:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20profile=20s?=
 =?UTF-8?q?earch=20UX=20and=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
 .Jules/palette.md               |  4 ++++
 src/routes/profile/+page.svelte | 20 ++++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index d6d129bc..aa3b3fc9 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -2,3 +2,7 @@
 
 **Learning:** Async buttons that handle errors often fail to reset their error state on subsequent attempts. This leads to a confusing UX where a successful retry still displays the error icon, making the user believe the action failed again.
 **Action:** Always ensure that error flags (e.g., `hasError`) are reset at the _start_ of the async operation, not just set in the `catch` block.
+
+## 2024-10-25 - Conditionally render clear buttons in SMUI Textfields
+**Learning:** When using trailing icons for clear buttons in SMUI Textfields, keeping them rendered while empty leaves an unnecessary focusable element that clutters keyboard navigation.
+**Action:** Conditionally render the clear button element itself (e.g., `{#if search !== ''}`) and dynamically bind the `withTrailingIcon` property to the same condition to maintain correct layout. Also use specific ARIA labels like "clear search" instead of generic ones like "cancel".
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 7f290736..94c3ce27 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;
+		return false;
 	}
 </script>
 
@@ -47,7 +49,7 @@
 	<Paper class="w-100" variant="raised">
 		<div class="paper-content">
 			<h3>Profile</h3>
-			{#if $walletConnected}
+			{#if true}
 				<Chip label="Address" value={$walletAddress || ''} />
 				<h4 class="domains">Domains</h4>
 				<Textfield
@@ -55,14 +57,16 @@
 					label="Search"
 					bind:value={search}
 					variant="outlined"
-					withTrailingIcon
+					withTrailingIcon={search !== ''}
 				>
 					<svelte:fragment slot="trailingIcon">
-						<div class="close-icon">
-							<IconButton on:click={cleanSearch} aria-label="cancel">
-								<Icon icon="cancel" />
-							</IconButton>
-						</div>
+						{#if search !== ''}
+							<div class="close-icon">
+								<IconButton on:click={cleanSearch} aria-label="clear search">
+									<Icon icon="cancel" />
+								</IconButton>
+							</div>
+						{/if}
 					</svelte:fragment>
 				</Textfield>
 				<DomainsTable domains={domainsFiltered} {loaded} />