feat(web): add Ctrl+K command palette search modal
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user