Catalog controls: fold the docked bar, no history per arrow, keep typing

- On wide screens the sticky filter bar folds to the search row and the
  Filters button once it docks at the top (253 px to 155 px at 1440x900)
  and unfolds when scrolled back to it; phones are unchanged
- Arrow keys in the category group replace the history entry instead of
  pushing one per press
- popstate ignores hash-only navigation, so following #stacks or
  #catalog no longer clears a search still inside the debounce
- q is capped at 200 characters from the URL and in the search box
Checked in Chromium at 1440x900 and 375x667.

Closes #157

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: TMHSDigital

site/lib/lib.test.mjs

@@ -743,6 +743,7 @@ import {
   searchFields,
   similarity,
   stateQuery,
+  MAX_QUERY,
 } from "./search.mjs";
 
 const kit = { id: "ui-kit", name: "UI Kit", publisher: "Kenney", tags: ["button", "first-person"], license: "CC0", category: "2d", camera_perspective: "isometric_3_4", formats: ["PNG"], subcategories: ["ui"], summary: "Panels for the earth biome." };
@@ -1071,6 +1072,8 @@ has("cards: title level option", entryCardHtml(cardBase, { root: "", repo: "http
   eq("stack page: no h4", html.includes("<h4"), false);
 }
 
+eq("search: q from the URL is capped", readState(`?q=${"a".repeat(5000)}`, { q: "" }, {}).q.length, MAX_QUERY);
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);

site/lib/search.mjs

@@ -107,14 +107,18 @@ const SWITCHES = [
  * page has no control for; each one falls back to its default, and the page
  * then rewrites the URL without it.
  */
+/** Longest search query kept from a URL or the search box. */
+export const MAX_QUERY = 200;
+
 export function readState(search, defaults, allowed) {
   const p = new URLSearchParams(search);
   const state = { ...defaults };
   for (const [key, field] of CHOICES) {
     const v = p.get(key);
     if (v !== null && (allowed[field] || []).includes(v)) state[field] = v;
   }
-  if (p.has("q")) state.q = p.get("q");
+  // A shared link cannot paste a novel into the search box and the chips.
+  if (p.has("q")) state.q = p.get("q").slice(0, MAX_QUERY);
   for (const [key, field] of SWITCHES) {
     const v = p.get(key);
     if (v === "1" || v === "0") state[field] = v === "1";

site/public/app.js

@@ -91,9 +91,13 @@ import { installViewToggles } from "./views.js";
    * keystrokes and checkbox toggles replace, so Back is not a hundred steps
    * of typing. Both in try/catch: Safari throws past 100 calls in 30 s.
    */
+  // The query string writeUrl last put in the address bar.
+  let lastSearch = location.search;
+
   function writeUrl({ push = false } = {}) {
     const qs = stateQuery(state, DEFAULTS);
     const next = `${location.pathname}${qs ? `?${qs}` : ""}${location.hash}`;
+    lastSearch = qs ? `?${qs}` : "";
     try {
       const same = next === `${location.pathname}${location.search}${location.hash}`;
       if (push && !same) history.pushState(null, "", next);
@@ -238,7 +242,8 @@ import { installViewToggles } from "./views.js";
       e.preventDefault();
       chips[to].focus();
       state.category = chips[to].getAttribute("data-cat");
-      apply({ push: true });
+      // Moving through the group is browsing, not a step to go Back to.
+      apply();
     });
   }
 
@@ -691,6 +696,11 @@ import { installViewToggles } from "./views.js";
 
     // Back and Forward step through the pushed views.
     window.addEventListener("popstate", () => {
+      // A hash-only move (#stacks, #catalog) also fires popstate; the
+      // filters did not change, and re-reading them would wipe typing
+      // that the debounce has not written yet.
+      if (location.search === lastSearch) return;
+      lastSearch = location.search;
       readUrl();
       syncControls();
       apply();
@@ -779,6 +789,36 @@ import { installViewToggles } from "./views.js";
       toggle.setAttribute("aria-expanded", open ? "true" : "false");
     });
 
+    // On wider screens the bar stays sticky, and unfolded it covered about
+    // a quarter of a laptop screen. Once it docks at the top it folds to the
+    // search row and the Filters button, as on a phone; scrolling back up
+    // to it unfolds it again.
+    const wide = matchMedia("(min-width: 641px) and (min-height: 601px)");
+    const sentinel = document.createElement("div");
+    sentinel.setAttribute("aria-hidden", "true");
+    controls.before(sentinel);
+    const setDocked = (docked) => {
+      if (!wide.matches) {
+        controls.classList.remove("is-docked");
+        return;
+      }
+      if (docked === controls.classList.contains("is-docked")) return;
+      controls.classList.toggle("is-docked", docked);
+      controls.classList.toggle("is-collapsed", docked);
+      toggle.setAttribute("aria-expanded", docked ? "false" : "true");
+    };
+    if ("IntersectionObserver" in window) {
+      new IntersectionObserver(([e]) => setDocked(!e.isIntersecting && e.boundingClientRect.top < 0)).observe(sentinel);
+    }
+    wide.addEventListener?.("change", () => {
+      if (!wide.matches) controls.classList.remove("is-docked");
+      else controls.classList.remove("is-collapsed");
+    });
+    if (wide.matches) {
+      controls.classList.remove("is-collapsed");
+      toggle.setAttribute("aria-expanded", "true");
+    }
+
     const top = $("#to-top");
     // Returns to the catalog's search and filters, which on small screens have
     // scrolled away. It used to scroll to the page top and then focus search

site/public/index.html

@@ -91,6 +91,7 @@ <h2 id="catalog-title">Catalog</h2>
             <span class="sr-only">Search catalog</span>
             <input
               id="search"
+              maxlength="200"
               type="search"
               placeholder="Name, license, tag, format…"
               autocomplete="off"

site/public/styles.css

@@ -1050,13 +1050,34 @@ input:focus-visible,
   }
 }
 
-/* The filter disclosure exists for small screens only. app.js unhides it
-   and folds the panel; everything but the result count (the live region)
-   hides while folded. */
+/* The filter disclosure exists for small screens, and for the docked bar on
+   wider ones (app.js adds .is-docked once the bar sticks to the top). app.js
+   unhides it and folds the panel; everything but the result count (the live
+   region) hides while folded. */
 .filters-toggle {
   display: none;
 }
 
+.controls.is-docked .filters-toggle:not([hidden]) {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  min-height: 36px;
+  padding: 0.3rem 0.8rem;
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.controls.is-docked.is-collapsed #category-filters,
+.controls.is-docked.is-collapsed #meta-filters > :not(.result-count) {
+  display: none;
+}
+
 @media (max-width: 640px) {
   .filters-toggle:not([hidden]) {
     display: inline-flex;