feat: add full-text search bar to sidebar (FTS5)

This commit is contained in:
Gan, Jimmy
2026-07-09 22:43:55 +08:00
parent ed77b89e98
commit c5f3bd7696
@@ -21,6 +21,8 @@
let allChannels = $state([]);
let editingCategories = $state(false);
let prevSelectedId = $state(null);
let searchQuery = $state('');
let searchTimeout = null;
// Agent queue state
let agentItems = $state([]);
@@ -74,6 +76,13 @@
if (channelFilter && !channelFilter.startsWith('📁')) {
params.set('channel', channelFilter);
}
if (searchQuery.trim()) {
params.set('search', searchQuery.trim());
}
if (searchQuery.trim()) {
params.delete('status');
params.set('limit', '50');
}
const res = await fetch(`/api/videos?${params}`);
if (res.ok) {
videos = await res.json();
@@ -478,6 +487,25 @@
{/if}
</div>
{:else}
<!-- Search bar -->
<div class="px-2 py-1.5" style="border-bottom:1px solid var(--border)">
<div class="flex items-center space-x-1" style="background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;padding:2px 8px">
<span style="color:var(--text-muted);font-size:12px">🔍</span>
<input type="text" bind:value={searchQuery}
placeholder="Search videos..."
class="w-full text-[11px] py-1 bg-transparent outline-none"
style="color:var(--text-primary)"
oninput={() => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(loadVideos, 300);
}}
onkeydown={(e) => { if (e.key === 'Enter') { clearTimeout(searchTimeout); loadVideos(); } }} />
{#if searchQuery}
<button onclick={() => { searchQuery = ''; loadVideos(); }}
class="text-[10px] px-1" style="color:var(--text-muted)"></button>
{/if}
</div>
</div>
<!-- Channel filter bar -->
{#if (allChannels.length || channels.length) > 1}
<div class="px-2 py-1.5 space-y-1" style="border-bottom:1px solid var(--border)">