fix(app): refine session search controls

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);
+}

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>

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,