native dropdown

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 NativeMenu from './elements/native_menu'
 import NativeSearch from './elements/native_search'
 import NativeModal from './elements/native_modal'
 import NativeEvent from './elements/native_event'
@@ -181,6 +182,7 @@ safeRegisterElement('toggle-visible', ToggleVisible)
 safeRegisterElement('disable-hidden', DisableHidden)
 safeRegisterElement('turbo-modal', TurboModal)
 safeRegisterElement('native-action', NativeAction)
+safeRegisterElement('native-menu', NativeMenu)
 safeRegisterElement('native-search', NativeSearch)
 safeRegisterElement('native-modal', NativeModal)
 safeRegisterElement('native-event', NativeEvent)

app/javascript/elements/native_menu.js

@@ -0,0 +1,48 @@
+let counter = 0
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (window.webkit?.messageHandlers?.native) {
+      this.addEventListener('click', this.onClick)
+    } else {
+      document.addEventListener('pointerdown', this.onPointerDown)
+    }
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.onClick)
+    document.removeEventListener('pointerdown', this.onPointerDown)
+  }
+
+  onPointerDown = (event) => {
+    if (this.contains(document.activeElement) && !this.contains(event.target)) {
+      document.activeElement.blur()
+    }
+  }
+
+  onClick = (event) => {
+    if (event.target.closest('native-menu-action')) return
+
+    const rect = this.firstElementChild.getBoundingClientRect()
+
+    const items = [...this.querySelectorAll('native-menu-action')].map((action) => {
+      const target = action.querySelector('a, button, [role="button"]') || action.firstElementChild
+
+      target.dataset.nativeId ||= `native-menu-${++counter}`
+
+      return {
+        id: target.dataset.nativeId,
+        title: action.dataset.label || target.textContent.trim(),
+        icon: action.dataset.icon,
+        destructive: action.dataset.destructive === 'true',
+        selected: action.dataset.selected === 'true'
+      }
+    })
+
+    window.webkit.messageHandlers.native.postMessage({
+      type: 'menu',
+      rect: { x: rect.left + window.scrollX, y: rect.top + window.scrollY, width: rect.width, height: rect.height },
+      items
+    })
+  }
+}

app/views/icons/_dots.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M7 12a2 2 0 1 1 -4 0q 0 -.053 .005 -.102a1.996 1.996 0 0 1 1.995 -1.898a2 2 0 0 1 2 2" />
+  <path d="M14 12a2 2 0 1 1 -4 0q 0 -.053 .005 -.102a1.996 1.996 0 0 1 1.995 -1.898a2 2 0 0 1 2 2" />
+  <path d="M21 12a2 2 0 1 1 -4 0q 0 -.053 .005 -.102a1.996 1.996 0 0 1 1.995 -1.898a2 2 0 0 1 2 2" />
+</svg>

app/views/submissions_filters/_applied_filters.html.erb

@@ -11,7 +11,7 @@
 <% status_chip_html = capture do %>
   <% if status_icon || default_status_icon %>
     <div class="order-none flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700 <%= 'max-md:hidden' if default_status_icon %>">
-      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium', native_title: t('status') }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon(status_icon || default_status_icon, class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= t(params[:status]) %></span>
       <% end %>
@@ -46,7 +46,7 @@
   <% end %>
   <% if params[:folder].present? %>
     <div class="order-<%= chip_order['folder'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
-      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium', native_title: t('folder') }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('folder', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= params[:folder] %></span>
       <% end %>
@@ -57,7 +57,7 @@
   <% end %>
   <% if params[:author].present? %>
     <div class="order-<%= chip_order['author'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
-      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium', native_title: t('author') }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('user', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= current_account.users.accessible_by(current_ability).where(account: current_account).find_by(email: params[:author])&.full_name || 'NA' %></span>
       <% end %>
@@ -68,7 +68,7 @@
   <% end %>
   <% if query_params[:completed_at_from].present? || query_params[:completed_at_to].present? %>
     <div class="order-<%= chip_order['completed_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
-      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium', native_title: t('completed_at') }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar_check', class: 'w-5 h-5 shrink-0') %>
         <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:completed_at_from] == query_params[:completed_at_to] %>
@@ -86,7 +86,7 @@
   <% end %>
   <% if query_params[:created_at_from].present? || query_params[:created_at_to].present? %>
     <div class="order-<%= chip_order['created_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
-      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium', native_title: t('created_at') }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar', class: 'w-5 h-5 shrink-0') %>
         <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:created_at_from] == query_params[:created_at_to] %>
@@ -105,53 +105,59 @@
 <% end %>
 <% with_status_dropdown = with_status_button && chips_html.blank? %>
 <% if with_status_dropdown %>
-  <div class="dropdown md:hidden shrink-0">
+  <native-menu class="<%= turbo_native_app? ? 'block' : 'dropdown' %> md:hidden shrink-0">
     <label tabindex="0" class="cursor-pointer flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
       <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
       <span><%= t(current_status) %></span>
       <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
     </label>
-    <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box" style="min-width: 180px;">
+    <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box' %>" style="min-width: 180px;">
       <li>
-        <%= link_to url_for(params: request.query_parameters.except('status')), class: ('bg-base-200' if current_status == 'all') do %>
-          <%= svg_icon('list', class: 'w-5 h-5 shrink-0') %>
-          <span><%= t('all') %></span>
-          <% if local_assigns[:all_count] %>
-            <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
-              <%= local_assigns[:all_count] %>
-            </span>
+        <native-menu-action data-icon="list" data-label="<%= t('all') %>" data-selected="<%= current_status == 'all' %>" class="grid-cols-1 <%= 'bg-base-200' if current_status == 'all' %>">
+          <%= link_to url_for(params: request.query_parameters.except('status')), class: 'flex items-center gap-2', data: { native_title: t('all') } do %>
+            <%= svg_icon('list', class: 'w-5 h-5 shrink-0') %>
+            <span><%= t('all') %></span>
+            <% if local_assigns[:all_count] %>
+              <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
+                <%= local_assigns[:all_count] %>
+              </span>
+            <% end %>
           <% end %>
-        <% end %>
+        </native-menu-action>
       </li>
       <li>
-        <%= link_to url_for(params: request.query_parameters.merge('status' => 'pending')), class: ('bg-base-200' if current_status == 'pending') do %>
-          <%= svg_icon('clock', class: 'w-5 h-5 shrink-0') %>
-          <span><%= t('pending') %></span>
-          <% if local_assigns[:pending_count] %>
-            <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
-              <%= local_assigns[:pending_count] %>
-            </span>
+        <native-menu-action data-icon="clock" data-label="<%= t('pending') %>" data-selected="<%= current_status == 'pending' %>" class="grid-cols-1 <%= 'bg-base-200' if current_status == 'pending' %>">
+          <%= link_to url_for(params: request.query_parameters.merge('status' => 'pending')), class: 'flex items-center gap-2', data: { native_title: t('pending') } do %>
+            <%= svg_icon('clock', class: 'w-5 h-5 shrink-0') %>
+            <span><%= t('pending') %></span>
+            <% if local_assigns[:pending_count] %>
+              <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
+                <%= local_assigns[:pending_count] %>
+              </span>
+            <% end %>
           <% end %>
-        <% end %>
+        </native-menu-action>
       </li>
       <li>
-        <%= link_to url_for(params: request.query_parameters.merge('status' => 'completed')), class: ('bg-base-200' if current_status == 'completed') do %>
-          <%= svg_icon('circle_check', class: 'w-5 h-5 shrink-0') %>
-          <span><%= t('completed') %></span>
-          <% if local_assigns[:completed_count] %>
-            <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
-              <%= local_assigns[:completed_count] %>
-            </span>
+        <native-menu-action data-icon="circle_check" data-label="<%= t('completed') %>" data-selected="<%= current_status == 'completed' %>" class="grid-cols-1 <%= 'bg-base-200' if current_status == 'completed' %>">
+          <%= link_to url_for(params: request.query_parameters.merge('status' => 'completed')), class: 'flex items-center gap-2', data: { native_title: t('completed') } do %>
+            <%= svg_icon('circle_check', class: 'w-5 h-5 shrink-0') %>
+            <span><%= t('completed') %></span>
+            <% if local_assigns[:completed_count] %>
+              <span class="badge badge-sm badge-ghost font-medium px-2 ml-auto">
+                <%= local_assigns[:completed_count] %>
+              </span>
+            <% end %>
           <% end %>
-        <% end %>
+        </native-menu-action>
       </li>
     </ul>
-  </div>
+  </native-menu>
 <% end %>
 <% if chips_html.present? || status_chip_html.present? %>
   <scroll-fade class="flex items-center gap-2 overflow-x-auto flex-1 min-w-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 md:contents <%= 'max-md:hidden' if with_status_dropdown %>">
     <% if with_status_button && !with_status_dropdown %>
-      <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" data-native-modal="medium" class="order-none md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+      <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" data-native-modal="medium" data-native-title="<%= t('status') %>" class="order-none md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
         <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
         <span><%= t(current_status) %></span>
         <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>

app/views/submissions_filters/_filter_button.html.erb

@@ -1,42 +1,52 @@
 <% query_params = params.permit(:q, :scope, :archived).merge(filter_params) %>
 <% advanced_filters = filter_params.then { |f| f[:status].in?(%w[pending completed]) ? f.except(:status) : f } %>
-<div class="dropdown dropdown-end shrink-0">
+<native-menu class="<%= turbo_native_app? ? 'block' : 'dropdown dropdown-end' %> shrink-0">
   <label tabindex="0" class="cursor-pointer flex h-10 py-1 text-lg items-center border text-center text-neutral rounded-xl hover:border-neutral-700 <%= advanced_filters.present? ? 'w-10 md:w-auto px-0 md:px-3 space-x-0 md:space-x-1 justify-center md:justify-between border-neutral-700 md:border-neutral-300' : 'px-3 space-x-1 justify-between border-neutral-300' %>">
     <%= svg_icon('filter', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
     <% if advanced_filters.blank? %>
       <span>Filter</span>
     <% end %>
   </label>
-  <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right" style="min-width: 180px;">
+  <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right' %>" style="min-width: 180px;">
     <li class="flex">
-      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
-        <%= svg_icon('calendar_check', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-        <span><%= t('completed_at') %></span>
-      <% end %>
+      <native-menu-action data-icon="calendar_check" data-label="<%= t('completed_at') %>">
+        <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for)), class: 'flex items-center gap-2', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
+          <%= svg_icon('calendar_check', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+          <span><%= t('completed_at') %></span>
+        <% end %>
+      </native-menu-action>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
-        <%= svg_icon('calendar', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-        <span><%= t('created_at') %></span>
-      <% end %>
+      <native-menu-action data-icon="calendar" data-label="<%= t('created_at') %>">
+        <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for)), class: 'flex items-center gap-2', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
+          <%= svg_icon('calendar', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+          <span><%= t('created_at') %></span>
+        <% end %>
+      </native-menu-action>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
-        <%= svg_icon('info_circle', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-        <span><%= t('status') %></span>
-      <% end %>
+      <native-menu-action data-icon="info_circle" data-label="<%= t('status') %>">
+        <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), class: 'flex items-center gap-2', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
+          <%= svg_icon('info_circle', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+          <span><%= t('status') %></span>
+        <% end %>
+      </native-menu-action>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
-        <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-        <span><%= t('folder') %></span>
-      <% end %>
+      <native-menu-action data-icon="folder" data-label="<%= t('folder') %>">
+        <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for)), class: 'flex items-center gap-2', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
+          <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+          <span><%= t('folder') %></span>
+        <% end %>
+      </native-menu-action>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
-        <%= svg_icon('user', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-        <span><%= t('author') %></span>
-      <% end %>
+      <native-menu-action data-icon="user" data-label="<%= t('author') %>">
+        <%= link_to submissions_filter_path('author', query_params.merge(path: url_for)), class: 'flex items-center gap-2', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
+          <%= svg_icon('user', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+          <span><%= t('author') %></span>
+        <% end %>
+      </native-menu-action>
     </li>
   </ul>
-</div>
+</native-menu>

app/views/templates/_template.html.erb

@@ -68,4 +68,53 @@
       <% end %>
     </div>
   </div>
+  <% if !template.archived_at? && (can?(:update, template) || can?(:create, template) || can?(:destroy, template)) %>
+    <native-menu class="<%= 'dropdown dropdown-top dropdown-end has-[:disabled]:dropdown-open' unless turbo_native_app? %> absolute bottom-4 right-4 md:hidden">
+      <label tabindex="0" aria-label="<%= t('more') %>" class="block cursor-pointer py-2 pl-4 pr-2 -ml-4 -mr-2 -mt-2 -mb-3 text-base-content/70">
+        <%= svg_icon('dots', class: 'w-6 h-6') %>
+      </label>
+      <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mb-1 shadow menu text-base bg-base-100 rounded-box min-w-[160px]' %>">
+        <% if can?(:update, template) %>
+          <li>
+            <native-menu-action data-icon="pencil" data-label="<%= t('edit') %>">
+              <%= link_to edit_template_path(template), class: 'flex items-center gap-2', data: { native_title: template.name } do %>
+                <%= svg_icon('pencil', class: 'w-5 h-5 flex-shrink-0') %>
+                <span><%= t('edit') %></span>
+              <% end %>
+            </native-menu-action>
+          </li>
+        <% end %>
+        <% if can?(:update, template) && template.account_id == current_account.id %>
+          <li>
+            <native-menu-action data-icon="folder" data-label="<%= t('move') %>">
+              <%= link_to edit_template_folder_path(template.id), class: 'flex items-center gap-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
+                <%= svg_icon('folder_share', class: 'w-5 h-5 flex-shrink-0') %>
+                <span><%= t('move') %></span>
+              <% end %>
+            </native-menu-action>
+          </li>
+        <% end %>
+        <% if can?(:create, template) %>
+          <li>
+            <native-menu-action data-icon="copy" data-label="<%= t('clone') %>">
+              <%= link_to new_template_clone_path(template), class: 'flex items-center gap-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
+                <%= svg_icon('copy', class: 'w-5 h-5 flex-shrink-0') %>
+                <span><%= t('clone') %></span>
+              <% end %>
+            </native-menu-action>
+          </li>
+        <% end %>
+        <% if can?(:destroy, template) %>
+          <li>
+            <native-menu-action data-icon="archive" data-label="<%= t('archive') %>">
+              <button form="<%= form_uuid = SecureRandom.uuid %>" class="flex items-center">
+                <%= button_title(title: t('archive'), disabled_with: t('archiving'), icon: svg_icon('archive', class: 'w-5 h-5 flex-shrink-0')) %>
+              </button>
+              <%= button_to '', template_path(template), method: :delete, form: { id: form_uuid, class: 'hidden' } %>
+            </native-menu-action>
+          </li>
+        <% end %>
+      </ul>
+    </native-menu>
+  <% end %>
 </div>