feat(search): autofocus input on view load

This commit is contained in:
vicrodh committed 2026-01-13 11:38:24 -06:00
1 parent 1b9a8bd0af
commit 66110857a9
1 file changed
+7 -2
+7 -2
View File
@@ -1,13 +1,17 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount, tick } from 'svelte';
import { invoke } from '@tauri-apps/api/core'; import { invoke } from '@tauri-apps/api/core';
import { Search, Disc3, Music, Mic2, User, X } from 'lucide-svelte'; import { Search, Disc3, Music, Mic2, User, X } from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte'; import AlbumCard from '../AlbumCard.svelte';
import TrackMenu from '../TrackMenu.svelte'; import TrackMenu from '../TrackMenu.svelte';
import { getSearchState, setSearchState, type SearchResults, type SearchTab } from '$lib/stores/searchState'; import { getSearchState, setSearchState, type SearchResults, type SearchTab } from '$lib/stores/searchState';
onMount(() => { let searchInput: HTMLInputElement | null = null;
onMount(async () => {
console.log('SearchView mounted!'); console.log('SearchView mounted!');
await tick();
searchInput?.focus();
}); });
// Track which images have failed to load // Track which images have failed to load
@@ -271,6 +275,7 @@
bind:value={query} bind:value={query}
oninput={debounceSearch} oninput={debounceSearch}
class="search-input" class="search-input"
bind:this={searchInput}
/> />
{#if query.trim()} {#if query.trim()}
<button class="search-clear" onclick={clearSearch} aria-label="Clear search"> <button class="search-clear" onclick={clearSearch} aria-label="Clear search">