-
-
-
-
-
-
Medication search
-
- {resultCount} prescribing matches
-
-
-
-
-
-
+
diff --git a/src/components/clinical-dashboard/search-results-header-band.tsx b/src/components/clinical-dashboard/search-results-header-band.tsx
index 97e9bbe20..83fe52082 100644
--- a/src/components/clinical-dashboard/search-results-header-band.tsx
+++ b/src/components/clinical-dashboard/search-results-header-band.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Bookmark, ChevronsUpDown, LayoutList, Search, Table2, X } from "lucide-react";
+import { Bookmark, CheckCircle2, ChevronsUpDown, LayoutList, LoaderCircle, Search, Table2, X } from "lucide-react";
import { searchCommandSurfaceConfig } from "@/lib/search-command-surface";
import { cn } from "@/components/ui-primitives";
@@ -37,95 +37,151 @@ export function SearchResultsHeaderBand({
const command = useSearchCommand();
const config = searchCommandSurfaceConfig(modeId);
const activeScopes = command?.commandScopes ?? [];
+ const visibleScopes = activeScopes.flatMap((scopeId) => {
+ const scope = config?.scopes.find((entry) => entry.id === scopeId);
+ return scope ? [scope] : [];
+ });
const displayQuery = query.trim() || "All";
+ const statusLabel = loading ? "Searching…" : `${matchCount} ${matchCount === 1 ? "match" : "matches"}`;
+ const hasUtilities = visibleScopes.length > 0 || Boolean(onSortChange || onViewChange || onSaveSearch);
return (
-
-
-
- {displayQuery}
-
-
- {loading ? "Searching…" : `${matchCount} ${matchCount === 1 ? "match" : "matches"}`}
-
- {activeScopes.map((scopeId) => {
- const scope = config?.scopes.find((entry) => entry.id === scopeId);
- if (!scope) return null;
- return (
-
-
{supportsPathwayClaims ? (
= [
+ {
+ id: "signal",
+ number: "01",
+ name: "Signal band",
+ summary: "The clearest all-round hierarchy: query first, live status second, utilities kept quiet.",
+ strengths: ["Fast to scan", "Strong loading state", "Adapts cleanly to phones"],
+ },
+ {
+ id: "ribbon",
+ number: "02",
+ name: "Query ribbon",
+ summary: "The selected direction, refined into a clear query, live status, and honest scope-and-sort toolbar.",
+ strengths: ["Clear hierarchy", "State-aware", "Long-query safe"],
+ recommended: true,
+ },
+ {
+ id: "editorial",
+ number: "03",
+ name: "Results title",
+ summary: "A more confident page heading that makes the search term the visual anchor.",
+ strengths: ["Strongest page identity", "Room for future metadata", "Calm and premium"],
+ },
+];
+
+function SortControl({ compact = false }: { compact?: boolean }) {
+ return (
+
+ );
+}
+
+function Status({
+ state,
+ quiet = false,
+ compactAtNarrow = false,
+}: {
+ state: SearchHeadingState;
+ quiet?: boolean;
+ compactAtNarrow?: boolean;
+}) {
+ const searching = state === "searching";
+
+ return (
+
+ {searching ? (
+
+ ) : (
+
+ )}
+ {searching ? "Searching…" : "12 matches"}
+
+ );
+}
+
+function SignalBand({ state, compact }: { state: SearchHeadingState; compact?: boolean }) {
+ if (compact) {
+ return (
+
+
+
+
+
+
+
+
+
+ Search results
+
+
+ chest pain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Search results
+
+
+ chest pain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Query
+
+
+ chest pain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {searching ? "Searching for" : "Results for"}
+
+
+ chest pain
+
+
+
+
+
+
+
+
+
+
+
+
+ Search results
+
+
+
+
+ “chest pain”
+
+
+
+
+ All sources
+
+
+
+
+
+
+
+ Search results
+
+
+
+
+
+ “chest pain”
+
+
+
+
+
+ All sources
+
+
+
+
+
+
+ {label}
+
+ {phone ? "390 px" : "1440 px"}
+
+
+
+ {children}
+
+
+ {!phone ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ Universal search heading
+
+
+ Three polished directions for every search page
+
+
+ Each concept keeps the query, live search status, and result sorting together while preserving a clear
+ reading order on desktop and phone.
+
+
+
+ {(["searching", "results"] as const).map((value) => (
+
+ ))}
+
+
+
+ {concepts.map((concept) => (
+
+
+
+
+ {concept.number}
+
+
+
+
+ {concept.name}
+
+ {concept.recommended ? (
+
+ Recommended
+
+ ) : null}
+
+
{concept.summary}
+
+
+
+ {concept.strengths.map((strength) => (
+
+ {strength}
+
+ ))}
+
+
+ ))}
+