juanatsap
9a848e8c53
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.
165 lines
9.2 KiB
HTML
165 lines
9.2 KiB
HTML
{{define "shortcuts-modal"}}
|
||
<!-- Keyboard Shortcuts Modal - Native Dialog -->
|
||
<dialog id="shortcuts-modal" class="info-modal no-print"
|
||
_="on click call closeOnBackdrop(me, event)">
|
||
<div class="info-modal-content">
|
||
<button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{.UI.ShortcutsModal.Close}}">
|
||
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
||
</button>
|
||
|
||
<div class="info-modal-header">
|
||
<h2>{{.UI.ShortcutsModal.Title}}</h2>
|
||
<div class="info-modal-cv-title">
|
||
<span class="keyboard-icon-wrapper">
|
||
<iconify-icon icon="mdi:keyboard-outline" width="32" height="32"></iconify-icon>
|
||
</span>
|
||
{{.UI.ShortcutsModal.Subtitle}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-modal-body">
|
||
|
||
<!-- Zoom Shortcuts -->
|
||
<div class="shortcuts-section">
|
||
<h3 class="shortcuts-section-title">
|
||
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
|
||
{{.UI.ShortcutsModal.Sections.Zoom.Title}}
|
||
</h3>
|
||
<div class="shortcuts-list">
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>+</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomIn.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>−</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomOut.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>0</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomReset.Description}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View Controls -->
|
||
<div class="shortcuts-section">
|
||
<h3 class="shortcuts-section-title">
|
||
<iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
|
||
{{.UI.ShortcutsModal.Sections.ViewControls.Title}}
|
||
</h3>
|
||
<div class="shortcuts-list">
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Length
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLength.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Icons
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to View
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleTheme.Description}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="shortcuts-section">
|
||
<h3 class="shortcuts-section-title">
|
||
<iconify-icon icon="mdi:compass-outline" width="20" height="20"></iconify-icon>
|
||
{{.UI.ShortcutsModal.Sections.Navigation.Title}}
|
||
</h3>
|
||
<div class="shortcuts-list">
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
Menu → Expand All
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ExpandAll.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
Menu → Collapse All
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.CollapseAll.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
Click <kbd>↑</kbd> Button
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ScrollToTop.Description}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="shortcuts-section">
|
||
<h3 class="shortcuts-section-title">
|
||
<iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
|
||
{{.UI.ShortcutsModal.Sections.Actions.Title}}
|
||
</h3>
|
||
<div class="shortcuts-list">
|
||
<div class="shortcut-item shortcut-highlight">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> <kbd>K</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CmdK.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>P</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.Print.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-esc" width="14" height="14"></iconify-icon></kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CloseModal.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd>?</kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.ShowHelp.Description}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Browser Defaults -->
|
||
<div class="shortcuts-section">
|
||
<h3 class="shortcuts-section-title">
|
||
<iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
|
||
{{.UI.ShortcutsModal.Sections.Browser.Title}}
|
||
</h3>
|
||
<div class="shortcuts-list">
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Tab.Description}}</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<div class="shortcut-keys">
|
||
<kbd><iconify-icon icon="mdi:keyboard-return" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:keyboard-space" width="14" height="14"></iconify-icon></kbd>
|
||
</div>
|
||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Enter.Description}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
{{end}}
|