bh 6.1.4 → 6.2.0

data/app/javascript/bh/limit_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+
+// How much of a table one page shows. The choice belongs to the reader rather than
+// to the app, so it is kept in their browser — but in a cookie rather than in local
+// storage, which is where the scheme goes: pagy decides the page on the server, and
+// a cookie is the only storage the server is sent.
+export default class extends Controller {
+  static values = { storage: String, to: Number }
+
+  // Back to the first page, always: page five of twenty is past the end of a hundred
+  // to a page, and pagy answers that with an empty table rather than an error. And
+  // only the frame, so what is redrawn is the table and the row under it — the answer
+  // brings the button back naming the size a click would go to next.
+  toggle() {
+    document.cookie =
+      `${this.storageValue}=${this.toValue}; path=/; max-age=31536000; samesite=lax`
+
+    const url = new URL(window.location.href)
+    url.searchParams.delete('page')
+
+    window.Turbo.visit(url.href, { frame: 'results', action: 'replace' })
+  }
+}

data/app/javascript/bh/map/loader.js

@@ -0,0 +1,20 @@
+// Google's own bootstrap, spelled out: `importLibrary` fetches the API the first time it
+// is asked for a library, and the API then answers it itself. Once per page, however many
+// maps are on it — and a Turbo visit keeps the page, so once per session in practice.
+export function load(key) {
+  const maps = (window.google ||= {}).maps ||= {}
+  if (maps.importLibrary) return
+
+  let loading
+  maps.importLibrary = (library, ...rest) => {
+    loading ||= new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      const params = new URLSearchParams({ key, v: 'weekly', loading: 'async', callback: 'google.maps.__ib__' })
+      script.src = `https://maps.googleapis.com/maps/api/js?${params}`
+      maps.__ib__ = resolve
+      script.onerror = () => reject(new Error('The Google Maps API could not be loaded'))
+      document.head.append(script)
+    })
+    return loading.then(() => maps.importLibrary(library, ...rest))
+  }
+}

data/app/javascript/bh/map_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus'
+import { load } from './map/loader.js'
+
+// This page of a table on a Google map. A row keeping a place ID has its area filled in
+// on the boundary layer its model named — a county, a ZIP — or, where the model named
+// none, a pin at the place; a row keeping coordinates is a pin there and then, with
+// nothing to look up. The key and the map are the host's, read from its credentials; the
+// rows are the page's, and the map is fitted round whatever it drew.
+export default class extends Controller {
+  static values = { key: String, id: String, boundary: String, places: Array, points: Array }
+
+  async connect() {
+    load(this.keyValue)
+    const { Map } = await google.maps.importLibrary('maps')
+    const { LatLngBounds } = await google.maps.importLibrary('core')
+
+    // A picture rather than a control: the table's search, sort and pages are how a
+    // reader moves through the rows, and the map only shows where this page's are.
+    const map = new Map(this.element, {
+      mapId: this.idValue, gestureHandling: 'none', zoomControl: false,
+      disableDefaultUI: true, keyboardShortcuts: false
+    })
+    const bounds = new LatLngBounds()
+
+    await Promise.all([this.place(map, bounds), this.point(map, bounds)])
+    if (!bounds.isEmpty()) map.fitBounds(bounds, 10)
+  }
+
+  // The rows named by a place ID: areas on the boundary layer, or pins where there is none.
+  async place(map, bounds) {
+    if (this.placesValue.length === 0) return
+    const { Place } = await google.maps.importLibrary('places')
+    const places = this.placesValue.map(id => new Place({ id }))
+
+    if (this.hasBoundaryValue) return this.fill(map, bounds, places)
+    return this.pin(map, bounds, places)
+  }
+
+  // The layer styles every boundary Google knows at that level, and a function saying
+  // which of them are ours is what fills them in. The bounds are the places' viewports.
+  async fill(map, bounds, places) {
+    const ours = new Set(this.placesValue)
+    map.getFeatureLayer(this.boundaryValue).style = ({ feature }) => {
+      if (ours.has(feature.placeId)) return FILLED
+    }
+
+    await Promise.all(places.map(place =>
+      fetched(place, 'viewport').then(() => { if (place.viewport) bounds.union(place.viewport) })
+    ))
+  }
+
+  async pin(map, bounds, places) {
+    const drop = await this.dropper(map, bounds)
+
+    await Promise.all(places.map(place =>
+      fetched(place, 'location').then(() => { if (place.location) drop(place.location) })
+    ))
+  }
+
+  // The rows named by coordinates, which are pins without a lookup.
+  async point(map, bounds) {
+    if (this.pointsValue.length === 0) return
+    const drop = await this.dropper(map, bounds)
+
+    for (const [lat, lng] of this.pointsValue) drop({ lat, lng })
+  }
+
+  // One marker at a position, and the bounds widened to hold it.
+  async dropper(map, bounds) {
+    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')
+
+    return (position) => {
+      new AdvancedMarkerElement({ map, position })
+      bounds.extend(position)
+    }
+  }
+}
+
+// A place that cannot be fetched — an ID Google no longer knows — is left off the map
+// rather than taking the rest of the page's rows with it.
+function fetched(place, field) {
+  return place.fetchFields({ fields: [field] }).catch(console.error)
+}
+
+const FILLED = {
+  strokeColor: '#2D85FF', strokeOpacity: 1.0, strokeWeight: 3.0,
+  fillColor: '#2D85FF', fillOpacity: 0.5
+}

data/app/javascript/bh/otp/slots.js

@@ -0,0 +1,27 @@
+import { OtpInput } from 'bootstrap'
+
+// Draws the six slots over the one real field and returns the plugin's instance. A page
+// restored from history comes back with the slots still in it, and a re-render can leave a
+// connected controller holding an instance whose slots have been deleted underneath it — so
+// neither the markup nor the instance is trusted, only taken down and drawn again.
+export function drawSlots(element, field) {
+  OtpInput.getInstance(element)?.dispose()
+  element.querySelector('.otp-slots')?.remove()
+  element.classList.remove('otp-rendered')
+  const otp = new OtpInput(element)
+
+  // A refused code comes back in the field, the way any invalid field keeps what was typed —
+  // but a re-render leaves nothing focused, so backspace and a new digit went nowhere.
+  // Focused with the caret past the last digit, fixing a typo is one keystroke.
+  if (field.value) {
+    field.focus()
+    field.setSelectionRange(field.value.length, field.value.length)
+  }
+
+  // The plugin rewrites `pattern` to `[0-9]*` from its own type, and `minlength` cannot stand
+  // in: the browser enforces tooShort only on a value a person edited, and this plugin writes
+  // every value programmatically. Restoring the exact length is what keeps the submit shut
+  // until all six digits are in rather than after the first.
+  field.pattern = '[0-9]{6}'
+  return otp
+}

data/app/javascript/bh/otp_controller.js

@@ -0,0 +1,98 @@
+import { Controller } from '@hotwired/stimulus'
+import { drawSlots } from './otp/slots.js'
+
+// Draws Bootstrap's OTP input: one real field rendered as six slots. Bootstrap initializes
+// it on DOMContentLoaded, which a Turbo visit never fires — and a verification page is only
+// ever reached by one, so without this the reader is left with an empty box.
+export default class extends Controller {
+  connect() {
+    // Says the slots are coming, which is what lets the stylesheet hold back the bare field.
+    this.element.classList.add('otp-drawing')
+    this.pasted = false
+
+    this.draw = () => {
+      if (!this.element.isConnected) { return }
+
+      this.otp = drawSlots(this.element, this.field)
+    }
+
+    // A keystroke past the sixth is one iOS cannot place, and it answers by selecting inside
+    // the real field rather than by doing nothing. That field's text and caret are both
+    // transparent, but a selection is not its to hide: iOS draws the grab handles itself, and
+    // the hidden text they follow lies crammed against the left edge rather than under the
+    // slots — so a bar surfaces inside the first one. Collapsed to the end there is nothing
+    // left to draw, and only once the code is whole, so selecting to replace a half-typed one
+    // still works.
+    this.collapse = () => {
+      if (document.activeElement !== this.field) { return }
+      const { value, selectionStart, selectionEnd } = this.field
+      if (value.length < 6 || selectionStart === selectionEnd) { return }
+
+      this.field.setSelectionRange(value.length, value.length)
+    }
+
+    // The plugin cancels every `beforeinput` and writes the value itself, so typing a code
+    // fires no `input` on the field at all — only its own `input.bs.otpInput`, which leaves
+    // everything watching the field behind, the submit gating included. Say it again in the
+    // language the page speaks, guarded, since the plugin answers `input` with another.
+    this.relay = () => {
+      if (this.relaying) { return }
+      this.relaying = true
+      this.field.dispatchEvent(new Event('input', { bubbles: true }))
+      this.relaying = false
+    }
+
+    // A pasted code is a whole code, so there is nothing left to confirm: send it. A typed
+    // one is not, because the sixth digit may be a typo the typist is about to fix. Emptied
+    // first, or a code pasted over six already there is dropped: the field is full and
+    // `maxlength` has nowhere to put the new one.
+    this.remember = () => {
+      this.pasted = true
+      this.field.value = ''
+    }
+    this.forget = (event) => { if (/^[0-9]$/.test(event.key)) { this.pasted = false } }
+    this.send = () => {
+      if (!this.pasted) { return }
+
+      this.pasted = false
+      this.submit()
+    }
+
+    this.submit = () => this.element.closest('form')?.requestSubmit()
+
+    // A code that arrives without a keystroke — iOS offering it from Messages, or any other
+    // autofill — is written straight into the field, which fires a native `input`; typing
+    // never does. So this is either the relay above or a whole code that appeared, and the
+    // slots have to be told. `keyup` is one of the three events the plugin re-reads the field
+    // on, and it re-reads in place: redrawing takes the row of six down and puts it back up,
+    // which is the shrink with the bare field showing yellow underneath. And the plugin
+    // announces completeness only for input it handled, so a code that landed this way is
+    // sent from here as a pasted one is — tapping the suggestion is the confirmation.
+    this.adopt = () => {
+      if (this.relaying) { return }
+
+      this.field.dispatchEvent(new Event('keyup', { bubbles: true }))
+      if (this.field.checkValidity()) { this.submit() }
+    }
+
+    this.listeners = [['input', this.adopt], ['input.bs.otpInput', this.relay],
+      ['paste', this.remember], ['keydown', this.forget], ['complete.bs.otpInput', this.send]]
+    for (const [name, on] of this.listeners) { this.element.addEventListener(name, on) }
+    this.draw()
+    // A refused code comes back as a re-render that can leave this controller untouched, so
+    // the drawing is redone whenever Turbo renders rather than only when Stimulus connects.
+    document.addEventListener('turbo:render', this.draw)
+    // On the document rather than the field: iOS reports a selection it made itself here.
+    document.addEventListener('selectionchange', this.collapse)
+  }
+
+  disconnect() {
+    document.removeEventListener('turbo:render', this.draw)
+    document.removeEventListener('selectionchange', this.collapse)
+    for (const [name, on] of this.listeners) { this.element.removeEventListener(name, on) }
+    this.otp?.dispose()
+  }
+
+  // The one real field the six slots are drawn over, and the only thing that holds the code.
+  get field() { return this.element.querySelector('.otp-input') }
+}

data/app/javascript/bh/phone_controller.js

@@ -0,0 +1,89 @@
+import { Controller } from '@hotwired/stimulus'
+
+// How a North American phone reads: `555-555-5555`, on a cell
+// that shows one and in a field that takes one. The server hands over ten bare digits
+// and a `data-controller`, and everything about the shape is decided here, so an app
+// that wants `(555) 555-5555` changes this file and no Ruby.
+export default class extends Controller {
+  // Ten digits with the separators typed in; an area or exchange code never starts
+  // with 0 or 1, which is what NANP forbids and what the server's own check enforces.
+  static pattern = '[2-9]\\d{2}-[2-9]\\d{2}-\\d{4}'
+  static sample = '555-555-5555'
+
+  // A field says what shape it wants where the markup left that blank, and both a
+  // field and a cell are formatted at once — so a form redrawn after a rejected save
+  // shows the separators rather than the digits it was sent.
+  connect() {
+    if (this.#field) { this.#constrain() }
+    this.#format()
+  }
+
+  // Only a digit goes in, and not an eleventh: a full field refuses the key itself rather
+  // than taking it and cutting it back, since everything else watching the field — a
+  // submit shut until it is valid — would see the eleven digits first and never the ten.
+  down(event) {
+    if (!event.key) { return }
+    if (event.ctrlKey) { return }
+    if (event.metaKey) { return }
+    if (event.key.length > 1) { return }
+    if (!/[0-9.]/.test(event.key)) { event.preventDefault(); return }
+    if (this.#digits().length >= 10 && this.#nothingSelected()) { event.preventDefault() }
+  }
+
+  input(event) {
+    if (event.inputType === 'deleteContentBackward') { return }
+    this.#format()
+  }
+
+  get #field() {
+    return this.element instanceof HTMLInputElement
+  }
+
+  #digits() {
+    return this.constructor.digits(this.#field ? this.element.value : this.element.textContent)
+  }
+
+  #nothingSelected() {
+    return this.element.selectionStart === this.element.selectionEnd
+  }
+
+  #constrain() {
+    const { pattern, sample } = this.constructor
+    const field = this.element
+    field.pattern ||= pattern
+    field.placeholder ||= sample
+    field.title ||= `Please match the format ${sample}`
+    field.inputMode ||= 'numeric'
+  }
+
+  // A value that came in whole — pasted, autofilled — is reshaped, and where that changed
+  // it the field says `input` again, so a submit that read the raw paste reads the shape.
+  #format() {
+    const text = this.#field ? this.element.value : this.element.textContent
+    const formatted = this.constructor.format(text)
+    if (formatted === text) { return }
+
+    if (!this.#field) { this.element.textContent = formatted; return }
+    this.element.value = formatted
+    if (this.saying) { return }
+    this.saying = true
+    this.element.dispatchEvent(new Event('input', { bubbles: true }))
+    this.saying = false
+  }
+
+  // The digits in `text`, up to ten, with a dash after the third and the sixth.
+  static format(text) {
+    const digits = this.digits(text)
+    const parts = [digits.substring(0, 3), digits.substring(3, 6), digits.substring(6, 10)]
+
+    return parts.filter((part) => part.length > 0).join('-')
+  }
+
+  // The digits alone, less the country code a number arrives with: no NANP area code
+  // starts with a 1, so a leading 1 on eleven digits is +1 and nothing else.
+  static digits(text) {
+    const digits = text.replace(/\D/g, '')
+
+    return digits.length > 10 && digits.startsWith('1') ? digits.slice(1, 11) : digits.slice(0, 10)
+  }
+}

data/app/javascript/bh/placeholder_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Cycles a field's own suggestion, so the placeholder reads as an invitation rather than as
+// one fixed example. Somebody who has started typing is left alone.
+export default class extends Controller {
+  static values = { questions: Array, every: { type: Number, default: 10000 } }
+
+  connect() {
+    this.index = 0
+    this.timer = setInterval(() => this.#cycle(), this.everyValue)
+  }
+
+  disconnect() {
+    clearInterval(this.timer)
+  }
+
+  // The class fades the placeholder out; the text is swapped while it cannot be seen.
+  #cycle() {
+    if (this.element.value) { return }
+
+    this.element.classList.add('is-fading')
+    setTimeout(() => {
+      this.index = (this.index + 1) % this.questionsValue.length
+      this.element.placeholder = this.questionsValue[this.index]
+      this.element.classList.remove('is-fading')
+    }, 300)
+  }
+}

data/app/javascript/bh/relative_time_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+import { Tooltip } from 'bootstrap'
+
+// Largest first, so the first one an instant clears is the one it is said in.
+const UNITS = [
+  ['year', 31536000000], ['month', 2592000000], ['week', 604800000],
+  ['day', 86400000], ['hour', 3600000], ['minute', 60000],
+]
+
+// How long ago a timestamp was, said again at the moment somebody asks. The server
+// writes the same words with Rails' own helper, which is what a reader without
+// JavaScript gets — but a table is cached and a page is left open, so those words are
+// only true when they are drawn. These are true when they are read.
+export default class extends Controller {
+  // Before the `tooltip` controller beside it, which is what makes the instance: this
+  // listener is registered first and so runs before Bootstrap's own.
+  connect() {
+    this.entered = () => this.#refresh()
+    this.element.addEventListener('mouseenter', this.entered)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('mouseenter', this.entered)
+  }
+
+  // Through `setContent`, since Bootstrap reads a tooltip's words once when it is made
+  // and never looks at the attribute again.
+  #refresh() {
+    const at = new Date(this.element.getAttribute('datetime'))
+    if (isNaN(at.getTime())) { return }
+
+    Tooltip.getInstance(this.element)?.setContent({ '.tooltip-inner': this.#words(at) })
+  }
+
+  #words(at) {
+    const format = new Intl.RelativeTimeFormat(document.documentElement.lang || 'en')
+    const ms = at - new Date()
+
+    for (const [unit, size] of UNITS) {
+      if (Math.abs(ms) >= size) { return format.format(Math.round(ms / size), unit) }
+    }
+
+    return format.format(Math.round(ms / 1000), 'second')
+  }
+}

data/app/javascript/bh/require_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+
+// A form's submit is shut until every required field has a value, so a reader is told
+// a message cannot be sent before they try, not after.
+export default class extends Controller {
+  connect() {
+    this.toggle()
+    this.element.querySelectorAll('[required]').forEach((field) => {
+      field.addEventListener('input', () => this.toggle())
+    })
+  }
+
+  toggle() {
+    const invalid = this.element.querySelectorAll('[required]:invalid').length > 0
+
+    this.element.querySelectorAll('[type="submit"]').forEach((button) => { button.disabled = invalid })
+  }
+}

data/app/javascript/bh/reveal_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+// One masked value and the click that unmasks it. The plaintext arrives with the
+// page rather than being fetched: the mask is against a screenshot, not against
+// whoever is already reading the record.
+export default class extends Controller {
+  static targets = ['mask', 'button']
+  static values = { plain: String }
+
+  show() {
+    this.maskTarget.textContent = this.plainValue
+    // Nothing left for it to do, and a link that reveals what is already revealed
+    // reads as though there were more to see.
+    this.buttonTarget.remove()
+  }
+}

data/app/javascript/bh/scheme_controller.js

@@ -0,0 +1,99 @@
+import { Controller } from '@hotwired/stimulus'
+
+// The sidebar's one control over how a page looks. A click moves it to another palette
+// and into the mode it is not in, which is what the icon promises: a moon while the page
+// is light, a sun while it is dark. The choice belongs to the reader rather than to the
+// app, so it is kept in their browser — the layout's own script is what puts it back
+// before the first paint, a controller connecting far too late for that.
+export default class extends Controller {
+  static values = { themes: Array, path: String, storage: String }
+
+  // Turbo merges the head on a visit, which puts the palette the server chose back over
+  // the one the reader picked, and the layout's script runs only on a full load. The
+  // sidebar is drawn again on every visit, so connecting is the moment to say it again.
+  connect() {
+    const stored = this.#stored()
+
+    if (stored) { this.#apply(stored.theme, stored.mode) }
+  }
+
+  // Another palette, in the other mode. Random rather than in order: the eight have no
+  // order that means anything. Excluding the one showing is what stops a click looking
+  // like it did nothing, which is the whole risk of picking at random.
+  rotate() {
+    const mode = this.#mode() === 'dark' ? 'light' : 'dark'
+    const others = this.themesValue.filter((theme) => theme !== this.#theme())
+    const theme = others[Math.floor(Math.random() * others.length)]
+
+    this.#apply(theme, mode)
+    localStorage.setItem(this.storageValue, JSON.stringify({ theme, mode }))
+  }
+
+  // The mode onto the element every `light-dark()` on the page is resolved against, and
+  // the palette onto the one link that serves one. A name is checked against the list
+  // the server sent: the storage is the reader's own, but what comes back out of it is
+  // still not something to put in a URL unread.
+  #apply(theme, mode) {
+    if (mode === 'light' || mode === 'dark') {
+      document.documentElement.dataset.bsTheme = mode
+    }
+    if (!this.themesValue.includes(theme)) { return }
+
+    this.#link().href = `${this.pathValue}/${theme}.css`
+  }
+
+  // What the reader picked last, or nothing at all where they never have.
+  #stored() {
+    try {
+      return JSON.parse(localStorage.getItem(this.storageValue))
+    } catch (error) {
+      return null
+    }
+  }
+
+  // Which mode the page is in: whatever has been forced onto it, and otherwise whatever
+  // the system asks for, since a page nobody has chosen for follows that.
+  #mode() {
+    return document.documentElement.dataset.bsTheme ||
+      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  }
+
+  // Which palette is showing, read off the link rather than remembered, so a reader who
+  // cleared their storage still moves on from the one in front of them.
+  #theme() {
+    const link = this.#current()
+
+    return link ? link.href.split('/').pop().replace('.css', '') : null
+  }
+
+  // The palette the page is drawn in, which is the *last* of these links rather than the
+  // first. Turbo's head merge appends a stylesheet the new head has and the old one does
+  // not — it never replaces one — and the server names the same palette on every page,
+  // so a visit made after the reader chose leaves two links and the browser obeys the
+  // one at the end. Writing to the other would change nothing anybody can see.
+  #current() {
+    const links = document.querySelectorAll('link[data-recourse-theme]')
+
+    return links[links.length - 1]
+  }
+
+  // The one link a palette is served through: whichever is in force, with any the merge
+  // left behind it taken away, and a new one where a host named no palette at all and
+  // there is none in the head to find.
+  #link() {
+    const links = [...document.querySelectorAll('link[data-recourse-theme]')]
+    const link = links.pop() || this.#appended()
+    links.forEach((stale) => stale.remove())
+
+    return link
+  }
+
+  #appended() {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.dataset.recourseTheme = ''
+    document.head.appendChild(link)
+
+    return link
+  }
+}

data/app/javascript/bh/search_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Survives the visit that a submit starts, since the module is not reloaded with
+// the page: it is how the next controller knows the search box was being typed in.
+// Only a submit that replaces the whole page needs it — a frame leaves the form,
+// and the caret in it, exactly where they were.
+let typing = false
+
+export default class extends Controller {
+  static targets = ['field']
+
+  connect() {
+    // Not on a cached preview: the real render connects a second time, and it is
+    // the one whose field can still be typed into.
+    if (typing && !document.documentElement.hasAttribute('data-turbo-preview')) {
+      typing = false
+      this.#restore()
+    }
+
+    // A pick in a combobox is written to its select and said as the select's own
+    // `change`, which bubbles, so one listener on the form hears every menu in it and
+    // each tick or untick narrows the table straight away. Coalesced to the end of the
+    // turn, because emptying a filter unticks every option in it — one request for the
+    // table that leaves, not one per option.
+    this.picked = () => {
+      clearTimeout(this.pick)
+      this.pick = setTimeout(() => this.#submit(), 0)
+    }
+    this.element.addEventListener('change', this.picked)
+
+    // The frame is not inside the form, so its events never reach it.
+    this.reloaded = () => { typing = false; this.#syncSort() }
+    document.addEventListener('turbo:frame-load', this.reloaded)
+
+    // A refresh morph would write the fetched page's older query over what is
+    // mid-typing, so the form's subtree sits a morph out — the text, the caret
+    // and any open filter menu stay. Only a morph: a page visit still renders
+    // every page's own form, which `turbo-permanent` here would carry across.
+    this.morphing = (event) => { if (this.element.contains(event.target)) event.preventDefault() }
+    document.addEventListener('turbo:before-morph-element', this.morphing)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('change', this.picked)
+    document.removeEventListener('turbo:frame-load', this.reloaded)
+    document.removeEventListener('turbo:before-morph-element', this.morphing)
+    clearTimeout(this.timer)
+    clearTimeout(this.pick)
+  }
+
+  submit() {
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => { typing = true; this.#submit() }, 300)
+  }
+
+  #submit() {
+    this.element.requestSubmit()
+  }
+
+  // A heading sorts by navigating the frame, which advances the address bar but
+  // leaves this form alone — so the sort it carries has to be read back off the URL,
+  // or the next search would reorder the table by whatever was in force before.
+  #syncSort() {
+    const field = this.element.querySelector('input[name="q[s]"]')
+
+    if (field) { field.value = new URL(window.location.href).searchParams.get('q[s]') || '' }
+  }
+
+  // The value comes back from the server, so only the caret has to be put back,
+  // and at the end of it — typing carries on where it left off.
+  #restore() {
+    if (!this.hasFieldTarget) { return }
+
+    const field = this.fieldTarget
+    field.focus({ preventScroll: true })
+    field.setSelectionRange(field.value.length, field.value.length)
+  }
+}