tinker_tickets/assets/js/keyboard-shortcuts.js

/**
 * Keyboard shortcuts for power users.
 * App-specific shortcuts registered via lt.keys.on() from web_template/base.js.
 * ESC, Ctrl+K, and ? are handled by lt.keys.initDefaults().
 */

// Track currently selected row for J/K navigation
let currentSelectedRowIndex = -1;

function navigateTableRow(direction) {
    const rows = document.querySelectorAll('tbody tr');
    if (rows.length === 0) return;

    rows.forEach(row => row.classList.remove('keyboard-selected'));

    if (direction === 'next') {
        currentSelectedRowIndex = Math.min(currentSelectedRowIndex + 1, rows.length - 1);
    } else {
        currentSelectedRowIndex = Math.max(currentSelectedRowIndex - 1, 0);
    }

    const selectedRow = rows[currentSelectedRowIndex];
    if (selectedRow) {
        selectedRow.classList.add('keyboard-selected');
        selectedRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

function showKeyboardHelp() {
    if (document.getElementById('keyboardHelpModal')) return;

    const modal = document.createElement('div');
    modal.id = 'keyboardHelpModal';
    modal.className = 'lt-modal-overlay';
    modal.setAttribute('aria-hidden', 'true');
    modal.setAttribute('role', 'dialog');
    modal.setAttribute('aria-modal', 'true');
    modal.setAttribute('aria-labelledby', 'keyboardHelpModalTitle');
    modal.innerHTML = `
        <div class="lt-modal lt-modal-sm">
            <div class="lt-modal-header">
                <span class="lt-modal-title" id="keyboardHelpModalTitle">KEYBOARD SHORTCUTS</span>
                <button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
            </div>
            <div class="lt-modal-body">
                <h4 class="kb-section-heading">Navigation</h4>
                <table class="kb-shortcuts-table">
                    <tr><td><kbd>J</kbd></td><td>Next ticket in list</td></tr>
                    <tr><td><kbd>K</kbd></td><td>Previous ticket in list</td></tr>
                    <tr><td><kbd>Enter</kbd></td><td>Open selected ticket</td></tr>
                    <tr><td><kbd>G</kbd> then <kbd>D</kbd></td><td>Go to Dashboard</td></tr>
                </table>
                <h4 class="kb-section-heading">Actions</h4>
                <table class="kb-shortcuts-table">
                    <tr><td><kbd>N</kbd></td><td>New ticket</td></tr>
                    <tr><td><kbd>C</kbd></td><td>Focus comment box</td></tr>
                    <tr><td><kbd>Ctrl/Cmd+E</kbd></td><td>Toggle Edit Mode</td></tr>
                    <tr><td><kbd>Ctrl/Cmd+S</kbd></td><td>Save Changes</td></tr>
                </table>
                <h4 class="kb-section-heading">Quick Status (Ticket Page)</h4>
                <table class="kb-shortcuts-table">
                    <tr><td><kbd>1</kbd></td><td>Set Open</td></tr>
                    <tr><td><kbd>2</kbd></td><td>Set Pending</td></tr>
                    <tr><td><kbd>3</kbd></td><td>Set In Progress</td></tr>
                    <tr><td><kbd>4</kbd></td><td>Set Closed</td></tr>
                </table>
                <h4 class="kb-section-heading">Other</h4>
                <table class="kb-shortcuts-table no-margin">
                    <tr><td><kbd>Ctrl/Cmd+K</kbd></td><td>Focus Search</td></tr>
                    <tr><td><kbd>ESC</kbd></td><td>Close Modal / Cancel</td></tr>
                    <tr><td><kbd>?</kbd></td><td>Show This Help</td></tr>
                </table>
            </div>
            <div class="lt-modal-footer">
                <button class="lt-btn lt-btn-ghost" data-modal-close>CLOSE</button>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    lt.modal.open('keyboardHelpModal');
}

document.addEventListener('DOMContentLoaded', function() {
    if (!window.lt) return;

    // Ctrl+E: Toggle edit mode (ticket pages)
    lt.keys.on('ctrl+e', function() {
        const editButton = document.getElementById('editButton');
        if (editButton) {
            editButton.click();
            lt.toast.info('Edit mode ' + (editButton.classList.contains('active') ? 'enabled' : 'disabled'));
        }
    });

    // Ctrl+S: Save ticket (ticket pages)
    lt.keys.on('ctrl+s', function() {
        const editButton = document.getElementById('editButton');
        if (editButton && editButton.classList.contains('active')) {
            editButton.click();
            lt.toast.success('Saving ticket...');
        }
    });

    // ?: Show keyboard shortcuts help (lt.keys.initDefaults also handles this, but we override to show our modal)
    lt.keys.on('?', function() {
        showKeyboardHelp();
    });

    // J: Next row
    lt.keys.on('j', () => navigateTableRow('next'));

    // K: Previous row
    lt.keys.on('k', () => navigateTableRow('prev'));

    // Enter: Open selected ticket
    lt.keys.on('enter', function() {
        const selectedRow = document.querySelector('tbody tr.keyboard-selected');
        if (selectedRow) {
            const ticketLink = selectedRow.querySelector('a[href*="/ticket/"]');
            if (ticketLink) window.location.href = ticketLink.href;
        }
    });

    // N: New ticket
    lt.keys.on('n', function() {
        const newTicketBtn = document.querySelector('a[href*="/create"]');
        if (newTicketBtn) window.location.href = newTicketBtn.href;
    });

    // C: Focus comment box
    lt.keys.on('c', function() {
        const commentBox = document.getElementById('newComment');
        if (commentBox) {
            commentBox.focus();
            commentBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });

    // G then D: Go to Dashboard (vim-style)
    lt.keys.on('g', function() {
        window._pendingG = true;
        setTimeout(() => { window._pendingG = false; }, 1000);
    });
    lt.keys.on('d', function() {
        if (window._pendingG) {
            window._pendingG = false;
            window.location.href = '/';
        }
    });

    // 1-4: Quick status change on ticket page
    ['1', '2', '3', '4'].forEach(key => {
        lt.keys.on(key, function() {
            const statusSelect = document.getElementById('statusSelect');
            if (statusSelect && !document.querySelector('.lt-modal-overlay[aria-hidden="false"]')) {
                const statusMap = { '1': 'Open', '2': 'Pending', '3': 'In Progress', '4': 'Closed' };
                const targetStatus = statusMap[key];
                const option = Array.from(statusSelect.options).find(opt => opt.value === targetStatus);
                if (option && !option.disabled) {
                    statusSelect.value = targetStatus;
                    statusSelect.dispatchEvent(new Event('change'));
                }
            }
        });
    });
});