add sort menu

app/javascript/elements/native_action.js

@@ -22,6 +22,8 @@ export default class extends HTMLElement {
       icon: this.dataset.icon,
       placement: this.dataset.placement || 'menu',
       section: this.dataset.section,
+      menu: this.dataset.menu,
+      menuIcon: this.dataset.menuIcon,
       native: this.dataset.native,
       url: this.dataset.url,
       accept: this.dataset.accept,

app/javascript/template_builder/builder.vue

@@ -29,12 +29,12 @@
       v-if="pendingFieldAttachmentUuids.length && editable"
       class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
     >
-      <div class="alert border-base-content/30 py-2 px-2.5">
+      <div class="alert border-base-content/30 py-2 px-2.5 max-sm:flex max-sm:items-center max-sm:justify-between max-sm:gap-2 max-sm:text-left max-sm:text-sm">
         <IconInfoCircle
           class="stroke-info shrink-0 w-6 h-6"
         />
         <span>{{ t('uploaded_pdf_contains_form_fields_keep_or_remove_them') }}</span>
-        <div>
+        <div class="max-sm:flex max-sm:gap-1 max-sm:shrink-0">
           <button
             class="btn btn-sm"
             @click.prevent="removePendingFields"

app/views/shared/_pagination.html.erb

@@ -1,4 +1,5 @@
 <% if turbo_native_app? && local_assigns[:next_page_path].blank? %>
+  <%= local_assigns[:right_additional_html] %>
   <% if local_assigns[:left_additional_html].present? %>
     <div class="mt-2">
       <%= local_assigns[:left_additional_html] %>

app/views/shared/_templates_order_select.html.erb

@@ -3,31 +3,37 @@
     <%= svg_icon('arrow_sort', class: 'w-5 h-5') %>
   </label>
   <ul tabindex="0" class="dropdown-content z-[10] menu p-2 shadow bg-base-100 rounded-box mb-1 min-w-48">
-    <toggle-cookies data-value="created_at" data-key="dashboard_templates_order">
-      <li>
-        <button class="<%= 'bg-base-200' if selected_order == 'created_at' %>">
-          <%= svg_icon('sort_descending_numbers', class: 'w-4 h-4') %>
-          <span class="whitespace-nowrap"><%= t('newest_first') %></span>
-        </button>
-      </li>
-    </toggle-cookies>
-    <% if local_assigns[:with_recently_used] != false %>
-      <toggle-cookies data-value="used_at" data-key="dashboard_templates_order">
+    <native-action class="contents" data-menu="<%= t('sort_by') %>" data-menu-icon="arrow_sort" data-icon="sort_descending_numbers" data-selected="<%= selected_order == 'created_at' %>">
+      <toggle-cookies data-value="created_at" data-key="dashboard_templates_order">
         <li>
-          <button class="<%= 'bg-base-200' if selected_order == 'used_at' %>">
-            <%= svg_icon('sort_descending_small_big', class: 'w-4 h-4') %>
-            <span class="whitespace-nowrap"><%= t('recently_used') %></span>
+          <button class="<%= 'bg-base-200' if selected_order == 'created_at' %>">
+            <%= svg_icon('sort_descending_numbers', class: 'w-4 h-4') %>
+            <span class="whitespace-nowrap"><%= t('newest_first') %></span>
           </button>
         </li>
       </toggle-cookies>
+    </native-action>
+    <% if local_assigns[:with_recently_used] != false %>
+      <native-action class="contents" data-menu="<%= t('sort_by') %>" data-menu-icon="arrow_sort" data-icon="sort_descending_small_big" data-selected="<%= selected_order == 'used_at' %>">
+        <toggle-cookies data-value="used_at" data-key="dashboard_templates_order">
+          <li>
+            <button class="<%= 'bg-base-200' if selected_order == 'used_at' %>">
+              <%= svg_icon('sort_descending_small_big', class: 'w-4 h-4') %>
+              <span class="whitespace-nowrap"><%= t('recently_used') %></span>
+            </button>
+          </li>
+        </toggle-cookies>
+      </native-action>
     <% end %>
-    <toggle-cookies data-value="name" data-key="dashboard_templates_order">
-      <li>
-        <button class="<%= 'bg-base-200' if selected_order == 'name' %>">
-          <%= svg_icon('sort_ascending_letters', class: 'w-4 h-4') %>
-          <span class="whitespace-nowrap"><%= t('name_a_z') %></span>
-        </button>
-      </li>
-    </toggle-cookies>
+    <native-action class="contents" data-menu="<%= t('sort_by') %>" data-menu-icon="arrow_sort" data-icon="sort_ascending_letters" data-selected="<%= selected_order == 'name' %>">
+      <toggle-cookies data-value="name" data-key="dashboard_templates_order">
+        <li>
+          <button class="<%= 'bg-base-200' if selected_order == 'name' %>">
+            <%= svg_icon('sort_ascending_letters', class: 'w-4 h-4') %>
+            <span class="whitespace-nowrap"><%= t('name_a_z') %></span>
+          </button>
+        </li>
+      </toggle-cookies>
+    </native-action>
   </ul>
 </form>

app/views/submissions_dashboard/index.html.erb

@@ -32,7 +32,7 @@
 <% view_archived_html = capture do %>
   <% if can?(:manage, :countless) || current_account.submissions.archived.exists? || current_account.templates.where(Submission.where(Submission.arel_table[:template_id].eq(::Template.arel_table[:id])).arel.exists).archived.exists? %>
     <div>
-      <native-action data-placement="menu" data-icon="archive">
+      <native-action data-placement="menu" data-icon="archive" data-label="<%= t('archived') %>">
         <a href="<%= submissions_archived_index_path %>" class="link text-sm" data-native-title="<%= t('archived') %>"><%= t('view_archived') %></a>
       </native-action>
     </div>

app/views/template_folders/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for(:native_title, @template_folder.name) if turbo_native_app? %>
 <% if turbo_native_app? && (can?(:manage, :countless) || current_account.templates.where.not(archived_at: nil).exists?) %>
-  <native-action data-placement="menu" data-icon="archive">
+  <native-action data-placement="menu" data-icon="archive" data-label="<%= t('archived') %>">
     <a href="<%= templates_archived_index_path %>" data-native-title="<%= t('archived') %>"><%= t('view_archived') %></a>
   </native-action>
 <% end %>

app/views/templates_dashboard/index.html.erb

@@ -44,7 +44,7 @@
   <% view_archived_html = capture do %>
     <% if has_archived %>
       <div>
-        <native-action data-placement="menu" data-icon="archive">
+        <native-action data-placement="menu" data-icon="archive" data-label="<%= t('archived') %>">
           <a href="<%= templates_archived_index_path %>" class="link text-sm" data-native-title="<%= t('archived') %>"><%= t('view_archived') %></a>
         </native-action>
       </div>

config/locales/i18n.yml

@@ -262,6 +262,7 @@ en: &en
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Your account will be permanently deleted within 2 months. Please contact us if you want to keep your account.
   test_mode: Test mode
   exit_test_mode: Exit test mode
+  sort_by: Sort by
   copy: Copy
   copied: Copied
   rotate: Rotate
@@ -1394,6 +1395,7 @@ es: &es
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Tu solicitud de eliminación de cuenta se procesará en un plazo de 2 meses. Por favor contáctanos si deseas mantener tu cuenta.
   test_mode: Modo de prueba
   exit_test_mode: Salir del modo de prueba
+  sort_by: Ordenar por
   copy: Copiar
   copied: Copiado
   rotate: Rotar
@@ -2537,6 +2539,7 @@ it: &it
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: "La tua richiesta di rimozione dell'account sarà elaborata entro 2 mesi. Contattaci se desideri mantenere il tuo account."
   test_mode: Modalità di test
   exit_test_mode: Esci dalla modalità di prova
+  sort_by: Ordina per
   copy: Copia
   copied: Copiato
   rotate: Ruota
@@ -3666,6 +3669,7 @@ fr: &fr
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Votre demande de suppression de compte sera traitée sous 2 mois. Veuillez nous contacter si vous souhaitez conserver votre compte.
   test_mode: Mode test
   exit_test_mode: Quitter le mode test
+  sort_by: Trier par
   copy: Copier
   copied: Copié
   rotate: Pivoter
@@ -4805,6 +4809,7 @@ pt: &pt
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Seu pedido de remoção da conta será processado em até 2 meses. Entre em contato conosco se você quiser manter sua conta.
   test_mode: Modo de teste
   exit_test_mode: Sair do modo de teste
+  sort_by: Ordenar por
   copy: Copiar
   copied: Copiado
   rotate: Girar
@@ -5947,6 +5952,7 @@ de: &de
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Ihre Anfrage zur Kontolöschung wird innerhalb von 2 Monaten bearbeitet. Bitte kontaktieren Sie uns, wenn Sie Ihr Konto behalten möchten.
   test_mode: Testmodus
   exit_test_mode: Testmodus verlassen
+  sort_by: Sortieren nach
   copy: Kopieren
   copied: Kopiert
   rotate: Drehen
@@ -7617,6 +7623,7 @@ nl: &nl
   your_account_will_be_permanently_deleted_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Uw account wordt binnen 2 maanden permanent verwijderd. Neem contact met ons op als u uw account wilt behouden.
   test_mode: Testmodus
   exit_test_mode: Testmodus verlaten
+  sort_by: Sorteren op
   copy: Kopiëren
   copied: Gekopieerd
   rotate: Draaien