add native titles

app/javascript/application.js

@@ -9,6 +9,8 @@ import ToggleVisible from './elements/toggle_visible'
 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 NativeHeader from './elements/native_header'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
@@ -106,6 +108,8 @@ const safeRegisterElement = (name, element, options = {}) => !window.customEleme
 safeRegisterElement('toggle-visible', ToggleVisible)
 safeRegisterElement('disable-hidden', DisableHidden)
 safeRegisterElement('turbo-modal', TurboModal)
+safeRegisterElement('native-action', NativeAction)
+safeRegisterElement('native-header', NativeHeader)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)
 safeRegisterElement('clipboard-copy', ClipboardCopy)

app/javascript/application.scss

@@ -166,3 +166,8 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 markdown-editor [contenteditable] p {
   margin-bottom: 18px;
 }
+
+native-action,
+native-header {
+  display: contents;
+}

app/javascript/elements/native_action.js

@@ -0,0 +1,31 @@
+let counter = 0
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    const bridge = window.webkit?.messageHandlers?.native
+
+    if (!bridge) return
+
+    const target = this.querySelector('a, button, [role="button"]')
+
+    if (!target) return
+
+    this.nativeId ||= `native-action-${++counter}`
+    target.dataset.nativeId = this.nativeId
+
+    bridge.postMessage({
+      type: 'action',
+      op: 'add',
+      id: this.nativeId,
+      title: this.dataset.label || target.textContent.trim(),
+      icon: this.dataset.icon,
+      placement: this.dataset.placement || 'menu'
+    })
+  }
+
+  disconnectedCallback () {
+    if (this.nativeId) {
+      window.webkit?.messageHandlers?.native?.postMessage({ type: 'action', op: 'remove', id: this.nativeId })
+    }
+  }
+}

app/javascript/elements/native_header.js

@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    window.webkit?.messageHandlers?.native?.postMessage({
+      type: 'header',
+      op: 'add',
+      title: this.dataset.label || this.querySelector('h1')?.textContent?.trim() || '',
+      search: 'search' in this.dataset
+    })
+  }
+
+  disconnectedCallback () {
+    window.webkit?.messageHandlers?.native?.postMessage({ type: 'header', op: 'remove' })
+  }
+}