H1K0-dev/tanabata
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add clear button to TagPicker search input

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Masahiko AMANO 2026-04-05 23:16:49 +03:00
parent f7d7e8ce37
commit 6e24060d99
1 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/lib/components/file/TagPicker.svelte
View File

@ -82,13 +82,22 @@
{/if}
<!-- Search -->
<input
class="search"
type="search"
placeholder="Search tags…"
bind:value={search}
autocomplete="off"
/>
<div class="search-wrap">
<input
class="search"
type="search"
placeholder="Search tags…"
bind:value={search}
autocomplete="off"
/>
{#if search}
<button class="search-clear" onclick={() => (search = '')} aria-label="Clear search">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
{/if}
</div>
<!-- Available tags -->
{#if filteredAvailable.length > 0}
@ -180,6 +189,12 @@
filter: brightness(1.1);
}
.search-wrap {
position: relative;
display: flex;
align-items: center;
}
.search {
width: 100%;
box-sizing: border-box;
@ -198,6 +213,27 @@
border-color: var(--color-accent);
}
.search-clear {
position: absolute;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
}
.search-clear:hover {
color: var(--color-text-primary);
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.empty {
font-size: 0.8rem;
color: var(--color-text-muted);