feat: Add CMD+K command palette with ninja-keys integration

Implement a command palette accessible via CMD+K/Ctrl+K using the ninja-keys
web component. Features include:

- New /api/cmd-k endpoint serving dynamic CV entries (experiences, projects, courses)
- Language-aware responses with 1-hour cache headers
- Scroll-to-section functionality for quick navigation
- Enhanced keyboard shortcuts modal with CMD+K documentation
- Comprehensive test coverage for API and UI interactions

Also includes cleanup of deprecated debug test files and various UI polish
improvements to contact form, themes, and action bar components.
This commit is contained in:
juanatsap
2025-12-01 13:03:06 +00:00
parent 976b8ae2e2
commit 9a848e8c53
45 changed files with 3070 additions and 1587 deletions
+51
View File
@@ -477,6 +477,7 @@ iconify-icon {
align-items: stretch;
height: 100%;
overflow: visible; /* Allow tooltips to extend beyond button container */
flex-wrap: nowrap; /* Keep buttons in single row */
}
.action-buttons-right {
@@ -484,6 +485,56 @@ iconify-icon {
margin-left: auto;
}
/* ========================================
RESPONSIVE ACTION BUTTONS - Scale to fit
Prevents button overflow on narrow screens
======================================== */
/* Intermediate screens: shrink buttons to fit */
@media (min-width: 901px) and (max-width: 1400px) {
.action-buttons-right {
flex-shrink: 1;
min-width: 0; /* Allow shrinking */
}
.action-buttons-right .action-btn {
flex-shrink: 1;
min-width: 40px; /* Minimum touchable size */
padding: 0 0.5rem; /* Reduce padding as needed */
}
}
/* Narrow desktop: icon-only buttons that scale */
@media (min-width: 541px) and (max-width: 900px) {
.action-buttons-right {
display: flex !important; /* Show on tablet */
flex-shrink: 1;
min-width: 0;
}
.action-buttons-right .action-btn {
width: auto;
min-width: 36px;
padding: 0 0.4rem;
font-size: 0; /* Icon only */
flex-shrink: 1;
}
.action-buttons-right .action-btn iconify-icon {
width: 20px;
height: 20px;
}
}
/* Very narrow: use CSS clamp for fluid button sizing */
@media (min-width: 901px) and (max-width: 1100px) {
.action-btn {
/* Fluid width that scales with viewport */
width: clamp(35px, 4vw, 50px) !important;
padding: 0 clamp(0.3rem, 0.8vw, 1rem) !important;
}
}
/* ============================================================================
HTMX Loading Indicators
========================================================================= */