From 4f4b3d6a1aa8c5e841f970a8fe1486808d460fe7 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Wed, 30 Sep 2026 12:47:41 -0600
Subject: [PATCH] fix(app): refine session search controls

---
 .../app/src/session/timeline/search-bar.css   | 10 ++++++++++
 .../app/src/session/timeline/search-bar.tsx   | 20 ++++++++++---------
 .../src/session/timeline/search-controller.ts |  1 +
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/session/timeline/search-bar.css b/packages/app/src/session/timeline/search-bar.css
index c76429fd2e0..c97955afac3 100644
--- a/packages/app/src/session/timeline/search-bar.css
+++ b/packages/app/src/session/timeline/search-bar.css
@@ -12,3 +12,13 @@
   box-shadow: inset 0 0 0 1px var(--v2-border-border-focus);
   outline: none;
 }
+
+[data-component="timeline-search-bar"] [data-slot="text-input-v2-leading-icon"] {
+  transition: color 85ms ease-out;
+}
+
+[data-component="timeline-search-bar"]
+  [data-component="text-input-v2"]:hover
+  [data-slot="text-input-v2-leading-icon"] {
+  color: var(--v2-icon-icon-base);
+}
diff --git a/packages/app/src/session/timeline/search-bar.tsx b/packages/app/src/session/timeline/search-bar.tsx
index aaa38ecf7df..8cf5190ee7c 100644
--- a/packages/app/src/session/timeline/search-bar.tsx
+++ b/packages/app/src/session/timeline/search-bar.tsx
@@ -56,15 +56,17 @@ export function TimelineSearchBar(props: { controller: TimelineSearchController
               {c.result.count() > 0 ? c.result.activeIndex() + 1 : 0}/{c.result.count()}
             </span>
           </Show>
-          <button
-            type="button"
-            class="-me-1 flex size-5 shrink-0 self-center items-center justify-center rounded-[2px] border-0 bg-transparent p-0 text-v2-icon-icon-muted outline outline-1 outline-transparent hover:bg-v2-overlay-simple-overlay-hover active:bg-v2-overlay-simple-overlay-pressed focus-visible:outline-v2-border-border-focus"
-            aria-label={c.query.placeholder()}
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={() => c.query.close()}
-          >
-            <Icon name="xmark-small" />
-          </button>
+          <Show when={c.query.value()}>
+            <button
+              type="button"
+              class="-me-1 flex size-5 shrink-0 self-center items-center justify-center border-0 bg-transparent p-0 text-v2-icon-icon-muted transition-colors duration-150 ease-in-out hover:text-v2-icon-icon-base focus-visible:outline focus-visible:outline-1 focus-visible:outline-v2-border-border-focus"
+              aria-label={c.query.clearLabel()}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => c.query.setValue("")}
+            >
+              <Icon name="circle-xmark" />
+            </button>
+          </Show>
         </div>
       </div>
     </Show>
diff --git a/packages/app/src/session/timeline/search-controller.ts b/packages/app/src/session/timeline/search-controller.ts
index dbbb434d0f7..8fa006aac40 100644
--- a/packages/app/src/session/timeline/search-controller.ts
+++ b/packages/app/src/session/timeline/search-controller.ts
@@ -256,6 +256,7 @@ export function createTimelineSearchController(input: {
     query: {
       value: () => state.value,
       placeholder: () => language.t("session.search.placeholder"),
+      clearLabel: () => language.t("common.clear"),
       noResults: () => language.t("session.search.noResults"),
       open,
       close,