vikingowl
cdc70403f9
- Extract SearchModal component from SearchBar for root-level rendering - Add isModalOpen state to search store with open/close methods - Simplify SearchBar to trigger button only - Update Modal with proper overflow handling and scroll-to-close - Fix layout background to use void color 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
31 lines
988 B
Svelte
31 lines
988 B
Svelte
<script lang="ts">
|
|
import { Search, Command } from 'lucide-svelte';
|
|
import { search } from '$lib/stores';
|
|
|
|
// Keyboard shortcut: Cmd/Ctrl + K
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
search.openModal();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKeydown} />
|
|
|
|
<!-- Search Button (Header) -->
|
|
<button
|
|
class="flex items-center gap-2 rounded-lg px-3 py-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue"
|
|
onclick={() => search.openModal()}
|
|
aria-label="Search matches and players"
|
|
>
|
|
<Search class="h-5 w-5" aria-hidden="true" />
|
|
<span class="hidden md:inline">Search</span>
|
|
<kbd
|
|
class="hidden items-center gap-0.5 rounded border border-neon-blue/30 bg-void px-1.5 py-0.5 text-xs text-white/50 lg:inline-flex"
|
|
>
|
|
<Command class="h-3 w-3" aria-hidden="true" />
|
|
<span>K</span>
|
|
</kbd>
|
|
</button>
|