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