diff --git a/docs/site-map.md b/docs/site-map.md index b7cb6e7908..b8098c8514 100644 --- a/docs/site-map.md +++ b/docs/site-map.md @@ -1042,6 +1042,7 @@ This file is generated by `npm run docs:update` (or `npm run sitemap:update` dir - `/mockups/tools-action-workbench` - Route discovered from app directory Source: `src/app/mockups/tools-action-workbench/page.tsx`. - `/mockups/tools-clinical-lanes` - Route discovered from app directory Source: `src/app/mockups/tools-clinical-lanes/page.tsx`. - `/mockups/tools-command-center` - Route discovered from app directory Source: `src/app/mockups/tools-command-center/page.tsx`. +- `/mockups/tools-search-mode` - Route discovered from app directory Source: `src/app/mockups/tools-search-mode/page.tsx`. - `/mockups/tools-split-clinical-brief` - Route discovered from app directory Source: `src/app/mockups/tools-split-clinical-brief/page.tsx`. - `/mockups/tools-split-compact-sheet` - Route discovered from app directory Source: `src/app/mockups/tools-split-compact-sheet/page.tsx`. - `/mockups/tools-split-pane` - Route discovered from app directory Source: `src/app/mockups/tools-split-pane/page.tsx`. diff --git a/mockups/README.md b/mockups/README.md index 97f7c69e5a..696a41a229 100644 --- a/mockups/README.md +++ b/mockups/README.md @@ -20,7 +20,7 @@ Mockups use the Clinical White / Sky Graphite role tokens (`--command`, `--clini Runnable mockups under `src/app/mockups/*` inherit the shared Clinical KB header and bottom search composer from `src/app/mockups/layout.tsx`. - Put the mockup content between the global header and bottom composer; do not copy the header or composer into new pages. -- Tool and favourites mockups keep the shared app header but hide the bottom composer because they provide their own primary search surface. +- Favourites mockups and Tools mockups that provide their own primary search surface keep the shared app header but hide the bottom composer. - Use `?mode=answer`, `?mode=documents`, `?mode=prescribing`, `?mode=evidence`, or `?mode=favourites` to preview the active search mode. - The bottom composer routes live searches to the dashboard with `mode`, `q`, and `run=1`; New chat routes to `/?mode=answer&focus=1`. - If a future mockup must be standalone, move it outside the `/mockups` route shell or add an explicit opt-out route group before implementing it. @@ -61,6 +61,10 @@ These are PNGs for design review only. Runnable `/mockups/*` routes are a separa **Perfected combined comps** (desktop + phone in one image, recommended directions only) live in [`public/mockups/mode-page-redesign-2026-07/perfected-combined/`](../public/mockups/mode-page-redesign-2026-07/perfected-combined/README.md). +## Perfected Tools search mode + +`/mockups/tools-search-mode?mode=tools&q=Compare` is the interactive responsive Tools results-mode study. It uses the site's universal header and search composer, the shared results ribbon and filter conventions, compact Tools result cards, a contextual detail panel on desktop, and a bottom sheet on phones. It intentionally excludes the Tools home hero, quick actions, medication-list treatment, and cross-mode suggestion blocks. + ## Breadcrumb header study (2026-08-09) — shipped, route retired Three sticky header directions for record pages that use `InformationPageBreadcrumbs` and have **no in-page section index** — factsheets, services, forms, DSM, specifiers, formulation, medications. `InPageNavHeader` stays the default for in-page navigation per [`docs/search-chrome-behaviour.md`](../docs/search-chrome-behaviour.md); it is the wrong shape for those pages, because with no sections its disclosure opens a one-item sheet and its weighted track renders one full-width segment. Every direction kept that header's row grammar (back, title, ellipsis, one scroll owner) and dropped the section machinery: diff --git a/playwright.config.ts b/playwright.config.ts index e3db8c4109..81f8c59f02 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -25,13 +25,13 @@ const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH; const productionSpecPattern = /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|document-canvas|tools|overlap|universal-search|specifiers|formulation(?:-result-cards)?|forms-section-nav|chrome-scroll|therapy-nav-scroll|mode-nav-density|phone-scroll(?:-[a-z0-9-]+)?|pwa|route-coverage|style-contract|visual-artifacts|hydration))\.spec\.ts/; const mockupSpecPattern = - /.*ui-(document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-task-directory)\.spec\.ts/; + /.*ui-(document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-search-mode-mockup|tools-task-directory)\.spec\.ts/; const mockupTag = /@mockup/; export default defineConfig({ testDir: "./tests", testMatch: - /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|document-canvas|document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-task-directory|overlap|universal-search|specifiers|formulation(?:-result-cards)?|forms-section-nav|chrome-scroll|therapy-nav-scroll|mode-nav-density|phone-scroll(?:-[a-z0-9-]+)?|pwa|route-coverage|style-contract|visual-artifacts|hydration))\.spec\.ts/, + /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|document-canvas|document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-search-mode-mockup|tools-task-directory|overlap|universal-search|specifiers|formulation(?:-result-cards)?|forms-section-nav|chrome-scroll|therapy-nav-scroll|mode-nav-density|phone-scroll(?:-[a-z0-9-]+)?|pwa|route-coverage|style-contract|visual-artifacts|hydration))\.spec\.ts/, timeout: 60_000, retries: 0, // Fail the run if a stray `test.only` is committed: otherwise it silently diff --git a/src/app/mockups/mockups-layout-client.tsx b/src/app/mockups/mockups-layout-client.tsx index b07c2a9610..12b548ae66 100644 --- a/src/app/mockups/mockups-layout-client.tsx +++ b/src/app/mockups/mockups-layout-client.tsx @@ -8,6 +8,7 @@ import { GlobalMockupSearchShell } from "@/components/clinical-dashboard/global- export function MockupsLayoutClient({ children }: { children: ReactNode }) { const pathname = usePathname(); const isToolsPageMockup = pathname.startsWith("/mockups/tools-"); + const isToolsSearchModeMockup = pathname === "/mockups/tools-search-mode"; const isFavouritesPageMockup = pathname.startsWith("/mockups/favourites-"); const isDocumentSearchMockup = pathname.startsWith("/mockups/document-search"); const isDocumentTopNavigationMockup = pathname === "/mockups/document-top-navigation"; @@ -85,7 +86,7 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) { : "answer" } searchComposerVisible={ - !isToolsPageMockup && + (!isToolsPageMockup || isToolsSearchModeMockup) && !isFavouritesPageMockup && !isStandaloneDocumentFlow && !isDocumentTopNavigationMockup && diff --git a/src/app/mockups/tools-search-mode/page.tsx b/src/app/mockups/tools-search-mode/page.tsx new file mode 100644 index 0000000000..bd1f144a97 --- /dev/null +++ b/src/app/mockups/tools-search-mode/page.tsx @@ -0,0 +1,12 @@ +import type { Metadata } from "next"; + +import { ToolsSearchModeMockup } from "@/components/tools-page-mockups/tools-search-mode-mockup"; + +export const metadata: Metadata = { + title: "Perfected Tools Results Mode Mockup - Clinical KB", + description: "Responsive Tools results page with the universal search composer and adaptive tool details.", +}; + +export default function ToolsSearchModeMockupRoute() { + return ; +} diff --git a/src/components/tools-page-mockups/tools-search-mode-mockup.tsx b/src/components/tools-page-mockups/tools-search-mode-mockup.tsx new file mode 100644 index 0000000000..0ede60d75f --- /dev/null +++ b/src/components/tools-page-mockups/tools-search-mode-mockup.tsx @@ -0,0 +1,495 @@ +"use client"; + +import Link from "next/link"; +import { + Brain, + ChevronRight, + ClipboardList, + FileCheck2, + FileText, + Grid2X2, + Palette, + Pill, + Search, + ShieldCheck, + Users, + Waves, + type LucideIcon, +} from "lucide-react"; +import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react"; + +import { + ResultFilterSheet, + ResultFilterTrigger, + resultFilterGroup, +} from "@/components/clinical-dashboard/result-filter-control"; +import { useSearchCommand } from "@/components/clinical-dashboard/search-command-context"; +import { SearchResultsHeaderBand } from "@/components/clinical-dashboard/search-results-header-band"; +import { cn, controlBase, floatingControl } from "@/components/ui-primitives"; +import { SegmentedControl } from "@/components/ui/segmented-control"; +import { Sheet } from "@/components/ui/sheet"; +import { normalizeSearchText } from "@/lib/catalog-search"; +import { toolCatalogRecords, toolSearchText, type ToolCatalogArea, type ToolCatalogRecord } from "@/lib/tools-catalog"; + +const focusRing = + "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"; + +const iconByToolId: Record = { + "clinical-kb-search": Search, + differentials: Brain, + "medication-prescribing": Pill, + "risk-safety": ShieldCheck, + documents: FileText, + services: Users, + forms: FileCheck2, +}; + +const filterOptions = [ + { id: "all", label: "All tools" }, + { id: "assessment", label: "Assessment" }, + { id: "reference", label: "Evidence" }, + { id: "care", label: "Treatment" }, + { id: "coordination", label: "Coordination" }, +] as const satisfies ReadonlyArray<{ id: "all" | ToolCatalogArea; label: string }>; + +type FilterId = (typeof filterOptions)[number]["id"]; +type DetailSectionId = "check-first" | "needed-input" | "output"; + +function ToolIcon({ tool, large = false }: { tool: ToolCatalogRecord; large?: boolean }) { + const Icon = iconByToolId[tool.id] ?? Grid2X2; + return ( + + + ); +} + +function ToolChips({ tool }: { tool: ToolCatalogRecord }) { + return ( + + {tool.sourceBacked ? ( + + + ) : null} + {tool.highYield ? ( + + High yield + + ) : null} + + ); +} + +function DetailAccordion({ + tool, + prefix, + openSection, + onToggle, +}: { + tool: ToolCatalogRecord; + prefix: string; + openSection: DetailSectionId | null; + onToggle: (section: DetailSectionId) => void; +}) { + const sections: Array<{ id: DetailSectionId; label: string; icon: LucideIcon; content: ReactNode }> = [ + { + id: "check-first", + label: "Check first", + icon: ShieldCheck, + content: ( + + ), + }, + { + id: "needed-input", + label: "Needed input", + icon: ClipboardList, + content: ( + + ), + }, + { id: "output", label: "Output", icon: Waves, content:

{tool.output}

}, + ]; + + return ( +
+ {sections.map(({ id, label, icon: Icon, content }) => { + const expanded = openSection === id; + const panelId = `${prefix}-${id}`; + return ( +
+

+ +

+ +
+ ); + })} +
+ ); +} + +function DetailBody({ + tool, + prefix, + openSection, + onToggle, +}: { + tool: ToolCatalogRecord; + prefix: string; + openSection: DetailSectionId | null; + onToggle: (section: DetailSectionId) => void; +}) { + return ( +
+
+
+
+

{tool.detail}

+
+ +
+ ); +} + +function DetailActions({ tool }: { tool: ToolCatalogRecord }) { + return ( +
+ + {tool.actionLabel} {tool.title} +
+ ); +} + +export function ToolsSearchModeMockup() { + const searchCommand = useSearchCommand(); + const query = searchCommand?.query ?? "Compare"; + const filterPanelId = useId(); + const [activeFilter, setActiveFilter] = useState("all"); + const [filterOpen, setFilterOpen] = useState(false); + const [selectedId, setSelectedId] = useState("differentials"); + const [phoneDetailOpen, setPhoneDetailOpen] = useState(false); + const [openSection, setOpenSection] = useState(null); + const detailReturnFocusRef = useRef(null); + const desktopPanelRef = useRef(null); + + useEffect(() => { + const desktopMedia = window.matchMedia("(min-width: 1024px)"); + const closePhoneOverlaysOnDesktop = (event: MediaQueryListEvent) => { + if (event.matches) { + setPhoneDetailOpen(false); + setFilterOpen(false); + } + }; + + desktopMedia.addEventListener("change", closePhoneOverlaysOnDesktop); + return () => desktopMedia.removeEventListener("change", closePhoneOverlaysOnDesktop); + }, []); + + const queryMatchedTools = useMemo(() => { + const normalized = normalizeSearchText(query); + return toolCatalogRecords.filter( + (tool) => (!normalized || toolSearchText(tool).includes(normalized)) && tool.id !== "favourites", + ); + }, [query]); + + const filterCounts = useMemo>( + () => ({ + all: queryMatchedTools.length, + assessment: queryMatchedTools.filter((tool) => tool.area === "assessment").length, + reference: queryMatchedTools.filter((tool) => tool.area === "reference").length, + care: queryMatchedTools.filter((tool) => tool.area === "care").length, + coordination: queryMatchedTools.filter((tool) => tool.area === "coordination").length, + }), + [queryMatchedTools], + ); + + const filteredTools = useMemo( + () => (activeFilter === "all" ? queryMatchedTools : queryMatchedTools.filter((tool) => tool.area === activeFilter)), + [activeFilter, queryMatchedTools], + ); + + const filterControlOptions = useMemo( + () => + filterOptions.map((option) => ({ + value: option.id, + label: option.label, + hint: String(filterCounts[option.id]), + disabled: filterCounts[option.id] === 0 && activeFilter !== option.id, + })), + [activeFilter, filterCounts], + ); + + const selectedTool = filteredTools.find((tool) => tool.id === selectedId) ?? filteredTools[0] ?? null; + + function toggleDetailSection(section: DetailSectionId) { + setOpenSection((current) => (current === section ? null : section)); + } + + function openTool(tool: ToolCatalogRecord, opener?: HTMLElement | null) { + setSelectedId(tool.id); + setOpenSection(null); + if (window.matchMedia("(max-width: 1023px)").matches) { + detailReturnFocusRef.current = opener ?? null; + setPhoneDetailOpen(true); + return; + } + window.requestAnimationFrame(() => desktopPanelRef.current?.focus()); + } + + return ( +
+
+
+ setFilterOpen((current) => !current)} + title="Filter tools" + /> + } + mobileControlsPlacement="inline" + filterControls={ + + } + /> + setFilterOpen(false)} + panelId={filterPanelId} + testId="tools-search-filter-sheet" + title="Filter tools" + groups={[ + resultFilterGroup({ + id: "category", + label: "Category", + value: activeFilter, + options: filterControlOptions, + onChange: setActiveFilter, + }), + ]} + onClearAll={activeFilter === "all" ? undefined : () => setActiveFilter("all")} + footerNote={`${filteredTools.length} showing`} + /> + +
+ {filteredTools.length ? ( + filteredTools.map((tool) => ( +
+ {tool.id === selectedTool?.id ? ( +
+ )) + ) : ( +
+
+ )} +
+
+ + {selectedTool ? ( + + ) : null} +
+ +
+ +
+ + {selectedTool ? ( +
+ setPhoneDetailOpen(false)} + title={selectedTool.title} + closeLabel={`Close ${selectedTool.title}`} + headerLeading={} + descriptionContent={} + titleClassName="text-xl font-extrabold" + contentClassName="sm:max-w-[39rem]" + bodyClassName="grid gap-4" + portal={false} + returnFocusRef={detailReturnFocusRef} + testId="tools-search-detail-sheet" + footer={} + > + + +
+ ) : null} +
+ ); +} diff --git a/tests/ui-tools-search-mode-mockup.spec.ts b/tests/ui-tools-search-mode-mockup.spec.ts new file mode 100644 index 0000000000..d827634b66 --- /dev/null +++ b/tests/ui-tools-search-mode-mockup.spec.ts @@ -0,0 +1,218 @@ +import { expect, test, type Page } from "playwright/test"; + +const mockupPath = "/mockups/tools-search-mode?mode=tools&q=Compare"; + +async function gotoMockup(page: Page, width: number, height = 900) { + await page.setViewportSize({ width, height }); + await page.goto(mockupPath, { waitUntil: "domcontentloaded" }); + const mockup = page.locator('[data-testid="tools-search-mode-mockup"]:visible'); + await expect(mockup).toBeVisible(); + await expect(page.locator('[data-testid="global-search-input"]:visible')).toHaveValue("Compare"); + return mockup; +} + +async function expectNoHorizontalOverflow(page: Page) { + const geometry = await page.evaluate(() => ({ + body: document.body.scrollWidth, + document: document.documentElement.scrollWidth, + viewport: document.documentElement.clientWidth, + })); + expect(Math.max(geometry.body, geometry.document)).toBeLessThanOrEqual(geometry.viewport + 1); +} + +test.describe("Perfected Tools results mode mockup @mockup", () => { + test("desktop uses universal search and keeps results beside the selected-tool panel", async ({ page }) => { + const mockup = await gotoMockup(page, 1440); + + await expect(mockup.getByRole("heading", { level: 1, name: "Compare" })).toBeVisible(); + await expect(mockup.getByText("1 tool", { exact: true })).toBeVisible(); + await expect(mockup.getByRole("heading", { level: 2, name: "Differentials" }).first()).toBeVisible(); + const selectedResult = mockup.getByRole("article").filter({ hasText: "Differentials" }); + await expect(selectedResult).toHaveAttribute("data-selected", "true"); + await expect(selectedResult.getByText("Source-backed")).toBeVisible(); + await expect(selectedResult.getByText("High yield")).toBeVisible(); + await expect(selectedResult.getByText("Broad or complex presentations")).toBeVisible(); + await expect(mockup.locator("aside").getByRole("heading", { name: "Best for" })).toBeVisible(); + await expect(mockup.locator("aside").getByText("Selected tool")).toBeVisible(); + await expect(mockup.getByTestId("tools-search-mode-hero")).toHaveCount(0); + await expect(mockup.getByText("Also matches in other modes")).toHaveCount(0); + await expect(mockup.getByText("Dose converter")).toHaveCount(0); + + const categoryRail = mockup.getByRole("radiogroup", { name: "Tool category" }); + const allToolsFilter = categoryRail.getByRole("radio", { name: "All tools (1)" }); + await allToolsFilter.focus(); + await page.keyboard.press("ArrowRight"); + await expect(categoryRail.getByRole("radio", { name: "Assessment (1)" })).toHaveAttribute("aria-checked", "true"); + await expect(categoryRail.getByRole("radio", { name: "Treatment (0)" })).toBeDisabled(); + + await page.locator('[data-testid="global-search-input"]:visible').fill("Safety"); + await expect(mockup.getByRole("heading", { level: 1, name: "Safety" })).toBeVisible(); + const treatmentFilter = categoryRail.getByRole("radio", { name: "Treatment (2)" }); + await treatmentFilter.click(); + await expect(treatmentFilter).toHaveAttribute("aria-checked", "true"); + await page.locator('[data-testid="global-search-input"]:visible').fill("Compare"); + await expect(mockup.getByText("0 tools", { exact: true })).toBeVisible(); + await expect(mockup.getByRole("heading", { name: "No tools match" })).toBeVisible(); + await expect(mockup.locator("aside")).toHaveCount(0); + await allToolsFilter.click(); + await expect(mockup.getByRole("heading", { level: 2, name: "Differentials" }).first()).toBeVisible(); + await expect(mockup.locator("aside").getByRole("heading", { name: "Differentials" })).toBeVisible(); + + const output = mockup.locator("aside").getByRole("button", { name: "Output" }); + await output.click(); + await expect(output).toHaveAttribute("aria-expanded", "true"); + await expect(mockup.locator("#desktop-tool-detail-output")).toContainText("Ranked differentials"); + + await page.locator('[data-testid="global-search-input"]:visible').fill("Safety"); + await expect(mockup.getByRole("heading", { level: 1, name: "Safety" })).toBeVisible(); + await expect(mockup.locator("aside").getByRole("heading", { name: "Risk & Safety" })).toBeVisible(); + + await page.locator('[data-testid="global-search-input"]:visible').fill(""); + await expect(mockup.getByRole("heading", { level: 1, name: "All" })).toBeVisible(); + const renderedResultCount = await mockup.getByRole("article").count(); + expect(renderedResultCount).toBeGreaterThan(4); + await expect(mockup.getByText(`${renderedResultCount} tools`, { exact: true })).toBeVisible(); + await expectNoHorizontalOverflow(page); + }); + + test("desktop details use inline semantics and preserve visible programmatic focus", async ({ page }) => { + const mockup = await gotoMockup(page, 1440); + const details = mockup.getByRole("button", { name: "View details for Differentials" }); + + expect(await details.getAttribute("aria-haspopup")).toBeNull(); + await details.click(); + + const panel = mockup.locator("aside"); + await expect(panel).toBeFocused(); + const outline = await panel.evaluate((element) => { + const style = window.getComputedStyle(element); + return { + style: style.outlineStyle, + width: Number.parseFloat(style.outlineWidth), + }; + }); + expect(outline.style).not.toBe("none"); + expect(outline.width).toBeGreaterThanOrEqual(2); + }); + + test("matches the exact displayed tool title after normalising punctuation", async ({ page }) => { + const mockup = await gotoMockup(page, 1440); + await page.locator('[data-testid="global-search-input"]:visible').fill("Risk & Safety"); + + await expect(mockup.getByText("1 tool", { exact: true })).toBeVisible(); + await expect(mockup.getByRole("heading", { level: 2, name: "Risk & Safety" }).first()).toBeVisible(); + }); + + test("renders every result included in the reported count", async ({ page }) => { + const mockup = await gotoMockup(page, 1440); + await page.locator('[data-testid="global-search-input"]:visible').fill(""); + + await expect(mockup.getByText("12 tools", { exact: true })).toBeVisible(); + await expect(mockup.locator('section[aria-label="Tool results"] article')).toHaveCount(12); + }); + + test("phone keeps results visible until Details opens the preferred bottom sheet", async ({ page }) => { + const mockup = await gotoMockup(page, 390, 844); + + const sheet = page.locator('[data-testid="tools-search-detail-sheet"]:visible'); + await expect(sheet).toHaveCount(0); + await expect(mockup.getByRole("heading", { level: 1, name: "Compare" })).toBeVisible(); + await expect(mockup.getByRole("heading", { level: 2, name: "Differentials" })).toBeVisible(); + + const details = mockup.getByRole("button", { name: "View details for Differentials" }); + await details.click(); + await expect(sheet).toBeVisible(); + await expect(sheet.getByRole("heading", { name: "Differentials" })).toBeVisible(); + await expect(sheet.getByRole("heading", { name: "Best for" })).toBeVisible(); + + const neededInput = sheet.getByRole("button", { name: "Needed input" }); + await neededInput.click(); + await expect(neededInput).toHaveAttribute("aria-expanded", "true"); + await page.keyboard.press("Escape"); + await expect(sheet).toHaveCount(0); + + await details.click(); + await expect(sheet).toBeVisible(); + await sheet.getByRole("button", { name: "Close Differentials" }).click(); + await expect(details).toBeFocused(); + await expectNoHorizontalOverflow(page); + }); + + test("closes the phone detail sheet when the viewport enters desktop layout", async ({ page }) => { + const mockup = await gotoMockup(page, 390, 844); + const sheet = page.locator('[data-testid="tools-search-detail-sheet"]:visible'); + + await mockup.getByRole("button", { name: "View details for Differentials" }).click(); + await expect(sheet).toBeVisible(); + + await page.setViewportSize({ width: 1440, height: 900 }); + await expect(sheet).toHaveCount(0); + await expect(mockup.locator("aside")).toBeVisible(); + + await page.setViewportSize({ width: 390, height: 844 }); + await expect(sheet).toHaveCount(0); + }); + + test("closes the phone filter sheet when the viewport enters desktop layout", async ({ page }) => { + const mockup = await gotoMockup(page, 390, 844); + const trigger = mockup.getByTestId("tools-search-filter-trigger-phone"); + + await trigger.click(); + const filterSheet = page.locator('[data-testid="tools-search-filter-sheet"]:visible'); + await expect(filterSheet).toBeVisible(); + + await page.setViewportSize({ width: 1440, height: 900 }); + await expect(filterSheet).toHaveCount(0); + + await page.setViewportSize({ width: 390, height: 844 }); + await expect(filterSheet).toHaveCount(0); + }); + + test("phone filter sheet follows the shared local-filter behavior", async ({ page }) => { + const mockup = await gotoMockup(page, 390, 844); + const trigger = mockup.getByTestId("tools-search-filter-trigger-phone"); + + await page.locator('[data-testid="global-search-input"]:visible').fill("Safety"); + await expect(mockup.getByRole("heading", { level: 1, name: "Safety" })).toBeVisible(); + + await trigger.click(); + const filterSheet = page.locator('[data-testid="tools-search-filter-sheet"]:visible'); + await expect(filterSheet).toBeVisible(); + await expect(filterSheet.getByText("2 showing", { exact: true })).toBeVisible(); + await expect(filterSheet.getByRole("radio", { name: /Evidence/ })).toHaveAttribute("aria-disabled", "true"); + + const treatment = filterSheet.getByRole("radio", { name: /Treatment/ }); + await treatment.click(); + await expect(treatment).toHaveAttribute("aria-checked", "true"); + await expect(filterSheet).toBeVisible(); + await expect(filterSheet.getByText("2 showing", { exact: true })).toBeVisible(); + await filterSheet.getByRole("button", { name: "Done" }).click(); + await expect(filterSheet).toHaveCount(0); + await expect(trigger).toContainText("1"); + + await trigger.click(); + await filterSheet.getByRole("button", { name: "Clear filters" }).click(); + await expect(filterSheet).toBeVisible(); + await expect(filterSheet.getByRole("radio", { name: /All tools/ })).toHaveAttribute("aria-checked", "true"); + await expect(filterSheet.getByText("2 showing", { exact: true })).toBeVisible(); + await expectNoHorizontalOverflow(page); + }); + + test("keeps its shared controls and tool sheet legible in forced colors with reduced motion", async ({ page }) => { + await page.emulateMedia({ forcedColors: "active", reducedMotion: "reduce" }); + const mockup = await gotoMockup(page, 390, 844); + + await mockup.getByRole("button", { name: "View details for Differentials" }).click(); + const sheet = page.locator('[data-testid="tools-search-detail-sheet"]:visible'); + await expect(sheet.getByText("Source-backed")).toBeVisible(); + await expect(sheet.getByRole("link", { name: "Compare Differentials" })).toBeVisible(); + await expectNoHorizontalOverflow(page); + }); + + for (const width of [320, 390, 639, 768, 1440, 1920]) { + test(`has no horizontal overflow at ${width}px`, async ({ page }) => { + await gotoMockup(page, width, 900); + await expectNoHorizontalOverflow(page); + }); + } +});