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:
2026-03-22 00:03:02 +03:00
parent 4c1d5a892c
commit 637a4671cf
2 changed files with 23 additions and 1 deletions
@@ -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;
+18 -1
View File
@@ -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) {