granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use Input component for search with contained style

Browse source
This commit is contained in:
Justin Edmund 2026-01-04 15:23:01 -08:00
parent c966cbb31f
commit dc85d0591b
1 changed files with 7 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/lib/components/sidebar/SearchContent.svelte
View file

@ -8,6 +8,7 @@
import { collectionQueries } from '$lib/api/queries/collection.queries' import { collectionQueries } from '$lib/api/queries/collection.queries'
import Button from '../ui/Button.svelte' import Button from '../ui/Button.svelte'
import Icon from '../Icon.svelte' import Icon from '../Icon.svelte'
import Input from '../ui/Input.svelte'
import CharacterTags from '$lib/components/tags/CharacterTags.svelte' import CharacterTags from '$lib/components/tags/CharacterTags.svelte'
import ElementPicker from '../ui/element-picker/ElementPicker.svelte' import ElementPicker from '../ui/element-picker/ElementPicker.svelte'
import { useInfiniteLoader } from '$lib/stores/loaderState.svelte' import { useInfiniteLoader } from '$lib/stores/loaderState.svelte'
@ -47,7 +48,6 @@
let searchMode = $state<SearchMode>('all') let searchMode = $state<SearchMode>('all')
// Refs // Refs
let searchInput: HTMLInputElement
let sentinelEl = $state<HTMLElement>() let sentinelEl = $state<HTMLElement>()
// Constants // Constants
@ -272,13 +272,6 @@
searchResults.length === 0 && !activeQuery.isLoading && !activeQuery.isError searchResults.length === 0 && !activeQuery.isLoading && !activeQuery.isError
) )
// Focus search input on mount
$effect(() => {
if (searchInput) {
searchInput.focus()
}
})
function handleItemClick(item: AddItemResult) { function handleItemClick(item: AddItemResult) {
if (canAddMore) { if (canAddMore) {
onAddItems([item]) onAddItems([item])
@ -330,12 +323,13 @@
<div class="search-content"> <div class="search-content">
<div class="search-section"> <div class="search-section">
<input <Input
bind:this={searchInput}
bind:value={searchQuery} bind:value={searchQuery}
type="text" type="text"
placeholder="Search by name..." placeholder="Search by name..."
aria-label="Search" leftIcon="search"
contained
fullWidth
class="search-input" class="search-input"
/> />
</div> </div>
@ -511,24 +505,8 @@
padding: 0 0 $unit-2x 0; padding: 0 0 $unit-2x 0;
flex-shrink: 0; flex-shrink: 0;
.search-input { :global(.search-input) {
width: 100%; border-radius: $card-corner;
padding: $unit calc($unit * 1.5);
border: 1px solid var(--border-primary);
border-radius: $input-corner;
font-size: $font-regular;
background: var(--bg-secondary);
color: var(--text-primary);
&:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px var(--accent-blue-alpha);
}
&::placeholder {
color: var(--text-tertiary);
}
} }
} }