From ca3dba04e011718be441d03062e33b903d15b24d Mon Sep 17 00:00:00 2001
From: Shibo Lyu <github@of.sb>
Date: Tue, 10 Sep 2024 05:04:05 +0800
Subject: [PATCH] feat: search panel

---
 src/routes/(app)/ChatListHeader.svelte | 17 ++++++++++-------
 src/routes/(app)/ChatListItem.svelte   |  1 +
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/routes/(app)/ChatListHeader.svelte b/src/routes/(app)/ChatListHeader.svelte
index 5a0d51b..11b39a6 100644
--- a/src/routes/(app)/ChatListHeader.svelte
+++ b/src/routes/(app)/ChatListHeader.svelte
@@ -4,14 +4,13 @@
 	import { Icon, MagnifyingGlass, PencilSquare, XCircle } from 'svelte-hero-icons';
 	import IdentityMenu from './IdentityMenu.svelte';
 	import { tw } from '$lib/tw';
-	import { tick } from 'svelte';
 
 	export let searchQuery: string = '';
 	export let isSearchFocused: boolean;
 
 	let inputElement: HTMLInputElement;
 
-	function onTapX() {
+	function onTapClear() {
 		searchQuery = '';
 		inputElement.blur();
 	}
@@ -28,17 +27,21 @@
 			bind:value={searchQuery}
 			bind:this={inputElement}
 			on:focus={() => (isSearchFocused = true)}
-			on:blur={async () => {
-				await tick();
+			on:blur={(e) => {
+				// If the related target is an anchor element, trigger the click as the user is trying to navigate
+				if (e.relatedTarget instanceof HTMLAnchorElement) {
+					console.log('relatedTarget is an anchor element');
+					e.relatedTarget.click();
+				}
 				isSearchFocused = false;
 			}}
 		/>
 		<button
 			class={tw(
-				'size-4 cursor-default text-slate-300 opacity-0 transition-opacity dark:text-slate-500',
-				isSearchFocused && 'opacity-100'
+				'pointer-events-none size-4 cursor-default text-slate-300 opacity-0 transition-opacity dark:text-slate-500',
+				isSearchFocused && 'pointer-events-auto opacity-100'
 			)}
-			on:click={onTapX}
+			on:click={onTapClear}
 		>
 			<Icon src={XCircle} mini />
 			<span class="sr-only">Clear</span>
diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte
index 544c5b5..16e3d11 100644
--- a/src/routes/(app)/ChatListItem.svelte
+++ b/src/routes/(app)/ChatListItem.svelte
@@ -26,6 +26,7 @@
 	)}
 >
 	<a
+		tabindex="-1"
 		href="/chats/{urlSafeEndpoint}/{chat.id}"
 		class="flex h-20 cursor-default items-center gap-2 px-2"
 	>