From 9699909d446cf942722e0ce58d09a14bcc12ac80 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 17:45:56 +0000 Subject: [PATCH 1/2] Redesign related documents panel for a compact, refined mobile view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "Related documents" panel (shown under a high-trust answer) used a plain title + dot-separated metadata line + a text "Scope" button and a 6-tag cloud, which stacked into tall, dense cards inside the mobile bottom sheet. Rework each card to match the app's document-result design language and tighten it for phones: - Add a compact file-kind tile as a visual anchor and a small uppercase match-reason eyebrow above the title. - Replace the "pages · images · tables" text line with icon-led DocumentBadge evidence pills (e.g. "p.12 +2", "2 images", "1 table"), hiding zero counts. - Turn the "Scope" control into a 44px icon-only button on phones that expands to an icon+label control from sm: up, with an explicit aria-label so the touch target and screen-reader name are preserved. - Cap the tag cloud at 3 compact chips and tighten padding/grid gaps so cards read denser on mobile while keeping the two-column layout on md+. Behaviour is unchanged: the panel still renders only for a non-empty related-document set, links target the same page/chunk, and Scope/tag callbacks are untouched. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01Wp1pXzFzxxX13rHvP93KV8 --- .../clinical-dashboard/document-results.tsx | 127 +++++++++++++----- 1 file changed, 95 insertions(+), 32 deletions(-) diff --git a/src/components/clinical-dashboard/document-results.tsx b/src/components/clinical-dashboard/document-results.tsx index 4c31829567..4e103f1e88 100644 --- a/src/components/clinical-dashboard/document-results.tsx +++ b/src/components/clinical-dashboard/document-results.tsx @@ -1,18 +1,105 @@ "use client"; import Link from "next/link"; -import { BookOpen } from "lucide-react"; +import { BookOpen, FileImage, Filter, ListChecks } from "lucide-react"; import { DocumentOrganizationBadges, documentDisplayTitle } from "@/components/DocumentOrganizationBadges"; import { DocumentTagCloud } from "@/components/DocumentTagCloud"; import { SafeBoldText } from "@/components/SafeBoldText"; import { UtilityDrawer } from "@/components/clinical-dashboard/dashboard-shell"; +import { DocumentBadge, DocumentFileTile, documentFileKind } from "@/components/clinical-dashboard/document-ui"; import { cn, floatingControl, sourceCard, textMuted } from "@/components/ui-primitives"; import { type SmartDocumentTag } from "@/lib/document-tags"; import type { RelatedDocument } from "@/lib/types"; export { StagedAnswerResultSurface } from "@/components/clinical-dashboard/answer-result-surface"; +// Compact page label so the metadata pill stays a single glanceable token on +// phones: "p.12" for one page, "p.12 +2" when several pages matched. +function relatedPageLabel(pages: number[]) { + const valid = pages.filter((page) => Number.isFinite(page)); + if (valid.length === 0) return "Page n/a"; + if (valid.length === 1) return `p.${valid[0]}`; + return `p.${valid[0]} +${valid.length - 1}`; +} + +function relatedDocumentHref(document: RelatedDocument) { + const params = new URLSearchParams(); + params.set("page", String(document.best_pages[0] ?? 1)); + const chunkId = document.best_chunk_ids[0]; + if (chunkId) params.set("chunk", chunkId); + return `/documents/${document.document_id}?${params.toString()}`; +} + +function RelatedDocumentCard({ + document, + onScopeDocument, + onTagSearch, +}: { + document: RelatedDocument; + onScopeDocument: (documentId: string) => void; + onTagSearch: (tag: SmartDocumentTag) => void; +}) { + const title = documentDisplayTitle(document); + const imageCount = document.image_count ?? 0; + const tableCount = document.table_count ?? 0; + const metaPill = "min-h-6 rounded-md px-2"; + + return ( +
+
+ +
+

+ {document.match_reason} +

+ + {title} + +
+ +
+ +
+ + {relatedPageLabel(document.best_pages)} + + {imageCount > 0 ? ( + + {imageCount} image{imageCount === 1 ? "" : "s"} + + ) : null} + {tableCount > 0 ? ( + + {tableCount} table{tableCount === 1 ? "" : "s"} + + ) : null} +
+ + + + {document.summary ? ( +

+ +

+ ) : null} + + +
+ ); +} + export function RelatedDocumentsPanel({ documents, onScopeDocument, @@ -31,38 +118,14 @@ export function RelatedDocumentsPanel({ summary={`${documents.length} broader document match${documents.length === 1 ? "" : "es"}`} mobileSummary={`${documents.length} related`} > -
+
{documents.map((document) => ( -
-
-
- - {documentDisplayTitle(document)} - - -

- {document.match_reason} · pages {document.best_pages.join(", ") || "n/a"} · {document.image_count}{" "} - images{document.table_count ? ` · ${document.table_count} tables` : ""} -

-
- -
- {document.summary && ( -

- -

- )} - -
+ ))}
From 3f5b198a87f2cf7a15ece92f8d9560ee8f07df49 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 18:02:22 +0000 Subject: [PATCH 2/2] Drop duplicated site/type chips from related-document tag cloud Each related-document card renders governance badges (site, document type, needs-review) via DocumentOrganizationBadges and a separate tag cloud built from the same labels, so the site and document-type chips appeared twice (e.g. "Protocol", "Emergency Dept"). Filter site and document_type labels out of the tag-cloud input while still passing the full label set to DocumentOrganizationBadges, so the governance badges are unchanged and the tag cloud only adds new context (medication, risk, workflow, etc.). Cards read cleaner and shorter on mobile without losing any governance signal. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01Wp1pXzFzxxX13rHvP93KV8 --- src/components/clinical-dashboard/document-results.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/clinical-dashboard/document-results.tsx b/src/components/clinical-dashboard/document-results.tsx index 4e103f1e88..1b44455d3e 100644 --- a/src/components/clinical-dashboard/document-results.tsx +++ b/src/components/clinical-dashboard/document-results.tsx @@ -44,6 +44,11 @@ function RelatedDocumentCard({ const imageCount = document.image_count ?? 0; const tableCount = document.table_count ?? 0; const metaPill = "min-h-6 rounded-md px-2"; + // Site and document-type are already surfaced by the governance badges above, + // so drop them from the tag cloud to avoid showing the same chip twice. + const tagCloudLabels = document.labels.filter( + (label) => label.label_type !== "site" && label.label_type !== "document_type", + ); return (
@@ -95,7 +100,7 @@ function RelatedDocumentCard({

) : null} - +
); }