avo 1.20.2.pre.2 → 1.22.0.pre.1

data/app/components/avo/navigation_heading_component.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
 class Avo::NavigationHeadingComponent < ViewComponent::Base
-  def initialize(label: nil)
+  attr_reader :label
+  attr_reader :icon
+
+  def initialize(label: nil, icon: nil)
     @label = label
+    @icon = icon
   end
 end

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

@@ -1,3 +1,3 @@
-<%= active_link_to @path, class: 'text-gray-800 py-2 px-4 block font-normal hover:bg-gray-100 rounded-md mb-1 mx-3 text-sm leading-none', active: @active do %>
-  <div class="w-4"></div> <%= @label %>
+<%= active_link_to @path, class: 'px-4 block mx-6 leading-none py-3 text-black rounded font-medium hover:bg-blue-50', active: @active do %>
+  <%= @label %>
 <% end %>

data/app/components/avo/navigation_link_component.rb

@@ -1,6 +1,11 @@
 # frozen_string_literal: true
 
 class Avo::NavigationLinkComponent < ViewComponent::Base
+  attr_reader :label
+  attr_reader :path
+  attr_reader :active
+  attr_reader :size
+
   def initialize(label: nil, path: nil, active: :inclusive, size: :md)
     @label = label
     @path = path

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

@@ -6,10 +6,12 @@
           <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
         </div>
       <% end %>
-      <div class="text-2xl tracking-normal font-bold text-gray-800 truncate" data-target="title">
+
+      <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate" data-target="title">
         <%= @title %>
       </div>
-      <div class="text-sm tracking-normal text-gray-600" data-target="description">
+
+      <div class="text-base tracking-normal font-medium text-gray-600" data-target="description">
         <%== description %>
       </div>
     </div>
@@ -21,7 +23,7 @@
     </div>
   </div>
 
-  <div class="relative bg-white rounded-xl shadow-xl mb-8 <%= @body_classes %>">
+  <div class="relative bg-white rounded-lg shadow mb-8 <%= @body_classes %>">
     <%= body %>
   </div>
 

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

@@ -0,0 +1,28 @@
+<div class="text-black border-t border-gray-200 p-4 flex">
+  <div class="flex-1 flex space-x-4">
+    <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">
+      <%= image_tag avatar, class: "object-cover min-w-full min-h-full h-full" %>
+    </div>
+    <div class="flex flex-col">
+      <div class="font-medium">
+        <%= name %>
+      </div>
+      <div class="text-xs text-gray-500 uppercase">
+        <%= title %>
+      </div>
+    </div>
+  </div>
+  <div>
+    <% if can_destroy_user? %>
+      <a class="flex items-center h-full cursor-pointer">
+        <%= helpers.svg 'three-dots' %>
+      </a>
+
+      <%# if main_app.respond_to?(destroy_user_session_path)
+        <div class="hidden absolute inset-auto right-0 mr-6 mt-0 py-4 bg-white rounded-xl min-w-[200px] shadow-context" data-toggle-panel-target="panel">
+          <%= button_to t('avo.sign_out'), main_app.send(:destroy_user_session_path), method: :delete, form: { "data-turbo" => "false" }, class: "appearance-none bg-white text-left cursor-pointer text-green-600 font-semibold hover:text-white hover:bg-green-500 block px-4 py-1 w-full"
+        </div>
+      <%# end %>
+    <% end %>
+  </div>
+</div>

data/app/components/avo/sidebar_profile_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class Avo::SidebarProfileComponent < ViewComponent::Base
+  attr_reader :user
+
+  def initialize(user:)
+    @user = user
+  end
+
+  def avatar
+    if user.respond_to?(:avatar) && user.avatar.present?
+      user.avatar
+    else
+      ""
+    end
+  end
+
+  def name
+    if user.respond_to?(:name) && user.name.present?
+      user.name
+    elsif user.respond_to?(:email) && user.email.present?
+      user.email
+    else
+      "Avo user"
+    end
+  end
+
+  def title
+    if user.respond_to?(:avo_title) && user.avo_title.present?
+      user.avo_title
+    else
+      ""
+    end
+  end
+
+  def destroy_user_session_path
+    "destroy_#{Avo.configuration.current_user_resource_name}_session_path".to_sym
+  end
+
+  def can_destroy_user?
+    helpers.main_app.respond_to?(destroy_user_session_path)
+  end
+end

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

@@ -1,12 +1,12 @@
 <div>
-  <%= render Avo::PanelComponent.new(title: title, description: description, body_classes: 'py-4', data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
+  <%= render Avo::PanelComponent.new(title: title, description: description, body_classes: 'py-2', data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
     <% c.tools do %>
       <% if can_see_the_actions_button? %>
         <%= render 'actions' %>
       <% end %>
 
       <% if can_see_the_create_button? %>
-        <%= a_link create_path, 'data-target': 'create' do %>
+        <%= a_link create_path, 'data-target': 'create', color: :primary, variant: :outlined do %>
           <%= svg 'plus' %> <%= t('avo.create_new_item', item: singular_resource_name.downcase ) %>
         <% end %>
       <% end %>
@@ -19,7 +19,7 @@
     <% end %>
 
     <% c.body do %>
-      <div class="flex justify-between pt-2 pb-2 min-h-16"
+      <div class="flex justify-between min-h-16"
         data-selected-resources-name="<%= @resource.model_key %>"
         data-selected-resources="[]"
       >
@@ -27,11 +27,14 @@
           <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_key} if @resource.search_query.present? %>
         </div>
         <div class="flex justify-end items-center px-6 space-x-3">
-          <%= render partial: 'avo/partials/view_toggle_button', locals: { available_view_types: available_view_types, view_type: view_type, turbo_frame: @turbo_frame } if @models.present? %>
           <%= render 'filters' if @filters.present? %>
+
+          <%= render partial: 'avo/partials/view_toggle_button', locals: { available_view_types: available_view_types, view_type: view_type, turbo_frame: @turbo_frame } if @models.present? %>
         </div>
       </div>
+    <% end %>
 
+    <% c.bare_content do %>
       <% if view_type.to_sym == :table %>
         <div class="w-full overflow-auto flex flex-col mt-4">
           <div class="relative flex-1 flex">
@@ -45,13 +48,11 @@
           <% end %>
         </div>
       <% end %>
-    <% end %>
 
-    <% c.bare_content do %>
       <% if view_type.to_sym == :grid %>
         <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model) %>
 
-        <div class="bg-white rounded-xl shadow-xl mt-8 py-6">
+        <div class="mt-8 py-6">
           <%= render partial: 'avo/partials/paginator', locals: { pagy: @pagy, turbo_frame: @turbo_frame || 'none' } %>
         </div>
       <% end %>

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

@@ -24,6 +24,16 @@
               <%= svg 'arrow-left' %> <%= t('avo.go_back') %>
             <% end %>
 
+            <%# -- %>
+
+            <%#= render Avo::ButtonComponent.new(icon: svg('arrow-left'), is_link: true, href: back_path) do %>
+              <%#= t('avo.go_back') %>
+            <%# end %>
+
+            <%#= render Avo::ButtonComponent.new(color: 'green', spinner: true, type: :submit, icon: svg('save')) do %>
+              <%#= t('avo.save').capitalize %>
+            <%# end %>
+
             <% if can_see_the_destroy_button? %>
               <%= form_with url: helpers.resource_path(model: @resource.model, resource: @resource), method: :delete, html: { 'data-turbo-frame': params[:turbo_frame] } do |form| %>
                 <%= a_button title: t('avo.delete_item', item: @resource.model.model_name.name.downcase).capitalize,

data/app/controllers/avo/application_controller.rb

@@ -1,6 +1,6 @@
 module Avo
   class ApplicationController < ::ActionController::Base
-    include Pundit
+    include Pundit::Authorization
     include Pagy::Backend
     include Avo::ApplicationHelper
     include Avo::UrlHelpers
@@ -111,13 +111,7 @@ module Avo
     end
 
     def fill_model
-      # We have to skip filling the the model if this is an attach action
-      is_attach_action = params[model_param_key].blank? && params[:related_name].present? && params[:fields].present?
-      # puts ['fill_model->', is_attach_action, model_param_key].inspect
-
-      unless is_attach_action
-        @model = @resource.fill_model(@model_to_fill, cast_nullable(model_params))
-      end
+      @model = @resource.fill_model(@model_to_fill, cast_nullable(model_params))
     end
 
     def hydrate_resource
@@ -193,6 +187,18 @@ module Avo
       query
     end
 
+    # def authorize_user
+    #   return if params[:controller] == 'avo/search'
+
+    #   model = record = resource.model
+
+    #   if ['show', 'edit', 'update'].include?(params[:action]) && params[:controller] == 'avo/resources'
+    #     record = resource
+    #   end
+
+    #   # AuthorizationService::authorize_action _current_user, record, params[:action] return render_unauthorized unless
+    # end
+
     def _authenticate!
       instance_eval(&Avo.configuration.authenticate)
     end
@@ -237,9 +243,5 @@ module Avo
     def on_api_path
       request.original_url.match?(/.*#{Avo::App.root_path}\/avo_api\/.*/)
     end
-
-    def model_param_key
-      @resource.form_scope
-    end
   end
 end

data/app/controllers/avo/base_controller.rb

@@ -7,7 +7,6 @@ module Avo
     before_action :hydrate_resource
     before_action :set_model, only: [:show, :edit, :destroy, :update]
     before_action :set_model_to_fill
-    before_action :fill_model, only: [:create, :update]
     before_action :authorize_action
     before_action :reset_pagination_if_filters_changed, only: :index
     before_action :cache_applied_filters, only: :index
@@ -113,6 +112,7 @@ module Avo
 
     def create
       # model gets instantiated and filled in the fill_model method
+      fill_model
       saved = @model.save
       @resource.hydrate(model: @model, view: :new, user: _current_user)
 
@@ -166,6 +166,7 @@ module Avo
 
     def update
       # model gets instantiated and filled in the fill_model method
+      fill_model
       saved = @model.save
       @resource = @resource.hydrate(model: @model, view: :edit, user: _current_user)
 
@@ -193,6 +194,8 @@ module Avo
     private
 
     def model_params
+      model_param_key = @resource.form_scope
+
       request_params = params.require(model_param_key).permit(permitted_params)
 
       if @resource.devise_password_optional && request_params[:password].blank? && request_params[:password_confirmation].blank?

data/app/helpers/avo/application_helper.rb

@@ -68,14 +68,14 @@ module Avo
       end
     end
 
-    def button_classes(extra_classes = nil, color: nil, variant: nil, size: :md)
-      classes = "inline-flex flex-grow-0 items-center text-sm font-bold leading-none fill-current whitespace-nowrap transition duration-100 rounded-lg shadow-xl transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
+    def button_classes(extra_classes = nil, color: nil, variant: nil, size: :md, active: false)
+      classes = "inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 rounded transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
 
       if color.present?
         if variant.present? && (variant.to_sym == :outlined)
           classes += " bg-white border"
 
-          classes += " hover:border-#{color}-700 border-#{color}-600 text-#{color}-600 hover:text-#{color}-700 disabled:border-gray-300 disabled:text-gray-600"
+          classes += " hover:border-#{color}-700 border-#{color}-500 text-#{color}-600 hover:text-#{color}-700 disabled:border-gray-300 disabled:text-gray-600"
         else
           classes += " text-white bg-#{color}-500 hover:bg-#{color}-600 disabled:bg-#{color}-300"
         end
@@ -88,9 +88,11 @@ module Avo
       when :xs
         " p-2 py-1"
       when :sm
-        " p-3"
+        " py-1 px-4"
       when :md
-        " p-4"
+        " py-2 px-4"
+      when :xl
+        " py-3 px-4"
       else
         " p-4"
       end

data/app/helpers/avo/resources_helper.rb

@@ -47,7 +47,7 @@ module Avo
 
     def item_selector_input(floating: false, size: :md)
       "<input type='checkbox'
-        class='mx-3 #{"absolute inset-auto left-0 mt-2 z-10 hidden group-hover:block checked:block" if floating} #{size.to_sym == :lg ? "w-5 h-5" : "w-4 h-4"}'
+        class='mx-3 rounded #{"absolute inset-auto left-0 mt-2 z-10 hidden group-hover:block checked:block" if floating} #{size.to_sym == :lg ? "w-5 h-5" : "w-4 h-4"}'
         data-action='input->item-selector#toggle input->item-select-all#update'
         data-item-select-all-target='itemCheckbox'
         name='#{t "avo.select_item"}'
@@ -58,7 +58,7 @@ module Avo
 
     def item_select_all_input
       "<input type='checkbox'
-        class='mx-3 w-4 h-4'
+        class='mx-3 rounded w-4 h-4'
         data-action='input->item-select-all#toggle'
         data-item-select-all-target='checkbox'
         name='#{t "avo.select_all"}'

data/app/javascript/js/controllers/fields/date_field_controller.js

@@ -1,8 +1,14 @@
 import { Controller } from 'stimulus'
 import { DateTime } from 'luxon'
-import { castBoolean } from '../../helpers/cast_boolean'
 import flatpickr from 'flatpickr'
 
+import { castBoolean } from '../../helpers/cast_boolean'
+
+// Get the DateTime with the TZ offset applied.
+function universalTimestamp(timestampStr) {
+  return new Date(new Date(timestampStr).getTime() + (new Date(timestampStr).getTimezoneOffset() * 60 * 1000))
+}
+
 export default class extends Controller {
   static targets = ['input']
 
@@ -43,7 +49,9 @@ export default class extends Controller {
       // this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
       options.appTimezone = this.inputTarget.dataset.timezone
     } else {
-      currentValue = new Date(this.inputTarget.value)
+      // Because the browser treats the date like a timestamp and updates it ot 00:00 hour, when on a western timezone the date will be converted with one day offset.
+      // Ex: 2022-01-30 will render as 2022-01-29 on an American timezone
+      currentValue = universalTimestamp(this.inputTarget.value)
     }
 
     options.defaultDate = currentValue

data/app/javascript/js/controllers/item_selector_controller.js

@@ -1,9 +1,9 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
-  static targets = ['panel']
+  static targets = ['panel'];
 
-  checkbox = {}
+  checkbox = {};
 
   get actionsPanelPresent() {
     return this.actionsButtonElement !== null
@@ -17,6 +17,12 @@ export default class extends Controller {
     }
   }
 
+  get actionLinks() {
+    return document.querySelectorAll(
+      '.js-actions-dropdown a[data-actions-picker-target="resourceAction"]',
+    )
+  }
+
   set currentIds(value) {
     this.stateHolderElement.dataset.selectedResources = JSON.stringify(value)
 
@@ -32,8 +38,12 @@ export default class extends Controller {
   connect() {
     this.resourceName = this.element.dataset.resourceName
     this.resourceId = this.element.dataset.resourceId
-    this.actionsButtonElement = document.querySelector(`[data-actions-dropdown-button="${this.resourceName}"]`)
-    this.stateHolderElement = document.querySelector(`[data-selected-resources-name="${this.resourceName}"]`)
+    this.actionsButtonElement = document.querySelector(
+      `[data-actions-dropdown-button="${this.resourceName}"]`,
+    )
+    this.stateHolderElement = document.querySelector(
+      `[data-selected-resources-name="${this.resourceName}"]`,
+    )
   }
 
   addToSelected() {
@@ -45,7 +55,9 @@ export default class extends Controller {
   }
 
   removeFromSelected() {
-    this.currentIds = this.currentIds.filter((item) => item.toString() !== this.resourceId)
+    this.currentIds = this.currentIds.filter(
+      (item) => item.toString() !== this.resourceId,
+    )
   }
 
   toggle(event) {
@@ -59,22 +71,20 @@ export default class extends Controller {
   }
 
   enableResourceActions() {
-    (document.querySelectorAll('.js-actions-dropdown a[data-actions-picker-target="resourceAction"]'))
-      .forEach((link) => {
-        link.classList.add('text-gray-700')
-        link.classList.remove('text-gray-500')
-        link.setAttribute('data-href', link.getAttribute('href'))
-        link.dataset.disabled = false
-      })
+    this.actionLinks.forEach((link) => {
+      link.classList.add('text-gray-700')
+      link.classList.remove('text-gray-500')
+      link.setAttribute('data-href', link.getAttribute('href'))
+      link.dataset.disabled = false
+    })
   }
 
   disableResourceActions() {
-    (document.querySelectorAll('.js-actions-dropdown a[data-actions-picker-target="resourceAction"]'))
-      .forEach((link) => {
-        link.classList.remove('text-gray-700')
-        link.classList.add('text-gray-500')
-        link.setAttribute('href', link.getAttribute('data-href'))
-        link.dataset.disabled = true
-      })
+    this.actionLinks.forEach((link) => {
+      link.classList.remove('text-gray-700')
+      link.classList.add('text-gray-500')
+      link.setAttribute('href', link.getAttribute('data-href'))
+      link.dataset.disabled = true
+    })
   }
 }

data/app/javascript/js/controllers/search_controller.js

@@ -82,7 +82,9 @@ export default class extends Controller {
 
       document.querySelector('.aa-DetachedOverlay').remove()
 
-      this.clearButtonTarget.classList.remove('hidden')
+      if (this.hasClearButtonTarget) {
+        this.clearButtonTarget.classList.remove('hidden')
+      }
     } else {
       Turbo.visit(item._url, { action: 'advance' })
     }
@@ -157,7 +159,7 @@ export default class extends Controller {
     this.buttonTarget.onclick = () => this.showSearchPanel()
 
     this.clearValueTargets.forEach((target) => {
-      if (target.getAttribute('value')) {
+      if (target.getAttribute('value') && this.hasClearButtonTarget) {
         this.clearButtonTarget.classList.remove('hidden')
       }
     })
@@ -184,6 +186,9 @@ export default class extends Controller {
       },
     })
 
-    this.buttonTarget.removeAttribute('disabled')
+    // When using search for belongs-to
+    if (this.buttonTarget.dataset.shouldBeDisabled !== 'true') {
+      this.buttonTarget.removeAttribute('disabled')
+    }
   }
 }

data/app/views/avo/base/_actions.html.erb

@@ -1,11 +1,12 @@
 <% if @actions.count > 0 %>
   <div class="relative z-40 js-actions-dropdown" data-controller="toggle-panel actions-picker">
     <%= a_button class: "focus:outline-none",
-      color: 'sky',
+      color: 'primary',
+      size: :xl,
       'data-action': "click->toggle-panel#togglePanel",
       'data-actions-dropdown-button': @resource.model_key do
     %>
-      <%= svg 'arrow-left', class: 'h-4 mr-1 transform -rotate-90' %> <%= t 'avo.actions' %>
+      <%= svg 'arrow-circle-right', class: 'h-4 mr-1 transform rotate-90' %> <%= t 'avo.actions' %>
     <% end %>
     <div
       class="absolute block inset-auto right-0 top-full bg-white min-w-300px mt-2 py-4 z-20 shadow-context rounded-xl overflow-hidden hidden"
@@ -26,7 +27,7 @@
           'data-turbo-frame': 'actions_show',
           'data-action': 'click->actions-picker#visitAction',
           'data-actions-picker-target': action.standalone ? 'standaloneAction' : 'resourceAction',
-          class: "flex items-center w-full py-2 px-4 font-bold text-gray-700 hover:text-white hover:bg-blue-500 #{disabled ? 'text-gray-500' : 'text-gray-700'}",
+          class: "flex items-center w-full py-2 px-4 font-semibold text-gray-700 hover:text-white hover:bg-blue-500 #{disabled ? 'text-gray-500' : 'text-gray-700'}",
           'data-disabled': disabled do %>
           <%= svg 'play', class: 'h-5 mr-1 inline' %> <%= action.action_name %>
         <% end %>

data/app/views/avo/base/_filters.html.erb

@@ -1,7 +1,9 @@
 <div data-controller="toggle-panel">
   <div class="relative w-full flex justify-between z-30">
     <%= a_button class: 'focus:outline-none',
-      color: 'slate',
+      color: 'secondary',
+      variant: 'outlined',
+      size: :sm,
       title: t('avo.click_to_reveal_filters'),
       'data-button': 'resource-filters',
       'data-action': 'click->toggle-panel#togglePanel',

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

@@ -1,5 +1,5 @@
-<div data-controller="search" class="global-search" data-turbo-remove-before-cache>
-  <div class="inline-block"
+<div data-controller="search" class="global-search rounded border border-gray-200 pr-4 min-w-[16rem]" data-turbo-remove-before-cache>
+  <div class="inline-block text-gray-500"
     data-search-target="autocomplete"
     data-search-resource="global"
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>", "placeholder": "<%= I18n.translate 'avo.search.placeholder' %>", "cancel_button": "<%= I18n.translate 'avo.search.cancel_button' %>"}'

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

@@ -1 +1,3 @@
-<%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
+<%= link_to root_path, class: 'logo-placeholder h-20 bg-white p-4 flex justify-start' do %>
+  <%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
+<% end %>

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

@@ -0,0 +1,11 @@
+<div class="relative bg-white p-2 h-20 w-full flex flex-shrink-0 items-center z-50 px-6 border-b" v-if="layout !== 'blank'">
+  <div>
+    <%= render partial: "avo/partials/header" %>
+  </div>
+  <div class="flex-1 flex ml-4 pl-4">
+    <%= render partial: "avo/partials/global_search" if ::Avo::App.license.has_with_trial(:global_search) && ::Avo.configuration.feature_enabled?(:global_search) %>
+  </div>
+  <div class="align-end">
+    <% # Notifications %>
+  </div>
+</div>

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

@@ -8,12 +8,10 @@
   per_page_options = per_page_options.sort.uniq
 %>
 
-<div class="bg-white px-4 flex items-center justify-between aborder-t aborder-slate-200 sm:px-6 rounded-xl">
+<div class="flex items-center justify-between aborder-t aborder-slate-200 rounded-xl">
   <div class="hidden sm:flex-2 sm:flex sm:items-center sm:justify-between">
     <div>
       <div class="text-sm leading-5 text-slate-600 flex items-center">
-        <div class="mr-2"><%== pagy_info @pagy %></div>
-
         <div data-controller="per-page">
           <div class="flex items-center">
             <%= select_tag 'per_page',
@@ -39,7 +37,10 @@
     </div>
   </div>
   <div class="flex">
+
     <div class="flex-2 sm:flex sm:items-center sm:justify-between">
+      <div class="mr-4"><%== pagy_info @pagy %></div>
+
       <%# @todo: add first & last page. make the first and last buttons rounded %>
       <% if @pagy.pages > 1 %>
         <%== pagy_nav @pagy %>

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

@@ -5,5 +5,5 @@
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>"}'
   >
   </div>
-  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded-full cursor-pointer" data-search-target="button"></div>
+  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded cursor-pointer" data-search-target="button"></div>
 </div>

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

@@ -0,0 +1,35 @@
+<div class="application-sidebar flex h-full bg-white text-white w-72 z-50 border-r">
+  <div class="flex flex-col w-full">
+    <%= render partial: "avo/partials/logo" %>
+
+    <div class="flex-1 flex flex-col justify-between">
+      <div class="space-y-2">
+        <div class="w-full">
+          <%= render Avo::NavigationLinkComponent.new label: 'Get started', path: avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil?  %>
+        </div>
+
+        <div class="w-full">
+          <%= render Avo::NavigationHeadingComponent.new label: t('avo.resources'), icon: svg('resources-icon') %>
+          <% Avo::App.resources_navigation(_current_user).sort_by { |r| r.navigation_label }.each do |resource| %>
+            <%= render Avo::NavigationLinkComponent.new label: resource.navigation_label, path: resources_path(resource: resource) %>
+          <% end %>
+        </div>
+
+        <div class="w-full">
+          <% tools = Avo::App.get_sidebar_partials %>
+
+          <% if tools.present? %>
+            <%= render Avo::NavigationHeadingComponent.new label: t('avo.tools'), icon: svg('tools-icon') %>
+
+            <% tools.each do |partial| %>
+              <%= render partial: "/avo/sidebar/items/#{partial}" %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+
+      <%= render_license_warnings %>
+      <%= render Avo::SidebarProfileComponent.new user: _current_user %>
+    </div>
+  </div>
+</div>

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

@@ -1,5 +1,5 @@
 
-<thead class="bg-slate-100 border-t border-b border-gray-300 pb-1">
+<thead class="bg-white border-b border-gray-200 pb-1">
   <th>
     <%== item_select_all_input %>
   </th>
@@ -28,9 +28,9 @@
         sort_by = field.id
         sort_direction = 'desc'
       end
-      classes = "text-slate-600 tracking-tight leading-tight text-xs font-semibold"
+      classes = "text-gray-500 tracking-tight leading-tight text-sm font-semibold"
   %>
-    <th class="text-left uppercase px-3 py-2 whitespace-nowrap">
+    <th class="text-left uppercase px-3 py-6 whitespace-nowrap">
       <% if field.sortable %>
         <%= link_to params.permit!.merge(sort_by: sort_by, sort_direction: sort_direction), class: "flex items-center #{classes} #{'cursor-pointer' if field.sortable}", 'data-turbo-frame': params[:turbo_frame] do %>
           <%= field.name %>

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

@@ -1,3 +1,9 @@
 <% if name.present? %><turbo-frame id="<%= name %>"><% end %>
-<%= yield %>
+  <%
+    # When rendering the frames the flashed content gets lost.
+    # By including the alerts partial, the stimulus will pick them up and display them to the user.
+  %>
+  <%= render partial: 'avo/partials/alerts'if flash.present? if flash.present? %>
+
+  <%= yield %>
 <% if name.present? %></turbo-frame><% end %>