Add shortcut for writing new comment

app/javascript/retrospring/features/answerbox/comment/hotkey.ts

@@ -0,0 +1,7 @@
+export function commentHotkeyHandler(event: Event): void {
+  const button = event.target as HTMLButtonElement;
+  const id = button.dataset.aId;
+
+  document.querySelector(`#ab-comments-section-${id}`).classList.remove('d-none');
+  document.querySelector<HTMLElement>(`[name="ab-comment-new"][data-a-id="${id}"]`).focus();
+}

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -4,10 +4,12 @@ import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, comm
 import { commentReportHandler } from "./report";
 import { commentSmileHandler } from "./smile";
 import { commentToggleHandler } from "./toggle";
+import { commentHotkeyHandler } from "retrospring/features/answerbox/comment/hotkey";
 
 export default (): void => {
   registerEvents([
     { type: 'click', target: '[name=ab-comments]', handler: commentToggleHandler, global: true },
+    { type: 'click', target: '[name=ab-open-and-comment]', handler: commentHotkeyHandler, global: true },
     { type: 'click', target: '[name=ab-smile-comment]', handler: commentSmileHandler, global: true },
     { type: 'click', target: '[data-action=ab-comment-report]', handler: commentReportHandler, global: true },
     { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },

app/views/answerbox/_comments.html.haml

@@ -25,6 +25,7 @@
                 %span.caret
               = render "actions/comment", comment: comment, answer: a
 - if user_signed_in?
+  %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } }
   .comment__compose-wrapper{
     name: "ab-comment-new-group",
     data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }