adjust nav

app/javascript/application.js

@@ -12,6 +12,8 @@ import TurboModal from './elements/turbo_modal'
 import NativeAction from './elements/native_action'
 import NativeSearch from './elements/native_search'
 import NativeModal from './elements/native_modal'
+import NativeEvent from './elements/native_event'
+import ModalButton from './elements/modal_button'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
@@ -89,11 +91,23 @@ document.addEventListener('turbo:submit-end', async (event) => {
     return
   }
 
+  const filename = decodeURIComponent(resp.headers.get('content-disposition').split('"')[1])
+  const download = window.webkit?.messageHandlers?.download
+
+  if (download) {
+    const reader = new FileReader()
+
+    reader.onload = () => download.postMessage({ name: filename, data: reader.result.split(',')[1] })
+    reader.readAsDataURL(await resp.blob())
+
+    return
+  }
+
   const url = URL.createObjectURL(await resp.blob())
   const link = document.createElement('a')
 
   link.href = url
-  link.setAttribute('download', decodeURIComponent(resp.headers.get('content-disposition').split('"')[1]))
+  link.setAttribute('download', filename)
 
   document.body.appendChild(link)
 
@@ -112,6 +126,8 @@ safeRegisterElement('turbo-modal', TurboModal)
 safeRegisterElement('native-action', NativeAction)
 safeRegisterElement('native-search', NativeSearch)
 safeRegisterElement('native-modal', NativeModal)
+safeRegisterElement('native-event', NativeEvent)
+safeRegisterElement('modal-button', ModalButton)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)
 safeRegisterElement('clipboard-copy', ClipboardCopy)

app/javascript/elements/native_action.js

@@ -21,6 +21,7 @@ export default class extends HTMLElement {
       title: this.dataset.label || target?.textContent.trim(),
       icon: this.dataset.icon,
       placement: this.dataset.placement || 'menu',
+      section: this.dataset.section,
       native: this.dataset.native,
       url: this.dataset.url,
       accept: this.dataset.accept,

app/javascript/elements/native_event.js

@@ -0,0 +1,35 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', this.dispatch)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.dispatch)
+  }
+
+  dispatch = async () => {
+    const bridge = window.webkit?.messageHandlers?.modal
+
+    if (!bridge || this.dataset.loading) return
+
+    let detail = this.dataset.detail || 'null'
+
+    if (this.dataset.src) {
+      this.dataset.loading = 'true'
+
+      try {
+        const response = await fetch(this.dataset.src, { headers: { Accept: 'application/json' } })
+
+        if (!response.ok) return
+
+        detail = await response.text()
+      } catch {
+        return
+      } finally {
+        delete this.dataset.loading
+      }
+    }
+
+    bridge.postMessage({ action: 'dispatch', name: this.dataset.name, detail })
+  }
+}

app/javascript/template_builder/builder.vue

@@ -55,10 +55,10 @@
       v-if="beforeRevisionSnapshot"
       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('viewing_revision_from').replace('{date}', formatRevisionTime(beforeRevisionSnapshot.revision.created_at)) }}</span>
-        <div>
+        <div class="max-sm:flex max-sm:gap-1 max-sm:shrink-0">
           <button
             class="btn btn-sm"
             @click.prevent="cancelRevision"
@@ -104,6 +104,17 @@
           name="buttons"
         />
         <template v-else>
+          <native-action
+            v-if="withSendButton && nativeApp"
+            :data-label="t('send')"
+            data-icon="send"
+          >
+            <a
+              :href="`/templates/${template.id}/submissions/new?with_link=true`"
+              data-turbo-frame="modal"
+              @click="maybeShowErrorTemplateAlert"
+            />
+          </native-action>
           <native-action
             v-if="withSignYourselfButton && undefinedSubmitters.length < 2 && (!template.variables_schema || Object.keys(template.variables_schema).length === 0)"
             :data-label="t('sign_yourself')"
@@ -165,7 +176,7 @@
             </a>
           </native-action>
           <native-action
-            v-if="withSendButton"
+            v-if="withSendButton && !nativeApp"
             :data-label="t('send')"
             data-icon="users_plus"
             data-placement="bar"
@@ -193,7 +204,7 @@
           >
             <native-action
               :data-label="t('save')"
-              data-icon="device_floppy"
+              data-icon="check"
               data-placement="bar"
             >
               <button
@@ -276,7 +287,13 @@
                     :data-label="t('revisions')"
                     data-icon="history"
                   >
+                    <a
+                      v-if="nativeApp"
+                      :href="`/templates/${template.id}/versions`"
+                      data-turbo-frame="modal"
+                    />
                     <button
+                      v-else
                       class="flex space-x-2"
                       @click.prevent="openRevisionsModal"
                       @mouseenter="preloadRevisions"
@@ -1426,6 +1443,7 @@ export default {
     })
 
     document.addEventListener('keyup', this.onKeyUp)
+    document.addEventListener('template-builder:apply-revision', this.onApplyRevisionEvent)
     window.addEventListener('keydown', this.onKeyDown)
 
     window.addEventListener('resize', this.onWindowResize)
@@ -1449,6 +1467,7 @@ export default {
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
+    document.removeEventListener('template-builder:apply-revision', this.onApplyRevisionEvent)
     window.removeEventListener('keydown', this.onKeyDown)
 
     window.removeEventListener('resize', this.onWindowResize)
@@ -2000,6 +2019,9 @@ export default {
         this.loadRevisionsPromise = null
       })
     },
+    onApplyRevisionEvent (e) {
+      this.onRevisionApply(e.detail)
+    },
     onRevisionApply (revision) {
       this.beforeRevisionSnapshot = {
         template: JSON.parse(JSON.stringify(this.template)),