avo 4.0.0.beta.38 → 4.0.0.beta.39

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '035975ce0d0f50467d9b474fd7ced61e2300c8bfea942fff46e1babf5f7cb860'
-  data.tar.gz: 0b23292242df415414e95f22b91fa19688e298cc0fb2be6afc0d3037a7e5a870
+  metadata.gz: bb52cb35a8c7fa2313a889555006158bcef98a0a6c485193e00a870a122a7128
+  data.tar.gz: 311597bb570d5bd21b769f85414ac510e6e0d60a66a995c03fd38732b2a9bf61
 SHA512:
-  metadata.gz: c96c448c9a9e12bb3390c15c92402bb9041bb1fce51c3ad5ee2c778c3757f838ed821beff913646bc3cf99e2973a8666babbbed7e6ccbc6ab1eb04369f416397
-  data.tar.gz: 9014338df7368dbef72768edd92dddf87159385adfbc76fc423f3b3da68f800a9ba894bdb1a2a7af1615ccd49ab79b97012187fcd1918ea3bf41cbf91222be63
+  metadata.gz: c1db80f20234f0df3044451fdcf31834b378f2e09780acf8e1afc2c409f7bc1c8f50c8a04aeddf89e81876d0bb743bab91c1cf90b9bdc5cc8f1dd465c1a1c6da
+  data.tar.gz: cf71d7af8d386873db2e123d1fe6f051e4b10150e8ee10e944d46cea6fac62ca053c2783154928a8ae31aff5dc7ef43216e0ae26df26e772841d46ad93ca7051

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.38)
+    avo (4.0.0.beta.39)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -6023,7 +6023,7 @@
     justify-content: flex-end;
     gap: calc(var(--spacing) * 3);
   }
-  .top-navbar a {
+  .top-navbar .header-menu a {
     color: var(--color-avo-neutral-300);
     &:hover {
       color: var(--color-avo-neutral-50);
@@ -8217,6 +8217,34 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-content-secondary);
   }
+  .count {
+    display: inline-flex;
+    min-width: calc(var(--spacing) * 4);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, oklch(39.04% 0 89.88) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-accent) 15%, transparent);
+    }
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: 1px;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content);
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(39.04% 0 89.88) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+      }
+    }
+  }
   :root {
     --input-py: calc(var(--spacing) * 1);
     --input-font-size: calc(var(--spacing) * 3.5);
@@ -8472,6 +8500,9 @@
     line-height: calc(var(--spacing) * 4);
     color: var(--color-content-secondary);
   }
+  [data-field-type="boolean"] .field-wrapper__help {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .field-wrapper__label-help {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -10664,19 +10695,23 @@
   }
   .modal__card {
     position: relative;
+    display: flex;
     width: 100%;
-    height: 100%;
     flex-shrink: 0;
+    flex-direction: column;
+    max-height: calc(100dvh - 2rem);
     box-shadow: var(--shadow-modal);
   }
   .modal__card > .card {
+    min-height: calc(var(--spacing) * 0);
     width: 100%;
-    height: 100%;
+    flex: 1;
   }
   .modal__card > .card > .card__wrapper {
     display: flex;
+    min-height: calc(var(--spacing) * 0);
     width: 100%;
-    height: 100%;
+    flex: 1;
     flex-direction: column;
   }
   .modal__card .card__header {
@@ -10740,6 +10775,9 @@
     width: 100%;
     height: 100%;
   }
+  .card__body.modal-form-body {
+    padding: calc(var(--spacing) * 4) !important;
+  }
   .modal__controls {
     display: flex;
     width: 100%;
@@ -10879,35 +10917,6 @@
     width: 100%;
     justify-content: space-between;
   }
-  .filters__count {
-    margin-inline-start: calc(var(--spacing) * 1);
-    display: inline-flex;
-    min-width: calc(var(--spacing) * 4);
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-sm);
-    background-color: color-mix(in srgb, oklch(39.04% 0 89.88) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 15%, transparent);
-    }
-    padding-inline: calc(var(--spacing) * 1);
-    padding-block: 1px;
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-    --tw-leading: 1;
-    line-height: 1;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-content);
-    --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
-    &:where(.dark, .dark *) {
-      background-color: color-mix(in srgb, oklch(39.04% 0 89.88) 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
-      }
-    }
-  }
   .filters__panel {
     position: absolute;
     inset: auto;

data/app/assets/stylesheets/application.css

@@ -144,6 +144,7 @@
   @import "./css/components/ui/popover_menu.css";
   @import "./css/components/ui/radio.css";
   @import "./css/components/ui/checkbox_list.css";
+  @import "./css/components/ui/count.css";
   @import "./css/components/input.css";
 
   @import "./css/components/field-wrapper.css";

data/app/assets/stylesheets/css/components/field-wrapper.css

@@ -10,6 +10,12 @@
   @apply text-content-secondary mt-2 text-xs leading-4;
 }
 
+/* Boolean fields render a compact checkbox/toggle, so the help text sits
+   directly beneath it without the extra top margin other inputs need. */
+[data-field-type="boolean"] .field-wrapper__help {
+  @apply mt-0;
+}
+
 .field-wrapper__label-help {
   @apply text-content-secondary text-xs leading-none font-normal;
 }

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

@@ -2,15 +2,6 @@
   @apply relative flex w-full justify-between;
 }
 
-.filters__count {
-  /* Compact pill: accent-tinted background keeps the "this filter is active"
-     hint, neutral content text guarantees contrast in both schemes.
-     (Using `text-accent` looked fine in light, but in dark mode `--color-accent`
-     resolves to a *light* value — same hue and same value as the translucent
-     bg, killing contrast. Neutral text sidesteps that.) */
-  @apply inline-flex items-center justify-center ms-1 rounded-sm bg-accent/15 dark:bg-accent/30 text-content font-medium text-xs leading-none min-w-4 py-px px-1 tabular-nums;
-}
-
 .filters__panel {
   @apply absolute top-full z-40 mt-2 w-72 inset-auto sm:end-0 flex flex-col;
 

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

@@ -30,18 +30,25 @@
 }
 
 .modal__card {
-  @apply relative size-full shrink-0;
+  @apply relative w-full shrink-0 flex flex-col;
+
+  /* Never exceed the viewport — keeps a tall (e.g. :auto height) modal fully
+     on screen so its body can scroll instead of being clipped by the centered
+     overlay. */
+  max-height: calc(100dvh - 2rem);
 
   box-shadow: var(--shadow-modal);
 }
 
-/* Modal-specific card overrides */
+/* Modal-specific card overrides. The flex-1 + min-h-0 chain lets the card and
+   its wrapper fill the (capped) modal height and shrink, so the body's
+   overflow-auto kicks in while the header and footer stay pinned. */
 .modal__card > .card {
-  @apply size-full;
+  @apply w-full flex-1 min-h-0;
 }
 
 .modal__card > .card > .card__wrapper {
-  @apply size-full flex flex-col;
+  @apply w-full flex flex-col flex-1 min-h-0;
 }
 
 .modal__card .card__header {
@@ -72,6 +79,13 @@
   @apply size-full;
 }
 
+/* Belongs-to "Create new" embeds an edit form in the modal. Drop the nested
+   panel chrome (background + border) and pad the body so the form breathes.
+   Scoped to match the `.card__body` selector above so the padding wins. */
+.card__body.modal-form-body {
+  @apply !p-4;
+}
+
 .modal__controls {
   @apply flex items-center justify-between py-2 px-3 w-full;
 }

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

@@ -0,0 +1,10 @@
+.count {
+  /* Compact pill: accent-tinted background keeps the "this is active" hint,
+     neutral content text guarantees contrast in both schemes.
+     (Using `text-accent` looked fine in light, but in dark mode `--color-accent`
+     resolves to a *light* value — same hue and same value as the translucent
+     bg, killing contrast. Neutral text sidesteps that.)
+     Margin is intentionally omitted — callers add spacing (e.g. `ms-1`) for
+     their own layout. */
+  @apply inline-flex items-center justify-center rounded-sm bg-accent/15 dark:bg-accent/30 text-content font-medium text-xs leading-none min-w-4 py-px px-1 tabular-nums;
+}

data/app/assets/stylesheets/css/layout.css

@@ -209,7 +209,7 @@
 /* Links inside the always-dark navbar use primitive neutral tokens so they
    stay readable in both light and dark mode — matching the search input and
    sidebar toggle treatment. */
-.top-navbar a {
+.top-navbar .header-menu a {
   color: var(--color-avo-neutral-300);
 
   &:hover {

data/app/components/avo/fields/belongs_to_field/edit_component.rb

@@ -71,11 +71,11 @@ class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
   end
 
   def modal_args
+    # `modal_layout: true` is what routes the `new` action through the `avo/modal`
+    # layout. The modal's title, size and footer controls are rendered by
+    # `Avo::Views::ResourceEditComponent` when it detects this embedded context.
     {
-      modal_layout: true,
-      modal_width: :full,
-      modal_height: :full,
-      wrapper_class: "container mx-auto py-4"
+      modal_layout: true
     }
   end
 

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

@@ -9,7 +9,7 @@
       'data-tippy': 'tooltip' do %>
       <%= t 'avo.filters' %>
       <% if applied_filters_count.positive? %>
-        <span class="filters__count"><%= applied_filters_count %></span>
+        <%= render Avo::UI::CountComponent.new(count: applied_filters_count, classes: "ms-1") %>
       <% end %>
     <% end %>
     <%= tag.div class: 'filters__panel css-animate-slide-down',

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

@@ -0,0 +1 @@
+<span class="<%= class_names("count", @classes) %>"><%= @count %></span>

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# Compact numeric pill used next to a label or title — e.g. the active-filter
+# count on the filters bar or an unread-notification count. Extracted from the
+# filters bar so the same accent-tinted style can be reused anywhere a small
+# count needs to sit alongside text.
+class Avo::UI::CountComponent < Avo::BaseComponent
+  prop :count
+  prop :classes, default: nil
+end

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

@@ -13,29 +13,29 @@
   <%= build_form do |form| %>
     <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
 
-    <%= content_tag :div, class: "panel-spacer" do %>
-      <% @resource.get_items.each_with_index do |item, index| %>
-        <%= render Avo::Items::SwitcherComponent.new(
-          resource: @resource,
-          reflection: @reflection,
-          item: item,
-          index: index + 1,
-          view: @view,
-          parent_resource: @parent_resource,
-          parent_record: @parent_record,
-          form: form,
-          parent_component: self,
-          actions: @actions
-        ) %>
+    <% if embedded_in_modal? %>
+      <%# The form wraps the modal so the footer submit button posts natively. %>
+      <%= render Avo::ModalComponent.new(title: title, width: :"4xl", body_class: "modal-form-body") do |c| %>
+        <% c.with_controls do %>
+          <% @resource.render_edit_controls.each do |control| %>
+            <%= render_control control %>
+          <% end %>
+        <% end %>
+
+        <%= content_tag :div, render_form_items(form), class: "panel-spacer" %>
       <% end %>
+    <% else %>
+      <%= content_tag :div, class: "panel-spacer" do %>
+        <%= render_form_items(form) %>
 
-      <% if Avo.configuration.buttons_on_form_footers %>
-        <%= render ui.panel do |panel| %>
-          <% panel.with_footer do %>
-            <%= render ui.panel_header do |header| %>
-              <% header.with_controls do %>
-                <% @resource.render_edit_controls.each do |control| %>
-                  <%= render_control control %>
+        <% if Avo.configuration.buttons_on_form_footers %>
+          <%= render ui.panel do |panel| %>
+            <% panel.with_footer do %>
+              <%= render ui.panel_header do |header| %>
+                <% header.with_controls do %>
+                  <% @resource.render_edit_controls.each do |control| %>
+                    <%= render_control control %>
+                  <% end %>
                 <% end %>
               <% end %>
             <% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -51,6 +51,35 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     @resource.render_edit_controls
   end
 
+  # True when the form is shown inside a modal opened from a belongs_to
+  # "Create new" link. In that case the title moves to the modal header and the
+  # controls move to the modal footer, so the in-form panel header is skipped.
+  def embedded_in_modal?
+    params[:via_belongs_to_resource_class].present?
+  end
+
+  # Renders the form panels. When embedded in a modal the panel header is
+  # dropped — its title and controls live in the modal chrome instead.
+  def render_form_items(form)
+    items = @resource.get_items
+    items = items.reject(&:is_header?) if embedded_in_modal?
+
+    safe_join(items.each_with_index.map do |item, index|
+      render Avo::Items::SwitcherComponent.new(
+        resource: @resource,
+        reflection: @reflection,
+        item: item,
+        index: index + 1,
+        view: @view,
+        parent_resource: @parent_resource,
+        parent_record: @parent_record,
+        form: form,
+        parent_component: self,
+        actions: @actions
+      )
+    end)
+  end
+
   private
 
   def via_index?

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

@@ -37,6 +37,7 @@
 
   <div class="top-navbar__end">
     <%= render partial: "avo/partials/header" %>
+    <%= render Avo::Notifications::BellComponent.new if Avo.plugin_manager.installed?("avo-notifications") %>
     <%= render partial: "avo/partials/color_scheme_switcher" %>
   </div>
 <% end %>

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

@@ -64,7 +64,13 @@
       <%= content_tag :div,
         class: "relative flex items-center justify-between w-full" do %>
         <% if field.sortable && resource.sorting_supported? %>
-          <%= link_to params.permit!.merge(sort_by: sort_by, sort_direction: sort_direction),
+          <%
+            # url_for(params) picks the alphabetically-first per-resource route,
+            # which on association tables routes sort links to the wrong resource.
+            sort_query_params = request.query_parameters.merge(sort_by: sort_by, sort_direction: sort_direction).compact
+            sort_url = "#{request.path}?#{sort_query_params.to_query}"
+          %>
+          <%= link_to sort_url,
             class: class_names("flex-1 flex justify-between", text_classes),
             'data-turbo-frame': params[:turbo_frame] do %>
             <%= field.table_header_label %>

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

@@ -1,7 +1,13 @@
 <%= turbo_frame_tag Avo::MODAL_FRAME_ID do %>
-  <%= render(Avo::ModalComponent.new(width: @modal_width, height: @modal_height, body_class: "bg-backgrund")) do |c| %>
-    <%= tag.div class: @wrapper_class do %>
-      <%= yield %>
+  <% if params[:via_belongs_to_resource_class].present? %>
+    <%# Belongs-to "Create new" flow: the edit component renders its own modal
+        (title + footer controls) so the form can wrap the modal natively. %>
+    <%= yield %>
+  <% else %>
+    <%= render(Avo::ModalComponent.new(width: @modal_width, height: @modal_height, body_class: "bg-background")) do |c| %>
+      <%= tag.div class: @wrapper_class do %>
+        <%= yield %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.38" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.39" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.38
+  version: 4.0.0.beta.39
 platform: ruby
 authors:
 - Adrian Marin
@@ -273,6 +273,7 @@ files:
 - app/assets/stylesheets/css/components/ui/card.css
 - app/assets/stylesheets/css/components/ui/checkbox.css
 - app/assets/stylesheets/css/components/ui/checkbox_list.css
+- app/assets/stylesheets/css/components/ui/count.css
 - app/assets/stylesheets/css/components/ui/description_list.css
 - app/assets/stylesheets/css/components/ui/dropdown.css
 - app/assets/stylesheets/css/components/ui/dropdown_card.css
@@ -681,6 +682,8 @@ files:
 - app/components/avo/u_i/badge_component.rb
 - app/components/avo/u_i/card_component.html.erb
 - app/components/avo/u_i/card_component.rb
+- app/components/avo/u_i/count_component.html.erb
+- app/components/avo/u_i/count_component.rb
 - app/components/avo/u_i/dropdown_card_component.html.erb
 - app/components/avo/u_i/dropdown_card_component.rb
 - app/components/avo/u_i/dropdown_component.html.erb