From 78d30020c3aa4d08b729d806b5ed12d9dd037ff7 Mon Sep 17 00:00:00 2001
From: Shibo Lyu <github@of.sb>
Date: Wed, 11 Sep 2024 03:02:04 +0800
Subject: [PATCH] fix: various fixes around discover

---
 src/lib/chat.ts                        |  1 -
 src/lib/chatList.ts                    |  1 -
 src/lib/globalSearch.ts                |  3 ---
 src/routes/(app)/ChatList.svelte       |  2 +-
 src/routes/(app)/ChatListHeader.svelte | 30 ++++++++++++++++----------
 src/routes/(app)/ChatListItem.svelte   |  2 +-
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/lib/chat.ts b/src/lib/chat.ts
index 4994e95..9528698 100644
--- a/src/lib/chat.ts
+++ b/src/lib/chat.ts
@@ -75,7 +75,6 @@ export function useChat(
 
 		sections.push(currentSection);
 
-		console.log(sections);
 		return sections;
 	});
 
diff --git a/src/lib/chatList.ts b/src/lib/chatList.ts
index 1eff0ef..f565d1b 100644
--- a/src/lib/chatList.ts
+++ b/src/lib/chatList.ts
@@ -29,7 +29,6 @@ export class ChatListManager {
 					existing.lastMessage = newChat.lastMessage ?? existing.lastMessage;
 				} else {
 					chatList.push(newChat);
-					console.log('new chat added to list', newChat);
 				}
 			}
 
diff --git a/src/lib/globalSearch.ts b/src/lib/globalSearch.ts
index 02fe468..101e777 100644
--- a/src/lib/globalSearch.ts
+++ b/src/lib/globalSearch.ts
@@ -25,12 +25,9 @@ export class GlobalSearchManager {
 		}
 
 		const results = await Promise.allSettled(jobs);
-		console.log(results);
 
 		const chats: { joined: Chat[]; public: Chat[] } = { joined: [], public: [] };
 		for (const result of results) {
-			console.log(result);
-
 			if (result.status === 'rejected') continue;
 
 			const [type, chatList] = result.value;
diff --git a/src/routes/(app)/ChatList.svelte b/src/routes/(app)/ChatList.svelte
index a1e9a84..3515bc3 100644
--- a/src/routes/(app)/ChatList.svelte
+++ b/src/routes/(app)/ChatList.svelte
@@ -23,7 +23,7 @@
 				{/each}
 			{/if}
 		</ul>
-		{#if isSearchFocused}
+		{#if isSearchFocused || searchQuery}
 			<div
 				class="absolute inset-0 size-full origin-top touch-pan-y overflow-y-auto bg-sb-primary"
 				transition:scale={{ start: 0.9 }}
diff --git a/src/routes/(app)/ChatListHeader.svelte b/src/routes/(app)/ChatListHeader.svelte
index 11b39a6..911a12f 100644
--- a/src/routes/(app)/ChatListHeader.svelte
+++ b/src/routes/(app)/ChatListHeader.svelte
@@ -10,40 +10,48 @@
 
 	let inputElement: HTMLInputElement;
 
-	function onTapClear() {
+	function onTapClear(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
 		searchQuery = '';
-		inputElement.blur();
 	}
 </script>
 
 <header class="flex items-center justify-stretch gap-2 border-b border-ss-secondary p-2 shadow-sm">
 	<IdentityMenu class={tw('transition-opacity duration-200', isSearchFocused && 'opacity-0')} />
-	<InputFrame class={tw('z-10 flex-1 transition-all duration-200', isSearchFocused && '-mx-10')}>
+	<InputFrame
+		class={tw('z-10 h-8 flex-1 transition-all duration-200', isSearchFocused && '-mx-10')}
+	>
 		<Icon src={MagnifyingGlass} class="size-5 text-slate-400" />
 		<input
-			type="text"
+			type="search"
 			placeholder="Search"
-			class="w-full flex-1 bg-transparent text-sm leading-4 text-slate-900 focus:outline-none"
+			class="w-full flex-1 bg-transparent text-sm leading-4 text-sf-primary focus:outline-none"
 			bind:value={searchQuery}
 			bind:this={inputElement}
-			on:focus={() => (isSearchFocused = true)}
+			on:focus={() => {
+				isSearchFocused = true;
+			}}
 			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');
+				if (
+					e.relatedTarget instanceof HTMLAnchorElement ||
+					e.relatedTarget instanceof HTMLButtonElement
+				) {
 					e.relatedTarget.click();
 				}
 				isSearchFocused = false;
 			}}
 		/>
 		<button
+			tabindex="0"
 			class={tw(
-				'pointer-events-none size-4 cursor-default text-slate-300 opacity-0 transition-opacity dark:text-slate-500',
-				isSearchFocused && 'pointer-events-auto opacity-100'
+				'-mx-2 -my-1.5 flex size-8 cursor-text items-center justify-center text-slate-300 opacity-0 transition-opacity duration-200 dark:text-slate-500',
+				isSearchFocused && 'cursor-default opacity-100 '
 			)}
 			on:click={onTapClear}
 		>
-			<Icon src={XCircle} mini />
+			<Icon src={XCircle} class="size-4" mini />
 			<span class="sr-only">Clear</span>
 		</button>
 	</InputFrame>
diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte
index 16e3d11..083af76 100644
--- a/src/routes/(app)/ChatListItem.svelte
+++ b/src/routes/(app)/ChatListItem.svelte
@@ -26,7 +26,7 @@
 	)}
 >
 	<a
-		tabindex="-1"
+		tabindex="0"
 		href="/chats/{urlSafeEndpoint}/{chat.id}"
 		class="flex h-20 cursor-default items-center gap-2 px-2"
 	>