Keyboard shortcuts with Stimulus and Mousetrap

import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts
    Mousetrap.bind('/', () => this.focusSearch())
    Mousetrap.bind('c', () => this.compose())
    Mousetrap.bind('?', () => this.showHelp())
    Mousetrap.bind('g h', () => this.goHome())
    Mousetrap.bind('g p', () => this.goPosts())

    // Vim-style navigation
    Mousetrap.bind('j', () => this.nextItem())
    Mousetrap.bind('k', () => this.previousItem())
  }

  disconnect() {
    Mousetrap.reset()
  }

  focusSearch() {
    const searchInput = document.querySelector('[data-search-input]')
    if (searchInput) {
      searchInput.focus()
      searchInput.select()
      return false // Prevent default
    }
  }

  compose() {
    const composeButton = document.querySelector('[data-compose-button]')
    if (composeButton) {
      composeButton.click()
      return false
    }
  }

  showHelp() {
    const helpButton = document.querySelector('[data-help-button]')
    if (helpButton) {
      helpButton.click()
      return false
    }
  }

  goHome() {
    window.location.href = '/'
    return false
  }

  goPosts() {
    window.location.href = '/posts'
    return false
  }

  nextItem() {
    const items = document.querySelectorAll('[data-item]')
    const current = document.activeElement.closest('[data-item]')

    if (!current && items.length > 0) {
      items[0].focus()
    } else {
      const currentIndex = Array.from(items).indexOf(current)
      const next = items[currentIndex + 1]
      if (next) next.focus()
    }
    return false
  }

  previousItem() {
    const items = document.querySelectorAll('[data-item]')
    const current = document.activeElement.closest('[data-item]')

    if (current) {
      const currentIndex = Array.from(items).indexOf(current)
      const prev = items[currentIndex - 1]
      if (prev) prev.focus()
    }
    return false
  }
}