From eafae4cda23163eb143f4eb0e1cf32d7beabcb34 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 18 Sep 2026 19:48:56 +0300
Subject: [PATCH] add haptics

---
 app/javascript/elements/native_action.js    | 3 ++-
 app/javascript/elements/native_menu.js      | 3 ++-
 app/javascript/template_builder/builder.vue | 3 +++
 app/views/submissions/show.html.erb         | 4 ++--
 app/views/templates/show.html.erb           | 2 +-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/elements/native_action.js b/app/javascript/elements/native_action.js
index 543bd88fc..bce5163bf 100644
--- a/app/javascript/elements/native_action.js
+++ b/app/javascript/elements/native_action.js
@@ -31,7 +31,8 @@ export default class extends HTMLElement {
       url: this.dataset.url,
       accept: this.dataset.accept,
       destructive: this.dataset.destructive === 'true',
-      selected: this.dataset.selected === 'true'
+      selected: this.dataset.selected === 'true',
+      haptic: this.dataset.haptic === 'true'
     })
   }
 
diff --git a/app/javascript/elements/native_menu.js b/app/javascript/elements/native_menu.js
index 95842bdfc..e849b284c 100644
--- a/app/javascript/elements/native_menu.js
+++ b/app/javascript/elements/native_menu.js
@@ -35,7 +35,8 @@ export default class extends HTMLElement {
         title: action.dataset.label || target.textContent.trim(),
         icon: action.dataset.icon,
         destructive: action.dataset.destructive === 'true',
-        selected: action.dataset.selected === 'true'
+        selected: action.dataset.selected === 'true',
+        haptic: action.dataset.haptic === 'true'
       }
     })
 
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 29679b935..2e5476ac3 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -768,6 +768,7 @@
         data-side="leading"
         data-icon="files"
         data-native="drawer"
+        data-haptic="true"
         :data-label="t('documents')"
         data-view="documents"
       />
@@ -777,11 +778,13 @@
         data-side="trailing"
         data-icon="plus"
         data-native="drawer"
+        data-haptic="true"
         :data-label="'Fields'"
         data-view="fields"
       />
       <native-action
         v-if="nativePlatform && (drawField || drawCustomField) && (isBreakpointLg || isMobile)"
+        :key="drawCustomField?.uuid || drawField?.uuid"
         data-placement="draw"
         :data-label="t('draw_field').replace('{field}', drawCustomField ? drawCustomField.name : fieldNames[drawField.type])"
       >
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 2e38b403a..027a35cbd 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -369,8 +369,8 @@
     <% end %>
   </div>
   <% if native_tab == 'document' %>
-    <native-action data-placement="tab" data-native="tab" data-label="<%= t('document') %>" data-selected="true"></native-action>
-    <native-action data-placement="tab" data-native="tab" data-label="<%= t('recipients') %>" data-url="<%= tab_submission_path(@submission, tab: 'recipients') %>"></native-action>
+    <native-action data-placement="tab" data-native="tab" data-label="<%= t('document') %>" data-haptic="true" data-selected="true"></native-action>
+    <native-action data-placement="tab" data-native="tab" data-label="<%= t('recipients') %>" data-haptic="true" data-url="<%= tab_submission_path(@submission, tab: 'recipients') %>"></native-action>
   <% elsif !native_tab %>
     <toggle-visible data-element-ids="<%= %w[document_view parties_view].to_json %>">
       <label class="md:hidden btn btn-sm btn-neutral text-white text-base z-10 fixed bottom-2 right-2 h-16 shadow-lg">
diff --git a/app/views/templates/show.html.erb b/app/views/templates/show.html.erb
index e3936e0f1..13e209950 100644
--- a/app/views/templates/show.html.erb
+++ b/app/views/templates/show.html.erb
@@ -7,7 +7,7 @@
 <% if turbo_native_app? %>
   <native-action data-placement="search" data-native="search" data-label="<%= t('search') %>" data-url="<%= search_index_path(filter_params.to_h.merge({ 'scope' => 'submissions', 'template_id' => @template.id, 'archived' => ('true' if @template.archived_at?) }.compact)) %>"></native-action>
   <% if !@template.archived_at? && can?(:create, Submission) %>
-    <native-action data-placement="footer" data-icon="send" data-label="<%= t('send_to_recipients') %>">
+    <native-action data-placement="footer" data-icon="send" data-haptic="true" data-label="<%= t('send_to_recipients') %>">
       <a href="<%= new_template_submission_path(@template) %>" data-turbo-frame="modal" data-native-modal="<%= 'medium' if @template.submitters.size < 3 %>"></a>
     </native-action>
   <% end %>