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

use ElementPicker for element filters in search sidebar

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

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

@ -9,6 +9,7 @@
import Button from '../ui/Button.svelte' import Button from '../ui/Button.svelte'
import Icon from '../Icon.svelte' import Icon from '../Icon.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 { useInfiniteLoader } from '$lib/stores/loaderState.svelte' import { useInfiniteLoader } from '$lib/stores/loaderState.svelte'
import { getCharacterImage, getWeaponImage, getSummonImage } from '$lib/features/database/detail/image' import { getCharacterImage, getWeaponImage, getSummonImage } from '$lib/features/database/detail/image'
import type { AddItemResult, SearchMode } from '$lib/types/api/search' import type { AddItemResult, SearchMode } from '$lib/types/api/search'
@ -284,12 +285,8 @@
} }
} }
function toggleElementFilter(element: number) { function handleElementChange(value: number | number[]) {
if (elementFilters.includes(element)) { elementFilters = Array.isArray(value) ? value : value !== undefined ? [value] : []
elementFilters = elementFilters.filter(e => e !== element)
} else {
elementFilters = [...elementFilters, element]
}
} }
function toggleRarityFilter(rarity: number) { function toggleRarityFilter(rarity: number) {
@ -366,19 +363,13 @@
<!-- Element filters --> <!-- Element filters -->
<div class="filter-group"> <div class="filter-group">
<label class="filter-label">Element</label> <label class="filter-label">Element</label>
<div class="filter-buttons"> <ElementPicker
{#each elements as element} value={elementFilters}
<button onValueChange={handleElementChange}
class="filter-btn element-btn" multiple={true}
class:active={elementFilters.includes(element.value)} includeAny={true}
style:--element-color={element.color} contained={true}
onclick={() => toggleElementFilter(element.value)} />
aria-pressed={elementFilters.includes(element.value)}
>
{element.label}
</button>
{/each}
</div>
</div> </div>
<!-- Rarity filters --> <!-- Rarity filters -->
@ -627,12 +618,6 @@
color: white; color: white;
border-color: var(--accent-blue); border-color: var(--accent-blue);
} }
&.element-btn.active {
background: var(--element-color);
border-color: var(--element-color);
color: white;
}
} }
} }