chore: dashboards improvements (#4269)

* chore: dashboards improvements

* fix bad data

* more file paths

Author: adrianthedev

app/assets/stylesheets/application.css

@@ -207,6 +207,10 @@
       @apply ms-0 col-start-2;
     }
   }
+
+  select {
+    @apply text-foreground bg-background border-tertiary;
+  }
 }
 
 .loading-spinner {

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

@@ -35,12 +35,23 @@
 .card__header {
   @apply flex flex-col items-start self-stretch py-3 px-4;
 
+  &:has(select),
+  &:has(.button) {
+    @apply pe-0;
+  }
+
   /* `sm` size buttons make the header too tall. This will compensate for it. */
   .button {
     @apply -my-1;
   }
 }
 
+.card--compact-header {
+  .card__header {
+    @apply py-1 px-2;
+  }
+}
+
 /* Card title - Copy/14/500 from Figma */
 .card__title {
   @apply text-content font-medium leading-6 text-sm;

app/assets/stylesheets/css/components/ui/panel_header.css

@@ -1,5 +1,5 @@
 .header {
-  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0 px-1;
+  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0;
 }
 
 .header__main {

app/assets/stylesheets/css/layout.css

@@ -11,7 +11,7 @@
 .main {
   --sidebar-width: --spacing(64);
   --sidebar-offset-size: 0rem;
-  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing)*2);
+  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing) * 2);
 
   @media (min-width: theme(--breakpoint-lg)) {
     &.sidebar-open {
@@ -29,7 +29,7 @@
     height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
 
     .scrollable-wrapper {
-      @apply overflow-y-auto h-full flex-1 flex flex-col;
+      @apply overflow-y-auto h-full flex-1 flex flex-col px-2;
     }
     .avo-container {
       @apply  flex flex-1 flex-col justify-between;

app/components/avo/items/switcher_component.html.erb

@@ -48,7 +48,7 @@
       <% end %>
     <% end %>
 
-    <% if @resource.get_external_link.present? || @resource.discreet_information.items.any? %>
+    <% if @resource.get_external_link.present? || @resource.discreet_information.items.any? || Rails.env.development? %>
       <% header.with_discreet_information do %>
         <% if @resource.get_external_link.present? %>
           <%= render Avo::DiscreetInformationComponent.new(
@@ -60,6 +60,15 @@
           ) %>
         <% end %>
 
+        <% if Rails.env.development? %>
+          <%= render Avo::DiscreetInformationComponent.new(
+            as: :icon,
+            title: "Open in your editor",
+            url: helpers.editor_file_path(@resource),
+            icon: "tabler/outline/code"
+          ) %>
+        <% end %>
+
         <% @resource.discreet_information.items.each do |item| %>
           <%= render Avo::DiscreetInformationComponent.new(**item) %>
         <% end %>

app/components/avo/turbo_frame_wrapper_component.html.erb

@@ -1,8 +1,8 @@
 <% if @name.present? %>
-  <turbo-frame id="<%= @name %>">
+  <%= turbo_frame_tag @name, class: @class do %>
     <%= flash_content %>
     <%= content %>
-  </turbo-frame>
+  <% end %>
 <% else %>
   <%= flash_content %>
   <%= content %>

app/components/avo/turbo_frame_wrapper_component.rb

@@ -2,6 +2,7 @@
 
 class Avo::TurboFrameWrapperComponent < Avo::BaseComponent
   prop :name, kind: :positional
+  prop :class, kind: :positional
 
   # When rendering the frames the flashed content gets lost.
   # We're appending it back if it's a turbo_frame_request.

app/components/avo/u_i/card_component.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div class: class_names("card", @class), data: {**@data, item_index: @index} do %>
-  <div class="card__wrapper">
+  <%= tag.div class: class_names("card__wrapper", @wrapper_class) do %>
     <% if header? %>
       <div class="card__header"><%= header %></div>
     <% else %>
@@ -17,13 +17,13 @@
     <% end %>
 
     <% if body? %>
-      <div class="card__body"><%= body %></div>
+      <%= body %>
     <% elsif content? %>
       <div class="card__body"><%= content %></div>
     <% end %>
 
     <% if footer? %>
       <div class="card__footer"><%= footer %></div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

app/components/avo/u_i/card_component.rb

@@ -4,16 +4,28 @@ class Avo::UI::CardComponent < Avo::BaseComponent
   prop :title
   prop :description
   prop :class
+  prop :wrapper_class
   prop :with_padding, default: -> { true }
   prop :variant, default: -> { :default }
   prop :options, kind: :**
   prop :data, default: -> { {}.freeze }
   prop :index
 
   renders_one :header
-  renders_one :body
+  renders_one :body, "BodyComponent"
   renders_one :footer
 
+  class BodyComponent < Avo::BaseComponent
+    prop :class
+    prop :data, default: -> { {}.freeze }
+
+    def call
+      tag.div class: class_names("card__body", @class), data: {**@data, item_index: @index} do
+        content
+      end
+    end
+  end
+
   private
 
   # def panel_classes

app/helpers/avo/application_helper.rb

@@ -192,6 +192,14 @@ def wrap_in_modal(content)
       end
     end
 
+    def editor_file_path(path)
+      editor_url(Object.const_source_location(path.class.to_s)&.first)
+    end
+
+    def editor_url(path)
+      Avo.configuration.default_editor_url.gsub("%{path}", path)
+    end
+
     private
 
     def avo_field(type = nil, id = nil, as: nil, view: :show, form: nil, component_options: {}, **args, &block)