<script lang="ts">
import { searchStore } from '$lib/stores/search.svelte.js';
import { appStore } from '$lib/store.svelte.js';
function handleInput() {
searchStore.search(appStore.authToken ?? undefined);
}
function basename(filepath: string): string {
return filepath.split('/').pop() ?? filepath;
}
</script>
<div class="panel">
<div class="header">Search</div>
<div class="inputs">
<input
class="input"
type="text"
placeholder="search..."
bind:value={searchStore.query}
oninput={handleInput}
aria-label="Search query"
/>
<input
class="input glob"
type="text"
placeholder="glob filter"
bind:value={searchStore.glob}
oninput={handleInput}
aria-label="Glob filter"
/>
</div>
{#if searchStore.loading}
<div class="dim">searching...</div>
{:else if searchStore.results.length > 0}
<div class="results">
{#each searchStore.results as match}
<div class="match">
<span class="file">{basename(match.file)}:{match.line}</span>
<span class="content">{match.content}</span>
</div>
{/each}
{#if searchStore.total > searchStore.results.length}
<div class="dim">+{searchStore.total - searchStore.results.length} more</div>
{/if}
</div>
{:else if searchStore.query.trim()}
<div class="dim">no results</div>
{/if}
</div>
<style>
.panel {
font-family: monospace;
font-size: 0.8rem;
}
.header {
color: var(--accent);
padding: 0.25rem 0.5rem;
font-weight: bold;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.inputs {
padding: 0.25rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.input {
all: unset;
background: var(--bg);
border: 1px solid var(--border);
color: var(--fg);
padding: 0.2rem 0.4rem;
font-family: monospace;
font-size: 0.75rem;
border-radius: 2px;
}
.input:focus {
border-color: var(--accent);
}
.input::placeholder {
color: var(--fg-dim);
}
.glob {
font-size: 0.7rem;
}
.results {
overflow-y: auto;
max-height: 250px;
}
.match {
padding: 0.2rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
border-bottom: 1px solid var(--border);
}
.match:hover {
background: var(--bg-surface);
}
.file {
color: var(--cyan);
font-size: 0.7rem;
}
.content {
color: var(--fg-dim);
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dim {
color: var(--fg-dim);
padding: 0.5rem;
font-style: italic;
font-size: 0.7rem;
}
</style>