general products page and small rewrite of search and category controllers etc

resources/js/stimulus/nav-search-controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+// The search overlay is a [popover] that must sit exactly over the header. The
+// header has no fixed height below `lg`, so on open we copy its current height
+// onto --search-overlay-h and move focus into the field. Escape / click-away
+// close come from the Popover API; the fade is CSS (#search-overlay).
+export default class extends Controller {
+    static targets = ['input']
+
+    connect() {
+        this.element.addEventListener('toggle', this.#onToggle)
+    }
+
+    disconnect() {
+        this.element.removeEventListener('toggle', this.#onToggle)
+    }
+
+    #onToggle = (event) => {
+        if (event.newState !== 'open') return
+
+        const header = this.element.closest('header')
+        if (header) {
+            this.element.style.setProperty('--search-overlay-h', `${header.offsetHeight}px`)
+        }
+
+        requestAnimationFrame(() => this.inputTarget.focus())
+    }
+}