feat(web): add Ctrl+K command palette search modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 22:28:02 -05:00
parent 1fafae9705
commit fc674847f5
3 changed files with 162 additions and 30 deletions

View File

@@ -29,7 +29,7 @@
</nav>
</div>
<div class="header-right">
<button type="button" class="btn btn-search" id="search-trigger">
<button type="button" class="btn btn-search" id="search-trigger" onclick="openSearch()">
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -50,7 +50,29 @@
@RenderBody()
</main>
<div id="search-modal"></div>
<div id="search-modal" class="search-backdrop" onclick="if(event.target===this)closeSearch()">
<div class="search-modal">
<div class="search-input-row">
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" id="search-input" class="search-input" placeholder="Search tasks..."
autocomplete="off"
hx-get="/board?handler=Search"
hx-target="#search-results"
hx-swap="innerHTML"
hx-trigger="input changed delay:200ms, search"
hx-include="this"
name="q" />
</div>
<div id="search-results" class="search-results">
<!-- Results loaded via htmx -->
</div>
<div class="search-footer">
<span><kbd>↑↓</kbd> navigate</span>
<span><kbd>↵</kbd> open</span>
<span><kbd>esc</kbd> close</span>
</div>
</div>
</div>
<div id="detail-panel"></div>
<script src="~/lib/htmx.min.js"></script>