forked from mirror/crumbs-original
Frederic CabassutandClaude Opus 4.6
0894c10c95
Replace the default dark/white theme with a warm parchment aesthetic using CSS custom properties, retro pixel overlay, and JetBrains Mono monospace font across all components. Bump version to 0.1.7. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
|
|
import type { Note } from '$lib/types/index.js';
|
|
|
|
let query = $state('');
|
|
let originalNotes: Note[] = [];
|
|
let isSearching = $state(false);
|
|
|
|
async function handleSearch() {
|
|
if (!query.trim()) {
|
|
if (isSearching) {
|
|
notes.set(originalNotes);
|
|
isSearching = false;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!isSearching) {
|
|
notes.subscribe((n) => (originalNotes = n))();
|
|
isSearching = true;
|
|
}
|
|
|
|
const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
|
|
if (res.ok) {
|
|
const results = await res.json();
|
|
notes.set(results);
|
|
}
|
|
}
|
|
|
|
function clearSearch() {
|
|
query = '';
|
|
if (isSearching) {
|
|
notes.set(originalNotes);
|
|
isSearching = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="relative max-w-2xl">
|
|
<div class="flex items-center rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-2 focus-within:border-[var(--primary)]">
|
|
<svg class="mr-3 h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
placeholder="Search crumbs..."
|
|
bind:value={query}
|
|
oninput={handleSearch}
|
|
class="w-full bg-transparent text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
|
|
data-testid="search-input"
|
|
/>
|
|
{#if query}
|
|
<button onclick={clearSearch} class="ml-2 text-[var(--text-muted)] hover:text-[var(--text)]" aria-label="Clear search">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|