diff --git a/docs/site-map.md b/docs/site-map.md index 6da4767960..c0af2f076e 100644 --- a/docs/site-map.md +++ b/docs/site-map.md @@ -1034,6 +1034,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` - Route discovered from app directory Source: `src/app/mockups/tools-search/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/src/app/mockups/tools-search/page.tsx b/src/app/mockups/tools-search/page.tsx new file mode 100644 index 0000000000..b0430b76ab --- /dev/null +++ b/src/app/mockups/tools-search/page.tsx @@ -0,0 +1,13 @@ +import type { Metadata } from "next"; + +import { ToolsSearchRedesignMockupPage } from "@/components/tools-search-mockups/tools-search-redesign-mockup-page"; + +export const metadata: Metadata = { + title: "Tools Search Mockups - Clinical KB", + description: + "Design scratch for /tools?q= results: Compact Results Instrument (A), Dense Launcher List (B), and Split Command Workspace (C).", +}; + +export default function ToolsSearchMockupRoute() { + return ; +} diff --git a/src/components/tools-search-mockups/tools-search-redesign-mockup-page.tsx b/src/components/tools-search-mockups/tools-search-redesign-mockup-page.tsx new file mode 100644 index 0000000000..d404211db5 --- /dev/null +++ b/src/components/tools-search-mockups/tools-search-redesign-mockup-page.tsx @@ -0,0 +1,236 @@ +"use client"; + +import Image from "next/image"; +import { useState } from "react"; + +import { cn } from "@/components/ui-primitives"; + +/** + * Design scratch for `/tools?q=` results (#162). + * + * Shows the three mode-page redesign comps (A Compact / B Dense list / C Split) + * with desktop + phone PNGs. Product pick is A. Mockup routes 404 in production + * and sit outside wiring/reachability gates — controls below stay wired so the + * study can be judged. + */ + +type DirectionId = "a" | "b" | "c"; +type ViewportId = "desktop" | "phone" | "combined"; + +const focusRing = + "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"; + +const DIRECTIONS: Array<{ + id: DirectionId; + letter: string; + title: string; + blurb: string; + recommended?: boolean; + desktopSrc: string; + phoneSrc: string; +}> = [ + { + id: "a", + letter: "A", + title: "Compact Results Instrument", + blurb: "Query-as-H1, one composer, dense rows, cross-mode collapsed.", + recommended: true, + desktopSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-a-compact-results.png", + phoneSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-a-compact-results-phone.png", + }, + { + id: "b", + letter: "B", + title: "Dense Launcher List", + blurb: "Relevance-ranked list with a sticky tool brief panel.", + desktopSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-b-dense-launcher-list.png", + phoneSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-b-dense-launcher-list-phone.png", + }, + { + id: "c", + letter: "C", + title: "Split Command Workspace", + blurb: "Master/detail workspace with selection spine and full brief.", + desktopSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-c-split-command.png", + phoneSrc: "/mockups/mode-page-redesign-2026-07/tools-search/tools-search-redesign-c-split-command-phone.png", + }, +]; + +const COMBINED_A = "/mockups/mode-page-redesign-2026-07/perfected-combined/tools-a-compact-results-desktop-phone.png"; + +export function ToolsSearchRedesignMockupPage() { + const [direction, setDirection] = useState("a"); + const [viewport, setViewport] = useState("desktop"); + const active = DIRECTIONS.find((item) => item.id === direction) ?? DIRECTIONS[0]; + const imageSrc = viewport === "combined" ? COMBINED_A : viewport === "phone" ? active.phoneSrc : active.desktopSrc; + const imageAlt = + viewport === "combined" + ? "Tools search direction A — desktop and phone combined" + : `Tools search redesign ${active.letter} — ${viewport}`; + + return ( +
+
+

+ Design scratch · #162 · /tools?q= +

+
+
+

+ Tools search page mockups +

+

+ Three redesign directions for the committed results state. Product pick is{" "} + A — Compact Results Instrument. Tools home + is out of scope. +

+
+ {active.recommended ? ( + + Recommended · A + + ) : null} +
+
+ +
+
+ {DIRECTIONS.map((item) => { + const selected = item.id === direction; + return ( + + ); + })} +
+ +
+ {( + [ + ["desktop", "Desktop"], + ["phone", "Phone"], + ...(direction === "a" ? ([["combined", "A · Desktop + phone"]] as const) : []), + ] as Array<[ViewportId, string]> + ).map(([id, label]) => { + const selected = viewport === id; + return ( + + ); + })} +
+ +

{active.blurb}

+
+ +
+
+

+ {viewport === "combined" ? "A — Compact Results Instrument" : `${active.letter} — ${active.title}`} +

+

+ {viewport === "phone" ? "Phone 9:16" : viewport === "combined" ? "Desktop + phone" : "Desktop 16:9"} +

+
+
+
+ {imageAlt} +
+
+
+ +
+ {DIRECTIONS.map((item) => ( + + ))} +
+ +

+ Static comps from `public/mockups/mode-page-redesign-2026-07/tools-search/`. Implement A on production + `/tools?q=` only — do not redesign Tools home in the same change. +

+
+ ); +}