avo 2.45.0 → 3.0.2

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

@@ -1,6 +1,6 @@
 <%= content_tag :div, data: data_attributes, class: classes do %>
   <% if render_header? %>
-    <div class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
+    <div data-target="panel-header" class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
       <div class="overflow-hidden flex flex-col">
         <% if display_breadcrumbs? %>
           <div class="breadcrumbs truncate mb-2">
@@ -24,7 +24,7 @@
     </div>
   <% end %>
   <% if body? %>
-    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full">
+    <div data-target="panel-body" class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full">
       <div class="relative flex-1 w-full <% if sidebar? %> sm:w-2/3 <% end %>">
         <% # The body is wrapped inside another div in order to avoid long & tall panels next to sidebars when the sidebar taller. %>
         <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
@@ -32,7 +32,7 @@
         </div>
       </div>
       <% if sidebar? %>
-        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full <%= white_panel_classes %>">
+        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
           <%= sidebar %>
         </div>
       <% end %>
@@ -44,12 +44,14 @@
     </div>
   <% end %>
   <% if bare_content? %>
-    <div class="relative">
+    <div data-target="panel-bare-content" class="relative">
       <%= bare_content %>
     </div>
   <% end %>
   <% if footer_tools? %>
-    <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
+    <div
+      data-target="panel-footer-tools"
+      class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
       <%= footer_tools %>
     </div>
   <% end %>

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

@@ -1,7 +1,7 @@
 <%# via_association_type is used in has_one create actions %>
 <%= hidden_field_tag :via_association_type, params[:via_association_type] if params[:via_association_type] %>
 <%= hidden_field_tag :via_resource_class, params[:via_resource_class] if params[:via_resource_class] %>
-<%= hidden_field_tag :via_resource_id, params[:via_resource_id] if params[:via_resource_id] %>
+<%= hidden_field_tag :via_record_id, params[:via_record_id] if params[:via_record_id] %>
 <%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
 <%= hidden_field_tag :via_belongs_to_resource_class, params[:via_belongs_to_resource_class] if params[:via_belongs_to_resource_class] %>
 <%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>

data/app/components/avo/resource_component.rb

@@ -20,7 +20,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
   end
 
   def can_detach?
-    return false if @reflection.blank? || @resource.model.blank? || !authorize_association_for(:detach)
+    return false if @reflection.blank? || @resource.record.blank? || !authorize_association_for(:detach)
 
     # If the inverse_of is a belongs_to, we need to check if it's optional in order to know if we can detach it.
     if inverse_of.is_a?(ActiveRecord::Reflection::BelongsToReflection)
@@ -33,7 +33,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
   def detach_path
     return "/" if @reflection.blank?
 
-    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.model.to_param)
+    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.record.to_param)
   end
 
   def can_see_the_edit_button?
@@ -44,18 +44,25 @@ class Avo::ResourceComponent < Avo::BaseComponent
     @resource.authorization.authorize_action(:destroy, raise_exception: false)
   end
 
-  def can_act_on?
+  def can_see_the_actions_button?
+    return false if @actions.blank?
+
     return authorize_association_for(:act_on) if @reflection.present?
 
     @resource.authorization.authorize_action(:act_on, raise_exception: false) && !has_reflection_and_is_read_only
   end
 
   def destroy_path
-    if params[:via_resource_class].present?
-      helpers.resource_path(model: @resource.model, resource: @resource, referrer: back_path)
-    else
-      helpers.resource_path(model: @resource.model, resource: @resource)
+    args = {record: @resource.record, resource: @resource}
+
+    args[:referrer] = if params[:via_resource_class].present?
+      back_path
+    # If we're deleting a resource from a parent resource, we need to go back to the parent resource page after the deletion
+    elsif @parent_resource.present?
+      helpers.resource_path(record: @parent_record, resource: @parent_resource)
     end
+
+    helpers.resource_path(**args)
   end
 
   # Ex: A Post has many Comments
@@ -65,9 +72,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     if @reflection.present?
       # Fetch the appropiate resource
       reflection_resource = field.resource
-      # Fetch the model
-      # Hydrate the resource with the model if we have one
-      reflection_resource.hydrate(model: @parent_model) if @parent_model.present?
+      # Fetch the record
+      # Hydrate the resource with the record if we have one
+      reflection_resource.hydrate(record: @parent_record) if @parent_record.present?
       # Use the related_name as the base of the association
       association_name = @reflection.name
 
@@ -80,16 +87,17 @@ class Avo::ResourceComponent < Avo::BaseComponent
         if service.has_method?(method_name, raise_exception: false)
           # Some policy methods should get the parent record in order to have the necessarry information to do the authorization
           # Example: Post->has_many->Comments
+          #
           # When you want to authorize the creation/attaching of a Comment, you don't have the Comment instance.
           # But you do have the Post instance and you can get that in your policy to authorize against.
           parent_policy_methods = [:view, :create, :attach, :act_on]
 
           record = if parent_policy_methods.include?(policy_method)
             # Use the parent record (Post)
-            reflection_resource.model
+            reflection_resource.record
           else
             # Override the record with the child record (Comment)
-            resource.model
+            resource.record
           end
           policy_result = service.authorize_action(method_name, record: record, raise_exception: false)
         end
@@ -105,43 +113,214 @@ class Avo::ResourceComponent < Avo::BaseComponent
     end
   end
 
-  def sidebar
-    return if Avo::App.license.lacks_with_trial(:resource_sidebar)
-
-    @sidebar ||= search_for_sidebar
-  end
+  def sidebars
+    return if Avo.license.lacks_with_trial(:resource_sidebar)
 
-  def sidebar_component(form: nil)
-    Avo::ResourceSidebarComponent.new resource: @resource, fields: sidebar.visible_items, params: params, view: view, form: form
+    @item.items.select do |item|
+      item.is_sidebar?
+    end
+    .map do |sidebar|
+      sidebar.hydrate(view: view, resource: resource)
+    end
   end
 
   def has_reflection_and_is_read_only
     if @reflection.present? && @reflection.active_record.name && @reflection.name
-      fields = ::Avo::App.get_resource_by_model_name(@reflection.active_record.name).get_field_definitions
+      resource = Avo.resource_manager.get_resource_by_model_class(@reflection.active_record.name).new(params: helpers.params, view: view, user: helpers._current_user)
+      fields = resource.get_field_definitions
       filtered_fields = fields.filter { |f| f.id == @reflection.name }
     else
       return false
     end
 
     if filtered_fields.present?
-      filtered_fields.find { |f| f.id == @reflection.name }.is_readonly?
+      filtered_fields.find { |f| f.id == @reflection.name }.is_disabled?
     else
       false
     end
   end
 
+  def render_control(control)
+    send "render_#{control.type}", control
+  end
+
+  def render_cards_component
+    if Avo.plugin_manager.installed?("avo-dashboards")
+      render Avo::CardsComponent.new cards: @resource.detect_cards.visible_cards, classes: "pb-4 sm:grid-cols-3"
+    end
+  end
+
   private
 
   def via_resource?
-    (params[:via_resource_class].present? || params[:via_relation_class].present?) && params[:via_resource_id].present?
+    (params[:via_resource_class].present? || params[:via_relation_class].present?) && params[:via_record_id].present?
   end
 
-  def search_for_sidebar
-    item = @resource.get_items.find do |item|
-      item.is_sidebar?
+  def render_back_button(control)
+    return if back_path.blank? || is_a_related_resource?
+
+    tippy = control.title ? :tooltip : nil
+    a_link back_path,
+      style: :text,
+      title: control.title,
+      data: {tippy: tippy},
+      icon: "arrow-left" do
+      control.label
     end
+  end
+
+  def render_actions_list(actions_list)
+    return unless can_see_the_actions_button?
+
+    render Avo::ActionsComponent.new(
+      actions: @actions,
+      resource: @resource,
+      view: @view,
+      exclude: actions_list.exclude,
+      include: actions_list.include,
+      style: actions_list.style,
+      color: actions_list.color,
+      label: actions_list.label,
+      size: actions_list.size,
+      as_row_control: instance_of?(Avo::Index::ResourceControlsComponent)
+    )
+  end
+
+  def render_delete_button(control)
+    # If the resource is a related resource, we use the can_delete? policy method because it uses
+    # authorize_association_for(:destroy).
+    # Otherwise we use the can_see_the_destroy_button? policy method becuse it do no check for assiciation
+    # only for authorize_action .
+    policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
+    return unless send policy_method
+
+    a_link destroy_path,
+      style: :text,
+      color: :red,
+      icon: "trash",
+      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      title: control.title,
+      data: {
+        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.id,
+      } do
+      control.label
+    end
+  end
+
+  def render_save_button(control)
+    return unless can_see_the_save_button?
+
+    a_button color: :primary,
+      style: :primary,
+      loading: true,
+      type: :submit,
+      icon: "save" do
+      control.label
+    end
+  end
+
+  def render_edit_button(control)
+    return unless can_see_the_edit_button?
+
+    a_link edit_path,
+      color: :primary,
+      style: :primary,
+      title: control.title,
+      data: {tippy: control.title ? :tooltip : nil},
+      icon: "edit" do
+      control.label
+    end
+  end
+
+  def render_detach_button(control)
+    return unless is_a_related_resource? && can_detach?
+
+    a_button url: detach_path,
+      icon: "detach",
+      method: :delete,
+      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      style: :text,
+      data: {
+        confirm: "Are you sure you want to detach this #{title}."
+      } do
+      control.label || t("avo.detach_item", item: title).humanize
+    end
+  end
+
+  def render_create_button(control)
+    return unless can_see_the_create_button?
+
+    a_link create_path,
+      color: :primary,
+      style: :primary,
+      icon: "heroicons/outline/plus",
+      data: {
+        target: :create
+      } do
+      control.label
+    end
+  end
+
+  def render_attach_button(control)
+    return unless can_attach?
+
+    a_link attach_path,
+      icon: "heroicons/outline/link",
+      color: :primary,
+      style: :text,
+      data: {
+        turbo_frame: :attach_modal,
+        target: :attach
+      } do
+      control.label
+    end
+  end
+
+  def render_link_to(link)
+    a_link link.path,
+      color: link.color,
+      style: link.style,
+      icon: link.icon,
+      icon_class: link.icon_class,
+      title: link.title, target: link.target,
+      class: link.classes,
+      size: link.size,
+      data: {
+        **link.data,
+        tippy: link.title ? :tooltip : nil,
+      } do
+      link.label
+    end
+  end
+
+  def render_action(action)
+    return if !can_see_the_actions_button?
+    return if !action.action.visible_in_view(parent_resource: @parent_resource)
+
+    a_link action.path,
+      color: action.color,
+      style: action.style,
+      icon: action.icon,
+      icon_class: action.icon_class,
+      title: action.title,
+      size: action.size,
+      data: {
+        turbo_frame: "actions_show",
+        action_name: action.action.action_name,
+        tippy: action.title ? :tooltip : nil,
+        action: "click->actions-picker#visitAction",
+      } do
+      action.label
+    end
+  end
 
-    item&.hydrate(view: view)
+  def is_a_related_resource?
+    @reflection.present? && @resource.record.present?
   end
 
   def inverse_of

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

@@ -1,19 +1,16 @@
-<div class="resource-sidebar-component divide-y">
-  <% fields.each_with_index do |field, index| %>
-    <%= render field
-      .hydrate(
-        resource: resource,
-        model: resource.model,
-        user: resource.user,
-        view: view
-      ).component_for_view(view)
-      .new(
-        field: field,
-        resource: resource,
-        form: form,
-        stacked: true,
-        index: index
-      )
-    %>
-  <% end %>
+<div class="resource-sidebar-component divide-y"
+  data-component-name="<%= self.class.to_s.underscore %>"
+  data-component-index="<%= index %>"
+  data-resource-name="<%= @resource.class.to_s %>"
+  data-record-id="<%= @resource.record.id %>"
+>
+  <%= render Avo::Items::VisibleItemsComponent.new(
+    resource: @resource,
+    item: @sidebar,
+    view: @view,
+    form: @form,
+    field_component_extra_args: {
+      stacked: true
+    }
+  )%>
 </div>

data/app/components/avo/resource_sidebar_component.rb

@@ -6,16 +6,18 @@ class Avo::ResourceSidebarComponent < ViewComponent::Base
   attr_reader :view
   attr_reader :form
   attr_reader :fields
+  attr_reader :index
 
-  def initialize(resource: nil, fields: nil, index: nil, params: nil, form: nil, view: nil)
+  def initialize(resource: nil, sidebar: nil, index: nil, params: nil, form: nil, view: nil)
     @resource = resource
-    @fields = fields
+    @sidebar = sidebar
     @params = params
     @view = view
     @form = form
+    @index = index
   end
 
   def render?
-    Avo::App.license.has_with_trial(:resource_sidebar)
+    Avo.license.has_with_trial(:resource_sidebar)
   end
 end

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

@@ -19,7 +19,7 @@ class Avo::Sidebar::LinkComponent < ViewComponent::Base
 
   def is_external?
     # If the path contains the scheme, check if it includes the root path or not
-    return !path.include?(Avo::App.root_path) if URI(path).scheme.present?
+    return !path.include?(Avo.mount_path) if URI(path).scheme.present?
 
     false
   end

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

@@ -13,8 +13,8 @@
       <div class="space-y-6 mb-4">
         <%= render Avo::Sidebar::LinkComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil? %>
 
-        <% if Avo::App.has_main_menu? %>
-          <% Avo::App.main_menu.items.each do |item| %>
+        <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_main_menu? %>
+          <% Avo.main_menu.items.each do |item| %>
             <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
           <% end %>
         <% else %>
@@ -57,7 +57,14 @@
         <%= render partial: "/avo/partials/sidebar_extra" %>
       </div>
     </div>
-    <%= helpers.render_license_warnings unless Rails.env.production? %>
+    <% if Rails.env.development? %>
+      <div class="p-4 border-t group">
+        <%= link_to helpers.avo.avo_private_status_path, class: "block px-4 py-2 border rounded flex justify-between items-center w-full text-black text-sm" do %>
+          <span>Avo Status</span> <span><div class="rounded-full w-4 h-4 <%= Avo.app_status ? "bg-green-400" : "bg-orange-400" %>"></div></span>
+        <% end %>
+        <div class="absolute text-xs text-gray-700 group-hover:block hidden text-center w-full -ml-4">👆Visible only in development👆</div>
+      </div>
+    <% end %>
     <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
   </div>
 </div>

data/app/components/avo/sidebar_component.rb

@@ -7,15 +7,17 @@ class Avo::SidebarComponent < ViewComponent::Base
   end
 
   def dashboards
-    Avo::App.dashboards_for_navigation
+    return [] unless Avo.plugin_manager.installed?("avo-dashboards")
+
+    Avo::Dashboards.dashboard_manager.dashboards_for_navigation
   end
 
   def resources
-    Avo::App.resources_for_navigation
+    Avo.resource_manager.resources_for_navigation helpers._current_user
   end
 
   def tools
-    Avo::App.tools_for_navigation
+    Avo.tool_manager.tools_for_navigation
   end
 
   def stimulus_target

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

@@ -1,12 +1,12 @@
 <div class="text-black border-gray-150 p-4 flex border-t">
-  <div class="flex-1 flex space-x-4">
+  <div class="flex-1 flex space-x-4 w-full">
     <% if avatar.present? %>
-      <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 class="relative aspect-square w-10 h-10 overflow-hidden rounded shrink-0">
+        <%= image_tag helpers.main_app.url_for(avatar), class: "object-cover min-w-full min-h-full h-full" %>
       </div>
     <% end %>
-    <div class="flex flex-col">
-      <div class="font-medium">
+    <div class="flex flex-col pr-3 min-w-0">
+      <div class="font-medium text-ellipsis overflow-hidden">
         <%= name %>
       </div>
       <% if title.present? %>
@@ -16,17 +16,23 @@
       <% end %>
     </div>
   </div>
-  <div class="relative" data-controller="toggle-panel">
-    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle-panel#togglePanel">
+  <div class="relative" data-controller="toggle">
+    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle#togglePanel">
       <%= helpers.svg 'three-dots', class: 'h-4' %>
     </a>
     <div
       class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full z-40"
-      data-toggle-panel-target="panel"
+      data-toggle-target="panel"
+      data-transition-enter="transition ease-out duration-100"
+      data-transition-enter-start="transform opacity-0 translate-y-1"
+      data-transition-enter-end="transform opacity-100 translate-y-0"
+      data-transition-leave="transition ease-in duration-75"
+      data-transition-leave-start="transform opacity-100 translate-y-0"
+      data-transition-leave-end="transform opacity-0 translate-y-1"
     >
-      <% if Avo::App.has_profile_menu? %>
-        <div class="text-black">
-          <% Avo::App.profile_menu.items.each do |item| %>
+      <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_profile_menu? %>
+        <div class="text-black space-y-4">
+          <% Avo.profile_menu.items.each do |item| %>
             <% if item.is_a? Avo::Menu::Link %>
               <%= render Avo::ProfileItemComponent.new label: item.name, path: item.path, icon: item.icon, method: item.method, params: item.params %>
             <% end %>
@@ -45,7 +51,7 @@
           form_class: 'flex-1' do %>
           <%= helpers.svg 'logout', class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
         <% end %>
-      <% end %>
+    <% end %>
     </div>
   </div>
 </div>

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

@@ -25,26 +25,32 @@
       # On edit screens we want to load each tab because we wnst the DOM to have the fields present on form submission.
       # If you have a field which is in the second tab and it's required, the form submission will fail because the required field is not in view, and we don't want that.
       # We also want to load the current tab
-      should_lazy_load = if @view.to_s.in?(['edit', 'new', 'update', 'create'])
+      should_lazy_load = if @view.in?(%w[edit new update create])
         false
       else
         !is_current_tab
       end
 
       if should_lazy_load
-        args[:src] = helpers.resource_path(resource: resource, model: resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+        args[:src] = helpers.resource_path(resource: resource, record: resource.record, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
         args[:loading] = :lazy
       end
     %>
     <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **args do %>
       <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-4 space-y-4">
-        <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view, style: tabs_style %>
-        <% if !should_lazy_load && !tab.empty? %>
-          <div class="space-y-12">
-            <% tab.visible_items.each do |item| %>
-              <%= render Avo::ItemSwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
-            <% end %>
+        <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view %>
+        <% if should_lazy_load %>
+          <div class="block w-full">
+            <%= render Avo::LoadingComponent.new title: "#{tab.name}" %>
           </div>
+        <% else %>
+          <% if !tab.is_empty? %>
+            <div class="space-y-12">
+              <% tab.visible_items.each do |item| %>
+                <%= render Avo::Items::SwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
+              <% end %>
+            </div>
+          <% end %>
         <% end %>
       </div>
     <% end %>

data/app/components/avo/tab_group_component.rb

@@ -7,14 +7,13 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   attr_reader :form
   attr_reader :resource
 
-  def initialize(resource:, group:, index:, form:, params:, view:, tabs_style:)
+  def initialize(resource:, group:, index:, form:, params:, view:)
     @resource = resource
     @group = group
     @index = index
     @form = form
     @params = params
     @view = view
-    @tabs_style = tabs_style
 
     @group.index = index
   end
@@ -50,8 +49,4 @@ class Avo::TabGroupComponent < Avo::BaseComponent
       tab.name.to_s == active_tab_name.to_s
     end
   end
-
-  def tabs_style
-    @tabs_style || Avo.configuration.tabs_style
-  end
 end

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

@@ -1,41 +1,18 @@
-<% if style == :tabs %>
-  <div class="flex overflow-auto mac-styled-scrollbar" data-target="tab-switcher" data-style="tabs">
-    <div class="button-group">
-      <% visible_items.each do |tab| %>
-        <%= a_link tab_path(tab),
-          color: selected?(tab) ? :primary : :gray ,
-          rounded: false,
-          size: :sm,
-          class: "active:outline-0 #{selected?(tab) ? "z-20" : "bg-gray-100 border-gray-300"}",
-          title: tab.description,
-          data: {
-            tippy: tab.description.present? ? 'tooltip' : '',
-            selected: selected?(tab),
-            action: 'click->tabs#changeTab',
-            tabs_id_param: tab.name
-          } do %>
-          <%= tab.name %>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
-<% else %>
-  <div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-target="tab-switcher" data-style="pills">
-    <% visible_items.each do |tab| %>
-      <%= a_link tab_path(tab),
-      color: selected?(tab) ? :primary : :gray,
-      style: selected?(tab) ? :outline : :text,
-      size: :sm,
-      class: selected?(tab) ? "z-20 bg-primary-100" : "",
-      title: tab.description,
-      data: {
-        tippy: tab.description.present? ? 'tooltip' : '',
-        selected: selected?(tab),
-        action: 'click->tabs#changeTab',
-        tabs_id_param: tab.name
-      } do %>
-        <%= tab.name %>
-      <% end %>
+<div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-target="tab-switcher">
+  <% group.visible_items.each do |tab| %>
+    <%= a_link tab_path(tab),
+    color: selected?(tab) ? :primary : :gray,
+    style: selected?(tab) ? :outline : :text,
+    size: :sm,
+    class: selected?(tab) ? "z-20 bg-primary-100" : "",
+    title: tab.description,
+    data: {
+      tippy: tab.description.present? ? 'tooltip' : '',
+      selected: selected?(tab),
+      action: 'click->tabs#changeTab',
+      tabs_id_param: tab.name
+    } do %>
+      <%= tab.name %>
     <% end %>
-  </div>
-<% end %>
+  <% end %>
+</div>