cv-site/prompts/done/001-implement-keyboard-shortcuts-help.md

Implement a keyboard shortcuts help feature that displays all available keyboard shortcuts in the CV web application. This feature will help users discover and use keyboard shortcuts efficiently, improving the overall user experience and accessibility. This is a CV (resume) web application built with: - Backend: Go with Hono-like routing patterns - Frontend: HTMX + Hyperscript for interactivity - Styling: Modern CSS with native HTML5 elements - Philosophy: Minimal JavaScript, progressive enhancement, native browser APIs

The app already has:

• An info modal using native <dialog> element (reference pattern)
• Fixed action buttons (info icon, back-to-top, print, etc.)
• Keyboard shortcuts implemented but not documented
• HTMX-driven interactions with server endpoints

Before starting, read the project documentation to understand the application structure and conventions: @CLAUDE.md @MODERN-WEB-TECHNIQUES.md

Use the architecture agent to thoroughly analyze the codebase and identify ALL keyboard shortcuts and user actions:

1. Examine documentation to understand application features and architecture
2. Review all Go endpoints to identify available actions (toggles, language switching, etc.)
3. Search for keyboard event handlers in hyperscript and JavaScript files
4. Identify interactive elements (buttons, toggles, forms) and their functions
5. Analyze HTMX attributes (hx-post, hx-get) to understand available actions

Create a comprehensive list of:

• Existing keyboard shortcuts (Ctrl+P for print, Ctrl+0 for zoom reset, etc.)
• Actions that could benefit from keyboard shortcuts
• Standard browser shortcuts that work in the app (Ctrl+F for find, etc.)

1. **Icon Button**: Create a keyboard shortcuts help button - Position: Near the existing info icon in the fixed action buttons area - Icon: Keyboard icon (use iconify-icon like other buttons) - Behavior: Opens keyboard shortcuts modal on click - Styling: Consistent with existing action buttons

2. Modal Dialog: Create a keyboard shortcuts help modal

   • Use native <dialog> element (follow info modal pattern)
   • Display all keyboard shortcuts in organized groups
   • Include descriptions of what each shortcut does
   • Clean, readable layout with proper spacing

3. Shortcuts Organization: Group shortcuts logically

   • Navigation shortcuts (scroll, jump to sections)
   • View controls (zoom, toggles)
   • Actions (print, download)
   • Browser shortcuts (search, refresh)

4. Accessibility:

   • Proper ARIA labels for the button
   • Keyboard navigation (ESC to close, Tab for focus)
   • Screen reader friendly descriptions

5. Bilingual Support:

   • Spanish and English translations
   • Follow existing i18n patterns in the codebase

Follow the existing architectural patterns in the codebase:

1. Modal Pattern:

   • Use native <dialog> element (see existing info modal as reference)
   • Include ::backdrop styling for overlay
   • Close button with onclick="this.closest('dialog').close()"
   • Simple inline onclick for opening: onclick="document.getElementById('shortcuts-modal').showModal()"

2. Button Pattern:

   • Follow fixed action button styling
   • Use iconify-icon for the keyboard icon (find appropriate icon from mdi: collection)
   • Position using existing CSS patterns for action buttons

3. File Structure:

   • Create modal template in ./templates/partials/modals/ or similar
   • Add button to appropriate location (likely near info button)
   • Update CSS if needed for styling

4. NO JavaScript required for basic open/close (use native dialog features)

   • Only use inline onclick attributes following existing patterns
   • Leverage browser's built-in dialog functionality

WHY these patterns matter:

• Native <dialog> provides built-in accessibility, focus management, and ESC key handling
• Inline onclick keeps code simple and colocated with markup (following project philosophy)
• Consistent styling ensures professional, cohesive UI
• Minimal JavaScript aligns with project's "almost 0 JavaScript" goal

<shortcuts_content> Based on your research, include shortcuts such as (but not limited to):

Zoom Controls:

• Ctrl/Cmd + Plus: Zoom in
• Ctrl/Cmd + Minus: Zoom out
• Ctrl/Cmd + 0: Reset zoom to 100%

Actions:

• Ctrl/Cmd + P: Print friendly version

Browser Shortcuts (mention these too):

• Ctrl/Cmd + F: Find in page
• Ctrl/Cmd + R: Refresh page

Add any other shortcuts discovered during research.

Organize them in a clean table or list format with:

• Shortcut keys (visual representation)
• Description of action
• Bilingual labels (ES/EN) </shortcuts_content>

Create/modify the following files:

1. ./templates/partials/modals/shortcuts-modal.html - Keyboard shortcuts modal dialog
2. Modify the appropriate template to add the keyboard shortcuts button (likely where other action buttons are)
3. Update CSS if needed for button positioning and modal styling (follow existing patterns)

Use relative paths and ensure all changes integrate seamlessly with existing code.

Before declaring complete, verify:

1. Research Complete:

   • Run searches to confirm all keyboard shortcuts are identified
   • Check that all major user actions are covered

2. Functionality:

   • Button appears in correct position near info icon
   • Clicking button opens modal
   • ESC key closes modal
   • Backdrop click closes modal
   • Close button works

3. Visual Integration:

   • Button styling matches other action buttons
   • Modal styling matches info modal
   • Layout is clean and readable

4. Bilingual:

   • All text has Spanish and English versions
   • Language switching works correctly

5. Accessibility:

   • ARIA labels present
   • Keyboard navigation works
   • Focus management is correct

<success_criteria>

• Keyboard shortcuts help button visible and clickable near info icon
• Modal displays comprehensive list of all keyboard shortcuts
• Modal follows native <dialog> pattern (like info modal)
• All shortcuts organized logically with clear descriptions
• Bilingual support (ES/EN) working correctly
• Zero JavaScript required for basic functionality (native dialog features only)
• Code follows project philosophy and existing patterns </success_criteria>