add native titles

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' })
+  }
+}