Add '/' keyboard shortcut to focus search input in dashboard

[Danaqodo]

PR Type

Enhancement

---

Description

• Add keyboard shortcut functionality to dashboard

• Implement '/' key to focus search input

• Include input field detection to prevent conflicts

---

Diagram Walkthrough

flowchart LR
  A["User presses '/' key"] --> B["Check if typing in input field"]
  B --> C["Focus search input if not typing"]
  C --> D["Search input becomes active"]

Loading

File Walkthrough

	Relevant files
Enhancement	index.html Add keyboard shortcut for search focus                                      index.html Add keydown event listener for '/' shortcut Implement focus logic for search input field Include safeguards to prevent conflicts with active inputs +22/-0

---

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Selector Fragility The CSS selector .head .search input[type="search"] is quite specific and may break if the HTML structure changes. Consider using a more robust selector like an ID or data attribute. const searchInput = document.querySelector('.head .search input[type="search"]'); if (searchInput) { Missing Cleanup The event listener is added but never removed, which could lead to memory leaks in single-page applications or if this script runs multiple times. document.addEventListener('keydown', function(e) { // Ignore if typing in an input, textarea, or contenteditable

[qodo-code-review]

PR Code Suggestions ✨

No code suggestions found for the PR.

[almog-lv]

Error Handling for Missing Search Input

Location: index.html lines 599-605

The current implementation silently fails if the search input selector doesn't match any element, which could make debugging difficult if the HTML structure changes.

Current code:

if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
  const searchInput = document.querySelector('.head .search input[type="search"]');
  if (searchInput) {
    e.preventDefault();
    searchInput.focus();
  }
}

Suggested improvement:

if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
  const searchInput = document.querySelector('.head .search input[type="search"]');
  if (searchInput) {
    e.preventDefault();
    searchInput.focus();
  } else {
    console.warn('Search input not found - keyboard shortcut unavailable');
  }
}

Benefits:

• Helps with debugging if the HTML structure changes
• Provides visibility into when the shortcut is not working
• Makes maintenance easier for future developers

[almog-lv]

Consider extracting the JavaScript code to an external file (e.g., js/dashboard.js) for better code organization and maintainability. This would separate concerns and make the HTML cleaner, especially as more interactive features are added to the dashboard.

[almog-lv]

Consider extracting the JavaScript code to an external file (e.g., js/dashboard.js) for better code organization and maintainability. This would separate concerns and make the HTML cleaner, especially as more interactive features are added to the dashboard.

For example:

• Create js/dashboard.js with the keyboard shortcut logic
• Replace the inline script with <script src="js/dashboard.js"></script>
• This approach makes the code more modular and easier to test