feat: redesign CMD+K button as macOS Spotlight-style search bar

Replace simple search button with search bar design in action bar:
- Semi-transparent styling integrated with dark action bar
- Keyboard shortcut indicators (⌘ K) shown as individual kbd elements
- Search icon and "Search" text for better discoverability
- Responsive: kbd keys hidden on mobile (<900px)
- Remove unused cmd-k-button.html partial template

Update test to verify new search bar structure (styling, kbd elements, icon).
This commit is contained in:
juanatsap
2025-12-04 12:59:16 +00:00
parent b5a50ca3ef
commit 404748afb5
6 changed files with 163 additions and 81 deletions
@@ -24,11 +24,15 @@
{{.UI.Widgets.ActionButtons.PrintFriendly}}
</button>
<button
class="action-btn search-btn has-tooltip cmd-k-trigger"
aria-label="{{.UI.Widgets.ActionButtons.SearchAriaLabel}}"
data-tooltip="{{.UI.Widgets.ActionButtons.Search}}">
<iconify-icon icon="mdi:magnify" width="24" height="24"></iconify-icon>
{{.UI.Widgets.ActionButtons.Search}}
id="cmd-k-button"
class="action-btn search-bar-btn cmd-k-trigger"
aria-label="{{.UI.Widgets.ActionButtons.SearchAriaLabel}}">
<iconify-icon icon="mdi:magnify" width="18" height="18" class="search-bar-icon"></iconify-icon>
<span class="search-bar-text">{{.UI.Widgets.ActionButtons.Search}}</span>
<span class="search-bar-keys">
<kbd></kbd>
<kbd>K</kbd>
</span>
</button>
</div>
{{end}}
@@ -1,11 +0,0 @@
{{define "cmd-k-button"}}
<!-- CMD+K Command Bar Button (Fixed Left - Last) -->
<!-- Uses lazy loading - ninja-keys loads on first click -->
<button
id="cmd-k-button"
class="fixed-btn cmd-k-btn no-print has-tooltip cmd-k-trigger"
aria-label="{{.UI.CmdK.Button.AriaLabel}}"
data-tooltip="{{.UI.CmdK.Button.Tooltip}}">
<iconify-icon icon="mdi:text-box-search-outline"></iconify-icon>
</button>
{{end}}