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
+10 -2
View File
@@ -728,7 +728,7 @@ curl http://localhost:1999/text?lang=es
---
### 8. CMD+K Command Palette (2025-12-01)
### 8. CMD+K Command Palette (2025-12-01, updated 2025-12-04)
**ninja-keys integration for quick navigation:**
@@ -737,13 +737,21 @@ curl http://localhost:1999/text?lang=es
- Scroll-to-section functionality
- Language-aware responses
- 1-hour cache headers
- **Search bar button** (2025-12-04): macOS Spotlight-style search bar in action bar
- Integrated in dark action bar with semi-transparent styling
- Shows keyboard shortcut indicators (⌘ K) as individual kbd elements
- Replaces old simple search button with more discoverable design
- CSS: `.search-bar-btn`, `.search-bar-icon`, `.search-bar-text`, `.search-bar-keys`
- Responsive: kbd keys hidden on mobile (<900px)
**Files:**
- `internal/handlers/cv_cmdk.go` - CMD+K API handler
- `static/js/ninja-keys-init.js` - Frontend initialization
- `doc/16-CMD-K-API.md` - API documentation
- `templates/partials/navigation/action-buttons.html` - Search bar button HTML
- `static/css/04-interactive/_buttons.css` - Search bar button styles
**Tests:**
- `tests/mjs/71-cmd-k-api-scroll.test.mjs`
- `tests/mjs/72-cmd-k-button.test.mjs`
- `tests/mjs/72-cmd-k-button.test.mjs` - Tests search bar styling, kbd elements, icon, click behavior