adjust ui

app/controllers/application_controller.rb

@@ -13,7 +13,9 @@ class ApplicationController < ActionController::Base
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
 
-  before_action :set_csp, if: -> { request.get? && !request.headers['HTTP_X_TURBO_REQUEST_ID'] && !turbo_infinite_scroll? }
+  before_action :set_csp, if: lambda {
+    request.get? && !request.headers['HTTP_X_TURBO_REQUEST_ID'] && !turbo_infinite_scroll?
+  }
 
   helper_method :button_title,
                 :current_account,
@@ -70,12 +72,22 @@ class ApplicationController < ActionController::Base
     request.headers['HTTP_X_TURBO_INFINITE_SCROLL'].present?
   end
 
+  def turbo_native_app?
+    return @turbo_native_app if defined?(@turbo_native_app)
+
+    @turbo_native_app = request.user_agent.to_s.include?('Hotwire Native')
+  end
+
   def turbo_native_ios?
-    request.user_agent.to_s.include?('Hotwire Native iOS')
+    return @turbo_native_ios if defined?(@turbo_native_ios)
+
+    @turbo_native_ios = request.user_agent.to_s.include?('Hotwire Native iOS')
   end
 
   def turbo_native_android?
-    request.user_agent.to_s.include?('Hotwire Native Android')
+    return @turbo_native_android if defined?(@turbo_native_android)
+
+    @turbo_native_android = request.user_agent.to_s.include?('Hotwire Native Android')
   end
 
   def with_locale(&)

app/javascript/application.js

@@ -81,6 +81,12 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
+document.addEventListener('turbo:morph', () => {
+  if (document.activeElement?.closest('.dropdown')) {
+    document.activeElement.blur()
+  }
+})
+
 document.addEventListener('turbo:before-fetch-response', (event) => {
   if (event.detail.fetchResponse.header('content-disposition')?.includes('attachment')) {
     event.preventDefault()
@@ -373,7 +379,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
     root.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
 
-    style.textContent = 'html { overflow-x: hidden; overscroll-behavior-x: none; } html, body { max-width: 100%; }'
+    style.textContent = 'html { overflow-x: hidden; overscroll-behavior-x: none; } html, body { max-width: 100%; } body { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }'
 
     root.querySelector('head').appendChild(style)
 

app/javascript/elements/native_action.js

@@ -1,3 +1,5 @@
+import { nativeIcon } from '../native'
+
 export default class extends HTMLElement {
   connectedCallback () {
     const bridge = window.webkit?.messageHandlers?.native
@@ -18,13 +20,13 @@ export default class extends HTMLElement {
       op: 'add',
       id: this.nativeId,
       title: this.dataset.label || target?.textContent.trim(),
-      icon: this.dataset.icon,
+      icon: nativeIcon(this.dataset.icon),
       placement: this.dataset.placement || 'menu',
       side: this.dataset.side,
       view: this.dataset.view,
       section: this.dataset.section,
       menu: this.dataset.menu,
-      menuIcon: this.dataset.menuIcon,
+      menuIcon: nativeIcon(this.dataset.menuIcon),
       native: this.dataset.native,
       url: this.dataset.url,
       accept: this.dataset.accept,

app/javascript/elements/native_menu.js

@@ -1,3 +1,5 @@
+import { nativeIcon } from '../native'
+
 export default class extends HTMLElement {
   connectedCallback () {
     if (window.webkit?.messageHandlers?.native) {
@@ -31,7 +33,7 @@ export default class extends HTMLElement {
       return {
         id: target.dataset.nativeId,
         title: action.dataset.label || target.textContent.trim(),
-        icon: action.dataset.icon,
+        icon: nativeIcon(action.dataset.icon),
         destructive: action.dataset.destructive === 'true',
         selected: action.dataset.selected === 'true',
         haptic: action.dataset.haptic === 'true'

app/javascript/native.js

@@ -1,3 +1,54 @@
+const ICONS = {
+  ios: {
+    link: 'link',
+    archive: 'archivebox',
+    folder: 'folder',
+    trash: 'trash',
+    rotate: 'arrow.counterclockwise',
+    copy: 'doc.on.doc',
+    pencil: 'pencil',
+    logs: 'list.bullet.rectangle',
+    external_link: 'arrow.up.right.square',
+    download: 'arrow.down.circle',
+    mail_forward: 'paperplane',
+    send: 'paperplane',
+    writing: 'signature',
+    adjustments_horizontal: 'slider.horizontal.3',
+    file_text: 'doc.text',
+    files: 'doc.on.doc',
+    plus: 'plus',
+    eye: 'eye',
+    check: 'checkmark',
+    code: 'chevron.left.forwardslash.chevron.right',
+    history: 'clock.arrow.circlepath',
+    user: 'person',
+    users: 'person.2',
+    users_plus: 'person.badge.plus',
+    photo: 'photo',
+    settings: 'gearshape',
+    logout: 'rectangle.portrait.and.arrow.right',
+    upload: 'arrow.up.doc',
+    scan: 'doc.viewfinder',
+    pencil_plus: 'square.and.pencil',
+    arrow_sort: 'arrow.up.arrow.down',
+    sort_descending_numbers: 'calendar',
+    sort_descending_small_big: 'clock.arrow.circlepath',
+    sort_ascending_letters: 'textformat.abc',
+    calendar: 'calendar',
+    calendar_check: 'calendar.badge.checkmark',
+    info_circle: 'info.circle',
+    list: 'list.bullet',
+    clock: 'clock',
+    circle_check: 'checkmark.circle'
+  }
+}
+
+const platform = navigator.userAgent.includes('Hotwire Native Android') ? 'android' : 'ios'
+
+export function nativeIcon (name) {
+  return ICONS[platform]?.[name] || name
+}
+
 const handlers = window.webkit?.messageHandlers
 
 if (handlers?.native && window === window.top) {
@@ -46,7 +97,7 @@ if (handlers?.native && window === window.top) {
 
     const actions = link.closest('[data-native-actions]')?.dataset.nativeActions
 
-    handlers.native.postMessage({ type: 'title', url: link.href, title, actions: actions ? actions.split(',') : null })
+    handlers.native.postMessage({ type: 'title', url: link.href, title, actions: actions ? actions.split(',').map(nativeIcon) : null })
   }, true)
 
   document.addEventListener('click', (event) => {

app/javascript/template_builder/area_title.vue

@@ -90,7 +90,7 @@
         class="cursor-pointer flex items-center"
         :class="{ 'pr-0.5': isMobile }"
         style="height: 24px"
-        @focus="isSettingsFocus = true"
+        @focus="onSettingsFocus"
         @blur="maybeBlurSettings"
       >
         <IconDotsVertical class="w-5 h-5" />
@@ -423,6 +423,19 @@ export default {
         this.isSettingsFocus = false
       }
     },
+    onSettingsFocus () {
+      this.isSettingsFocus = true
+
+      if (this.isMobile) {
+        this.$nextTick(() => {
+          const dropdown = this.$refs.settingsDropdown
+          const padding = parseFloat(getComputedStyle(dropdown).paddingLeft) + 6
+          const left = dropdown.parentElement.getBoundingClientRect().right - dropdown.offsetWidth - padding
+
+          dropdown.style.right = left < 0 ? `${left}px` : ''
+        })
+      }
+    },
     onNameFocus (e) {
       this.selectedAreasRef.value = [this.area]
 

app/views/layouts/_head_tags.html.erb

@@ -4,5 +4,5 @@
 <%= render 'shared/meta' %>
 <% if turbo_native_app? %>
   <meta name="turbo-cache-control" content="no-preview">
-  <style>native-action { display: none !important; }</style>
+  <%= render 'layouts/native_styles' %>
 <% end %>

app/views/layouts/_native_path_configuration.json.erb

@@ -3,6 +3,7 @@
     "strings": {
       "search": <%== t('search').to_json %>,
       "create": <%== t('create').to_json %>,
+      "new": <%== t('new').to_json %>,
       "documents": <%== t('documents').to_json %>,
       "fields": <%== t('fields').to_json %>,
       "more": <%== t('more').to_json %>,

app/views/layouts/_native_styles.html.erb

@@ -0,0 +1,10 @@
+<style>
+  native-action {
+    display: none !important;
+  }
+
+  a, img {
+    -webkit-user-drag: none;
+    -webkit-touch-callout: none;
+  }
+</style>

app/views/templates/_submission.html.erb

@@ -35,13 +35,13 @@
           <span class="flex flex-col md:flex-row md:items-center gap-3 min-w-0">
             <% if submission.expired? && !submitter.completed_at? && !submitter.declined_at? %>
               <div class="md:tooltip flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
+                <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm max-sm:text-[13px] font-semibold">
                   <%= t('expired') %>
                 </span>
               </div>
             <% else %>
               <a href="<%= submission_path(submission) %>" class="flex z-[1]">
-                <span class="badge <%= SubmissionsController::STATUS_BADGES[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold md:tooltip" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+                <span class="badge <%= SubmissionsController::STATUS_BADGES[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm max-sm:text-[13px] font-semibold md:tooltip" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
                   <%= t(submitter.status) %>
                 </span>
               </a>
@@ -67,7 +67,7 @@
         <% if submitter.completed_at? %>
           <div class="flex-1 min-w-0 md:flex-none">
             <div class="w-full md:w-fit">
-              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:normal-case btn-neutral text-white w-full md:w-36">
+              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:text-[13px] btn-neutral text-white w-full md:w-36">
                 <span class="flex items-center justify-center space-x-1 <%= 'md:space-x-2' if t('download').length < 11 %>" data-target="download-button.defaultButton">
                   <%= svg_icon('download', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 stroke-2') %>
                   <span class="inline"><%= t('download') %></span>
@@ -82,7 +82,7 @@
         <% elsif !submission.archived_at? && !template&.archived_at? && !submission.expired? && !submitter.declined_at? %>
           <% if current_user.email == submitter.email %>
             <div class="flex-1 min-w-0 md:flex-none md:w-36 flex">
-              <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm max-sm:normal-case btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
+              <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm max-sm:text-[13px] btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2">
                   <% if t('sign_now').length < 12 %>
                     <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -93,12 +93,12 @@
             </div>
           <% else %>
             <div class="flex-1 min-w-0 md:flex-none">
-              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'btn btn-sm max-sm:normal-case btn-neutral text-white md:w-36 flex z-[1]', icon_class: 'w-6 h-6 max-sm:w-[18px] max-sm:h-[18px] text-white', copy_title: t('copy_link').length < 10 ? t('copy_link') : t('copy'), copy_title_md: t('link'), copied_title_md: t('copied') %>
+              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'btn btn-sm max-sm:text-[13px] btn-neutral text-white md:w-36 flex z-[1]', icon_class: 'w-6 h-6 max-sm:w-[18px] max-sm:h-[18px] text-white', copy_title: t('copy_link').length < 10 ? t('copy_link') : t('copy'), copy_title_md: t('link'), copied_title_md: t('copied') %>
             </div>
           <% end %>
         <% end %>
         <div class="flex-1 min-w-0 md:flex-none z-[1]">
-          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:normal-case w-full md:w-24">
+          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:text-[13px] w-full md:w-24">
             <%= t('view') %>
           </a>
         </div>
@@ -119,13 +119,13 @@
           <% if is_submission_completed %>
             <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
             <a href="<%= submission_path(submission) %>" class="z-[1] tooltip tooltip-no-touch flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-              <span class="badge <%= SubmissionsController::STATUS_BADGES[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
+              <span class="badge <%= SubmissionsController::STATUS_BADGES[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm max-sm:text-[13px] font-semibold">
                 <%= t(latest_submitter.status) %>
               </span>
             </a>
           <% elsif submission.expired? %>
             <div class="md:tooltip flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-              <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
+              <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm max-sm:text-[13px] font-semibold">
                 <%= t('expired') %>
               </span>
             </div>
@@ -158,7 +158,7 @@
                   </span>
                 </span>
                 <% if submitter.completed_at? && !is_submission_completed %>
-                  <download-button data-src="<%= submitter_download_index_path(submitter) %>" class="btn btn-xs max-sm:normal-case btn-neutral text-white w-12 md:w-36 shrink-0 z-[1]">
+                  <download-button data-src="<%= submitter_download_index_path(submitter) %>" class="btn btn-xs btn-neutral text-white w-12 md:w-36 shrink-0 z-[1]">
                     <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
                       <span class="hidden md:inline"><%= t('download') %></span>
@@ -171,14 +171,14 @@
                 <% elsif !template&.archived_at? && !submission.archived_at? && !is_submission_completed && !submission.expired? && !submitter.declined_at? %>
                   <div class="relative flex items-center space-x-3 shrink-0">
                     <% if current_user.email == submitter.email %>
-                      <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-xs max-sm:normal-case btn-outline btn-neutral bg-white w-12 md:w-36 z-[1]">
+                      <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-xs btn-outline btn-neutral bg-white w-12 md:w-36 z-[1]">
                         <span class="flex items-center justify-center space-x-1 md:space-x-2">
                           <%= svg_icon('writing_sign', class: "w-4 h-4 stroke-2 #{'md:hidden' if t('sign_now').length >= 12}") %>
                           <span class="hidden md:inline shrink-0"><%= t('sign_now') %></span>
                         </span>
                       </a>
                     <% else %>
-                      <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'relative btn btn-xs max-sm:normal-case text-xs btn-neutral text-white w-12 md:w-36 flex z-[1]', icon_class: 'w-4 h-4 text-white', copy_title: t('copy_link') %>
+                      <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'relative btn btn-xs text-xs btn-neutral text-white w-12 md:w-36 flex z-[1]', icon_class: 'w-4 h-4 text-white', copy_title: t('copy_link') %>
                     <% end %>
                   </div>
                 <% end %>
@@ -192,7 +192,7 @@
           <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
           <div class="flex-1 min-w-0 md:flex-none">
             <div class="w-full md:w-fit">
-              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:normal-case btn-neutral text-white w-full md:w-36 z-[1]">
+              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:text-[13px] btn-neutral text-white w-full md:w-36 z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
                   <%= svg_icon('download', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 stroke-2') %>
                   <span class="inline"><%= t('download') %></span>
@@ -206,7 +206,7 @@
           </div>
         <% elsif !template&.archived_at? && !submission.archived_at? && !submission.expired? && (sign_now_submitter = submitters.find { |item| !item.completed_at? && !item.declined_at? && current_user.email == item.email }) %>
           <div class="flex-1 min-w-0 flex md:hidden">
-            <a href="<%= submit_form_path(slug: sign_now_submitter.slug) %>" data-turbo="false" target="_blank" class="btn btn-sm max-sm:normal-case btn-neutral btn-outline bg-white w-full flex z-[1]">
+            <a href="<%= submit_form_path(slug: sign_now_submitter.slug) %>" data-turbo="false" target="_blank" class="btn btn-sm max-sm:text-[13px] btn-neutral btn-outline bg-white w-full flex z-[1]">
               <span class="flex items-center justify-center space-x-1">
                 <% if t('sign_now').length < 12 %>
                   <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -217,7 +217,7 @@
           </div>
         <% end %>
         <div class="flex-1 min-w-0 md:flex-none z-[1]">
-          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:normal-case w-full md:w-24">
+          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:text-[13px] w-full md:w-24">
             <%= t('view') %>
           </a>
         </div>

app/views/templates/_template.html.erb

@@ -28,48 +28,50 @@
       </p>
     </div>
   </a>
-  <div class="absolute top-0 bottom-0 w-0 items-center hidden md:group-hover:flex" style="right: 37px" data-targets="dashboard-dropzone.hiddenOnDrag">
-    <div class="space-y-1">
-      <% if can?(:update, template) && !template.archived_at? && template.account_id == current_account.id %>
-        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('move') %>">
-          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-            <%= svg_icon('folder_share', class: 'w-4 h-4') %>
-          </a>
-        </span>
-      <% end %>
-      <% if template.archived_at? && can?(:destroy, template) %>
-        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('restore') %>">
-          <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
-            <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
-            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
-          <% end %>
-        </span>
-      <% elsif !template.archived_at? && can?(:update, template) %>
-        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
-          <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-            <%= svg_icon('pencil', class: 'w-4 h-4') %>
-          </a>
-        </span>
-      <% end %>
-      <% if can?(:create, template) %>
-        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('clone') %>">
-          <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-            <%= svg_icon('copy', class: 'w-4 h-4') %>
-          </a>
-        </span>
-      <% end %>
-      <% if can?(:destroy, template) %>
-        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= template.archived_at? ? t('delete') : t('archive') %>">
-          <%= button_to template_path(template), data: template.archived_at? ? { turbo_confirm: t('template_deletion_is_irreversible_and_will_permanently_remove_all_associated_signed_documents_with_it_are_you_sure_') } : {}, params: { permanently: template.archived_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria: { label: template.archived_at? ? t('delete') : t('archive') } do %>
-            <%= svg_icon(template.archived_at? ? 'trash' : 'archive', class: 'w-4 h-4 enabled') %>
-            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
-          <% end %>
-        </span>
-      <% end %>
+  <% unless turbo_native_app? %>
+    <div class="absolute top-0 bottom-0 w-0 items-center hidden md:group-hover:flex" style="right: 37px" data-targets="dashboard-dropzone.hiddenOnDrag">
+      <div class="space-y-1">
+        <% if can?(:update, template) && !template.archived_at? && template.account_id == current_account.id %>
+          <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('move') %>">
+            <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+              <%= svg_icon('folder_share', class: 'w-4 h-4') %>
+            </a>
+          </span>
+        <% end %>
+        <% if template.archived_at? && can?(:destroy, template) %>
+          <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('restore') %>">
+            <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
+              <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
+              <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+            <% end %>
+          </span>
+        <% elsif !template.archived_at? && can?(:update, template) %>
+          <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
+            <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+              <%= svg_icon('pencil', class: 'w-4 h-4') %>
+            </a>
+          </span>
+        <% end %>
+        <% if can?(:create, template) %>
+          <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('clone') %>">
+            <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+              <%= svg_icon('copy', class: 'w-4 h-4') %>
+            </a>
+          </span>
+        <% end %>
+        <% if can?(:destroy, template) %>
+          <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= template.archived_at? ? t('delete') : t('archive') %>">
+            <%= button_to template_path(template), data: template.archived_at? ? { turbo_confirm: t('template_deletion_is_irreversible_and_will_permanently_remove_all_associated_signed_documents_with_it_are_you_sure_') } : {}, params: { permanently: template.archived_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria: { label: template.archived_at? ? t('delete') : t('archive') } do %>
+              <%= svg_icon(template.archived_at? ? 'trash' : 'archive', class: 'w-4 h-4 enabled') %>
+              <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+            <% end %>
+          </span>
+        <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
   <% if !template.archived_at? && (can?(:create, Submission) || can?(:update, template) || can?(:create, template) || can?(:destroy, template)) %>
-    <native-menu class="<%= 'dropdown dropdown-top dropdown-end has-[:disabled]:dropdown-open' unless turbo_native_app? %> absolute bottom-4 right-4 md:hidden">
+    <native-menu class="<%= 'dropdown dropdown-top dropdown-end has-[:disabled]:dropdown-open md:hidden' unless turbo_native_app? %> absolute bottom-4 right-4">
       <label tabindex="0" aria-label="<%= t('more') %>" class="block cursor-pointer py-2 pl-4 pr-2 -ml-4 -mr-2 -mt-2 -mb-3 text-base-content/70">
         <%= svg_icon('dots', class: 'w-5 h-5') %>
       </label>
@@ -77,40 +79,40 @@
         <% if can?(:create, Submission) %>
           <li>
             <native-menu-action data-icon="send" data-label="<%= t('send') %>" class="grid-cols-1 p-0">
-              <%= link_to new_template_submission_path(template), class: 'flex items-center gap-2 px-4 py-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
+              <a href="<%= new_template_submission_path(template) %>" class="flex items-center gap-2 px-4 py-2" data-turbo-frame="modal" data-native-modal="medium">
                 <%= svg_icon('send', class: 'w-5 h-5 flex-shrink-0') %>
                 <span><%= t('send') %></span>
-              <% end %>
+              </a>
             </native-menu-action>
           </li>
         <% end %>
         <% if can?(:update, template) %>
           <li>
             <native-menu-action data-icon="pencil" data-label="<%= t('edit') %>" class="grid-cols-1 p-0">
-              <%= link_to edit_template_path(template), class: 'flex items-center gap-2 px-4 py-2', data: { native_title: template.name } do %>
+              <a href="<%= edit_template_path(template) %>" class="flex items-center gap-2 px-4 py-2" data-native-title="<%= template.name %>" data-native-actions="<%= 'check,menu' if turbo_native_app? %>">
                 <%= svg_icon('pencil', class: 'w-5 h-5 flex-shrink-0') %>
                 <span><%= t('edit') %></span>
-              <% end %>
+              </a>
             </native-menu-action>
           </li>
         <% end %>
         <% if can?(:update, template) && template.account_id == current_account.id %>
           <li>
             <native-menu-action data-icon="folder" data-label="<%= t('move') %>" class="grid-cols-1 p-0">
-              <%= link_to edit_template_folder_path(template.id), class: 'flex items-center gap-2 px-4 py-2', data: { turbo_frame: :modal, native_title: t('move_into_folder'), native_modal: :medium } do %>
+              <a href="<%= edit_template_folder_path(template.id) %>" class="flex items-center gap-2 px-4 py-2" data-turbo-frame="modal" data-native-title="<%= t('move_into_folder') %>" data-native-modal="medium">
                 <%= svg_icon('folder_share', class: 'w-5 h-5 flex-shrink-0') %>
                 <span><%= t('move') %></span>
-              <% end %>
+              </a>
             </native-menu-action>
           </li>
         <% end %>
         <% if can?(:create, template) %>
           <li>
             <native-menu-action data-icon="copy" data-label="<%= t('clone') %>" class="grid-cols-1 p-0">
-              <%= link_to new_template_clone_path(template), class: 'flex items-center gap-2 px-4 py-2', data: { turbo_frame: :modal, native_title: t('clone_template'), native_modal: :medium } do %>
+              <a href="<%= new_template_clone_path(template) %>" class="flex items-center gap-2 px-4 py-2" data-turbo-frame="modal" data-native-title="<%= t('clone_template') %>" data-native-modal="medium">
                 <%= svg_icon('copy', class: 'w-5 h-5 flex-shrink-0') %>
                 <span><%= t('clone') %></span>
-              <% end %>
+              </a>
             </native-menu-action>
           </li>
         <% end %>

app/views/templates/_title.html.erb

@@ -94,7 +94,7 @@
     <% end %>
     <% if !template.archived_at? && can?(:update, template) %>
       <native-action data-placement="bar" data-icon="pencil" data-label="<%= t('edit') %>">
-        <a href="<%= edit_template_path(template) %>" data-native-title="<%= template.name %>"></a>
+        <a href="<%= edit_template_path(template) %>" data-native-title="<%= template.name %>" data-native-actions="check,menu"></a>
       </native-action>
       <native-action data-section="edit" data-icon="adjustments_horizontal" data-label="<%= t('preferences') %>">
         <a href="<%= template_preferences_path(template) %>" data-turbo-frame="modal"></a>