avo 4.0.0.beta.4 → 4.0.0.beta.6

data/app/javascript/js/controllers/color_scheme_switcher_controller.js

@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import Cookies from 'js-cookie'
 
 export default class extends Controller {
-  static targets = ['button', 'accentPanel', 'accentOption', 'themePanel', 'themeLabel', 'themeOption']
+  static targets = ['button', 'accentOption', 'themeLabel', 'themeOption']
 
   connect() {
     // Read from cookies (cookie is source of truth)
@@ -60,11 +60,6 @@ export default class extends Controller {
     this.applyTheme()
     this.updateThemeLabel()
     this.updateActiveThemeOption()
-
-    // Close the dropdown
-    if (this.hasThemePanelTarget) {
-      this.themePanelTarget.setAttribute('hidden', true)
-    }
   }
 
   previewTheme(event) {
@@ -89,11 +84,6 @@ export default class extends Controller {
     this.currentAccentValue = accent
     this.saveAccent()
     this.applyAccent()
-
-    // Close the dropdown
-    if (this.hasAccentPanelTarget) {
-      this.accentPanelTarget.setAttribute('hidden', true)
-    }
   }
 
   previewAccent(event) {

data/app/javascript/js/controllers/dropdown_menu_controller.js

@@ -18,25 +18,81 @@ export default class extends Controller {
     return this.menuTarget.hasAttribute('open')
   }
 
+  get focusableItems() {
+    return [...this.menuTarget.querySelectorAll('a, button')].filter(
+      (el) => !el.closest('[hidden]') && el.dataset.disabled !== 'true',
+    )
+  }
+
   clickOutside(e) {
     if (this.hasMenuTarget) {
       const isInExemptionContainer = this.hasExemptionContainersValue && this.exemptionContainerTargets.some((container) => container.contains(e.target))
 
       if (!isInExemptionContainer && this.isOpen) {
-        this.menuTarget.close()
+        this.close()
       }
     }
   }
 
   connect() {
     useClickOutside(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('keydown', this.boundHandleKeydown)
   }
 
   toggle() {
     if (this.isOpen) {
-      this.menuTarget.close()
+      this.close()
     } else {
-      this.menuTarget.show()
+      this.open()
+    }
+  }
+
+  open() {
+    this.menuTarget.show()
+    this.element.addEventListener('keydown', this.boundHandleKeydown)
+    document.body.classList.add('dropdown-open')
+    this.dispatch('open', { bubbles: true })
+    requestAnimationFrame(() => {
+      const items = this.focusableItems
+      if (items.length === 0) return
+
+      const activeItem = items.find((el) =>
+        [...el.classList].some((cls) => cls.endsWith('--active')) || el.getAttribute('aria-selected') === 'true',
+      )
+      ;(activeItem || items[0]).focus()
+    })
+  }
+
+  close() {
+    this.menuTarget.close()
+    this.element.removeEventListener('keydown', this.boundHandleKeydown)
+    document.body.classList.remove('dropdown-open')
+  }
+
+  handleKeydown(event) {
+    const items = this.focusableItems
+    if (items.length === 0) return
+
+    const currentIndex = items.indexOf(document.activeElement)
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        items[currentIndex < items.length - 1 ? currentIndex + 1 : 0].focus()
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        items[currentIndex > 0 ? currentIndex - 1 : items.length - 1].focus()
+        break
+      case 'Escape':
+        event.preventDefault()
+        this.close()
+        break
+      default:
     }
   }
 }

data/app/javascript/js/controllers/index_row_navigator_controller.js

@@ -0,0 +1,185 @@
+/**
+ * Index Row Navigator Controller
+ *
+ * Enables keyboard-driven navigation and hotkeys on table rows.
+ *
+ * FEATURES:
+ * - Arrow keys (↑↓) to cycle through rows with visual focus indicator
+ * - Enter key to navigate to the focused row's detail page
+ * - Space bar to toggle row selection checkbox
+ * - Escape to clear focus (or deselect all if no row is focused)
+ * - Row hotkeys: when a row is focused, hotkeys work for that row's controls
+ *
+ * ROW HOTKEY HANDLING:
+ * The @github/hotkey library scans data-hotkey attributes on page load.
+ * To avoid the "last-registered wins" problem with multiple row controls
+ * sharing the same hotkey, we:
+ * 1. Remove data-hotkey from all row controls before the library scans
+ * 2. Store original values in data-hotkey-original
+ * 3. When a row is focused, add data-hotkey back ONLY to that row
+ * 4. When a hotkey fires, prevent other handlers via stopImmediatePropagation
+ *
+ * KEY DESIGN DECISIONS:
+ * - currentIndex = -1 when no row is focused (safe default)
+ * - Guards prevent keyboard handling in modals, dropdowns, and input fields
+ */
+
+import { Controller } from '@hotwired/stimulus'
+
+const TYPING_SELECTOR = 'input, textarea, select, [contenteditable]'
+
+export default class extends Controller {
+  connect() {
+    this.currentIndex = -1
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleDropdownOpen = this.handleDropdownOpen.bind(this)
+    document.addEventListener('keydown', this.handleKeydown)
+    document.addEventListener('dropdown-menu:open', this.handleDropdownOpen)
+
+    // Remove data-hotkey from row controls before @github/hotkey library scans
+    // Store the original values so we can restore them for the focused row only
+    const controls = this.element.querySelectorAll('tr[data-visit-path] [data-hotkey]')
+    controls.forEach((control) => {
+      const hotkey = control.getAttribute('data-hotkey')
+      control.setAttribute('data-hotkey-original', hotkey)
+      control.removeAttribute('data-hotkey')
+    })
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.handleKeydown)
+    document.removeEventListener('dropdown-menu:open', this.handleDropdownOpen)
+  }
+
+  handleDropdownOpen() {
+    const rows = Array.from(this.element.querySelectorAll('tr[data-visit-path]'))
+    if (rows.length) this.clearFocus(rows)
+  }
+
+  handleKeydown(event) {
+    if (event.defaultPrevented) return
+    if (document.body.classList.contains('modal-open')) return
+    if (document.body.classList.contains('dropdown-open')) return
+    if (event.target.closest(TYPING_SELECTOR)) return
+    if (event.repeat && (event.key === 'Enter' || event.key === 'Escape' || event.key === ' ')) return
+
+    const rows = Array.from(this.element.querySelectorAll('tr[data-visit-path]'))
+    if (!rows.length) return
+
+    // Check for row hotkeys when a row is focused
+    if (this.currentIndex !== -1) {
+      if (this.handleRowHotkey(event, rows)) {
+        return
+      }
+    }
+
+    // Only handle navigation keys below
+    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape', ' '].includes(event.key)) return
+
+    this.currentIndex = this.normalizeCurrentIndex(rows.length)
+
+    if (event.key === 'Escape') {
+      if (this.currentIndex !== -1) {
+        event.preventDefault()
+        this.clearFocus(rows)
+
+        return
+      }
+
+      // No keyboard-focused row — clear checkbox selection if any
+      const selectAllController = this.application.getControllerForElementAndIdentifier(
+        this.element.querySelector('[data-controller~="item-select-all"]'),
+        'item-select-all',
+      )
+      if (selectAllController) {
+        const selected = JSON.parse(selectAllController.element.dataset.selectedResources || '[]')
+        if (selected.length > 0) {
+          event.preventDefault()
+          selectAllController.deselectAll()
+        }
+      }
+
+      return
+    }
+
+    if (event.key === 'Enter') {
+      if (this.currentIndex === -1) return
+      event.preventDefault()
+      const row = rows[this.currentIndex]
+      if (row?.dataset.visitPath) window.Turbo.visit(row.dataset.visitPath)
+
+      return
+    }
+
+    if (event.key === ' ') {
+      if (this.currentIndex === -1) return
+      event.preventDefault()
+      const checkbox = rows[this.currentIndex].querySelector('[data-item-select-all-target="itemCheckbox"]')
+      if (checkbox) checkbox.click()
+
+      return
+    }
+
+    // ArrowDown / ArrowUp
+    event.preventDefault()
+    if (event.key === 'ArrowDown') {
+      this.currentIndex = this.currentIndex < rows.length - 1 ? this.currentIndex + 1 : 0
+    } else {
+      this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : rows.length - 1
+    }
+
+    rows.forEach((r, i) => r.classList.toggle('is-keyboard-focused', i === this.currentIndex))
+    rows[this.currentIndex].scrollIntoView({ block: 'nearest' })
+    this.syncRowHotkeys(rows)
+  }
+
+  normalizeCurrentIndex(rowsLength) {
+    if (this.currentIndex < -1) return -1
+    if (this.currentIndex >= rowsLength) return rowsLength - 1
+
+    return this.currentIndex
+  }
+
+  syncRowHotkeys(rows) {
+    // Add data-hotkey back ONLY for the focused row
+    rows.forEach((row, index) => {
+      const controls = row.querySelectorAll('[data-hotkey-original]')
+      controls.forEach((control) => {
+        if (index === this.currentIndex) {
+          // Restore hotkey on focused row
+          const hotkeyValue = control.getAttribute('data-hotkey-original')
+          control.setAttribute('data-hotkey', hotkeyValue)
+        } else {
+          // Remove hotkey from non-focused rows
+          control.removeAttribute('data-hotkey')
+        }
+      })
+    })
+  }
+
+  handleRowHotkey(event, rows) {
+    const focusedRow = rows[this.currentIndex]
+    if (!focusedRow) return false
+
+    // The hotkey is now on the focused row (added by syncRowHotkeys)
+    const control = focusedRow.querySelector(`[data-hotkey="${event.key}"]`)
+    if (!control) return false
+
+    event.preventDefault()
+    event.stopImmediatePropagation() // Prevent @github/hotkey library from firing
+    control.click()
+
+    return true
+  }
+
+  clearFocus(rows) {
+    rows.forEach((r) => r.classList.remove('is-keyboard-focused'))
+    this.currentIndex = -1
+    // Clear all hotkeys when focus is cleared
+    rows.forEach((row) => {
+      row.querySelectorAll('[data-hotkey-original]').forEach((control) => {
+        control.removeAttribute('data-hotkey')
+      })
+    })
+  }
+}

data/app/javascript/js/controllers/item_select_all_controller.js

@@ -45,6 +45,16 @@ export default class extends Controller {
     this.selectedResourcesObserver.stop()
   }
 
+  deselectAll() {
+    this.itemCheckboxTargets.forEach((checkbox) => checkbox.checked && checkbox.click())
+    this.checkboxTarget.checked = false
+
+    if (this.selectAllEnabled()) {
+      this.selectAllOverlay(false)
+      this.resetUnselected()
+    }
+  }
+
   toggle(event) {
     const checked = !!event.target.checked
     this.itemCheckboxTargets.forEach((checkbox) => checkbox.checked !== checked && checkbox.click())

data/app/javascript/js/controllers/resource_search_controller.js

@@ -19,6 +19,10 @@ export default class extends Controller {
     this.#removeSpinner()
   }
 
+  blurOnEscape(event) {
+    if (event.key === 'Escape') this.inputTarget.blur()
+  }
+
   search() {
     this.debouncedSearch()
   }

data/app/javascript/js/controllers.js

@@ -21,6 +21,7 @@ import FilterController from './controllers/filter_controller'
 import FormController from './controllers/form_controller'
 import GridCoverEmptyStateController from './controllers/grid_cover_empty_state_controller'
 import HiddenInputController from './controllers/hidden_input_controller'
+import IndexRowNavigatorController from './controllers/index_row_navigator_controller'
 import InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
 import ItemSelectorController from './controllers/item_selector_controller'
@@ -78,6 +79,7 @@ application.register('filter', FilterController)
 application.register('form', FormController)
 application.register('grid-cover-empty-state', GridCoverEmptyStateController)
 application.register('hidden-input', HiddenInputController)
+application.register('index-row-navigator', IndexRowNavigatorController)
 application.register('input-autofocus', InputAutofocusController)
 application.register('item-select-all', ItemSelectAllController)
 application.register('item-selector', ItemSelectorController)

data/app/javascript/js/global_hotkeys.js

@@ -9,6 +9,9 @@
 
 import { install } from '@github/hotkey'
 
+const RESOURCE_SEARCH_INPUT_SELECTOR = '[data-resource-search-target="input"]'
+const findResourceSearchInput = () => document.querySelector(RESOURCE_SEARCH_INPUT_SELECTOR)
+
 // Use @github/hotkey for sequences and standard combos.
 const ELEMENT_HOTKEYS = [
   {
@@ -27,23 +30,55 @@ const DIRECT_HOTKEYS = [
     match: (e) => e.key === '?' || (e.shiftKey && e.code === 'Slash'),
     handle: () => document.dispatchEvent(new Event('persistent-modal:toggle')),
   },
+  {
+    // "/" → focus the resource search input on index pages.
+    match: (e) => e.key === '/'
+      && !e.shiftKey
+      && !e.metaKey
+      && !e.ctrlKey
+      && !e.altKey
+      && !!findResourceSearchInput(),
+    handle: () => {
+      const input = findResourceSearchInput()
+      if (input) input.focus()
+    },
+  },
 ]
 
 const TYPING_SELECTOR = 'input, textarea, select, [contenteditable]'
 
-export function installGlobalHotkeys() {
-  // When a hotkey fires on a DOM element that contains a <kbd>, mark it cold
-  // before letting the click proceed. preventDefault + requestAnimationFrame
-  // gives the browser one frame to paint the cold state before navigation starts.
-  document.addEventListener('hotkey-fire', (event) => {
-    const kbd = event.target.querySelector('kbd')
-    if (!kbd) return
+// hotkey-fire is dispatched with { cancelable: true } but NOT { bubbles: true },
+// so it never reaches a document-level listener. Must be registered on each element.
+function hotkeyFireHandler(event) {
+  const el = event.currentTarget
+  const hotkey = el.getAttribute('data-hotkey')
+
+  // Apply feedback to ALL elements sharing this hotkey (e.g. desktop + mobile sidebar).
+  // @github/hotkey fires on the last-registered element which may be hidden.
+  const kbds = hotkey
+    ? document.querySelectorAll(`[data-hotkey="${CSS.escape(hotkey)}"] kbd`)
+    : el.querySelectorAll('kbd')
 
-    event.preventDefault()
+  if (!kbds.length) return
+
+  event.preventDefault()
+  kbds.forEach((kbd) => {
     kbd.classList.add('kbd--called')
-    requestAnimationFrame(() => event.target.click())
+    kbd.addEventListener('transitionend', () => kbd.classList.remove('kbd--called'), { once: true })
+  })
+  // Double rAF: the first fires before paint (style committed), the second
+  // fires after the browser has actually painted the kbd--called state.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => el.click())
   })
+}
 
+export function attachHotkeyFeedback(el) {
+  el.removeEventListener('hotkey-fire', hotkeyFireHandler)
+  el.addEventListener('hotkey-fire', hotkeyFireHandler)
+}
+
+export function installGlobalHotkeys() {
   document.addEventListener('turbo:load', () => {
     document.querySelectorAll('kbd.kbd--called').forEach((kbd) => kbd.classList.remove('kbd--called'))
 

data/app/views/avo/actions/show.html.erb

@@ -52,7 +52,7 @@
 
       <% c.with_controls do %>
         <%= a_button type: :button,
-          data: { action: 'click->modal#close' },
+          data: { action: 'click->modal#close', hotkey: "Escape" },
           size: :md do %>
           <%= @action.cancel_button_label %>
         <% end %>
@@ -62,6 +62,7 @@
             size: :md,
             data: {
               target: :submit_action,
+              hotkey: "Mod+Enter",
             },
             autofocus: @fields.reject { |field| field.is_a?(Avo::Fields::HiddenField) }.empty? do %>
           <%= @action.confirm_button_label %>

data/app/views/avo/partials/_color_scheme_switcher.html.erb

@@ -1,24 +1,22 @@
 <div class="color-scheme-switcher"
      data-controller="color-scheme-switcher">
-  <div class="color-scheme-switcher__theme-wrapper"
-       data-controller="toggle">
-    <button type="button"
-            data-color-scheme-switcher-target="themeTrigger"
-            data-action="click->toggle#togglePanel"
-            class="color-scheme-switcher__button color-scheme-switcher__button--theme"
-            title="Neutral theme">
-      <span class="color-scheme-switcher__text" data-color-scheme-switcher-target="themeLabel">Brand</span>
-    </button>
-
-    <div class="color-scheme-switcher__theme-panel"
-         hidden
-         data-toggle-target="panel"
-         data-color-scheme-switcher-target="themePanel"
-         data-action="mouseleave->color-scheme-switcher#revertTheme">
-      <div class="color-scheme-switcher__theme-options">
+  <%= render Avo::UI::DropdownComponent.new(
+    classes: "color-scheme-switcher__theme-popover"
+  ) do |component| %>
+    <% component.with_trigger do %>
+      <button type="button"
+              data-action="<%= component.action %>"
+              class="color-scheme-switcher__button color-scheme-switcher__button--theme"
+              title="Neutral theme">
+        <span class="color-scheme-switcher__text" data-color-scheme-switcher-target="themeLabel">Brand</span>
+      </button>
+    <% end %>
+    <% component.with_items do %>
+      <div class="color-scheme-switcher__theme-options"
+           data-action="mouseleave->color-scheme-switcher#revertTheme">
         <% %w[brand slate stone gray zinc neutral taupe mauve mist olive].each do |theme| %>
           <button type="button"
-                  data-action="click->color-scheme-switcher#setTheme mouseenter->color-scheme-switcher#previewTheme"
+                  data-action="click->color-scheme-switcher#setTheme click->dropdown-menu#close mouseenter->color-scheme-switcher#previewTheme"
                   data-theme="<%= theme %>"
                   data-color-scheme-switcher-target="themeOption"
                   class="color-scheme-switcher__theme-option">
@@ -27,32 +25,31 @@
           </button>
         <% end %>
       </div>
-    </div>
-  </div>
-
-  <div class="color-scheme-switcher__accent-wrapper"
-       data-controller="toggle">
-    <button type="button"
-            data-color-scheme-switcher-target="button"
-            data-action="click->toggle#togglePanel"
-            class="color-scheme-switcher__button color-scheme-switcher__button--accent"
-            title="Accent color">
-      <%= svg "tabler/outline/color-swatch", class: "color-scheme-switcher__icon" %>
-      <span class="color-scheme-switcher__accent-badge">
-        <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--neutral"></span>
-        <% accent_colors.each do |accent| %>
-          <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--<%= accent %> bg-<%= accent %>-500"></span>
-        <% end %>
-      </span>
-      <span class="sr-only">Accent color</span>
-    </button>
+    <% end %>
+  <% end %>
 
-    <div class="color-scheme-switcher__accent-panel"
-         hidden
-         data-toggle-target="panel"
-         data-color-scheme-switcher-target="accentPanel"
-         data-action="mouseleave->color-scheme-switcher#revertAccent">
-      <div class="color-scheme-switcher__accent-options">
+  <%= render Avo::UI::DropdownComponent.new(
+    classes: "color-scheme-switcher__accent-popover"
+  ) do |component| %>
+    <% component.with_trigger do %>
+      <button type="button"
+              data-color-scheme-switcher-target="button"
+              data-action="<%= component.action %>"
+              class="color-scheme-switcher__button color-scheme-switcher__button--accent"
+              title="Accent color">
+        <%= svg "tabler/outline/color-swatch", class: "color-scheme-switcher__icon" %>
+        <span class="color-scheme-switcher__accent-badge">
+          <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--neutral"></span>
+          <% accent_colors.each do |accent| %>
+            <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--<%= accent %> bg-<%= accent %>-500"></span>
+          <% end %>
+        </span>
+        <span class="sr-only">Accent color</span>
+      </button>
+    <% end %>
+    <% component.with_items do %>
+      <div class="color-scheme-switcher__accent-options"
+           data-action="mouseleave->color-scheme-switcher#revertAccent">
         <% (['neutral'] + accent_colors).each do |accent| %>
           <%
             preview_class = if accent == "neutral"
@@ -62,19 +59,17 @@
             end
           %>
           <button type="button"
-                  data-action="click->color-scheme-switcher#setAccent mouseenter->color-scheme-switcher#previewAccent"
+                  data-action="click->color-scheme-switcher#setAccent click->dropdown-menu#close mouseenter->color-scheme-switcher#previewAccent"
                   data-accent="<%= accent %>"
                   data-color-scheme-switcher-target="accentOption"
-                  data-tippy="tooltip"
-                  title="<%= accent.capitalize %>"
                   class="color-scheme-switcher__accent-option">
             <span class="<%= preview_class %>"></span>
             <span class="sr-only"><%= accent.capitalize %></span>
           </button>
         <% end %>
       </div>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 
   <button type="button"
           data-color-scheme-switcher-target="button"

data/app/views/avo/partials/_view_toggle_button.html.erb

@@ -1,9 +1,13 @@
 <% if available_view_types.count > 1 %>
+  <%
+    view_type_hotkeys = { table: "v t", grid: "v g", map: "v m" }
+  %>
   <div class="flex">
     <div class="button-group">
       <% available_view_types.each do |type| %>
         <% view_info = Avo.view_type_manager.find(type) %>
         <% is_active_view = view_type.to_s == type.to_s %>
+        <% hotkey = view_type_hotkeys[type.to_sym] %>
 
         <%= a_link url_for(params.permit!.merge(view_type: type)).to_s,
           icon: is_active_view ? view_info&.[](:active_icon) : view_info&.[](:icon),
@@ -14,7 +18,8 @@
             tippy: 'tooltip',
             'turbo-frame': turbo_frame,
             control: "view-type-toggle-#{type}",
-            is_active: is_active_view
+            is_active: is_active_view,
+            **(hotkey ? { hotkey: hotkey, show_hotkey_badge: false } : {})
           }
         %>
       <% end %>

data/lib/avo/concerns/row_controls_configuration.rb

@@ -45,7 +45,7 @@ module Avo
         class_names(
           "text-end whitespace-nowrap px-3",
           "w-px": render_row_controls_on_the_left?,
-          "*:opacity-0 group-hover:*:opacity-100": row_controls_configurations[:show_on_hover],
+          "bg-transparent before:opacity-0 group-hover:before:opacity-100 *:opacity-0 group-hover:*:opacity-100": row_controls_configurations[:show_on_hover],
           "#{float_classes}": row_controls_configurations[:float]
         )
       end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.4" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.6" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.4
+  version: 4.0.0.beta.6
 platform: ruby
 authors:
 - Adrian Marin
@@ -645,6 +645,8 @@ files:
 - app/components/avo/sidebar/base_item_component.rb
 - app/components/avo/sidebar/group_component.html.erb
 - app/components/avo/sidebar/group_component.rb
+- app/components/avo/sidebar/heading_component.html.erb
+- app/components/avo/sidebar/heading_component.rb
 - app/components/avo/sidebar/link_component.html.erb
 - app/components/avo/sidebar/link_component.rb
 - app/components/avo/sidebar/section_component.html.erb
@@ -753,6 +755,7 @@ files:
 - app/javascript/js/controllers/form_controller.js
 - app/javascript/js/controllers/grid_cover_empty_state_controller.js
 - app/javascript/js/controllers/hidden_input_controller.js
+- app/javascript/js/controllers/index_row_navigator_controller.js
 - app/javascript/js/controllers/input_autofocus_controller.js
 - app/javascript/js/controllers/item_select_all_controller.js
 - app/javascript/js/controllers/item_selector_controller.js