From fccbc8490aa39ae8ffd3c10723e8d5ee0a195d7b Mon Sep 17 00:00:00 2001
From: stefpi <19478336+stefpi@users.noreply.github.com>
Date: Wed, 11 Nov 2026 19:55:49 -0800
Subject: [PATCH 1/2] search icon

---
 .../HarnessSelector/HarnessSelector.svelte    | 57 +++++++++++++++----
 src/lib/icons/ui/search.svg                   |  4 ++
 src/routes/setup/+page.svelte                 |  1 -
 3 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/icons/ui/search.svg

diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte
index fc8d5163..fc3db804 100644
--- a/src/lib/components/HarnessSelector/HarnessSelector.svelte
+++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte
@@ -14,6 +14,7 @@
 
   import ArrowRight from '$lib/icons/arrow-right.svg?raw';
   import ChevronIcon from '$lib/icons/icon-chevron.svg?raw';
+  import SearchIcon from '$lib/icons/ui/search.svg?raw';
   import CloseIcon from '$lib/icons/ui/close.svg?raw';
   import CarIcon from '$lib/icons/features/car.svg?raw';
 
@@ -148,6 +149,11 @@
     selection = null;
   }
 
+  const handleClearText = () => {
+    inputValue = "";
+    inputRef?.focus();
+  }
+
   /* Dropdown Options */
   let menuOpen = false;
   let filteredItems = [];
@@ -171,7 +177,7 @@
 <div class="dropdown" id="harness-selector" use:clickOutside on:clickOutside={() => menuOpen = false}>
   <div>
     {#if menuOpen}
-      <button class="clear" on:click={handleClear}>{@html CloseIcon}</button>
+      <span class="search-icon">{@html SearchIcon}</span>
       <input
         type="text"
         placeholder={placeholder}
@@ -181,7 +187,6 @@
         bind:this={inputRef}
         on:click={() => menuOpen = true}
         on:focus={() => menuOpen = true}
-        style={menuOpen ? 'padding: 14px 3rem' : ''}
       />
     {:else if selection}
       <button class="clear" on:click={handleClear}>{@html CloseIcon}</button>
@@ -201,7 +206,13 @@
         </div>
       </div>
     {/if}
-    <span class="chevron">{@html ChevronIcon}</span>
+    {#if menuOpen && inputValue}
+      <button class="end-icon" aria-label="Clear search" on:click={handleClearText}>{@html CloseIcon}</button>
+    {:else if menuOpen}
+      <button class="end-icon chevron open" aria-label="Close" on:click={() => menuOpen = false}>{@html ChevronIcon}</button>
+    {:else}
+      <span class="end-icon chevron">{@html ChevronIcon}</span>
+    {/if}
   </div>
   <div class="dropdown-content" id="harness-options" class:show={menuOpen}>
     {#if searchTerms.length > 0}
@@ -282,7 +293,7 @@
   width: 100%;
   min-height: 84px;
   border: 1px solid #a0a0a0;
-  padding: 14px;
+  padding: 14px 3rem;
   outline: none;
   font-size: 1rem;
 
@@ -323,17 +334,43 @@
   }
 }
 
-.chevron {
+.end-icon {
   position: absolute;
   top: 50%;
   right: 12px;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+span.end-icon {
   pointer-events: none;
+}
 
-  & > svg {
-    width: 18px;
-    height: 12px;
-  }
+.chevron > :global(svg) {
+  width: 18px;
+  height: 12px;
+}
+
+.open > :global(svg) {
+  transform: rotate(180deg);
+}
+
+.search-icon {
+  position: absolute;
+  left: 13px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
 }
 
 .clear {
diff --git a/src/lib/icons/ui/search.svg b/src/lib/icons/ui/search.svg
new file mode 100644
index 00000000..87954722
--- /dev/null
+++ b/src/lib/icons/ui/search.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+<circle cx="10" cy="10" r="6"></circle>
+<line x1="14.5" y1="14.5" x2="20" y2="20" stroke-linecap="round"></line>
+</svg>
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index 9deb1425..3c68b489 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -137,7 +137,6 @@
         <p>Select your vehicle to get customized installation notes:</p>
         <HarnessSelector
           label="Select your vehicle"
-          placeholder="Search for your vehicle"
           onChange={handleHarnessSelection}
           showGenericHarnesses={false}
           hideSupportNoteCard={true}

From 39798cd8ee30802cafb7e66e70bff23aac00159f Mon Sep 17 00:00:00 2001
From: stefpi <19478336+stefpi@users.noreply.github.com>
Date: Wed, 11 Nov 2026 19:58:02 -0800
Subject: [PATCH 2/2] add back

---
 src/routes/setup/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index 3c68b489..9deb1425 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -137,6 +137,7 @@
         <p>Select your vehicle to get customized installation notes:</p>
         <HarnessSelector
           label="Select your vehicle"
+          placeholder="Search for your vehicle"
           onChange={handleHarnessSelection}
           showGenericHarnesses={false}
           hideSupportNoteCard={true}