avo 3.30.4 → 4.0.0.beta.2

data/app/views/avo/home/_resources.html.erb

@@ -20,7 +20,7 @@
         <% models.each do |model| %>
           <code class="text-lg"><%= model.to_s %></code>
           <div>
-            <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:resource <%= model.to_s %></code>
+            <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:resource <%= model.to_s %></code>
           </div>
         <% end %>
       </div>
@@ -30,7 +30,7 @@
       You may generate a resource using the following command:
       <br>
 
-      <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:resource post</code>
+      <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:resource post</code>
     </div>
   <% end %>
 

data/app/views/avo/home/failed_to_load.html.erb

@@ -1,6 +1,6 @@
 <%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%
-  classes = 'absolute inset-auto left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
+  classes = 'absolute inset-auto start-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
   label = t 'avo.failed_to_load'
   src_url = params[:src].present? && !params[:src].starts_with?('http://') ? CGI.escapeHTML(params[:src]) : nil
 %>
@@ -8,7 +8,7 @@
     <div class="relative block text-gray-300 h-64 w-full">
       <%= svg "avo/failed_to_load", class: "#{classes} h-52 text-gray-400" %>
     </div>
-    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
+    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-gray-200 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
     <% if Rails.env.development? && src_url %>
       <div class="text-center text-sm w-full pb-3">
         This is not an issue with Avo. Use <%= link_to 'this page', src_url, target: :_blank %> to see why this frame failed to load.

data/app/views/avo/home/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new(name: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |c| %>
-    <% c.with_body do %>
+  <%= render ui.panel(title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |panel| %>
+    <% panel.with_body do %>
       <div class="flex flex-col justify-between py-6 min-h-24">
         <div class="px-6 space-y-4">
           <h3>About</h3>
@@ -15,29 +15,29 @@
             We have big plans for Avo to make it the default starting point of your application. We'll be releasing features as soon as they're ready.
 
             <ul class="grid sm:grid-cols-2 max-w-168">
-              <li><span class="mr-2">👍</span> Built with Hotwire</li>
-              <li><span class="mr-2">👍</span> Resources</li>
-              <li><span class="mr-2">👍</span> Ordering</li>
-              <li><span class="mr-2">👍</span> Filters</li>
-              <li><span class="mr-2">👍</span> Actions</li>
-              <li><span class="mr-2">👍</span> Grid view</li>
-              <li><span class="mr-2">👍</span> Authorization</li>
-              <li><span class="mr-2">👍</span> Localization</li>
-              <li><span class="mr-2">👍</span> Resource tools</li>
-              <li><span class="mr-2">👍</span> Custom tools</li>
-              <li><span class="mr-2">👍</span> Custom fields</li>
-              <li><span class="mr-2">👍</span> Menu editor</li>
-              <li><span class="mr-2">👍</span> Search</li>
-              <li><span class="mr-2">👍</span> Dashboards</li>
-              <li><span class="mr-2">👍</span> Responsive design</li>
-              <li><span class="mr-2">👍</span> Menu editor</li>
-              <li><span class="mr-2">👍</span> Stimulus JS integration</li>
-              <li><span class="mr-2">👍</span> Tabs and panels</li>
-              <li><span class="mr-2">🕐</span> Resource cards</li>
-              <li><span class="mr-2">🕐</span> Track resource changes</li>
-              <li><span class="mr-2">🕐</span> Smart resource generation</li>
-              <li><span class="mr-2">🕐</span> Records preview</li>
-              <li><span class="mr-2">🕐</span> Themes</li>
+              <li><span class="me-2">👍</span> Built with Hotwire</li>
+              <li><span class="me-2">👍</span> Resources</li>
+              <li><span class="me-2">👍</span> Ordering</li>
+              <li><span class="me-2">👍</span> Filters</li>
+              <li><span class="me-2">👍</span> Actions</li>
+              <li><span class="me-2">👍</span> Grid view</li>
+              <li><span class="me-2">👍</span> Authorization</li>
+              <li><span class="me-2">👍</span> Localization</li>
+              <li><span class="me-2">👍</span> Resource tools</li>
+              <li><span class="me-2">👍</span> Custom tools</li>
+              <li><span class="me-2">👍</span> Custom fields</li>
+              <li><span class="me-2">👍</span> Menu editor</li>
+              <li><span class="me-2">👍</span> Search</li>
+              <li><span class="me-2">👍</span> Dashboards</li>
+              <li><span class="me-2">👍</span> Responsive design</li>
+              <li><span class="me-2">👍</span> Menu editor</li>
+              <li><span class="me-2">👍</span> Stimulus JS integration</li>
+              <li><span class="me-2">👍</span> Tabs and panels</li>
+              <li><span class="me-2">🕐</span> Resource cards</li>
+              <li><span class="me-2">🕐</span> Track resource changes</li>
+              <li><span class="me-2">🕐</span> Smart resource generation</li>
+              <li><span class="me-2">🕐</span> Records preview</li>
+              <li><span class="me-2">🕐</span> Themes</li>
             </ul>
           </p>
 

data/app/views/avo/media_library/_form.html.erb

@@ -1,33 +1,48 @@
-<%= form_with model: @blob, url: avo.media_library_path(@blob), method: :patch, class: "pb-6" do |f| %>
-  <%= field_container do %>
-    <%= avo_edit_field :filename, as: :text, short: true, stacked: true, form: f, required: true %>
-    <%= f.fields_for :metadata do |meta_form| %>
-      <%= avo_edit_field :title,
-        as: :text,
-        value: @blob.metadata[:title],
-        short: true,
-        stacked: true,
-        form: meta_form,
-        required: true
-      %>
-      <%= avo_edit_field :alt,
-        as: :text,
-        value: @blob.metadata[:alt],
-        short: true,
-        stacked: true,
-        form: meta_form
-      %>
-      <%= avo_edit_field :description,
-        as: :textarea,
-        value: @blob.metadata[:description],
-        short: true,
-        stacked: true,
-        form: meta_form
-      %>
-    <% end %>
+<%# TODO: fix this view%>
+<%= form_with model: @blob, url: avo.media_library_path(@blob), method: :patch, class: "pb-6 description-list w-full" do |f| %>
+  <%= avo_edit_field :filename,
+      as: :text,
+      stacked: true,
+      form: f,
+      required: true,
+      component_options: {
+        full_width: true,
+        stacked: true
+      } %>
+  <%= f.fields_for :metadata do |meta_form| %>
+    <%= avo_edit_field :title,
+      as: :text,
+      value: @blob.metadata[:title],
+      form: meta_form,
+      component_options: {
+        full_width: true,
+        stacked: true
+      },
+      required: true
+    %>
+    <%= avo_edit_field :alt,
+      as: :text,
+      value: @blob.metadata[:alt],
+      stacked: true,
+      component_options: {
+        full_width: true,
+        stacked: true
+      },
+      form: meta_form
+    %>
+    <%= avo_edit_field :description,
+      as: :textarea,
+      value: @blob.metadata[:description],
+      stacked: true,
+      component_options: {
+        full_width: true,
+        stacked: true
+      },
+      form: meta_form
+    %>
   <% end %>
 
-  <div class="w-full flex justify-end pr-6">
+  <div class="w-full flex justify-end pe-6">
     <%= a_button type: :submit,
       icon: "avo/save",
       size: :sm,

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

@@ -1,5 +1,9 @@
-<%= render Avo::PanelComponent.new title: t("avo.media_library.title") do |c| %>
-  <%= c.with_body do %>
-    <%= render Avo::MediaLibrary::ItemDetailsComponent.new(blob: @blob) %>
+<%= render ui.panel(title: t("avo.media_library.title")) do |panel| %>
+  <%= panel.with_body do %>
+    <%= render ui.card do |card| %>
+      <% card.with_body do %>
+        <%= render Avo::MediaLibrary::ItemDetailsComponent.new(blob: @blob) %>
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>

data/app/views/avo/modal/_size_selector.html.erb

@@ -0,0 +1,46 @@
+<%
+  type = local_assigns[:type] || 'width'
+  is_width = type == 'width'
+  icon = is_width ? "tabler/outline/arrows-horizontal" : "tabler/outline/arrows-vertical"
+  selector_class = is_width ? "modal__width-selector" : "modal__height-selector"
+  aria_label = is_width ? "Change modal width" : "Change modal height"
+  controller_action = is_width ? "click->modal-size#changeWidth" : "click->modal-size#changeHeight"
+  current_value = is_width ? local_assigns[:width] : local_assigns[:height]
+  options = is_width ? %w[sm md lg xl 2xl 3xl 4xl 25 50 75 100 full] : %w[auto sm md lg xl 2xl 3xl 4xl 25 50 75 100 full]
+%>
+<div class="relative pb-2"
+  data-controller="toggle"
+  data-action="mouseenter->toggle#showPanel mouseleave->toggle#hidePanel"
+>
+  <button
+    type="button"
+    class="<%= selector_class %> relative shrink-0 size-5 flex items-center justify-center"
+    aria-label="<%= aria_label %>"
+    title="<%= aria_label %>"
+  >
+    <%= svg icon, class: "size-4 text-content" %>
+  </button>
+  <div
+    class="absolute inset-auto top-full z-50 mt-2 flex w-auto overflow-hidden rounded-sm bg-white shadow-modal border border-tertiary css-animate-slide-down"
+    data-toggle-target="panel"
+    data-action="mouseenter->toggle#showPanel mouseleave->toggle#hidePanel"
+    hidden
+  >
+    <div class="flex flex-col divide-y divide-tertiary min-w-[120px]">
+      <% options.each do |size| %>
+        <button
+          type="button"
+          class="px-3 py-2 text-sm text-content hover:bg-primary-50 text-start <%= 'bg-primary-50 font-medium' if current_value.to_s == size %>"
+          <% if is_width %>
+            data-width="<%= size %>"
+          <% else %>
+            data-height="<%= size %>"
+          <% end %>
+          data-action="<%= controller_action %> click->toggle#hidePanel"
+        >
+          <%= size.upcase %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,3 @@
-<%= turbo_frame_tag :alerts, class: "fixed inset-0 bottom-0 flex flex-col space-y-4 items-end justify-right px-4 py-6 sm:p-6 justify-end z-[100] pointer-events-none" do %>
+<%= turbo_frame_tag :alerts, class: "fixed inset-0 bottom-0 flex flex-col space-y-4 items-end rtl:items-start px-4 py-6 sm:p-6 justify-end z-[100] pointer-events-none" do %>
   <%= render partial: "avo/partials/all_alerts" %>
 <% end %>

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

@@ -0,0 +1,106 @@
+<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">
+        <% %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-theme="<%= theme %>"
+                  data-color-scheme-switcher-target="themeOption"
+                  class="color-scheme-switcher__theme-option">
+            <span class="color-scheme-switcher__theme-preview color-scheme-switcher__theme-preview--<%= theme %>"></span>
+            <span class="color-scheme-switcher__theme-option-label"><%= theme.capitalize %></span>
+          </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 "avo/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>
+
+    <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">
+        <% (['neutral'] + accent_colors).each do |accent| %>
+          <%
+            preview_class = if accent == "neutral"
+              "color-scheme-switcher__accent-preview color-scheme-switcher__accent-preview--neutral"
+            else
+              "color-scheme-switcher__accent-preview bg-#{accent}-500"
+            end
+          %>
+          <button type="button"
+                  data-action="click->color-scheme-switcher#setAccent 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>
+
+  <button type="button"
+          data-color-scheme-switcher-target="button"
+          data-action="click->color-scheme-switcher#setScheme"
+          data-scheme="auto"
+          class="color-scheme-switcher__button"
+          title="Auto (system preference)">
+    <%= svg "heroicons/outline/computer-desktop", class: "color-scheme-switcher__icon" %>
+    <span class="sr-only">Auto</span>
+  </button>
+  <button type="button"
+          data-color-scheme-switcher-target="button"
+          data-action="click->color-scheme-switcher#setScheme"
+          data-scheme="light"
+          class="color-scheme-switcher__button"
+          title="Light mode">
+    <%= svg "heroicons/outline/sun", class: "color-scheme-switcher__icon" %>
+    <span class="sr-only">Light</span>
+  </button>
+  <button type="button"
+          data-color-scheme-switcher-target="button"
+          data-action="click->color-scheme-switcher#setScheme"
+          data-scheme="dark"
+          class="color-scheme-switcher__button"
+          title="Dark mode">
+    <%= svg "heroicons/outline/moon", class: "color-scheme-switcher__icon" %>
+    <span class="sr-only">Dark</span>
+  </button>
+</div>

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

@@ -0,0 +1,49 @@
+<script>
+  // On page load, apply color scheme, theme, and accent from cookies to avoid FOUC
+  (function() {
+    // Read cookies
+    function getCookie(name) {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) return parts.pop().split(';').shift();
+      return null;
+    }
+
+    const colorScheme = getCookie('color_scheme') || 'auto';
+    const theme = getCookie('theme') || 'brand';
+    const accent = getCookie('accent_color') || 'neutral';
+
+    // Apply color scheme
+    const isDark = colorScheme === 'dark' || (colorScheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+
+    // Apply scheme selection classes
+    document.documentElement.classList.remove('scheme-light', 'scheme-dark', 'scheme-auto');
+    if (colorScheme === 'light') {
+      document.documentElement.classList.add('scheme-light');
+    } else if (colorScheme === 'dark') {
+      document.documentElement.classList.add('scheme-dark');
+    } else {
+      document.documentElement.classList.add('scheme-auto');
+    }
+
+    // Apply theme class
+    document.documentElement.classList.remove('theme-slate', 'theme-stone', 'theme-gray', 'theme-zinc', 'theme-neutral', 'theme-taupe', 'theme-mauve', 'theme-mist', 'theme-olive');
+    if (theme && theme !== 'brand') {
+      document.documentElement.classList.add('theme-' + theme);
+    }
+
+    // Apply accent class
+    const accentColors = <%= accent_colors.inspect.html_safe %>;
+    accentColors.forEach((color) => {
+      document.documentElement.classList.remove('accent-' + color);
+    });
+    if (accent && accent !== 'neutral') {
+      document.documentElement.classList.add('accent-' + accent);
+    }
+  })();
+</script>

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

@@ -1,23 +1,25 @@
-<dialog id="turbo-confirm" class="w-72">
+<dialog id="turbo-confirm" class="mx-auto my-auto w-72">
   <form method="dialog">
-    <div class="relative w-full max-w-xl max-h-full">
-      <div class="relative bg-white rounded-lg shadow">
-        <button value="cancel" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-hide="popup-modal" tabindex="3">
-          <%= svg "x-mark", class: "size-6" %>
-          <span class="sr-only"><%= t "avo.close_modal" %></span>
-        </button>
-        <div class="p-4 md:p-5 text-center">
-          <svg class="mt-8 mx-auto mb-4 text-gray-400 w-12 h-12" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-          </svg>
-          <p class="mb-5 text-md font-normal text-gray-700">
-            <%= t "avo.are_you_sure" %>
-          </p>
-          <div class="mt-12 w-full flex flex-col justify-center gap-2">
-            <button value="confirm" class="text-red-600 border border-red-600 hover:bg-red-50 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm items-center px-4 py-2 text-center" tabindex="1" autofocus>
+    <div class="card relative">
+      <button value="cancel" class="absolute top-3 inset-e-2.5 text-content-secondary bg-transparent hover:bg-tertiary hover:text-content rounded-lg text-sm size-8 ms-auto inline-flex justify-center items-center" data-modal-hide="popup-modal" tabindex="3">
+        <%= svg "x-mark", class: "size-6" %>
+        <span class="sr-only"><%= t "avo.close_modal" %></span>
+      </button>
+      <div class="card__wrapper">
+        <div class="card__body text-center items-center justify-between min-h-56">
+          <div class="flex flex-col items-center justify-center p-4 md:p-5">
+            <svg class="mt-4 mx-auto mb-4 text-content-secondary size-12" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+            </svg>
+            <p class="text-md font-normal text-content">
+              <%= t "avo.are_you_sure" %>
+            </p>
+          </div>
+          <div class="flex flex-col gap-2 w-full p-4 pt-0 mt-6">
+            <button value="confirm" class="text-danger border border-danger hover:bg-danger/10 focus:ring-4 focus:outline-hidden focus:ring-danger/30 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer" tabindex="1" autofocus>
               <%= t "avo.yes_confirm" %>
             </button>
-            <button value="cancel" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100" tabindex="2">
+            <button value="cancel" class="px-4 py-2 text-sm font-medium text-content focus:outline-hidden bg-primary rounded-lg border border-tertiary hover:bg-secondary hover:text-content focus:z-10 focus:ring-4 focus:ring-tertiary cursor-pointer" tabindex="2">
               <%= t "avo.no_cancel" %>
             </button>
           </div>

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

@@ -1,7 +1,7 @@
 <% if @custom_tools_alert_visible %>
   <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-    <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
-      <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
+    <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
+      <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
     </a>
   </div>
 <% end %>
@@ -12,8 +12,8 @@
         url, message, target = error.values_at :url, :message, :target
       %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-        <a href="<%= url %>" target="<%= target %>" class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
-          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+        <a href="<%= url %>" target="<%= target %>" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
+          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div>
             <%= simple_format message %>
           </div>
@@ -21,8 +21,8 @@
       </div>
     <% elsif error.is_a? String %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-        <div class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
-          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+        <div class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
+          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div><%= simple_format error %></div>
         </div>
       </div>

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

@@ -1,3 +1,3 @@
 <div class="text-center text-sm text-gray-700 <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>">
-  <a href="https://avohq.io/" target="_blank">Avo</a> · &copy; <%= Date.today.year %> AvoHQ · <span title="<%= Avo.license.valid ? 'valid' : 'invalid'%> <%= Avo.license.id %> license">v<%= Avo::VERSION %></span>
+  <a href="https://avohq.io/" target="_blank">Avo</a> · &copy; <%= Date.today.year %> AvoHQ · v<%= Avo::VERSION %>
 </div>

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

@@ -1 +1 @@
-<%= link_to Avo.configuration.app_name, '/', class: 'text-primary-500 font-semibold', target: :_blank %>
+<%= link_to Avo.configuration.app_name, '/', class: 'font-semibold', target: :_blank %>

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

@@ -4,8 +4,6 @@
   Avo.configuration.root_path = '<%= root_path_without_url %>'
   Avo.configuration.search_debounce = '<%= Avo.configuration.search_debounce %>'
   Avo.configuration.cookies_key = '<%= Avo::COOKIES_KEY %>'
-  Avo.configuration.preserve_sidebar_scroll = '<%= ::Avo.configuration.feature_enabled?(:preserve_sidebar_scroll) %>'
-  Avo.configuration.focus_sidebar_menu_item = '<%= ::Avo.configuration.feature_enabled?(:focus_sidebar_menu_item) %>'
   <% if Avo.avo_dynamic_filters_installed? %>
   Avo.configuration.avo_filters = {
     param_key: '<%= Avo::DynamicFilters.configuration.param_key %>'

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

@@ -1,15 +1,60 @@
-<%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
-  <div class="flex items-center space-x-2 w-auto lg:w-64 flex-shrink-0 h-full">
-    <div>
-      <%= a_button class: 'lg:hidden', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' }, aria: {label: "Toggle sidebar"} %>
-      <%= a_button class: 'hidden lg:block', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' }, aria: {label: "Toggle sidebar"} %>
+<%
+  # Icons shown when sidebar is open (collapse) vs closed (expand). Change these to customize.
+  sidebar_open_icon = 'layout-sidebar-left-collapse'
+  sidebar_closed_icon = 'layout-sidebar-left-expand'
+  sidebar_state = @sidebar_open ? 'open' : 'closed'
+%>
+<%= content_tag :nav, class: class_names("top-navbar", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
+  <div class="flex items-center space-x-2 rtl:space-x-reverse w-auto lg:w-64 shrink-0 h-full py-2">
+    <div class="flex items-center gap-0">
+      <%= a_button class: 'lg:hidden',
+                   size: :sm,
+                   style: :text,
+                   data: {
+                     action: 'click->sidebar#toggleSidebarOnMobile',
+                     sidebar_toggle_icon: true,
+                     sidebar_state: sidebar_state
+                   },
+                   aria: { label: "Toggle sidebar" } do %>
+        <span class="sidebar-toggle-icon sidebar-toggle-icon--open">
+          <%= svg sidebar_open_icon, class: 'h-4 button__icon' %>
+        </span>
+        <span class="sidebar-toggle-icon sidebar-toggle-icon--closed">
+          <%= svg sidebar_closed_icon, class: 'h-4 button__icon' %>
+        </span>
+      <% end %>
+
+      <% if Avo.configuration.sidebar_toggle_visible %>
+        <%= a_button class: '!hidden lg:!inline-flex',
+                     size: :sm,
+                     style: :text,
+                     data: {
+                       action: 'click->sidebar#toggleSidebar',
+                       sidebar_toggle_icon: true,
+                       sidebar_state: sidebar_state
+                     },
+                     aria: { label: "Toggle sidebar" } do %>
+          <span class="sidebar-toggle-icon sidebar-toggle-icon--open">
+            <%= svg sidebar_open_icon, class: 'h-4 button__icon' %>
+          </span>
+          <span class="sidebar-toggle-icon sidebar-toggle-icon--closed">
+            <%= svg sidebar_closed_icon, class: 'h-4 button__icon' %>
+          </span>
+        <% end %>
+      <% end %>
     </div>
     <%= render partial: "avo/partials/logo" %>
   </div>
-  <div class="flex-1 flex items-center justify-between lg:justify-start space-x-2 sm:space-x-8 lg:px-2">
-    <%= render Avo::Pro::GlobalSearchComponent.new(resource:) if defined?(Avo::Pro::GlobalSearchComponent) %>
-    <div class="m-0">
+  <div class="flex-1 flex items-center justify-between lg:justify-start space-x-2 rtl:space-x-reverse sm:space-x-8 lg:px-1">
+    <%= render Avo::Pro::GlobalSearch::InputComponent.new(resource:) if defined?(Avo::Pro::GlobalSearch::InputComponent) %>
+    <div class="flex justify-between w-full h-full items-center m-0">
       <%= render partial: "avo/partials/header" %>
+      <%= render partial: "avo/partials/color_scheme_switcher" %>
     </div>
   </div>
 <% end %>
+<!-- This is a hack to fix the issue with the navbar not being accesible because of the .main-content-wrapper padding-->
+<!-- TODO: when implementing the final layout (search covered issue) see if we still need this hack-->
+<%#
+<div class="relative opacity-0 h-16 pointer-events-none"></div>
+%>

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

@@ -11,7 +11,7 @@
   end
 %>
 <%= svg icon,
-  class: 'inline-block fill-current text-gray-500 relative leading-none min-w-[1rem] min-h-full ml-1 h-4',
+  class: 'inline-block fill-current text-gray-500 relative leading-none min-w-[1rem] min-h-full ms-1 h-4',
   data: {
     tippy: :tooltip,
     tippy_content: sort_tippy_content