Adds N shortcut to open inline card form

Adds press N shortcut tip

Author: viniciusoyama

app/javascript/controllers/grouping_column_controller.js

@@ -33,4 +33,11 @@ export default class extends Controller {
   closeForm() {
     this.hideInlineCardForm();
   }
+
+  nWasPressed(e) {
+    if (document.activeElement == document.body && this.element.matches(':hover')) {
+      e.preventDefault()
+      this.showInlineCardForm()
+    }
+  }
 }

app/views/groupings/issues/_form.html.erb

@@ -28,6 +28,7 @@
             <div data-resizable-input-target="replica" class=" text-base p-2 whitespace-pre-line"></div>
 
             <%= f.text_area :title, required: true,
+              autocomplete: 'off',
               autofocus: true,
               class: "text-base p-2 input-primary absolute w-full left-0 top-0 right-0 bottom-0 overflow-y-hidden",
               "data-resizable-input-target": "input"

app/views/visualizations/_column.html.erb

@@ -1,6 +1,7 @@
 <li class="w-64 max-h-full flex flex-col shrink-0 p-2 border bg-body-contrast border-background-100 rounded-md shadow-xs snap-center cpy-grouping js-sortable-container"
   id="<%= dom_id(grouping) %>"
   data-controller="grouping-column"
+  data-action="keypress.n@window->grouping-column#nWasPressed"
   >
   <header class="flex flex-row flex-nowrap gap-x-1 mb-4 px-2 relative" data-controller="dropdown">
     <%= link_to edit_visualization_grouping_path(grouping.visualization_id, grouping.id), class: "grow font-semibold truncate text-readable-content-500 hover:text-readable-content-700", data: { turbo_frame: 'grouping_form' } do %>
@@ -56,12 +57,13 @@
   </ul>
 
   <%= render partial: 'visualizations/_column/inline_card_form', locals: { grouping: } %>
-  <button class="cpy-inline-create-button flex flex-row items-center mt-4 p-2 hover:bg-background-100 rounded-md"
+  <button class="cpy-inline-create-button group flex flex-row items-center mt-4 p-2 hover:bg-background-100 rounded-md"
     data-grouping-column-target="showFormButton"
     data-action="click->grouping-column#showInlineCardForm">
     <i class="fa-solid fa-plus mr-2"></i>
     <p class="grow text-left">
       <%= t('visualizations.column_menu.create_issue') %>
     </p>
+    <span class="group-hover:flex hidden text-xs font-medium ml-2"><%= t("actions.press") %> N</span>
   </button>
 </li>

app/views/visualizations/_column/_inline_card_form.html.erb

@@ -9,7 +9,10 @@
   }) do |f| %>
 
   <div class="mb-2 w-full">
-    <%= f.text_field :title, required: true, class: "border-2 border-primary-500 focus:border-primary-500 active:border-primary-500 hover:border-primary-500 bg-primary-50 p-4 rounded-xl text-sm w-full text-sm text-readable-content-500", id: nil %>
+    <%= f.text_field :title,
+      autocomplete: 'off',
+      required: true,
+      class: "border-2 border-primary-500 focus:border-primary-500 active:border-primary-500 hover:border-primary-500 bg-primary-50 p-4 rounded-xl text-sm w-full text-sm text-readable-content-500", id: nil %>
   </div>
 
   <div class="flex gap-2 items-stretch ">

app/views/visualizations/groupings/_form.html.erb

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="space-y-4">
-      <%= form_for([visualization, grouping], html: { class: 'flex flex-col gap-2' }) do |f| %>
+      <%= form_for([visualization, grouping], html: { autocomplete: 'off', class: 'flex flex-col gap-2' }) do |f| %>
         <% if grouping.errors.any? %>
           <div class="flex rounded-md w-full border-l-6 border-alert-500 bg-alert-500 bg-opacity-[15%] px-4 py-1 mb-5 shadow-sm md:p-4 text-sm text-alert-500">
             <%= grouping.errors.full_messages.to_sentence.capitalize %>

config/locales/app.en.yml

@@ -52,6 +52,7 @@ en:
     filter: "Filter"
     clear_filter: "clear filter"
     preview: "Preview"
+    press: "Press"
   flash:
     change_success: "Change successfully made."
     change_error: "Change could not be made."

config/locales/app.pt-BR.yml

@@ -53,6 +53,7 @@ pt-BR:
     filter: "Filtrar"
     clear_filter: "Limpar filtro"
     preview: "Pré-visualização"
+    press: "Pressione"
   flash:
     change_success: "Alteração feita com sucesso."
     change_error: "Houve um erro na hora de realizar a alteração."