spree_admin 5.2.0.rc3 → 5.2.0

data/app/views/spree/admin/shared/_user_dropdown.html.erb

@@ -1,20 +1,28 @@
 <% if try_spree_current_user.present? %>
-  <%= dropdown id: dom_id(try_spree_current_user, 'account-dropdown') do %>
-    <%= dropdown_toggle class: 'd-flex align-items-center justify-content-between text-left w-100 pr-0 shadow-none' do %>
-      <%= render_avatar(try_spree_current_user, width: 32, height: 32) %>
-    <% end %>
-    <%= dropdown_menu class: 'dropdown-menu-right', style: 'min-width: 250px;' do %>
-      <div class="d-flex align-items-center p-2 bg-light rounded-lg">
-        <%= render_avatar(try_spree_current_user, width: 34, height: 34) %>
-        <span class="d-none d-lg-inline ml-lg-2">
+  <div class="user-dropdown" id="user-menu">
+    <%= dropdown do %>
+      <%= dropdown_toggle class: 'user-dropdown-button dropdown-toggle' do %>
+        <%= render_avatar(try_spree_current_user, width: 32, height: 32) %>
+        <span class="user-name d-none d-lg-block">
           <% if try_spree_current_user.name.present? %>
-            <%= try_spree_current_user.name&.full %><br />
-            <span class="small text-muted"><%= try_spree_current_user.email %></span>
+            <%= try_spree_current_user.name&.full %>
           <% else %>
-            <%= try_spree_current_user.email %><br />
+            <%= try_spree_current_user.email %>
           <% end %>
         </span>
-      </div>
+      <% end %>
+      <%= dropdown_menu class: 'ml-2', style: 'min-width: 250px;' do %>
+        <div class="d-flex align-items-center p-2 bg-light rounded-lg">
+          <%= render_avatar(try_spree_current_user, width: 34, height: 34) %>
+          <span class="d-flex flex-column ml-2">
+            <% if try_spree_current_user.name.present? %>
+              <%= try_spree_current_user.name&.full %>
+              <small class="text-muted"><%= try_spree_current_user.email %></small>
+            <% else %>
+              <%= try_spree_current_user.email %>
+            <% end %>
+          </span>
+        </div>
 
       <%= render_admin_partials(:user_dropdown_partials) %>
 
@@ -36,10 +44,11 @@
 
       <div class="dropdown-divider"></div>
 
-      <%= button_to spree_admin_logout_path, class: 'dropdown-item mb-0 btn-danger', method: :delete do %>
-        <%= icon('logout', class: "icon icon-logout")  %>
-        <%= Spree.t(:logout) %>
-      <% end if defined?(spree_admin_logout_path) %>
+        <%= button_to spree_admin_logout_path, class: 'dropdown-item mb-0 btn-danger', method: :delete do %>
+          <%= icon('logout', class: "icon icon-logout")  %>
+          <%= Spree.t(:logout) %>
+        <% end if defined?(spree_admin_logout_path) %>
+      <% end %>
     <% end %>
-  <% end %>
+  </div>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_customers_nav.html.erb

@@ -2,7 +2,14 @@
   <% customers_active = %w[users newsletter_subscribers].include?(controller_name) %>
   <%= nav_item(Spree.t(:customers), spree.admin_users_path, icon: 'users', active: customers_active) %>
 
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <ul class="nav-submenu <% unless customers_active %>d-none<% end %>">
     <%= nav_item(Spree.t(:newsletter_subscribers), spree.admin_newsletter_subscribers_path) %>
   </ul>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <ul class="nav-submenu-dropdown d-none dropdown-container">
+    <%= nav_item(Spree.t(:customers), spree.admin_users_path) %>
+    <%= nav_item(Spree.t(:newsletter_subscribers), spree.admin_newsletter_subscribers_path) %>
+  </ul>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_orders_nav.html.erb

@@ -4,9 +4,10 @@
   <% if ready_to_ship_orders_count&.positive? %>
     <% orders_label += content_tag(:span, ready_to_ship_orders_count, class: 'badge ml-auto') %>
   <% end %>
-  
+
   <%= nav_item(orders_label.html_safe, spree.admin_orders_path, icon: 'inbox', active: orders_active) %>
-  
+
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <% if orders_active && (ready_to_ship_orders_count&.positive? || can?(:manage, :checkouts)) %>
     <ul class="nav-submenu">
       <% if ready_to_ship_orders_count&.positive? %>
@@ -22,4 +23,23 @@
       <%= render_admin_partials(:store_orders_nav_partials) %>
     </ul>
   <% end %>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <% if ready_to_ship_orders_count&.positive? || can?(:manage, :checkouts) %>
+    <ul class="nav-submenu-dropdown d-none dropdown-container">
+      <%= nav_item(Spree.t(:orders), spree.admin_orders_path) %>
+
+      <% if ready_to_ship_orders_count&.positive? %>
+        <% fulfill_label = Spree.t('admin.orders.orders_to_fulfill') %>
+        <% fulfill_label += content_tag(:span, ready_to_ship_orders_count, class: 'badge ml-auto') %>
+        <%= nav_item(fulfill_label.html_safe, spree.admin_orders_path(q: {shipment_state_not_in: [:shipped, :canceled]})) %>
+      <% end %>
+
+      <% if can?(:manage, :checkouts) %>
+        <%= nav_item(Spree.t(:draft_orders), spree.admin_checkouts_path) %>
+      <% end %>
+
+      <%= render_admin_partials(:store_orders_nav_partials) %>
+    </ul>
+  <% end %>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_products_nav.html.erb

@@ -2,6 +2,7 @@
 <% if can?(:manage, Spree::Product) %>
   <%= nav_item(Spree.t(:products), spree.admin_products_path, icon: 'package', active: products_active) %>
 
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <ul class="nav-submenu <% unless products_active %>d-none<% end %>">
     <% if can?(:manage, Spree::StockItem) || can?(:manage, Spree::StockTransfer) %>
       <%= nav_item(Spree.t(:stock), spree.admin_stock_items_path, active: %w[stock_items stock_transfers].include?(controller_name)) %>
@@ -18,4 +19,24 @@
 
     <%= render_admin_partials(:store_products_nav_partials) %>
   </ul>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <ul class="nav-submenu-dropdown d-none dropdown-container">
+    <%= nav_item(Spree.t(:products), spree.admin_products_path) %>
+
+    <% if can?(:manage, Spree::StockItem) || can?(:manage, Spree::StockTransfer) %>
+      <%= nav_item(Spree.t(:stock), spree.admin_stock_items_path) %>
+    <% end %>
+    <% if can?(:manage, Spree::Taxonomy) && can?(:manage, Spree::Taxon) %>
+      <%= nav_item(Spree.t(:taxonomies), spree.admin_taxonomies_path) %>
+    <% end %>
+    <% if can?(:manage, Spree::OptionType) %>
+      <%= nav_item(Spree.t(:options), spree.admin_option_types_path) %>
+    <% end %>
+    <% if can?(:manage, Spree::Property) && Spree::Config[:product_properties_enabled] %>
+      <%= nav_item(Spree.t(:properties), spree.admin_properties_path) %>
+    <% end %>
+
+    <%= render_admin_partials(:store_products_nav_partials) %>
+  </ul>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_promotions_nav.html.erb

@@ -1,7 +1,15 @@
 <% if can?(:manage, Spree::Promotion) %>
   <% discounts_active = %w[promotions gift_cards gift_card_batches coupon_codes].include?(controller_name) && @user.nil? %>
   <%= nav_item(Spree.t(:promotions), spree.admin_promotions_path, icon: 'discount', active: discounts_active) %>
+
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <ul class="nav-submenu <% unless discounts_active %>d-none<% end %>">
     <%= nav_item(Spree.t(:gift_cards), spree.admin_gift_cards_path, active: %w[gift_cards gift_card_batches].include?(controller_name)) %>
   </ul>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <ul class="nav-submenu-dropdown d-none dropdown-container">
+    <%= nav_item(Spree.t(:promotions), spree.admin_promotions_path) %>
+    <%= nav_item(Spree.t(:gift_cards), spree.admin_gift_cards_path) %>
+  </ul>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_returns_nav.html.erb

@@ -3,6 +3,7 @@
 <% if can?(:manage, Spree::CustomerReturn) || can?(:manage, Spree::ReturnAuthorization) %>
   <%= nav_item(Spree.t(:returns), spree.admin_customer_returns_path, icon: 'receipt-refund', active: returns_active) %>
 
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <% if returns_active %>
     <ul class="nav-submenu">
       <% if can?(:manage, Spree::ReturnAuthorization) %>
@@ -11,4 +12,15 @@
       <%= render_admin_partials(:returns_nav_partials) %>
     </ul>
   <% end %>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <% if can?(:manage, Spree::ReturnAuthorization) %>
+    <ul class="nav-submenu-dropdown d-none dropdown-container">
+      <%= nav_item(Spree.t(:returns), spree.admin_customer_returns_path) %>
+
+      <%= nav_item(Spree.t(:return_authorizations), spree.admin_return_authorizations_path) %>
+
+      <%= render_admin_partials(:returns_nav_partials) %>
+    </ul>
+  <% end %>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_store_dropdown.html.erb

@@ -2,7 +2,9 @@
   <%= dropdown do %>
     <%= dropdown_toggle class: 'store-dropdown-button dropdown-toggle' do %>
       <%= store_admin_icon(current_store, height: 32, width: 32) %>
-      <%= truncate(current_store.name, length: 10) %>
+      <span class="store-name d-none d-lg-block">
+        <%= truncate(current_store.name, length: 10) %>
+      </span>
     <% end %>
     <%= dropdown_menu class: 'ml-2' do %>
       <%= link_to current_store.formatted_url_or_custom_domain, class: 'dropdown-item', target: '_blank' do %>

data/app/views/spree/admin/shared/sidebar/_store_nav.html.erb

@@ -1,4 +1,6 @@
-<% if settings_area? %>
+<% if Spree::Admin::RuntimeConfig.legacy_sidebar_navigation %>
+  <%# Legacy navigation system %>
+  <% if settings_area? %>
   <ul class="nav flex-column">
     <% if can?(:manage, current_store) %>
       <%= nav_item(Spree.t(:store_details), spree.edit_admin_store_path(section: 'general-settings'), icon: 'building-store', active: params[:section] == 'general-settings') %>
@@ -114,4 +116,16 @@
       <% end %>
     </ul>
   </div>
+  <% end %>
+<% else %>
+  <%# New navigation system %>
+  <% if settings_area? %>
+    <%= render_navigation(:settings) %>
+  <% else %>
+    <%= render_navigation(:sidebar) %>
+
+    <div class="mt-auto d-flex flex-column">
+      <%= render 'spree/admin/shared/sidebar/enterprise_edition_notice' %>
+    </div>
+  <% end %>
 <% end %>

data/app/views/spree/admin/shared/sidebar/_storefront_nav.html.erb

@@ -2,19 +2,41 @@
   <% storefront_active = %w[themes posts post_categories pages storefront].include?(controller_name) %>
   <%= nav_item(Spree.t('admin.storefront'), spree.admin_themes_path, icon: 'building-store', active: storefront_active) %>
 
+  <%# Submenu for expanded sidebar (only shown when active) %>
   <ul class="nav-submenu <% unless storefront_active %>d-none<% end %>">
     <% if can?(:manage, Spree::Theme) %>
       <%= nav_item(Spree.t(:themes), spree.admin_themes_path) %>
     <% end %>
-    
+
     <% if can?(:manage, Spree::Page) %>
       <%= nav_item(Spree.t(:pages), spree.admin_pages_path) %>
     <% end %>
-    
+
     <% if can?(:manage, Spree::Post) %>
       <%= nav_item(Spree.t(:posts), spree.admin_posts_path, active: %w[posts post_categories].include?(controller_name)) %>
     <% end %>
-    
+
+    <% if can?(:manage, current_store) %>
+      <%= nav_item(Spree.t(:settings), spree.edit_admin_storefront_path) %>
+    <% end %>
+
+    <%= render_admin_partials(:storefront_nav_partials) %>
+  </ul>
+
+  <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+  <ul class="nav-submenu-dropdown d-none dropdown-container">
+    <% if can?(:manage, Spree::Theme) %>
+      <%= nav_item(Spree.t(:themes), spree.admin_themes_path) %>
+    <% end %>
+
+    <% if can?(:manage, Spree::Page) %>
+      <%= nav_item(Spree.t(:pages), spree.admin_pages_path) %>
+    <% end %>
+
+    <% if can?(:manage, Spree::Post) %>
+      <%= nav_item(Spree.t(:posts), spree.admin_posts_path) %>
+    <% end %>
+
     <% if can?(:manage, current_store) %>
       <%= nav_item(Spree.t(:settings), spree.edit_admin_storefront_path) %>
     <% end %>

data/app/views/spree/admin/shared/sortable_tree/_taxonomy.html.erb

@@ -33,7 +33,7 @@
       <%= dropdown_toggle class: 'btn-sm px-1 h-100' do %>
         <%= icon('dots-vertical', class: 'mr-0') %>
       <% end %>
-      <%= dropdown_menu class: 'dropdown-menu-right' do %>
+      <%= dropdown_menu do %>
         <% if can?(:create, Spree::Taxon) %>
           <%= link_to_with_icon 'plus', Spree.t(:new_nested_taxon), spree.new_admin_taxonomy_taxon_path(taxonomy, taxon: { parent_id: taxon.id }), class: 'dropdown-item' %>
           <div class="dropdown-divider"></div>

data/app/views/spree/admin/stock_items/_filters.html.erb

@@ -1,10 +1,16 @@
-<%= search_form_for [:admin, @search], class: "filter-wrap", data: { controller: "filters dropdown" } do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
-    <%= render 'spree/admin/shared/filters_search_bar', param: :variant_product_name_cont, label: Spree.t(:product_name) %>
+<%= search_form_for [:admin, @search], class: "filter-wrap", data: { controller: "filters dialog" } do |f| %>
+    <div class="d-flex flex-column flex-lg-row gap-2">
+      <%= render 'spree/admin/shared/filters_search_bar', param: :variant_product_name_cont, label: Spree.t(:product_name) %>
 
-    <%= render 'spree/admin/shared/filters_button' %>
-  </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
+      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+        <%= icon "adjustments", class: "mr-1" %>
+        <%= Spree.t("admin.filters") %>
+      <% end %>
+    </div>
+
+  <dialog class="drawer" data-dialog-target="dialog" id="stock-items-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
     <div class="form-group">
       <%= f.label :variant_sku_cont, Spree.t(:sku) %>
       <%= f.text_field :variant_sku_cont, size: 15, class: "form-control", data: {filters_target: :input} %>
@@ -17,8 +23,12 @@
                 data: { controller: 'autocomplete-select' }  %>
     </div>
     <%= render_admin_partials(:stock_items_filters_partials, f: f) %>
-    <%= render 'spree/admin/shared/filter_submit' %>
-  </div>
+    </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <%= render 'spree/admin/shared/filter_submit' %>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
   <div data-filters-target="badgesContainer" class="filter-badges-container"></div>

data/app/views/spree/admin/stock_locations/_table_row.html.erb

@@ -20,7 +20,7 @@
             <%= dropdown_toggle class: 'btn-sm h-100' do %>
               <%= icon('dots-vertical', class: 'mr-0') %>
             <% end %>
-            <%= dropdown_menu class: 'dropdown-menu-right' do %>
+            <%= dropdown_menu do %>
               <%= link_to_with_icon 'check',
                 Spree.t(:mark_as_default),
                 spree.mark_as_default_admin_stock_location_path(stock_location),

data/app/views/spree/admin/stock_transfers/_filters.html.erb

@@ -1,9 +1,15 @@
-<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dropdown"} do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
-    <%= render 'spree/admin/shared/filters_search_bar', param: :number_cont, label: Spree.t(:number) %>
-    <%= render 'spree/admin/shared/filters_button' %>
-  </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
+<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dialog"} do |f| %>
+    <div class="d-flex flex-column flex-lg-row gap-2">
+      <%= render 'spree/admin/shared/filters_search_bar', param: :number_cont, label: Spree.t(:number) %>
+      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+        <%= icon "adjustments", class: "mr-1" %>
+        <%= Spree.t("admin.filters") %>
+      <% end %>
+    </div>
+
+  <dialog class="drawer" data-dialog-target="dialog" id="stock-transfers-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
     <div class="form-group">
       <%= f.label :reference_cont, Spree.t(:reference) %>
       <%= f.text_field :reference_cont, include_blank: true, size: 15, class: "form-control", data: { filters_target: :input } %>
@@ -29,10 +35,14 @@
               } %>
     </div>
     <%= render_admin_partials(:stock_transfers_filters_partials, f: f) %>
-    <div class="form-actions">
-      <%= button Spree.t(:search), "search" %>
     </div>
-  </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <div class="form-actions">
+        <%= button Spree.t(:search), "search" %>
+      </div>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
   <div data-filters-target="badgesContainer" class="filter-badges-container"></div>

data/app/views/spree/admin/storefront/edit.html.erb

@@ -63,21 +63,9 @@
           </h5>
         </div>
         <div class="card-body">
-          <div class="form-group">
-            <%= f.label :favicon_image do %>
-              Favicon image
-              <%= help_bubble("A favicon is a small image that appears in the tab of your web browser when you visit a website. It is usually a tiny square or rectangle with a unique design or logo that represents the website") %>
-            <% end %>
-            <%= render 'active_storage/upload_form', form: f, field_name: :favicon_image, width: 120, height: 120, crop: true %>
-          </div>
+          <%= f.spree_file_field :favicon_image, width: 120, height: 120, crop: true, label: 'Favicon image', help_bubble: "A favicon is a small image that appears in the tab of your web browser when you visit a website. It is usually a tiny square or rectangle with a unique design or logo that represents the website" %>
 
-          <div class="form-group mb-0">
-            <%= f.label :social_image do %>
-              Preview image
-              <%= help_bubble("This image will be used when your store is shared on social media or in search engines.") %>
-            <% end %>
-            <%= render 'active_storage/upload_form', form: f, field_name: :social_image, width: 1200, height: 630, crop: true %>
-          </div>
+          <%= f.spree_file_field :social_image, width: 1200, height: 630, crop: true, label: 'Preview image', help_bubble: "This image will be used when your store is shared on social media or in search engines." %>
         </div>
       </div>
 

data/app/views/spree/admin/stores/form/_basic.html.erb

@@ -12,14 +12,8 @@
       <%= Spree.t(:store_name_help) %>
     </p>
     <%= f.spree_text_field :name, required: true, autofocus: f.object.new_record? %>
-    
-    <div class="form-group mb-0">
-      <%= f.label :logo do %>
-        <%= Spree.t(:logo) %>
-        <%= help_bubble("Used in the admin dashboard") %>
-      <% end %>
-      <%= render 'active_storage/upload_form', form: f, field_name: :logo, width: 240, height: 240, crop: true %>
-    </div>
+
+    <%= f.spree_file_field :logo, width: 240, height: 240, crop: true, help_bubble: "Used in the admin dashboard" %>
   </div>
 </div>
 

data/app/views/spree/admin/stores/form/_emails.html.erb

@@ -33,7 +33,7 @@
   </div>
   <div class="card-body">
     <p class="text-muted">This logo is included in all email notifications such as order confirmation</p>
-    <%= render 'active_storage/upload_form', form: f, field_name: :mailer_logo, width: 204, height: 104 %>
+    <%= f.spree_file_field :mailer_logo, width: 204, height: 104 %>
     <p class="form-text mb-0 mt-2">
       We recommend images with a transparent background.
       <br />

data/app/views/spree/admin/tax_rates/_form.html.erb

@@ -8,16 +8,7 @@
   <div class="card-body">
     <%= f.spree_text_field :name, required: true %>
 
-    <div class="form-group">
-      <%= f.label :amount_percentage, Spree.t(:rate) %>
-      <div class="input-group">
-        <%= f.number_field :amount_percentage, class: 'form-control', min: 0, step: 0.1, required: true %>
-        <div class="input-group-append">
-          <span class="input-group-text">%</span>
-        </div>
-      </div>
-      <%= f.error_message_on :amount %>
-    </div>
+    <%= f.spree_number_field :amount_percentage, label: Spree.t(:rate), append: '%', min: 0, step: 0.1, required: true %>
 
     <%= f.spree_collection_select :zone_id, @available_zones, :id, :name, label: Spree.t(:zone) %>
     <%= f.spree_collection_select :tax_category_id, @available_categories, :id, :name, label: Spree.t(:tax_category) %>

data/app/views/spree/admin/taxons/_form.html.erb

@@ -81,17 +81,10 @@
         <h5 class="card-title"><%= Spree.t(:images) %></h5>
       </div>
       <div class="card-body">
-        <%= f.label :image, Spree.t(:image) %>
-        <%= render 'active_storage/upload_form', form: f, field_name: :image, width: 1920, height: 1080 %>
-        <%= f.error_message_on :image %>
+        <%= f.spree_file_field :image, width: 1920, height: 1080 %>
       </div>
       <div class="card-body">
-        <%= f.label :square_image, Spree.t(:square_image) %>
-        <p class="text-muted form-text">
-          Used for the featured image on the homepage.
-        </p>
-        <%= render 'active_storage/upload_form', form: f, field_name: :square_image, width: 400, height: 400, crop: true %>
-        <%= f.error_message_on :square_image %>
+        <%= f.spree_file_field :square_image, width: 400, height: 400, crop: true, help: "Used for the featured image on the homepage." %>
       </div>
     </div>
 

data/app/views/spree/admin/themes/_theme.html.erb

@@ -39,7 +39,7 @@
       <div class="d-flex justify-content-end w-100">
         <%= link_to Spree.t('actions.publish'), publish_admin_theme_path(theme), class: 'btn btn-sm btn-light mr-2', data: { turbo_method: :put } unless theme.default? %>
         <%= dropdown do %>
-          <%= dropdown_toggle class: 'btn-light btn-sm' do %>
+          <%= dropdown_toggle class: 'btn-light btn-sm h-100' do %>
             <%= icon('dots-vertical', class: 'mr-0') %>
           <% end %>
           <%= dropdown_menu do %>

data/app/views/spree/admin/translations/translation_rows/_permalink_field_row.html.erb

@@ -10,15 +10,4 @@
   translated_value = f.object.send("#{field}_#{locale}")&.delete_prefix(base_permalink_translated)
 %>
 
-<div class="form-group">
-  <%= f.label field, Spree.t(field) %>
-  <div class="input-group">
-    <% if base_permalink_translated.present? %>
-      <div class="input-group-prepend">
-        <span class="input-group-text"><%= base_permalink_translated %></span>
-      </div>
-    <% end %>
-
-    <%= f.text_field "#{field}_#{locale}", value: translated_value, class: 'form-control' %>
-  </div>
-</div>
+<%= f.spree_text_field "#{field}_#{locale}", label: Spree.t(field), value: translated_value, prepend: base_permalink_translated.presence %>

data/app/views/spree/admin/users/_filters.html.erb

@@ -1,16 +1,22 @@
-<%= search_form_for [:admin, @search], url: spree.admin_users_url, class: "filter-wrap", data: {controller: "filters dropdown"} do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
-    <%= render 'spree/admin/shared/filters_search_bar', param: :multi_search, placeholder: Spree.t('admin.users.filters.search_placeholder') %>
+<%= search_form_for [:admin, @search], url: spree.admin_users_url, class: "filter-wrap", data: {controller: "filters dialog"} do |f| %>
+    <div class="d-flex flex-column flex-lg-row gap-2">
+      <%= render 'spree/admin/shared/filters_search_bar', param: :multi_search, placeholder: Spree.t('admin.users.filters.search_placeholder') %>
 
-    <%= render "spree/admin/shared/calendar_range_picker",
-          date_from_input_name: "q[created_at_gt]",
-          date_to_input_name: "q[created_at_lt]",
-          date_from_value: params.dig(:q, :created_at_gt),
-          date_to_value: params.dig(:q, :created_at_lt) %>
+      <%= render "spree/admin/shared/calendar_range_picker",
+            date_from_input_name: "q[created_at_gt]",
+            date_to_input_name: "q[created_at_lt]",
+            date_from_value: params.dig(:q, :created_at_gt),
+            date_to_value: params.dig(:q, :created_at_lt) %>
 
-    <%= render 'spree/admin/shared/filters_button' %>
-  </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
+      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+        <%= icon "adjustments", class: "mr-1" %>
+        <%= Spree.t("admin.filters") %>
+      <% end %>
+    </div>
+
+  <dialog class="drawer" data-dialog-target="dialog" id="user-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
     <div class="form-group">
       <%= f.label :bill_address_firstname_i_cont_any, Spree.t(:first_name) %>
       <%= f.text_field :bill_address_firstname_i_cont_any, class: "form-control", data: { filters_target: :input } %>
@@ -62,8 +68,12 @@
       } %>
     </div>
     <%= render_admin_partials(:users_filters_partials, f: f) %>
-    <%= render 'spree/admin/shared/filter_submit' %>
-  </div>
+    </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <%= render 'spree/admin/shared/filter_submit' %>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>