declare search for native app

app/javascript/application.js

@@ -10,6 +10,7 @@ import ToggleCookies from './elements/toggle_cookies'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import NativeAction from './elements/native_action'
+import NativeSearch from './elements/native_search'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
@@ -108,6 +109,7 @@ safeRegisterElement('toggle-visible', ToggleVisible)
 safeRegisterElement('disable-hidden', DisableHidden)
 safeRegisterElement('turbo-modal', TurboModal)
 safeRegisterElement('native-action', NativeAction)
+safeRegisterElement('native-search', NativeSearch)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)
 safeRegisterElement('clipboard-copy', ClipboardCopy)

app/javascript/elements/native_search.js

@@ -0,0 +1,27 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = ['form']
+
+  connectedCallback () {
+    const bridge = window.webkit?.messageHandlers?.native
+
+    if (!bridge || !this.form) return
+
+    const url = new URL(this.form.action)
+
+    new FormData(this.form).forEach((value, key) => {
+      if (key !== 'q' && value) url.searchParams.set(key, value)
+    })
+
+    this.declared = true
+
+    bridge.postMessage({ type: 'search', op: 'add', url: url.pathname + url.search })
+  }
+
+  disconnectedCallback () {
+    if (this.declared) {
+      window.webkit?.messageHandlers?.native?.postMessage({ type: 'search', op: 'remove' })
+    }
+  }
+})

app/views/shared/_search_input.html.erb

@@ -1,28 +1,30 @@
-<form action="<%= url_for %>" method="get" class="items-center flex max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
-  <% Submissions::Filter::ALLOWED_PARAMS.each do |key| %>
-    <% if params[key].present? %>
-      <input name="<%= key %>" value="<%= params[key] %>" class="hidden">
+<native-search class="contents">
+  <form action="<%= url_for %>" method="get" class="items-center flex max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>" data-target="native-search.form">
+    <% Submissions::Filter::ALLOWED_PARAMS.each do |key| %>
+      <% if params[key].present? %>
+        <input name="<%= key %>" value="<%= params[key] %>" class="hidden">
+      <% end %>
     <% end %>
-  <% end %>
-  <% if params[:archived].present? %>
-    <input name="archived" value="<%= params[:archived] %>" class="hidden">
-  <% end %>
-  <% if params[:q].present? %>
-    <div class="relative">
-      <a href="<%= url_for(params: request.query_parameters.except('q')) %>" title="<%= t('clear') %>" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
-        &times;
-      </a>
-    </div>
-  <% end %>
-  <search-input class="group flex items-center max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
-    <input id="search" name="q" value="<%= params[:q] %>" enterkeyhint="search" class="input text-lg pr-10 -mr-12 w-0 md:w-60 max-md:group-focus-within:w-full <%= 'pl-8 input-outlined w-full' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
-    <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle">
-      <span class="enabled">
-        <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>
-      </span>
-      <span class="disabled">
-        <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-      </span>
-    </button>
-  </search-input>
-</form>
+    <% if params[:archived].present? %>
+      <input name="archived" value="<%= params[:archived] %>" class="hidden">
+    <% end %>
+    <% if params[:q].present? %>
+      <div class="relative">
+        <a href="<%= url_for(params: request.query_parameters.except('q')) %>" title="<%= t('clear') %>" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
+          &times;
+        </a>
+      </div>
+    <% end %>
+    <search-input class="group flex items-center max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
+      <input id="search" name="q" value="<%= params[:q] %>" enterkeyhint="search" class="input text-lg pr-10 -mr-12 w-0 md:w-60 max-md:group-focus-within:w-full <%= 'pl-8 input-outlined w-full' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
+      <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle">
+        <span class="enabled">
+          <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>
+        </span>
+        <span class="disabled">
+          <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
+        </span>
+      </button>
+    </search-input>
+  </form>
+</native-search>

app/views/submissions_archived/index.html.erb

@@ -8,19 +8,19 @@
     <% end %>
   </div>
 <% end %>
-<div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
-  <% unless turbo_native_app? %>
-      <div class="group/header flex w-full justify-between 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('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
-        </div>
-        <div class="max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
-          <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
-            <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
-          <% end %>
-        </div>
+<div class="flex flex-col md:flex-row md:items-center mb-4 <%= 'gap-3' unless turbo_native_app? %>">
+  <div class="group/header flex w-full justify-between items-center">
+    <% unless turbo_native_app? %>
+      <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('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
       </div>
-  <% end %>
+    <% end %>
+    <div class="max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
+      <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
+        <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
+      <% end %>
+    </div>
+  </div>
   <div class="flex items-center md:items-end gap-2">
     <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true, with_default_status: true %>
     <%= render 'submissions_filters/filter_button', filter_params: %>

app/views/submissions_dashboard/index.html.erb

@@ -1,21 +1,22 @@
 <% 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">
-      <%= render 'dashboard/toggle_view', selected: 'submissions' %>
+<div class="group/header flex justify-between items-center w-full <%= 'mb-4' unless turbo_native_app? %>">
+  <% unless turbo_native_app? %>
+    <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">
+        <%= render 'dashboard/toggle_view', selected: 'submissions' %>
+      </div>
+      <h1 class="text-2xl truncate md:text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">
+        <%= t('submissions') %>
+      </h1>
     </div>
-    <h1 class="text-2xl truncate md:text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">
-      <%= t('submissions') %>
-    </h1>
-  </div>
+  <% end %>
   <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.pages > 1 || filter_params.present? %>
       <%= render 'shared/search_input' %>
     <% end %>
-    <% if can?(:create, ::Template) %>
+    <% if can?(:create, ::Template) && !turbo_native_app? %>
       <span class="hidden sm:block">
         <%= render 'templates/upload_button' %>
       </span>
@@ -28,7 +29,6 @@
     <% 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

@@ -14,30 +14,31 @@
     <button type="submit"></button>
     <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
   <% end %>
-  <% unless turbo_native_app? %>
-    <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>
+    <div class="group/header relative flex justify-between items-center w-full <%= 'mb-4' unless turbo_native_app? %>">
+      <% unless turbo_native_app? %>
+        <%= render 'templates/dashboard_dropzone', style: 'height: 137px' %>
+        <% unless @template_folder.parent_folder %>
+          <%= render 'templates/dashboard_folder_dropzone', style: 'height: 137px' %>
         <% end %>
-      </h1>
+        <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>
+      <% end %>
       <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) %>
+        <% if can?(:create, ::Template) && !turbo_native_app? %>
           <span class="hidden sm:block">
             <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
           </span>
@@ -50,7 +51,6 @@
         <% 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

@@ -7,16 +7,16 @@
     <% end %>
   </div>
 <% end %>
-<% unless turbo_native_app? %>
-  <div class="group/header flex justify-between mb-4 items-center">
+<div class="group/header flex justify-between items-center <%= 'mb-4' unless turbo_native_app? %>">
+  <% unless turbo_native_app? %>
     <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>
     </div>
-    <% if params[:q].present? || @pagy.pages > 1 %>
-      <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
-    <% end %>
-  </div>
-<% end %>
+  <% end %>
+  <% if params[:q].present? || @pagy.pages > 1 %>
+    <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
+  <% end %>
+</div>
 <% if @pagy.count.nil? || @pagy.count > 0 %>
   <div class="grid gap-4 md:grid-cols-3">
     <%= render partial: 'templates/template', collection: @templates, locals: { with_folder: true } %>

app/views/templates_dashboard/index.html.erb

@@ -7,27 +7,28 @@
     <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' %>
-    <% end %>
-    <%= render 'templates/dashboard_folder_dropzone', style: 'height: 114px' %>
-    <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? %>">
-      <% if has_archived || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
-        <div class="mr-2">
-          <%= render 'dashboard/toggle_view', selected: 'templates' %>
-        </div>
+  <div class="group/header flex justify-between items-center w-full relative <%= 'mb-4' unless turbo_native_app? %>">
+    <% unless turbo_native_app? %>
+      <% unless show_dropzone %>
+        <%= render 'templates/dashboard_dropzone', style: 'height: 114px' %>
       <% end %>
-      <h1 class="text-2xl truncate md:text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">
-        <%= t('document_templates_html') %>
-      </h1>
-    </div>
+      <%= render 'templates/dashboard_folder_dropzone', style: 'height: 114px' %>
+      <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? %>">
+        <% if has_archived || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
+          <div class="mr-2">
+            <%= render 'dashboard/toggle_view', selected: 'templates' %>
+          </div>
+        <% end %>
+        <h1 class="text-2xl truncate md:text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">
+          <%= t('document_templates_html') %>
+        </h1>
+      </div>
+    <% end %>
     <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 > 1 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>
-      <% if can?(:create, ::Template) %>
+      <% if can?(:create, ::Template) && !turbo_native_app? %>
         <span class="hidden sm:block">
           <%= render 'templates/upload_button' %>
         </span>
@@ -40,7 +41,6 @@
       <% end %>
     </div>
   </div>
-  <% end %>
   <% view_archived_html = capture do %>
     <% if has_archived %>
       <div>

app/views/templates_shared/index.html.erb

@@ -7,8 +7,8 @@
     <% end %>
   </div>
 <% end %>
-<% unless turbo_native_app? %>
-  <div class="group/header relative flex justify-between items-center w-full mb-4">
+<div class="group/header relative flex justify-between items-center w-full <%= 'mb-4' unless turbo_native_app? %>">
+  <% unless turbo_native_app? %>
     <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="truncate capitalize"><%= t('shared') %></span>
@@ -16,13 +16,13 @@
         <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></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 > 1 %>
-        <%= render 'shared/search_input' %>
-      <% end %>
-    </div>
+  <% end %>
+  <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 > 1 %>
+      <%= render 'shared/search_input' %>
+    <% end %>
   </div>
-<% end %>
+</div>
 <% view_archived_html = capture do %>
   <% if @has_archived && params[:q].blank? %>
     <div>