native navbar

app/javascript/elements/native_action.js

@@ -8,18 +8,23 @@ export default class extends HTMLElement {
 
     const target = this.querySelector('a, button, [role="button"]') || this.firstElementChild
 
-    if (!target) return
+    if (!target && !this.dataset.native) return
 
     this.nativeId ||= `native-action-${++counter}`
-    target.dataset.nativeId = this.nativeId
+
+    if (target) target.dataset.nativeId = this.nativeId
 
     bridge.postMessage({
       type: 'action',
       op: 'add',
       id: this.nativeId,
-      title: this.dataset.label || target.textContent.trim(),
+      title: this.dataset.label || target?.textContent.trim(),
       icon: this.dataset.icon,
-      placement: this.dataset.placement || 'menu'
+      placement: this.dataset.placement || 'menu',
+      native: this.dataset.native,
+      url: this.dataset.url,
+      accept: this.dataset.accept,
+      destructive: this.dataset.destructive === 'true'
     })
   }
 

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' unless turbo_native_app? %>
+    <%= render turbo_native_app? ? 'shared/native_navbar' : 'shared/navbar' %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>
     <div class="max-w-6xl mx-auto px-4 md:px-2 mb-8">
       <%= yield %>

app/views/shared/_native_navbar.html.erb

@@ -0,0 +1,21 @@
+<% if signed_in? %>
+  <native-action data-placement="profile" data-icon="user">
+    <%= link_to t('profile'), settings_profile_index_path %>
+  </native-action>
+  <native-action data-placement="profile" data-icon="settings">
+    <%= link_to t('settings'), settings_path %>
+  </native-action>
+  <native-action data-placement="profile" data-icon="logout" data-native="sign_out" data-label="<%= t('sign_out') %>" data-destructive="true"></native-action>
+  <% if can?(:create, ::Template) %>
+    <native-action data-placement="create" data-icon="upload" data-native="upload" data-label="<%= t('upload') %>" data-url="<%= templates_upload_path %>" data-accept="image/*, application/pdf, application/zip, application/json<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>"></native-action>
+    <native-action data-placement="create" data-icon="scan" data-native="scan" data-label="Scan" data-url="<%= templates_upload_path %>"></native-action>
+    <% if Docuseal.multitenant? %>
+      <native-action data-placement="create" data-icon="brand_gdrive">
+        <%= link_to 'Google Drive', new_template_path(modal_tab: 'google_drive'), data: { turbo_frame: :modal } %>
+      </native-action>
+    <% end %>
+    <native-action data-placement="create" data-icon="pencil_plus">
+      <%= link_to t('create'), new_template_path, data: { turbo_frame: :modal } %>
+    </native-action>
+  <% end %>
+<% end %>

app/views/submissions_dashboard/index.html.erb

@@ -32,7 +32,9 @@
 <% 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>
-      <a href="<%= submissions_archived_index_path %>" class="link text-sm"><%= t('view_archived') %></a>
+      <native-action data-placement="menu" data-icon="archive">
+        <a href="<%= submissions_archived_index_path %>" class="link text-sm"><%= t('view_archived') %></a>
+      </native-action>
     </div>
   <% end %>
 <% end %>

app/views/templates_dashboard/index.html.erb

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