avo 4.0.0.beta.2 → 4.0.0.beta.4

data/app/components/avo/keyboard_shortcuts_component.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+class Avo::KeyboardShortcutsComponent < Avo::BaseComponent
+  def sections
+    @sections ||= [
+      build_section(
+        "Navigation",
+        [
+          shortcut(action: "Show keyboard shortcuts", keys: ["?"]),
+          shortcut(action: "Focus resource search", keys: {mac: ["Cmd", "K"], other: ["Ctrl", "K"]}),
+          shortcut(action: "Toggle sidebar", keys: {mac: ["Cmd", "\\"], other: ["Ctrl", "\\"]}),
+          shortcut(action: "Close modal", keys: ["Esc"]),
+          shortcut(
+            action: "Navigate options in the modal",
+            any_of: [["↑"], ["↓"]],
+            keys_aria_label: "Up arrow or down arrow"
+          ),
+          shortcut(action: "Go back", keys: ["B"])
+        ]
+      ),
+      build_section(
+        "Edit view",
+        [
+          shortcut(action: "Submit form", keys: {mac: ["Cmd", "↵"], other: ["Ctrl", "↵"]}),
+          shortcut(action: "Unfocus field", keys: ["Esc"])
+        ]
+      ),
+      build_section(
+        "Show view",
+        [
+          shortcut(action: "Delete record", keys: ["D"]),
+          shortcut(action: "Edit record", keys: ["E"])
+        ]
+      ),
+      build_section(
+        "Index view",
+        [
+          shortcut(action: "Create new record", keys: ["C"])
+        ]
+      )
+    ]
+  end
+
+  def render_shortcut_keys(shortcut)
+    if shortcut[:any_of].present?
+      render_shortcut_alternatives(shortcut[:any_of])
+    else
+      render_chord(shortcut[:keys])
+    end
+  end
+
+  private
+
+  def build_section(title, shortcuts)
+    {
+      id: "hotkey-group-#{title.parameterize.underscore}",
+      title: title,
+      shortcuts: shortcuts
+    }
+  end
+
+  def shortcut(action:, keys: nil, any_of: nil, keys_aria_label: nil)
+    {
+      action: action,
+      keys: keys,
+      any_of: any_of,
+      keys_aria_label: keys_aria_label
+    }
+  end
+
+  def render_shortcut_alternatives(chords)
+    helpers.safe_join(
+      chords.flat_map.with_index do |chord, index|
+        [
+          (tag.span("or", class: "hotkey__or", aria: {hidden: true}) if index.positive?),
+          render_chord(chord)
+        ].compact
+      end
+    )
+  end
+
+  def render_chord(chord)
+    tag.span class: "hotkey__combo" do
+      helpers.safe_join(chord_fragments(chord))
+    end
+  end
+
+  def chord_fragments(chord)
+    return platform_split_fragments(chord) if platform_split_chord?(chord)
+
+    key_fragments(Array(chord))
+  end
+
+  def platform_split_fragments(chord)
+    [
+      platform_modifier_key,
+      *key_fragments(chord[:mac].drop(1), leading_separator: true)
+    ]
+  end
+
+  def key_fragments(keys, leading_separator: false)
+    keys.flat_map.with_index do |key, index|
+      [
+        (tag.span("+", class: "hotkey__key-separator") if leading_separator || index.positive?),
+        tag.kbd(key)
+      ].compact
+    end
+  end
+
+  def platform_modifier_key
+    tag.kbd do
+      helpers.safe_join([
+        tag.abbr("⌘", title: "Command", class: "no-underline os-pc:hidden"),
+        tag.abbr("CTRL", title: "CTRL", class: "no-underline os-mac:hidden")
+      ])
+    end
+  end
+
+  def platform_split_chord?(chord)
+    chord.is_a?(Hash) &&
+      chord[:mac].is_a?(Array) &&
+      chord[:other].is_a?(Array) &&
+      chord[:mac].size == chord[:other].size &&
+      chord[:mac].first.to_s == "Cmd" &&
+      chord[:other].first.to_s == "Ctrl"
+  end
+end

data/app/components/avo/media_library/item_details_component.html.erb

@@ -1,5 +1,5 @@
 <div class="relative flex flex-col w-full max @container/details">
-  <%= link_to helpers.svg('heroicons/outline/x-mark', class: "size-6"), helpers.avo.media_library_index_path,
+  <%= link_to helpers.svg('tabler/outline/x', class: "size-6"), helpers.avo.media_library_index_path,
     class: "absolute z-10 inset-auto end-0 top-0 mt-2 me-2 block bg-white p-1 rounded-lg text-slate-600 hover:text-slate-900",
     title: t('avo.close'),
     data: {
@@ -15,7 +15,7 @@
         <%= video_tag(helpers.main_app.url_for(@blob), controls: true, preload: false, class: 'w-full') %>
       <% else %>
         <div class="relative h-full flex flex-col justify-center items-center w-full bg-slate-100">
-          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
         </div>
       <% end %>
       <div class="flex justify-center w-full text-sm gap-4">

data/app/components/avo/media_library/list_component.html.erb

@@ -28,7 +28,7 @@
             media_library_attach_target: 'dropzone',
             action: 'click->media-library-attach#triggerFileBrowser',
           } do %>
-          <%= helpers.svg 'heroicons/outline/cloud-arrow-up', class: 'size-6 text-gray-400' %> Upload a file
+          <%= helpers.svg 'tabler/outline/cloud-upload', class: 'size-6 text-gray-400' %> Upload a file
           <small>Click to browse or drag and drop</small>
         <% end %>
 

data/app/components/avo/media_library/list_item_component.html.erb

@@ -3,7 +3,7 @@
   class: "relative group min-h-full max-w-full flex-1 flex flex-col justify-between gap-2 border border-slate-200 p-1.5 rounded-xl hover:border-blue-500 hover:outline data-[selected=true]:border-blue-500 data-[selected=true]:outline outline-blue-500",
   data: do %>
   <% if false && @attaching %>
-    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto start-0 top-0 text-white rounded-ss-xl rounded-ee-xl -ms-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "heroicons/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
+    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto start-0 top-0 text-white rounded-ss-xl rounded-ee-xl -ms-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "tabler/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
   <% end %>
   <div class="flex flex-col h-full aspect-video overflow-hidden rounded-lg justify-center items-center">
     <% if blob.image? %>
@@ -14,7 +14,7 @@
       <%= video_tag(helpers.main_app.url_for(blob), controls: true, preload: false, class: 'w-full') %>
     <% else %>
       <div class="relative h-full flex flex-col justify-center items-center w-full bg-slate-100">
-        <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+        <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
       </div>
     <% end %>
   </div>

data/app/components/avo/modal_component.html.erb

@@ -1,25 +1,40 @@
-<div class="<%= class_names("modal", {"modal--width-#{@width}": @width.present?, "modal--height-#{@height}": @height.present?}) %>"
-  data-controller="modal modal-size"
-  data-modal-target="modal"
-  data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
-  data-modal-size-current-width-value="<%= @width %>"
-  data-modal-size-current-height-value="<%= @height %>"
->
-  <div aria-expanded="true" class="modal__overlay" data-modal-target="backdrop" data-action="click->modal#close"></div>
-  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal__card-container" data-modal-size-target="container">
+<%= tag.div class: class_names("modal", @class, {"modal--width-#{@width}": @width.present?, "modal--height-#{@height}": @height.present?}), tabindex: -1, data: {
+  controller: "#{ctrl} modal-size",
+  "#{ctrl}-target": "modal",
+  "#{ctrl}-close-modal-on-backdrop-click-value": close_modal_on_backdrop_click,
+  "modal-size-current-width-value": @width,
+  "modal-size-current-height-value": @height,
+  **@data
+}, **(@hidden ? { hidden: true } : {}) do %>
+  <%= tag.div(
+    aria: { expanded: true },
+    class: "modal__overlay",
+    data: {
+      "#{ctrl}-target": "backdrop",
+      action: "click->#{ctrl}#close"
+    }
+  ) %>
+  <div
+    aria-expanded="true"
+    role="dialog"
+    aria-modal="true"
+    class="modal__card-container"
+    data-modal-size-target="container"
+  >
     <div class="modal__card">
       <div class="card">
         <div class="card__wrapper">
           <% if has_header? %>
             <div class="card__header">
-              <div class="flex gap-4 items-start w-full">
-                <div class="flex grow items-center min-w-0">
-                  <div class="flex flex-col gap-0.5 items-start">
+              <div class="flex w-full items-start gap-4">
+                <div class="flex min-w-0 grow items-center">
+                  <div class="flex flex-col items-start gap-0.5">
                     <% if @title.present? || heading? %>
                       <p class="modal__title">
                         <%= @title.presence || heading %>
                       </p>
                     <% end %>
+
                     <% if @description.present? %>
                       <p class="card__description">
                         <%= @description %>
@@ -27,20 +42,28 @@
                     <% end %>
                   </div>
                 </div>
+
                 <div class="flex items-center gap-2">
                   <% if false && Rails.env.development? %>
                     <%= render partial: "avo/modal/size_selector", locals: { type: 'width', width: @width, height: @height } %>
                     <%= render partial: "avo/modal/size_selector", locals: { type: 'height', width: @width, height: @height } %>
                   <% end %>
+
                   <% if @show_close_button %>
-                    <button class="modal__close-button" data-action="click->modal#closeModal" aria-label="<%= t('avo.close') %>">
-                      <%= helpers.svg "heroicons/outline/x-mark", class: "size-5" %>
+                    <button
+                      class="modal__close-button"
+                      data-action="click-><%= ctrl %>#closeModal"
+                      aria-label="<%= t('avo.close') %>"
+                      tabindex="-1"
+                    >
+                      <%= helpers.svg "tabler/outline/x", class: "size-5" %>
                     </button>
                   <% end %>
                 </div>
               </div>
             </div>
           <% end %>
+
           <div class="card__body <%= @body_class %>">
             <% if content? %>
               <div class="modal__body-content overflow-auto">
@@ -48,6 +71,7 @@
               </div>
             <% end %>
           </div>
+
           <% if controls? %>
             <div class="card__footer modal__controls">
               <%= controls %>
@@ -57,4 +81,4 @@
       </div>
     </div>
   </div>
-</div>
+<% end %>

data/app/components/avo/modal_component.rb

@@ -12,6 +12,14 @@ class Avo::ModalComponent < Avo::BaseComponent
   prop :title
   prop :description
   prop :show_close_button, default: true
+  prop :behavior, default: :ephemeral # :ephemeral removes from DOM on close, :persistent toggles hidden attribute
+  prop :class, default: ""
+  prop :data, default: {}.freeze
+  prop :hidden, default: false
+
+  def stimulus_controller
+    (@behavior == :persistent) ? "persistent-modal" : "modal"
+  end
 
   def height_classes
     "max-h-[calc(100dvh-5rem)] min-h-1/4"
@@ -20,4 +28,6 @@ class Avo::ModalComponent < Avo::BaseComponent
   def has_header?
     @title.present? || @description.present? || heading? || @show_close_button
   end
+
+  def ctrl = stimulus_controller
 end

data/app/components/avo/paginator_component.html.erb

@@ -29,23 +29,29 @@
   </div>
 
   <%# Right: info + navigation grouped pill %>
-  <div class="pagination__controls">
-    <% if @resource.pagination_type.default? %>
-      <div class="pagination__info">
-        <span class="pagination__info-number">
-          <%= "#{@pagy.from}-#{@pagy.to}" %>
-        </span>
-        &nbsp; of &nbsp;
-        <span>
-          <%= "#{@pagy.count}" %>
-        </span>
-      </div>
-    <% end %>
+  <div class="pagination__controls-wrap">
+    <div class="pagination__controls">
+      <% if @resource.pagination_type.default? %>
+        <div class="pagination__info">
+          <span class="pagination__info-number">
+            <%= "#{formatted_number(@pagy.from)}-#{formatted_number(@pagy.to)}" %>
+          </span>
+          &nbsp; of &nbsp;
+          <% if @pagy.count >= 10_000 %>
+            <span title="<%= formatted_count %>" data-tippy="tooltip">
+              <%= number_to_social(@pagy.count, start_at: 10_000) %>
+            </span>
+          <% else %>
+            <span><%= formatted_count %></span>
+          <% end %>
+        </div>
+      <% end %>
 
-    <% if @pagy.pages > 1 %>
-      <div class="pagination__nav">
-        <%== @pagy.series_nav(anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
-      </div>
-    <% end %>
+      <% if @pagy.pages > 1 %>
+        <div class="pagination__nav">
+          <%== formatted_series_nav %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </div>

data/app/components/avo/paginator_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::PaginatorComponent < Avo::BaseComponent
+  NUMBER_DELIMITER = "."
+
   prop :resource
   prop :parent_record
   prop :parent_resource
@@ -52,4 +54,20 @@ class Avo::PaginatorComponent < Avo::BaseComponent
     num = helpers.content_tag(:span, option, class: "pagination__per-page-option-num")
     "#{num} #{t("avo.per_page").downcase}".html_safe
   end
+
+  def formatted_count
+    formatted_number(@pagy.count)
+  end
+
+  def formatted_series_nav
+    @pagy.series_nav(anchor_string: %(data-turbo-frame="#{@turbo_frame}"))
+      .gsub(/>(\d{4,})</) { |match| match.sub($1, formatted_number($1)) }
+      .html_safe
+  end
+
+  private
+
+  def formatted_number(number)
+    helpers.number_with_delimiter(number, delimiter: NUMBER_DELIMITER)
+  end
 end

data/app/components/avo/resource_component.rb

@@ -114,10 +114,11 @@ class Avo::ResourceComponent < Avo::BaseComponent
       style: :text,
       title: control.title,
       data: {
-        tippy: control.title ? :tooltip : nil,
-        action: via_belongs_to ? "click->modal#close" : nil
+        hotkey: "b",
+        action: ("click->modal#close" if via_belongs_to),
+        tippy: control.title ? :tooltip : nil
       }.compact,
-      icon: "heroicons/outline/arrow-left" do
+      icon: "tabler/outline/arrow-left" do
       control.label
     end
   end
@@ -157,12 +158,13 @@ class Avo::ResourceComponent < Avo::BaseComponent
       title: control.title,
       aria_label: control.title,
       data: {
+        hotkey: "d",
         turbo_confirm: t("avo.are_you_sure", item: @resource.record.model_name.name.downcase),
         turbo_method: :delete,
         target: "control:destroy",
         control: :destroy,
         tippy: control.title ? :tooltip : nil,
-        "resource-id": @resource.record_param,
+        "resource-id": @resource.record_param
       } do
       control.label
     end
@@ -172,8 +174,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_see_the_save_button?
 
     data_attributes = {
+      hotkey: "Mod+Enter",
       turbo_confirm: @resource.confirm_on_save ? t("avo.are_you_sure") : nil
-    }
+    }.compact
 
     add_stimulus_attributes_for(@resource, data_attributes, "saveButton")
 
@@ -181,7 +184,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
       style: :primary,
       loading: true,
       type: :submit,
-      icon: "avo/save",
+      icon: "tabler/outline/device-floppy",
       data: data_attributes do
       control.label
     end
@@ -194,7 +197,10 @@ class Avo::ResourceComponent < Avo::BaseComponent
       color: :accent,
       style: :primary,
       title: control.title,
-      data: {tippy: control.title ? :tooltip : nil},
+      data: {
+        hotkey: "e",
+        tippy: control.title ? :tooltip : nil
+      }.compact,
       icon: "tabler/outline/edit" do
       control.label
     end
@@ -222,6 +228,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
       style: :primary,
       icon: "tabler/outline/plus",
       data: {
+        hotkey: "c",
         target: :create
       } do
       control.label

data/app/components/avo/sidebar/group_component.html.erb

@@ -14,7 +14,7 @@
         <span class="sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
         >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: 'h-4' %>
+          <%= helpers.svg 'tabler/outline/chevron-down', class: 'h-4' %>
         </span>
       </button>
     <% else %>

data/app/components/avo/sidebar/link_component.html.erb

@@ -1,11 +1,15 @@
 <% if @path.present? %>
-  <%= link_caller.send link_method, @path, class: "sidebar-link", active: @active, target: @target, data: @data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
+  <%= link_caller.send link_method, @path, class: "sidebar-link", active: @active, target: @target, data: link_data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
     <% if @reserve_icon_space || link_icon.present? %>
-      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+      <span class="sidebar-link__icon-wrapper sidebar-icon <%= 'sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
         <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
       </span>
     <% end %>
+
     <span><%= @label %></span>
+
+    <%= hotkey_badge(@hotkey, class: "ms-auto") if @hotkey.present? %>
+
     <% if @target == :_blank %>
       <%= helpers.svg("tabler/outline/external-link", class: "sidebar-link__external-icon sidebar-icon") %>
     <% end %>
@@ -13,22 +17,26 @@
 <% else %>
   <%= content_tag :div, class: "sidebar-link", active: @active, target: @target, data: @data do %>
     <% if @reserve_icon_space || link_icon.present? %>
-      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+      <span class="sidebar-link__icon-wrapper sidebar-icon <%= 'sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
         <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
       </span>
     <% end %>
+
     <span><%= @label %></span>
   <% end %>
 <% end %>
+
 <% if @items.present? && parent_link_active? %>
   <div class="sidebar-subitem__items">
     <% @items.each_with_index do |item, index| %>
       <% if item.path.present? %>
-        <%= link_caller.send link_method, item.path, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data, disabled: @disabled, "aria-disabled": @disabled, **item.args do %>
+        <%= link_caller.send link_method, item.path, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: subitem_data(item), disabled: @disabled, "aria-disabled": @disabled, **item.args do %>
           <span><%= item.try(:label).presence || item.try(:name).presence %></span>
+
+          <%= hotkey_badge(item.hotkey, class: "ms-auto") if item.try(:hotkey).present? %>
         <% end %>
       <% else %>
-        <%= content_tag :div, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data do %>
+        <%= content_tag :div, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: subitem_data(item) do %>
           <span><%= item.try(:label).presence || item.try(:name).presence %></span>
         <% end %>
       <% end %>

data/app/components/avo/sidebar/link_component.rb

@@ -16,6 +16,15 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   prop :reserve_icon_space, default: false
   prop :args, kind: :**, default: {}.freeze
   prop :items
+  prop :hotkey, default: nil
+
+  def link_data
+    build_link_data(@data, @hotkey)
+  end
+
+  def subitem_data(item)
+    build_link_data(item.data, item.hotkey)
+  end
 
   def is_external?
     # If the path contains the scheme, check if it includes the root path or not
@@ -67,4 +76,12 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
       ""
     end
   end
+
+  private
+
+  def build_link_data(data, hotkey)
+    return data if hotkey.blank?
+
+    data.merge(hotkey: hotkey.to_s.first)
+  end
 end

data/app/components/avo/sidebar/section_component.html.erb

@@ -15,7 +15,7 @@
         <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
         >
-          <%= helpers.svg 'heroicons/outline/chevron-down' %>
+          <%= helpers.svg 'tabler/outline/chevron-down' %>
         </span>
       </button>
     <% else %>

data/app/components/avo/sidebar_component.html.erb

@@ -20,7 +20,7 @@
             <div>
               <div class="sidebar__nav-list">
                 <% dashboards.sort_by { |r| r.navigation_label }.each do |dashboard| %>
-                  <%= render Avo::Sidebar::LinkComponent.new label: dashboard.navigation_label, path: helpers.avo_dashboards.dashboard_path(dashboard) %>
+                  <%= render Avo::Sidebar::LinkComponent.new label: dashboard.navigation_label, path: helpers.avo_dashboards.dashboard_path(dashboard), hotkey: dashboard.try(:hotkey).presence %>
                 <% end %>
               </div>
             </div>
@@ -28,7 +28,7 @@
 
           <div class="sidebar__nav-list">
             <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
-              <%= render Avo::Sidebar::LinkComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource), icon: resource.icon %>
+              <%= render Avo::Sidebar::LinkComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource), icon: resource.icon, hotkey: resource.try(:hotkey).presence %>
             <% end %>
           </div>
 

data/app/components/avo/sidebar_profile_component.html.erb

@@ -41,7 +41,7 @@
           },
           class: 'sidebar-profile__form' do |form| %>
           <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "sidebar-profile__sign-out" do %>
-            <%= helpers.svg "avo/logout", class: 'sidebar-profile__sign-out-icon sidebar-icon' %> <%= t('avo.sign_out') %>
+            <%= helpers.svg "tabler/outline/logout", class: 'sidebar-profile__sign-out-icon sidebar-icon' %> <%= t('avo.sign_out') %>
           <% end %>
         <% end %>
       <% end %>

data/app/components/avo/u_i/search_input_component.html.erb

@@ -18,11 +18,11 @@
 
   <% if @with_shortcut %>
     <span class="search-input__suffix" aria-hidden="true">
-      <kbd class="search-input__shortcut">
+      <kbd>
         <abbr title="Command" class="no-underline os-pc:hidden">⌘</abbr>
         <abbr title="CTRL" class="no-underline os-mac:hidden">CTRL</abbr>
       </kbd>
-      <kbd class="search-input__shortcut">K</kbd>
+      <kbd>K</kbd>
     </span>
   <% end %>
 <% end %>

data/app/components/avo/views/resource_index_component.rb

@@ -136,7 +136,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
 
     a_button size: :sm,
       color: :primary,
-      icon: "avo/filter",
+      icon: "tabler/outline/filter",
       data: {
         controller: "avo-filters",
         action: "click->avo-filters#toggleFiltersArea",

data/app/javascript/application.js

@@ -5,41 +5,29 @@ import 'chartkick/chart.js/chart.esm'
 import 'mapkick/bundle'
 import 'regenerator-runtime/runtime'
 import * as ActiveStorage from '@rails/activestorage'
-import * as Mousetrap from 'mousetrap'
 import { Turbo } from '@hotwired/turbo-rails'
+import { install } from '@github/hotkey'
 import tippy from 'tippy.js'
 
 import { LocalStorageService } from './js/local-storage-service'
+import { installGlobalHotkeys } from './js/global_hotkeys'
 
 import './js/active-storage'
 import './js/controllers'
 import './js/custom-confirm'
 import './js/custom-stream-actions'
 
+function installHotkeys(root = document) {
+  root.querySelectorAll('[data-hotkey]').forEach((el) => {
+    install(el)
+  })
+}
+
 window.Avo.localStorage = new LocalStorageService()
 
 window.Turbolinks = Turbo
 
-let scrollTop = null
-Mousetrap.bind('r r r', () => {
-  // Capture scroll position
-  scrollTop = document.scrollingElement.scrollTop
-
-  window.StreamActions.turbo_reload()
-})
-
-// Add the shift-pressed class to the body when the shift key is pressed
-document.addEventListener('keydown', (event) => {
-  if (event.shiftKey) {
-    document.body.classList.add('shift-pressed')
-  }
-})
-// Remove the shift-pressed class from the body when the shift key is released
-document.addEventListener('keyup', (event) => {
-  if (!event.shiftKey) {
-    document.body.classList.remove('shift-pressed')
-  }
-})
+installGlobalHotkeys()
 
 function initTippy() {
   tippy('[data-tippy="tooltip"]', {
@@ -79,16 +67,12 @@ document.addEventListener('turbo:before-stream-render', () => {
   }, 1)
 })
 
+document.addEventListener('turbo:frame-render', (e) => installHotkeys(e.target))
+
 document.addEventListener('turbo:load', () => {
+  installHotkeys()
   initTippy()
 
-  // Restore scroll position after r r r turbo reload
-  if (scrollTop) {
-    setTimeout(() => {
-      document.scrollingElement.scrollTo(0, scrollTop)
-      scrollTop = 0
-    }, 50)
-  }
   setTimeout(() => {
     document.body.classList.remove('turbo-loading')
   }, 1)