polish(web): search pill aria-pressed, keepPreviousData, plural result count, URL-hydration test

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/api/queries.ts

@@ -1,4 +1,4 @@
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { api } from "./client";
 import type { components } from "./schema";
@@ -306,6 +306,7 @@ export function useSearch(q: string, visibility: string | null) {
 
       return data;
     },
+    placeholderData: keepPreviousData,
     getNextPageParam: (lastPage, allPages) => {
       const loaded = allPages.reduce((n, page) => n + page.hits.length, 0);
 

web/src/i18n/en.json

@@ -25,7 +25,8 @@
     "empty": "No results",
     "loadError": "Search is unavailable",
     "loadMore": "Load more",
-    "resultCount": "{{count}} results",
+    "resultCount_one": "{{count}} result",
+    "resultCount_other": "{{count}} results",
     "selectPrompt": "Select a result to see the full record"
   },
   "publish": {

web/src/i18n/sv.json

@@ -25,7 +25,8 @@
     "empty": "Inga träffar",
     "loadError": "Sök är inte tillgängligt",
     "loadMore": "Visa fler",
-    "resultCount": "{{count}} träffar",
+    "resultCount_one": "{{count}} träff",
+    "resultCount_other": "{{count}} träffar",
     "selectPrompt": "Välj en träff för att se hela posten"
   },
   "publish": {

web/src/search/search-panel.tsx

@@ -69,6 +69,7 @@ export function SearchPanel() {
               <button
                 key={value}
                 type="button"
+                aria-pressed={active}
                 onClick={() => setVisibility(value)}
                 className={`rounded px-2 py-0.5 ${active ? "bg-indigo-600 text-white" : "border"}`}
               >

web/src/search/search.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { screen, waitFor } from "@testing-library/react";
+import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
 import { Route, Routes } from "react-router-dom";
@@ -75,3 +75,16 @@ test("clicking a result shows the object in the detail pane", async () => {
 
   expect(await screen.findByText(amphora.object_name)).toBeInTheDocument();
 });
+
+test("hydrates query and visibility from the initial URL", async () => {
+  renderApp(tree(), { route: "/search?q=bronze" });
+
+  expect(screen.getByLabelText(/search the collection/i)).toHaveValue("bronze");
+  expect(await screen.findByText("Bronze figurine")).toBeInTheDocument();
+
+  const { container } = renderApp(tree(), { route: "/search?q=bronze&visibility=internal" });
+
+  expect(
+    within(container).getByRole("button", { name: /^internal$/i }),
+  ).toHaveAttribute("aria-pressed", "true");
+});