Keyboard shortcuts for navigating to the next message:

Previous thread: k, ctrl-p, up
Next thread: j, ctrl-j, down
Previous message in this thread: h, ctrl-b, left
Next message in this thread: l, ctrl-f, right

Author: amatsuda

app/javascript/controllers/keyboard_nav_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  handleKeydown(event) {
+    // Don't trigger if user is typing in an input field
+    if (event.target.matches('input, textarea, select')) {
+      return
+    }
+
+    const key = event.key.toLowerCase()
+
+    // Define key mappings
+    const keyMappings = {
+      // Arrow keys
+      'arrowup': 'prev-thread',
+      'arrowdown': 'next-thread',
+      'arrowleft': 'prev-message',
+      'arrowright': 'next-message',
+      // Vim-style (only when Ctrl is not pressed)
+      'k': !event.ctrlKey ? 'prev-thread' : null,
+      'j': !event.ctrlKey ? 'next-thread' : null,
+      'h': !event.ctrlKey ? 'prev-message' : null,
+      'l': !event.ctrlKey ? 'next-message' : null,
+      // Emacs-style (only when Ctrl is pressed)
+      'p': event.ctrlKey ? 'prev-thread' : null,
+      'n': event.ctrlKey ? 'next-thread' : null,
+      'b': event.ctrlKey ? 'prev-message' : null,
+      'f': event.ctrlKey ? 'next-message' : null,
+    }
+
+    const navAction = keyMappings[key]
+    if (!navAction) return
+
+    const link = this.element.querySelector(`[data-nav="${navAction}"]`)
+    if (link && !link.classList.contains('cursor-not-allowed')) {
+      event.preventDefault()
+      link.click()
+    }
+  }
+}

app/views/messages/_message.html.erb

@@ -34,13 +34,13 @@
   <% end %>
 
   <% if defined?(@prev_thread) || defined?(@next_thread) || defined?(@prev_message_in_thread) || defined?(@next_message_in_thread) %>
-    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 bg-gray-50 dark:bg-gray-900">
+    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 bg-gray-50 dark:bg-gray-900" data-controller="keyboard-nav">
       <div class="grid grid-cols-2 gap-4">
         <div>
           <h3 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Thread</h3>
           <div class="flex gap-2">
             <% if @prev_thread %>
-              <%= link_to [message.list, @prev_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance'} do %>
+              <%= link_to [message.list, @prev_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance', nav: 'prev-thread'} do %>
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                 </svg>
@@ -55,7 +55,7 @@
               </span>
             <% end %>
             <% if @next_thread %>
-              <%= link_to [message.list, @next_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance'} do %>
+              <%= link_to [message.list, @next_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance', nav: 'next-thread'} do %>
                 Next
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
@@ -75,7 +75,7 @@
           <h3 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">In This Thread</h3>
           <div class="flex gap-2">
             <% if @prev_message_in_thread %>
-              <%= link_to [message.list, @prev_message_in_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance'} do %>
+              <%= link_to [message.list, @prev_message_in_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance', nav: 'prev-message'} do %>
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                 </svg>
@@ -90,7 +90,7 @@
               </span>
             <% end %>
             <% if @next_message_in_thread %>
-              <%= link_to [message.list, @next_message_in_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance'} do %>
+              <%= link_to [message.list, @next_message_in_thread], class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", data: {turbo_frame: 'message_content', turbo_action: 'advance', nav: 'next-message'} do %>
                 Next
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>