add native app

app/views/layouts/_head_tags.html.erb

@@ -1,4 +1,4 @@
 <title>
-  <%= content_for(:html_title) || (signed_in? ? 'DocuSeal' : 'DocuSeal | Open Source Document Signing') %>
+  <%= content_for(:html_title) || (turbo_native_app? ? '' : (signed_in? ? 'DocuSeal' : 'DocuSeal | Open Source Document Signing')) %>
 </title>
 <%= render 'shared/meta' %>

app/views/layouts/application.html.erb

@@ -28,7 +28,7 @@
     <% end %>
     <turbo-frame id="modal"></turbo-frame>
     <turbo-frame id="drawer"></turbo-frame>
-    <%= render 'shared/navbar' %>
+    <%= render 'shared/navbar' unless turbo_native_app? %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>
     <div class="max-w-6xl mx-auto px-4 md:px-2 mb-8">
       <%= yield %>

app/views/settings/index.html.erb

@@ -1,7 +1,9 @@
-<div class="mb-2 w-full">
+<% unless turbo_native_app? %>
-  <a href="<%= root_path %>" class="flex items-center space-x-0.5 font-medium">
+  <div class="mb-2 w-full">
-    <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
+    <a href="<%= root_path %>" class="flex items-center space-x-0.5 font-medium">
-    <span><%= t('back') %></span>
+      <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
-  </a>
+      <span><%= t('back') %></span>
-</div>
+    </a>
+  </div>
+<% end %>
 <%= render 'shared/settings_nav', expanded: true %>

app/views/shared/_flash.html.erb

@@ -1,17 +1,21 @@
-<div id="flash" class="absolute top-0 w-full h-0 z-20">
+<% if turbo_native_app? %>
-  <div class="max-w-xl mx-auto mt-1.5">
+  <div id="native_flash" hidden data-notice="<%= flash[:notice] %>" data-alert="<%= flash[:alert] %>"></div>
-    <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
+<% else %>
-      <div class="flex items-center space-x-3">
+  <div id="flash" class="absolute top-0 w-full h-0 z-20">
-        <% if flash[:notice] %>
+    <div class="max-w-xl mx-auto mt-1.5">
-          <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
+      <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
-        <% else %>
+        <div class="flex items-center space-x-3">
-          <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
+          <% if flash[:notice] %>
-        <% end %>
+            <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
-        <div>
+          <% else %>
-          <span><%= flash[:notice] || flash[:alert] %></span>
+            <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
+          <% end %>
+          <div>
+            <span><%= flash[:notice] || flash[:alert] %></span>
+          </div>
         </div>
+        <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
       </div>
-      <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
     </div>
   </div>
-</div>
+<% end %>

app/views/shared/_settings_nav.html.erb

@@ -1,6 +1,6 @@
 <% expanded = local_assigns[:expanded] %>
 <div class="<%= expanded ? 'block -mx-3 md:mx-0' : 'w-full md:w-52 flex-none' %>">
-  <% unless expanded %>
+  <% unless expanded || turbo_native_app? %>
     <div class="md:hidden w-full">
       <a href="<%= settings_path %>" class="flex items-center space-x-0.5 font-medium">
         <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
@@ -11,7 +11,7 @@
   <div class="<%= 'hidden md:block' unless expanded %>">
     <menu-active>
       <ul id="account_settings_menu" class="menu px-0">
-        <% unless expanded %>
+        <% unless expanded || turbo_native_app? %>
           <li class="menu-title py-0 !bg-transparent mb-3 -mt-5">
             <a href="<%= root_path %>" class="!bg-transparent !text-neutral font-medium flex items-center space-x-0.5">
               <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>

app/views/shared/_turbo_drawer.html.erb

@@ -1,23 +1,32 @@
-<% offset = local_assigns[:title] ? '45px' : '0px' %>
+<% if turbo_native_app? && !turbo_frame_request? %>
-<turbo-frame id="drawer">
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
-  <turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+  <turbo-frame id="drawer">
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+    <div class="w-full">
-    <div class="bg-base-100 min-h-screen max-h-screen relative w-full min-w-0">
+      <%= yield %>
-      <% if local_assigns[:title] %>
-        <div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
-          <span>
-            <%= local_assigns[:title] %>
-          </span>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
-        </div>
-      <% else %>
-        <span data-action="click:turbo-modal#close" class="absolute btn border border-base-100 bg-base-100 hover:bg-base-300 hover:border-base-300 btn-primary !text-base btn-sm btn-circle" style="left: -40px; top: 6px">
-          &times;
-        </span>
-      <% end %>
-      <div class="md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= offset %>); max-height: calc(100dvh - <%= offset %>)">
-        <%= yield %>
-      </div>
     </div>
-  </turbo-modal>
+  </turbo-frame>
-</turbo-frame>
+<% else %>
+  <% offset = local_assigns[:title] ? '45px' : '0px' %>
+  <turbo-frame id="drawer">
+    <turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+      <div class="bg-base-100 min-h-screen max-h-screen relative w-full min-w-0">
+        <% if local_assigns[:title] %>
+          <div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
+            <span>
+              <%= local_assigns[:title] %>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% else %>
+          <span data-action="click:turbo-modal#close" class="absolute btn border border-base-100 bg-base-100 hover:bg-base-300 hover:border-base-300 btn-primary !text-base btn-sm btn-circle" style="left: -40px; top: 6px">
+            &times;
+          </span>
+        <% end %>
+        <div class="md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= offset %>); max-height: calc(100dvh - <%= offset %>)">
+          <%= yield %>
+        </div>
+      </div>
+    </turbo-modal>
+  </turbo-frame>
+<% end %>

app/views/shared/_turbo_modal.html.erb

@@ -1,18 +1,27 @@
-<turbo-frame id="modal">
+<% if turbo_native_app? && !turbo_frame_request? %>
-  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+  <turbo-frame id="modal">
-    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none">
+    <div class="max-w-lg mx-auto px-4 pb-6">
-      <% if local_assigns[:title] %>
+      <%= yield %>
-        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-          <span>
-            <%= local_assigns[:title] %>
-          </span>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
-        </div>
-      <% end %>
-      <div>
-        <%= yield %>
-      </div>
     </div>
-  </turbo-modal>
+  </turbo-frame>
-</turbo-frame>
+<% else %>
+  <turbo-frame id="modal">
+    <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none">
+        <% if local_assigns[:title] %>
+          <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+            <span>
+              <%= local_assigns[:title] %>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% end %>
+        <div>
+          <%= yield %>
+        </div>
+      </div>
+    </turbo-modal>
+  </turbo-frame>
+<% end %>

app/views/shared/_turbo_modal_large.html.erb

@@ -17,6 +17,11 @@
       </div>
     </turbo-modal>
   </turbo-frame>
+<% elsif turbo_native_app? %>
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
+  <div class="w-full">
+    <%= yield %>
+  </div>
 <% else %>
   <% if local_assigns[:title] %>
     <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">

app/views/submissions_archived/index.html.erb

@@ -1,10 +1,12 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
-<div>
+<% unless turbo_native_app? %>
-  <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
+  <div>
-    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
-    <span style="margin-left: 3px"><%= t('back_to_active') %></span>
+      <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-  <% end %>
+      <span style="margin-left: 3px"><%= t('back_to_active') %></span>
-</div>
+    <% end %>
+  </div>
+<% end %>
 <div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
   <div class="group/header flex w-full justify-between items-center">
     <div class="max-md:group-has-[search-input:focus-within]/header:hidden">

app/views/submissions_dashboard/index.html.erb

@@ -1,6 +1,7 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
 <% is_show_tabs = (@pagy.count.nil? || @pagy.count >= 5) || params[:status].present? || filter_params.present? %>
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
+<% unless turbo_native_app? %>
 <div class="group/header flex justify-between items-center w-full mb-4">
   <div class="flex items-center flex-grow min-w-0 max-md:group-has-[search-input:focus-within]/header:hidden <%= 'max-md:hidden' if params[:q].present? %>">
     <div class="mr-2">
@@ -27,6 +28,7 @@
     <% end %>
   </div>
 </div>
+<% end %>
 <% 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>

app/views/template_folders/show.html.erb

@@ -1,51 +1,57 @@
-<div>
+<% unless turbo_native_app? %>
-  <%= link_to @template_folder.parent_folder ? folder_path(@template_folder.parent_folder) : root_path, class: 'flex items-center' do %>
+  <div>
-    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <%= link_to @template_folder.parent_folder ? folder_path(@template_folder.parent_folder) : root_path, class: 'flex items-center' do %>
-    <span style="margin-left: 3px"><%= @template_folder.parent_folder&.name || t('home') %></span>
+      <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-  <% end %>
+      <span style="margin-left: 3px"><%= @template_folder.parent_folder&.name || t('home') %></span>
-</div>
-<dashboard-dropzone>
-  <div class="group/header relative flex justify-between items-center w-full mb-4">
-    <%= form_for '', url: '', id: form_id = SecureRandom.uuid, method: :post, class: 'hidden', data: { target: 'dashboard-dropzone.form' }, html: { enctype: 'multipart/form-data' } do %>
-      <input name="form_id" value="<%= form_id %>">
-      <input name="folder_name" value="<%= @template_folder.full_name %>">
-      <button type="submit"></button>
-      <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
     <% end %>
-    <%= render 'templates/dashboard_dropzone', style: 'height: 137px' %>
-    <% unless @template_folder.parent_folder %>
-      <%= render 'templates/dashboard_folder_dropzone', style: 'height: 137px' %>
-    <% end %>
-    <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex max-md:group-has-[search-input:focus-within]/header:hidden <%= 'hidden' if params[:q].present? %>">
-      <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
-      <span class="peer truncate">
-        <%= @template_folder.name %>
-      </span>
-      <% if can?(:update, @template_folder) && @template_folder.full_name != TemplateFolder::DEFAULT_NAME %>
-        <span class="opacity-0 hover:opacity-100 peer-hover:opacity-100">
-          <a href="<%= edit_folder_path(@template_folder) %>" data-turbo-frame="modal">
-            <%= svg_icon('pencil', class: 'w-7 h-7') %>
-          </a>
-        </span>
-      <% end %>
-    </h1>
-    <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
-      <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
-        <%= render 'shared/search_input' %>
-      <% end %>
-      <% if can?(:create, ::Template) %>
-        <span class="hidden sm:block">
-          <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
-        </span>
-        <open-modal-mobile data-disabled="<%= !Docuseal.multitenant? %>" class="flex">
-          <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-            <span class="hidden md:block"><%= t('create') %></span>
-          <% end %>
-        </open-modal-mobile>
-      <% end %>
-    </div>
   </div>
+<% end %>
+<dashboard-dropzone>
+  <%= form_for '', url: '', id: form_id = SecureRandom.uuid, method: :post, class: 'hidden', data: { target: 'dashboard-dropzone.form' }, html: { enctype: 'multipart/form-data' } do %>
+    <input name="form_id" value="<%= form_id %>">
+    <input name="folder_name" value="<%= @template_folder.full_name %>">
+    <button type="submit"></button>
+    <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
+  <% end %>
+  <% if turbo_native_app? %>
+    <% content_for(:html_title, @template_folder.name) %>
+  <% else %>
+    <div class="group/header relative flex justify-between items-center w-full mb-4">
+      <%= render 'templates/dashboard_dropzone', style: 'height: 137px' %>
+      <% unless @template_folder.parent_folder %>
+        <%= render 'templates/dashboard_folder_dropzone', style: 'height: 137px' %>
+      <% end %>
+      <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex max-md:group-has-[search-input:focus-within]/header:hidden <%= 'hidden' if params[:q].present? %>">
+        <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
+        <span class="peer truncate">
+          <%= @template_folder.name %>
+        </span>
+        <% if can?(:update, @template_folder) && @template_folder.full_name != TemplateFolder::DEFAULT_NAME %>
+          <span class="opacity-0 hover:opacity-100 peer-hover:opacity-100">
+            <a href="<%= edit_folder_path(@template_folder) %>" data-turbo-frame="modal">
+              <%= svg_icon('pencil', class: 'w-7 h-7') %>
+            </a>
+          </span>
+        <% end %>
+      </h1>
+      <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
+        <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
+          <%= render 'shared/search_input' %>
+        <% end %>
+        <% if can?(:create, ::Template) %>
+          <span class="hidden sm:block">
+            <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
+          </span>
+          <open-modal-mobile data-disabled="<%= !Docuseal.multitenant? %>" class="flex">
+            <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+              <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+              <span class="hidden md:block"><%= t('create') %></span>
+            <% end %>
+          </open-modal-mobile>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
   <% if @template_folders.present? %>
     <div class="grid gap-4 md:grid-cols-3 <%= 'mb-6' if @templates.present? %>">
       <%= render partial: 'template_folders/folder', collection: @template_folders, as: :folder %>

app/views/templates_archived/index.html.erb

@@ -1,9 +1,11 @@
-<div>
+<% unless turbo_native_app? %>
-  <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
+  <div>
-    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <%= link_to root_path, class: 'flex items-center mb-1 md:mb-0' do %>
-    <span style="margin-left: 3px"><%= t('back_to_active') %></span>
+      <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-  <% end %>
+      <span style="margin-left: 3px"><%= t('back_to_active') %></span>
-</div>
+    <% end %>
+  </div>
+<% end %>
 <div class="group/header flex justify-between mb-4 items-center">
   <div class="max-md:group-has-[search-input:focus-within]/header:hidden">
     <h1 class="text-2xl md:text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><%= t('document_templates_html') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>

app/views/templates_archived_submissions/index.html.erb

@@ -1,12 +1,14 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
 <% with_filters = @pagy.pages > 1 || params[:q].present? || filter_params.present? %>
 <%= render 'templates/title', template: @template %>
-<div>
+<% unless turbo_native_app? %>
-  <%= link_to template_path(@template), class: 'flex items-center mb-1 md:mb-0' do %>
+  <div>
-    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <%= link_to template_path(@template), class: 'flex items-center mb-1 md:mb-0' do %>
-    <span style="margin-left: 3px"><%= t('back_to_active') %></span>
+      <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-  <% end %>
+      <span style="margin-left: 3px"><%= t('back_to_active') %></span>
-</div>
+    <% end %>
+  </div>
+<% end %>
 <div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
   <div class="group/header flex w-full md:flex-1 min-w-0 justify-between items-center">
     <div class="max-md:group-has-[search-input:focus-within]/header:hidden">

app/views/templates_dashboard/index.html.erb

@@ -7,6 +7,7 @@
     <button type="submit"></button>
     <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
   <% end %>
+  <% unless turbo_native_app? %>
   <div class="group/header flex justify-between items-center w-full mb-4 relative">
     <% unless show_dropzone %>
       <%= render 'templates/dashboard_dropzone', style: 'height: 114px' %>
@@ -39,6 +40,7 @@
       <% end %>
     </div>
   </div>
+  <% end %>
   <% view_archived_html = capture do %>
     <% if has_archived %>
       <div>

app/views/templates_shared/index.html.erb

@@ -1,9 +1,11 @@
-<div>
+<% unless turbo_native_app? %>
-  <%= link_to(@is_archived ? templates_shared_index_path : root_path, class: 'flex items-center mb-1 md:mb-0') do %>
+  <div>
-    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
+    <%= link_to(@is_archived ? templates_shared_index_path : root_path, class: 'flex items-center mb-1 md:mb-0') do %>
-    <span style="margin-left: 3px"><%= @is_archived ? t('back_to_active') : t('home') %></span>
+      <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
-  <% end %>
+      <span style="margin-left: 3px"><%= @is_archived ? t('back_to_active') : t('home') %></span>
-</div>
+    <% end %>
+  </div>
+<% end %>
 <div class="group/header relative flex justify-between items-center w-full mb-4">
   <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex max-md:group-has-[search-input:focus-within]/header:hidden <%= 'hidden' if params[:q].present? %>">
     <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>

app/views/webhook_events/show.html.erb

@@ -1,5 +1,5 @@
 <%= render 'shared/turbo_drawer', title: @webhook_event.event_type, close_after_submit: false do %>
-  <div class="relative px-4 py-4">
+  <div class="relative py-4 <%= 'px-4' if turbo_native_app? %>">
     <%= render 'drawer_events', webhook_url: @webhook_url, webhook_event: @webhook_event %>
     <% if @data %>
       <div class="mockup-code overflow-hidden relative pb-0 mt-6">

package.json

@@ -67,7 +67,7 @@
     "webpack-merge": "6.0.1",
     "webpack-subresource-integrity": "^5.1.0"
   },
-  "packageManager": "yarn@1.0",
+  "packageManager": "yarn@1.22.22",
   "version": "0.1.0",
   "scripts": {
     "eslint": "./node_modules/eslint/bin/eslint.js \"app/javascript/**/*.{js,vue}\" --fix"