ui improvements, keyboard shortcuts, and toast not

2026-01-08 22:49:48 -05:00
parent 1a74536079
commit eda9c61724
7 changed files with 245 additions and 9 deletions
--- a/assets/js/keyboard-shortcuts.js
+++ b/assets/js/keyboard-shortcuts.js
@@ -0,0 +1,81 @@
+/**
+ * Keyboard shortcuts for power users
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('keydown', function(e) {
+        // Skip if user is typing in an input/textarea
+        if (e.target.tagName === 'INPUT' || 
+            e.target.tagName === 'TEXTAREA' || 
+            e.target.isContentEditable) {
+            // Allow ESC to exit edit mode even when in input
+            if (e.key === 'Escape') {
+                e.target.blur();
+                const editButton = document.getElementById('editButton');
+                if (editButton && editButton.classList.contains('active')) {
+                    editButton.click();
+                }
+            }
+            return;
+        }
+
+        // Ctrl/Cmd + E: Toggle edit mode (on ticket pages)
+        if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
+            e.preventDefault();
+            const editButton = document.getElementById('editButton');
+            if (editButton) {
+                editButton.click();
+                toast.info('Edit mode ' + (editButton.classList.contains('active') ? 'enabled' : 'disabled'));
+            }
+        }
+
+        // Ctrl/Cmd + S: Save ticket (on ticket pages)
+        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+            e.preventDefault();
+            const editButton = document.getElementById('editButton');
+            if (editButton && editButton.classList.contains('active')) {
+                editButton.click();
+                toast.success('Saving ticket...');
+            }
+        }
+
+        // ESC: Cancel edit mode
+        if (e.key === 'Escape') {
+            const editButton = document.getElementById('editButton');
+            if (editButton && editButton.classList.contains('active')) {
+                // Reset without saving
+                window.location.reload();
+            }
+        }
+
+        // Ctrl/Cmd + K: Focus search (on dashboard)
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            const searchBox = document.querySelector('.search-box');
+            if (searchBox) {
+                searchBox.focus();
+                searchBox.select();
+            }
+        }
+
+        // ? : Show keyboard shortcuts help
+        if (e.key === '?' && !e.shiftKey) {
+            showKeyboardHelp();
+        }
+    });
+});
+
+function showKeyboardHelp() {
+    const helpText = `
+╔════════════════════════════════════════╗
+║      KEYBOARD SHORTCUTS                ║
+╠════════════════════════════════════════╣
+║  Ctrl/Cmd + E : Toggle Edit Mode       ║
+║  Ctrl/Cmd + S : Save Changes           ║
+║  Ctrl/Cmd + K : Focus Search           ║
+║  ESC          : Cancel Edit/Close      ║
+║  ?            : Show This Help         ║
+╚════════════════════════════════════════╝
+    `;
+    toast.info(helpText, 5000);
+}