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

data/app/assets/stylesheets/application.css

@@ -1,3 +1,4 @@
+/* @layer base, components, utilities; */
 @import "tailwindcss";
 
 /* TODO: Figure out a way to add those dynamically */

data/app/assets/stylesheets/css/components/button.css

@@ -141,6 +141,11 @@
       --btn-color-accent-content: var(--color-rose-600);
       --btn-color-accent-foreground: var(--color-white);
     }
+
+    /* The kbd element is taller than the button text, so we need to offset it */
+    &>span >kbd {
+      @apply -my-1;
+    }
   }
 
   .dark {

data/app/assets/stylesheets/css/components/color_scheme_switcher.css

@@ -43,24 +43,20 @@
 }
 
 /* Theme (neutrals) dropdown */
-.color-scheme-switcher__theme-wrapper {
-  @apply relative;
-}
-
 .color-scheme-switcher__button--theme {
   @apply gap-1;
 }
 
-.color-scheme-switcher__theme-panel {
-  @apply absolute top-full mt-2 start-0 z-40;
-  @apply rounded-lg bg-white dark:bg-neutral-800;
-  @apply border border-neutral-200 dark:border-neutral-700;
-  @apply shadow-lg p-2 min-w-[160px];
-  animation: css-animate-slide-down 0.15s ease-out;
+.color-scheme-switcher__theme-popover {
+  @apply start-0 end-auto min-w-[160px];
+}
+
+.color-scheme-switcher__accent-popover {
+  @apply min-w-[160px];
 }
 
 .color-scheme-switcher__theme-options {
-  @apply flex flex-col gap-0.5;
+  @apply flex flex-col gap-0.5 self-stretch;
 }
 
 .color-scheme-switcher__theme-option {
@@ -126,20 +122,9 @@
 }
 
 /* Accent color dropdown */
-.color-scheme-switcher__accent-wrapper {
-  @apply relative;
-}
-
-.color-scheme-switcher__accent-panel {
-  @apply absolute top-full mt-2 end-0 z-40;
-  @apply rounded-lg bg-white dark:bg-neutral-800;
-  @apply border border-neutral-200 dark:border-neutral-700;
-  @apply shadow-lg p-2 min-w-[160px];
-  animation: css-animate-slide-down 0.15s ease-out;
-}
 
 .color-scheme-switcher__accent-options {
-  @apply grid grid-cols-3 gap-2;
+  @apply grid grid-cols-3 gap-2 self-stretch;
 }
 
 .color-scheme-switcher__accent-option {

data/app/assets/stylesheets/css/components/input.css

@@ -266,8 +266,17 @@
     );
   }
 
-  /* Default (Mac): ⌘ + K — narrower */
+  /* Single-key shortcut: "/" */
   .search-input__input.search-input__input--with-shortcut {
+    padding-inline-end: calc(
+      var(--input-icon-offset) +
+      var(--input-icon-size) +
+      var(--input-icon-gap) * 2
+    );
+  }
+
+  /* Two-key shortcut: ⌘K (Mac) */
+  .search-input__input.search-input__input--with-two-key-shortcut {
     padding-inline-end: calc(
       var(--input-icon-offset) +
       var(--input-icon-size) * 2 +
@@ -275,8 +284,8 @@
     );
   }
 
-  /* PC: CTRL + K — wider */
-  body.os-pc .search-input__input.search-input__input--with-shortcut {
+  /* Two-key shortcut: Ctrl+K (PC — wider because "CTRL" is wider than "⌘") */
+  body.os-pc .search-input__input.search-input__input--with-two-key-shortcut {
     padding-inline-end: calc(
       var(--input-icon-offset) +
       var(--input-icon-size) * 3 +

data/app/assets/stylesheets/css/components/ui/card.css

@@ -29,6 +29,8 @@
   @apply flex flex-col items-start self-stretch w-full;
   /* offset 1px from the wrapper to match the design */
   padding: calc(var(--spacing) - 1px);
+  /* prevent scrollIntoView from shifting the table horizontally by the padding amount */
+  scroll-padding-inline: calc(var(--spacing) );
 }
 
 /* for pagination we need the padding to be 4px */

data/app/assets/stylesheets/css/fields/code.css

@@ -38,10 +38,9 @@
   @apply border border-tertiary rounded-lg;
 }
 
-/* Overlay CodeMirror fullscreen and side preview */
-.CodeMirror-fullscreen,
-.editor-preview-active-side {
-  z-index: 50;
+/* Lift the main stacking context above the navbar (z-index: 100) when CodeMirror is fullscreen */
+.main-content-area:has(.CodeMirror-fullscreen) {
+  z-index: 101;
 }
 
 /* EasyMDE shell */

data/app/assets/stylesheets/css/resource-controls.css

@@ -1,8 +1,8 @@
-@layer base {
+@layer components {
   .resource-controls {
     .resource-control,
-    button,
-    a {
+    button:not(.button),
+    a:not(.button) {
       @apply text-content-secondary;
 
       &:hover {

data/app/assets/stylesheets/css/sidebar.css

@@ -46,10 +46,6 @@
   @apply flex flex-col px-3 w-full;
 }
 
-.sidebar__nav-list {
-  @apply w-full space-y-1;
-}
-
 .sidebar__footer {
   @apply shrink-0;
 }
@@ -60,11 +56,11 @@
 /* ================================================ */
 
 .sidebar-section {
-  @apply pt-4;
+  @apply not-first:mt-4;
 }
 
 .sidebar-section__header {
-  @apply flex items-center w-full text-start p-2 pb-1 gap-2 rounded-lg text-content-secondary text-base font-medium leading-6 cursor-pointer border-none bg-transparent;
+  @apply flex items-center w-full text-start p-2 pb-1 gap-2 rounded-lg text-content-secondary text-base font-medium leading-6 border-none bg-transparent;
 }
 
 .sidebar-section__header-inner {

data/app/assets/stylesheets/css/table.css

@@ -58,3 +58,7 @@
 .selected-row {
   background: var(--color-table-row-hover);
 }
+
+.table-row.is-keyboard-focused {
+  background: color-mix(in oklab, var(--color-background), var(--color-accent) 10%);
+}

data/app/assets/stylesheets/css/typography.css

@@ -25,10 +25,12 @@ kbd {
   border: 1px solid currentColor;
   background-color: color-mix(in srgb, currentColor 8%, transparent); */
   box-shadow: var(--box-shadow-search-input-shortcut);
+  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
 }
 
 kbd.kbd--called {
-  opacity: 0.4;
+  transform: scale(0.75) translateY(2px);
+  box-shadow: none;
 }
 
 @layer base {

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

@@ -23,7 +23,8 @@
           action: component.action,
           actions_dropdown_button: @resource.model_key,
           tippy: "tooltip",
-          tippy_content: @title
+          tippy_content: @title,
+          **(@hotkey.present? ? (@as_row_control ? {hotkey_original: @hotkey} : {hotkey: @hotkey}) : {})
         } do %>
         <%= @label %>
       <% end %>

data/app/components/avo/actions_component.rb

@@ -28,6 +28,7 @@ class Avo::ActionsComponent < Avo::BaseComponent
   prop :resource
   prop :view
   prop :host_component
+  prop :hotkey
 
   delegate_missing_to :@host_component
 

data/app/components/avo/base_component.rb

@@ -16,16 +16,47 @@ class Avo::BaseComponent < ViewComponent::Base
   def component_name = self.class.name.to_s.underscore
 
   # Renders a <kbd> badge for a hotkey string.
-  # Skips modifier combos like "Meta+Enter" — only renders simple keys.
+  # Supports modifier tokens rendered in a friendly OS-aware way.
   def hotkey_badge(hotkey, **html_options)
-    first_key = hotkey.to_s.split.first
-    return if first_key.blank? || first_key.include?("+")
-
-    tag.kbd(first_key.upcase, **html_options)
+    # `@github/hotkey` uses:
+    # - `+` for modifier combos (e.g. "Mod+Enter")
+    # - spaces for sequences/alternatives (e.g. "g n" or "Meta+Enter Control+Enter")
+    #
+    # Render key parts for the badge, mapping supported modifiers to OS-aware glyphs.
+    keys = hotkey.to_s.split(/[+\s]+/).reject(&:blank?)
+
+    first_key = keys.first
+    return if first_key.blank?
+
+    content_tag(:span, **html_options) do
+      # Render multiple keys (e.g. "g n") inside a wrapper so any provided
+      # classes (like `ms-auto`) are applied once.
+      safe_join(keys.map { |key| render_hotkey_badge_key(key) }, " ")
+    end
   end
 
   private
 
+  def render_hotkey_badge_key(key)
+    token = key.to_s.strip
+
+    case token.downcase
+    when "mod"
+      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
+    when "enter", "return"
+      tag.kbd("↵")
+    when "escape"
+      tag.kbd("Esc")
+    else
+      tag.kbd(token.upcase)
+    end
+  end
+
   # Use the @parent_resource to fetch the field using the @reflection name.
   def field
     find_association_field(resource: @parent_resource, association: params[:related_name] || @reflection.name)

data/app/components/avo/button_component.rb

@@ -79,6 +79,6 @@ class Avo::ButtonComponent < Avo::BaseComponent
   def render_content
     concat helpers.svg(@icon, class: class_names("button__icon", @icon_class)) if @icon.present?
     concat content if content.present?
-    concat hotkey_badge(@args.dig(:data, :hotkey)) if @args.dig(:data, :hotkey)
+    concat hotkey_badge(@args.dig(:data, :hotkey)) if @args.dig(:data, :hotkey) && @args.dig(:data, :show_hotkey_badge) != false
   end
 end

data/app/components/avo/keyboard_shortcuts_component.rb

@@ -29,13 +29,34 @@ class Avo::KeyboardShortcutsComponent < Avo::BaseComponent
         "Show view",
         [
           shortcut(action: "Delete record", keys: ["D"]),
-          shortcut(action: "Edit record", keys: ["E"])
+          shortcut(action: "Edit record", keys: ["E"]),
+          shortcut(action: "Open actions", keys: ["A"])
+        ]
+      ),
+      build_section(
+        "Action",
+        [
+          shortcut(action: "Run action", keys: {mac: ["Cmd", "↵"], other: ["Ctrl", "↵"]}),
+          shortcut(action: "Cancel action", keys: ["Esc"])
         ]
       ),
       build_section(
         "Index view",
         [
-          shortcut(action: "Create new record", keys: ["C"])
+          shortcut(action: "Focus search", keys: ["/"]),
+          shortcut(action: "Create new record", keys: ["C"]),
+          shortcut(action: "Open actions", keys: ["A"]),
+          shortcut(
+            action: "Navigate rows / actions",
+            any_of: [["↑"], ["↓"]],
+            keys_aria_label: "Up arrow or down arrow"
+          ),
+          shortcut(action: "Open record", keys: ["↵"]),
+          shortcut(action: "Select / deselect row", keys: ["Space"]),
+          shortcut(action: "Deselect rows", keys: ["Esc"]),
+          shortcut(action: "Table view", keys: ["V", "T"]),
+          shortcut(action: "Grid view", keys: ["V", "G"]),
+          shortcut(action: "Map view", keys: ["V", "M"])
         ]
       )
     ]

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

@@ -51,6 +51,7 @@
 
                   <% if @show_close_button %>
                     <button
+                      type="button"
                       class="modal__close-button"
                       data-action="click-><%= ctrl %>#closeModal"
                       aria-label="<%= t('avo.close') %>"

data/app/components/avo/resource_component.rb

@@ -126,6 +126,12 @@ class Avo::ResourceComponent < Avo::BaseComponent
   def render_actions_list(actions_list)
     return unless can_see_the_actions_button?
 
+    # Actions button hotkey "a" only on index pages (non-nested).
+    # Pass as_row_control so the template can use hotkey_original for row controls,
+    # allowing the index-row-navigator controller to manage hotkey visibility.
+    as_row_control = @item.present?
+    hotkey = "a" if instance_of?(Avo::Views::ResourceIndexComponent) && @reflection.nil?
+
     render Avo::ActionsComponent.new(
       actions: @actions,
       resource: @resource,
@@ -139,7 +145,8 @@ class Avo::ResourceComponent < Avo::BaseComponent
       icon: actions_list.icon,
       icon_class: actions_list.icon_class,
       title: actions_list.title,
-      as_row_control: instance_of?(Avo::Index::ResourceControlsComponent)
+      as_row_control:,
+      hotkey: hotkey
     )
   end
 
@@ -151,6 +158,13 @@ class Avo::ResourceComponent < Avo::BaseComponent
     policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
     return unless send policy_method
 
+    # Row hotkeys: detect if we're rendering in a row control and use data-hotkey-original
+    # so the index-row-navigator controller can manage the hotkey visibility.
+    # Same as edit button: prevents @github/hotkey from registering all row buttons at once.
+    is_row_control = row_controls_context?
+    hotkey_attr = is_row_control ? :hotkey_original : :hotkey
+    data_attrs = {hotkey_attr => "d"}
+
     a_link destroy_path,
       style: :text,
       color: :red,
@@ -158,7 +172,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
       title: control.title,
       aria_label: control.title,
       data: {
-        hotkey: "d",
+        **data_attrs,
         turbo_confirm: t("avo.are_you_sure", item: @resource.record.model_name.name.downcase),
         turbo_method: :delete,
         target: "control:destroy",
@@ -193,12 +207,21 @@ class Avo::ResourceComponent < Avo::BaseComponent
   def render_edit_button(control)
     return unless can_see_the_edit_button?
 
+    # Row hotkeys are handled by index-row-navigator controller:
+    # - Use data-hotkey-original for index row controls (controller moves it to data-hotkey when row is focused)
+    # - Use data-hotkey directly for show page buttons (always available)
+    # This prevents the @github/hotkey library from registering all row buttons at once,
+    # which would cause the "last-registered wins" problem.
+    is_row_control = row_controls_context?
+    hotkey_attr = is_row_control ? :hotkey_original : :hotkey
+    data_attrs = {hotkey_attr => "e"}
+
     a_link edit_path,
       color: :accent,
       style: :primary,
       title: control.title,
       data: {
-        hotkey: "e",
+        **data_attrs,
         tippy: control.title ? :tooltip : nil
       }.compact,
       icon: "tabler/outline/edit" do
@@ -223,12 +246,14 @@ class Avo::ResourceComponent < Avo::BaseComponent
   def render_create_button(control)
     return unless can_see_the_create_button?
 
+    hotkey = "c" if instance_of?(Avo::Views::ResourceIndexComponent) && @reflection.nil?
+
     a_link create_path,
       color: :accent,
       style: :primary,
       icon: "tabler/outline/plus",
       data: {
-        hotkey: "c",
+        hotkey:,
         target: :create
       } do
       control.label
@@ -249,6 +274,10 @@ class Avo::ResourceComponent < Avo::BaseComponent
     end
   end
 
+  def row_controls_context?
+    is_a?(Avo::Index::ResourceControlsComponent)
+  end
+
   def render_link_to(link)
     a_link link.path,
       color: link.color,

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

@@ -0,0 +1,24 @@
+<% if @collapsable %>
+  <button
+    type="button"
+    class="<%= class_names("sidebar-section__header justify-between", "cursor-pointer": @collapsable) %>"
+    data-action="click->menu#triggerCollapse"
+    data-menu-target="trigger"
+    aria-expanded="<%= !@collapsed %>"
+  >
+    <div class="sidebar-section__header-inner">
+      <%= helpers.svg @icon, class: "sidebar-section__icon sidebar-icon" if @icon.present? %>
+      <span><%= @title %></span>
+    </div>
+    <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if @collapsed %>"
+      data-menu-target="svg"
+    >
+      <%= helpers.svg 'tabler/outline/chevron-down' %>
+    </span>
+  </button>
+<% else %>
+  <div class="sidebar-section__header">
+    <%= helpers.svg @icon, class: "sidebar-section__icon sidebar-icon" if @icon.present? %>
+    <span><%= @title %></span>
+  </div>
+<% end %>

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Avo::Sidebar::HeadingComponent < Avo::BaseComponent
+  prop :title
+  prop :icon
+  prop :collapsable, default: false
+  prop :collapsed, default: false
+
+  def render? = @title.present?
+end

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

@@ -82,6 +82,6 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   def build_link_data(data, hotkey)
     return data if hotkey.blank?
 
-    data.merge(hotkey: hotkey.to_s.first)
+    data.merge(hotkey: hotkey)
   end
 end

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

@@ -1,30 +1,10 @@
 <%= tag.div class: "sidebar-section", data: data do %>
-  <% if item.name.present? %>
-    <% if collapsable %>
-      <button
-        type="button"
-        class="sidebar-section__header justify-between"
-        data-action="click->menu#triggerCollapse"
-        data-menu-target="trigger"
-        aria-expanded="<%= !collapsed %>"
-      >
-        <div class="sidebar-section__header-inner">
-          <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
-          <span><%= item.name %></span>
-        </div>
-        <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
-          data-menu-target="svg"
-        >
-          <%= helpers.svg 'tabler/outline/chevron-down' %>
-        </span>
-      </button>
-    <% else %>
-      <div class="sidebar-section__header">
-        <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
-        <span><%= item.name %></span>
-      </div>
-    <% end %>
-  <% end %>
+  <%= render Avo::Sidebar::HeadingComponent.new(
+    title: item.name,
+    icon: icon,
+    collapsable: collapsable,
+    collapsed: collapsed
+  ) %>
 
   <%= content_tag :div,
     hidden: collapsed,

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

@@ -17,23 +17,27 @@
           <%= render custom_sidebar_component %>
         <% else %>
           <% if dashboards.present? %>
-            <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), hotkey: dashboard.try(:hotkey).presence %>
-                <% end %>
-              </div>
+            <div class="sidebar-section">
+              <%= render Avo::Sidebar::HeadingComponent.new title: t('avo.dashboards'), icon: "tabler/outline/layout-dashboard" %>
+
+              <% 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), hotkey: dashboard.try(:hotkey).presence %>
+              <% end %>
             </div>
           <% end %>
 
-          <div class="sidebar__nav-list">
+          <div class="sidebar-section">
+            <%= render Avo::Sidebar::HeadingComponent.new title: t('avo.resources'), icon: "tabler/outline/topology-star-3" %>
+
             <% 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, hotkey: resource.try(:hotkey).presence %>
             <% end %>
           </div>
 
           <% if tools.present? %>
-            <div class="sidebar__nav-list">
+            <div class="sidebar-section">
+              <%= render Avo::Sidebar::HeadingComponent.new title: t('avo.tools'), icon: "tabler/outline/tool" %>
+
               <% tools.each do |partial| %>
                 <%= render partial: "/avo/sidebar/items/#{partial}" %>
               <% end %>
@@ -41,7 +45,9 @@
           <% end %>
 
           <% if pages.present? %>
-            <div class="sidebar__nav-list">
+            <div class="sidebar-section">
+              <%= render Avo::Sidebar::HeadingComponent.new title: t('avo.pages'), icon: "tabler/outline/forms" %>
+
               <% pages.each do |page| %>
                 <%= render Avo::Sidebar::LinkComponent.new label: page.get_navigation_label, path: page.path %>
               <% end %>
@@ -49,7 +55,7 @@
           <% end %>
 
           <% if Avo::MediaLibrary.configuration.visible? %>
-            <%= render Avo::Sidebar::LinkComponent.new label: 'Media Library', path: helpers.avo.media_library_index_path, active: :exclusive %>
+            <%= render Avo::Sidebar::LinkComponent.new label: 'Media Library', path: helpers.avo.media_library_index_path, active: :exclusive, icon: "tabler/outline/photo-star" %>
           <% end %>
         <% end %>
 

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

@@ -3,9 +3,10 @@
     id: @id,
     placeholder: @placeholder,
     class: class_names(
+      @classes,
       "search-input__input",
-      {"search-input__input--with-shortcut": @with_shortcut},
-      @classes
+      "search-input__input--with-shortcut": @shortcut == :slash,
+      "search-input__input--with-two-key-shortcut": @shortcut == :cmd_k
     ),
     disabled: @disabled,
     autocomplete: "off",
@@ -16,7 +17,11 @@
     <%= helpers.svg "tabler/outline/search" %>
   </span>
 
-  <% if @with_shortcut %>
+  <% if @shortcut == :slash %>
+    <span class="search-input__suffix" aria-hidden="true">
+      <kbd>/</kbd>
+    </span>
+  <% elsif @shortcut == :cmd_k %>
     <span class="search-input__suffix" aria-hidden="true">
       <kbd>
         <abbr title="Command" class="no-underline os-pc:hidden">⌘</abbr>

data/app/components/avo/u_i/search_input_component.rb

@@ -6,7 +6,7 @@ class Avo::UI::SearchInputComponent < Avo::BaseComponent
   prop :value
   prop :placeholder
   prop :disabled, default: false
-  prop :with_shortcut, default: false
+  prop :shortcut, default: nil  # :slash or :cmd_k
   prop :classes
   prop :data, default: -> { {} }
 end

data/app/components/avo/views/resource_index_component.html.erb

@@ -5,7 +5,7 @@
     model_name: @resource.model_name.to_s,
     resource_name: @resource.class.to_s,
     **@resource.stimulus_data_attributes
-  } do %>
+  }.tap { |d| d[:controller] = "#{d[:controller]} index-row-navigator" if @reflection.blank? } do %>
 
   <%= render_cards_component %>
 
@@ -86,8 +86,9 @@
                       value: params[:q],
                       id: nil,
                       placeholder: t('avo.search.placeholder'),
+                      shortcut: :slash,
                       data: {
-                        action: "input->resource-search#search",
+                        action: "input->resource-search#search keydown->resource-search#blurOnEscape",
                         "resource-search-target": "input"
                       }) %>
                   <% end %>

data/app/javascript/application.js

@@ -10,7 +10,7 @@ import { install } from '@github/hotkey'
 import tippy from 'tippy.js'
 
 import { LocalStorageService } from './js/local-storage-service'
-import { installGlobalHotkeys } from './js/global_hotkeys'
+import { attachHotkeyFeedback, installGlobalHotkeys } from './js/global_hotkeys'
 
 import './js/active-storage'
 import './js/controllers'
@@ -20,6 +20,7 @@ import './js/custom-stream-actions'
 function installHotkeys(root = document) {
   root.querySelectorAll('[data-hotkey]').forEach((el) => {
     install(el)
+    attachHotkeyFeedback(el)
   })
 }