feat: add search button to sidebar with Ctrl+K shortcut hint
Compact search bar button between sidebar header and nav. Shows magnifying glass icon + placeholder text + ⌘K kbd hint when expanded, just the icon when collapsed. Clicking opens the search palette.
This commit is contained in:
@@ -17,12 +17,17 @@
|
||||
commandTrackersCache,
|
||||
} from '$lib/stores/caches.svelte';
|
||||
|
||||
let { onopen = undefined }: { onopen?: (opener: () => void) => void } = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let query = $state('');
|
||||
let activeIndex = $state(0);
|
||||
let loading = $state(false);
|
||||
let inputEl: HTMLInputElement;
|
||||
|
||||
// Expose openPalette to parent via callback
|
||||
$effect(() => { onopen?.(openPalette); });
|
||||
|
||||
interface SearchResult {
|
||||
id: number;
|
||||
name: string;
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
const theme = getTheme();
|
||||
|
||||
let showPasswordForm = $state(false);
|
||||
let openSearch: (() => void) | undefined;
|
||||
let pwdCurrent = $state('');
|
||||
let pwdNew = $state('');
|
||||
let pwdMsg = $state('');
|
||||
@@ -240,6 +241,22 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search button -->
|
||||
<div class="{collapsed ? 'px-2 py-1.5' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
|
||||
<button onclick={() => openSearch?.()}
|
||||
class="flex items-center gap-2 w-full {collapsed ? 'justify-center px-2' : 'px-2.5'} py-1.5 rounded-lg text-sm transition-all duration-200"
|
||||
style="background: var(--color-muted); color: var(--color-muted-foreground); border: 1px solid var(--color-border);"
|
||||
onmouseenter={(e) => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.color = 'var(--color-foreground)'; }}
|
||||
onmouseleave={(e) => { e.currentTarget.style.borderColor = 'var(--color-border)'; e.currentTarget.style.color = 'var(--color-muted-foreground)'; }}
|
||||
title={t('searchPalette.placeholder')}>
|
||||
<MdiIcon name="mdiMagnify" size={16} />
|
||||
{#if !collapsed}
|
||||
<span class="flex-1 text-left text-xs">{t('searchPalette.placeholder')}</span>
|
||||
<kbd class="text-[0.6rem] font-mono px-1 py-0.5 rounded" style="background: var(--color-background); border: 1px solid var(--color-border);">⌘K</kbd>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
|
||||
{#each navEntries as entry}
|
||||
@@ -441,7 +458,7 @@
|
||||
</Modal>
|
||||
|
||||
<Snackbar />
|
||||
<SearchPalette />
|
||||
<SearchPalette onopen={(fn) => openSearch = fn} />
|
||||
|
||||
<style>
|
||||
@media (max-width: 767px) {
|
||||
|
||||
Reference in New Issue
Block a user