blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 00:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: search panel

Browse source
This commit is contained in:
Shibo Lyu 2024-09-10 05:04:05 +08:00
parent 3ee0156d19
commit ca3dba04e0
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/routes/(app)/ChatListHeader.svelte
View file

@ -4,14 +4,13 @@
import { Icon, MagnifyingGlass, PencilSquare, XCircle } from 'svelte-hero-icons'; import { Icon, MagnifyingGlass, PencilSquare, XCircle } from 'svelte-hero-icons';
import IdentityMenu from './IdentityMenu.svelte'; import IdentityMenu from './IdentityMenu.svelte';
import { tw } from '$lib/tw'; import { tw } from '$lib/tw';
import { tick } from 'svelte';
export let searchQuery: string = ''; export let searchQuery: string = '';
export let isSearchFocused: boolean; export let isSearchFocused: boolean;
let inputElement: HTMLInputElement; let inputElement: HTMLInputElement;
function onTapX() { function onTapClear() {
searchQuery = ''; searchQuery = '';
inputElement.blur(); inputElement.blur();
} }
@ -28,17 +27,21 @@
bind:value={searchQuery} bind:value={searchQuery}
bind:this={inputElement} bind:this={inputElement}
on:focus={() => (isSearchFocused = true)} on:focus={() => (isSearchFocused = true)}
on:blur={async () => { on:blur={(e) => {
await tick(); // 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; isSearchFocused = false;
}} }}
/> />
<button <button
class={tw( class={tw(
'size-4 cursor-default text-slate-300 opacity-0 transition-opacity dark:text-slate-500', 'pointer-events-none size-4 cursor-default text-slate-300 opacity-0 transition-opacity dark:text-slate-500',
isSearchFocused && 'opacity-100' isSearchFocused && 'pointer-events-auto opacity-100'
)} )}
on:click={onTapX} on:click={onTapClear}
> >
<Icon src={XCircle} mini /> <Icon src={XCircle} mini />
<span class="sr-only">Clear</span> <span class="sr-only">Clear</span>

1
src/routes/(app)/ChatListItem.svelte
View file

@ -26,6 +26,7 @@
)} )}
> >
<a <a
tabindex="-1"
href="/chats/{urlSafeEndpoint}/{chat.id}" href="/chats/{urlSafeEndpoint}/{chat.id}"
class="flex h-20 cursor-default items-center gap-2 px-2" class="flex h-20 cursor-default items-center gap-2 px-2"
> >