adjust filters

app/views/shared/_classes.html.erb

@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30 order-none order-1 order-2 order-3 order-4 order-5 lg:inline lg:hidden' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30 order-1 order-2 order-3 order-4 order-5 lg:inline lg:hidden' %>

app/views/submissions_archived/index.html.erb

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div class="flex items-center md:items-end gap-2">
-    <%= render 'submissions_filters/applied_filters', filter_params: %>
+    <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true %>
     <%= render 'submissions_filters/filter_button', filter_params: %>
   </div>
 </div>

app/views/submissions_filters/_applied_filters.html.erb

@@ -3,20 +3,15 @@
 <% ordered_filters = request.query_parameters.keys.filter_map { |key| filter_names.find { |name| key.start_with?(name) } }.uniq %>
 <% chip_order = ordered_filters.reverse.each_with_index.to_h { |name, index| [name, index + 1] } %>
 <% chip_order.default = ordered_filters.size + 1 %>
-<scroll-fade class="flex items-center gap-2 overflow-x-auto flex-1 min-w-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 md:contents">
+<% status_icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened' }[params[:status]] %>
-  <% if local_assigns[:with_status] %>
+<% status_icons = { 'all' => 'list', 'pending' => 'clock', 'completed' => 'circle_check' } %>
-    <% status_icons = { 'all' => 'list', 'pending' => 'clock', 'completed' => 'circle_check', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened', 'declined' => 'x_circle', 'expired' => 'clock_cancel' } %>
+<% current_status = status_icons.key?(params[:status].to_s) ? params[:status].to_s : 'all' %>
-    <% current_status = status_icons.key?(params[:status].to_s) ? params[:status] : 'all' %>
+<% with_status_button = local_assigns[:with_status] && status_icon.blank? %>
-    <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" class="order-<%= current_status == 'all' ? 'none' : chip_order['status'] %> md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+<% chips_html = capture do %>
-      <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
+  <% if status_icon %>
-      <span><%= t(current_status) %></span>
+    <div class="order-none flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700">
-      <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
-    </a>
-  <% end %>
-  <% if icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened' }[params[:status]] %>
-    <div class="order-<%= chip_order['status'] %> md:order-none <%= 'hidden md:flex' if local_assigns[:with_status] %> flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700">
       <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
-        <%= svg_icon(icon, class: 'w-5 h-5 shrink-0') %>
+        <%= svg_icon(status_icon, class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= t(params[:status]) %></span>
       <% end %>
       <%= link_to url_for(params: request.query_parameters.except('status')), class: 'rounded-lg ml-1 shrink-0 hover:bg-base-content hover:text-white' do %>
@@ -82,4 +77,35 @@
       <% end %>
     </div>
   <% end %>
+<% end %>
+<% if with_status_button && chips_html.blank? %>
+  <div class="dropdown md:hidden shrink-0">
+    <label tabindex="0" class="cursor-pointer flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+      <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
+      <span><%= t(current_status) %></span>
+      <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
+    </label>
+    <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[180px]">
+      <% { 'all' => request.query_parameters.except('status'), 'pending' => request.query_parameters.merge('status' => 'pending'), 'completed' => request.query_parameters.merge('status' => 'completed') }.each do |status, status_params| %>
+        <li>
+          <%= link_to url_for(params: status_params), class: ('bg-base-200' if current_status == status) do %>
+            <%= svg_icon(status_icons[status], class: 'w-5 h-5 shrink-0') %>
+            <span><%= t(status) %></span>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+<% if chips_html.present? %>
+  <scroll-fade class="flex items-center gap-2 overflow-x-auto flex-1 min-w-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 md:contents">
+    <% if with_status_button %>
+      <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" class="order-none md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+        <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
+        <span><%= t(current_status) %></span>
+        <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
+      </a>
+    <% end %>
+    <%= chips_html %>
   </scroll-fade>
+<% end %>

app/views/submissions_filters/_filter_button.html.erb

@@ -1,9 +1,11 @@
 <% query_params = params.permit(:q).merge(filter_params) %>
 <% advanced_filters = filter_params.then { |f| f[:status].in?(%w[pending completed]) ? f.except(:status) : f } %>
 <div class="dropdown dropdown-end shrink-0">
-  <label tabindex="0" class="cursor-pointer flex h-10 py-1 w-10 md:w-auto px-0 md:px-3 space-x-0 md:space-x-1 justify-center md:justify-between text-lg items-center border text-center text-neutral rounded-xl <%= advanced_filters.present? ? 'border-neutral-700 md:border-neutral-300' : 'border-neutral-300' %> hover:border-neutral-700">
+  <label tabindex="0" class="cursor-pointer flex h-10 py-1 text-lg items-center border text-center text-neutral rounded-xl hover:border-neutral-700 <%= advanced_filters.present? ? 'w-10 md:w-auto px-0 md:px-3 space-x-0 md:space-x-1 justify-center md:justify-between border-neutral-700 md:border-neutral-300' : 'px-3 space-x-1 justify-between border-neutral-300' %>">
     <%= svg_icon('filter', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-    <span class="hidden <%= 'md:inline' if advanced_filters.blank? %>">Filter</span>
+    <% if advanced_filters.blank? %>
+      <span>Filter</span>
+    <% end %>
   </label>
   <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[180px] text-right">
     <li class="flex">
@@ -18,7 +20,7 @@
         <span><%= t('created_at') %></span>
       <% end %>
     </li>
-    <li class="hidden md:flex">
+    <li class="flex">
       <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('info_circle', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('status') %></span>

app/views/submissions_filters/status.html.erb

@@ -3,9 +3,9 @@
     <div class="form-control w-full">
       <div id="status" class="radio-select grid grid-cols-2 gap-2 px-1">
         <% ['', 'pending', 'completed', 'partially_completed', 'sent', 'opened', 'declined', 'expired'].each do |status| %>
-          <label class="radio-label cursor-pointer inline-flex items-center space-x-2">
+          <label class="radio-label cursor-pointer inline-flex items-center space-x-2 min-w-0">
-            <%= radio_button_tag 'status', status, params[:status] == status || (status == '' && params[:status].blank?), class: 'base-radio' %>
+            <%= radio_button_tag 'status', status, params[:status] == status || (status == '' && params[:status].blank?), class: 'base-radio shrink-0' %>
-            <span><%= t(status.presence || 'all') %></span>
+            <span class="truncate"><%= t(status.presence || 'all') %></span>
           </label>
         <% end %>
       </div>

app/views/templates_archived_submissions/index.html.erb

@@ -18,9 +18,9 @@
       <% end %>
     </div>
   </div>
-  <div class="flex flex-nowrap md:flex-wrap justify-end items-center gap-2">
+  <div class="flex flex-nowrap md:flex-wrap md:justify-end items-center gap-2">
-    <%= render 'submissions_filters/applied_filters', filter_params: %>
+    <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true %>
-    <div class="shrink-0 md:order-first">
+    <div class="hidden md:block shrink-0 md:order-first">
       <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base h-10 min-h-10', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
         <span class="hidden md:inline"><%= t('export') %></span>