From ae48e161052c907e6f865abaa71574993aba28c9 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Mon, 27 Jul 2026 12:19:10 +0800 Subject: [PATCH 1/8] feat(ui): add phone in-page navigation mockups --- docs/site-map.md | 1 + src/app/mockups/mockups-layout-client.tsx | 3 +- .../mockups/phone-inpage-navigation/page.tsx | 373 ++++++++++++++++++ 3 files changed, 376 insertions(+), 1 deletion(-) create mode 100644 src/app/mockups/phone-inpage-navigation/page.tsx diff --git a/docs/site-map.md b/docs/site-map.md index f71206fa0a..ffa54de300 100644 --- a/docs/site-map.md +++ b/docs/site-map.md @@ -1004,6 +1004,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check` - `/mockups/favourites-set-navigator` - Route discovered from app directory Source: `src/app/mockups/favourites-set-navigator/page.tsx`. - `/mockups/medication-prescribing` - Route discovered from app directory Source: `src/app/mockups/medication-prescribing/page.tsx`. - `/mockups/mode-dropdown` - Route discovered from app directory Source: `src/app/mockups/mode-dropdown/page.tsx`. +- `/mockups/phone-inpage-navigation` - Route discovered from app directory Source: `src/app/mockups/phone-inpage-navigation/page.tsx`. - `/mockups/recent-searches-bottom` - Route discovered from app directory Source: `src/app/mockups/recent-searches-bottom/page.tsx`. - `/mockups/search-heading` - Route discovered from app directory Source: `src/app/mockups/search-heading/page.tsx`. - `/mockups/settings-search-clinical` - Route discovered from app directory Source: `src/app/mockups/settings-search-clinical/page.tsx`. diff --git a/src/app/mockups/mockups-layout-client.tsx b/src/app/mockups/mockups-layout-client.tsx index 784bd0ad5a..123df613f6 100644 --- a/src/app/mockups/mockups-layout-client.tsx +++ b/src/app/mockups/mockups-layout-client.tsx @@ -14,6 +14,7 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) { const isStandaloneDocumentFlow = pathname === "/mockups/document-search"; const isUniversalSearchRedesignMockup = pathname === "/mockups/universal-search-redesign"; const isSearchHeadingMockup = pathname === "/mockups/search-heading"; + const isPhoneInPageNavigationMockup = pathname === "/mockups/phone-inpage-navigation"; // The calculators search page owns its own search input (top on desktop, docked // at the bottom on phones), so the shared universal composer is suppressed here // to avoid a second, floating search bar. @@ -37,7 +38,7 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) { !isUniversalSearchRedesignMockup && !isCalculatorsSearchPageMockup } - chromeVisible={!isSourceOverlayRedesignMockup && !isSearchHeadingMockup} + chromeVisible={!isSourceOverlayRedesignMockup && !isSearchHeadingMockup && !isPhoneInPageNavigationMockup} > {children} diff --git a/src/app/mockups/phone-inpage-navigation/page.tsx b/src/app/mockups/phone-inpage-navigation/page.tsx new file mode 100644 index 0000000000..bce9ad6052 --- /dev/null +++ b/src/app/mockups/phone-inpage-navigation/page.tsx @@ -0,0 +1,373 @@ +"use client"; + +import { + Activity, + Bookmark, + Check, + ChevronDown, + ChevronRight, + Clock3, + Compass, + FileText, + HeartPulse, + Home, + Menu, + MoreHorizontal, + Search, + Sparkles, +} from "lucide-react"; +import { useState } from "react"; + +const sections = [ + { label: "Overview", icon: Home }, + { label: "Why matched", icon: Sparkles }, + { label: "Safety", icon: HeartPulse }, + { label: "Best fit", icon: Compass }, + { label: "Protocol", icon: Activity }, + { label: "Patient sheet", icon: FileText }, +] as const; + +type SectionLabel = (typeof sections)[number]["label"]; + +function PhoneHeader() { + return ( + <> +
+ 11:41 + + ▮▮▮ + ◒ + 77 + +
+
+ + + +
+ + ); +} + +function ClinicalContent({ active }: { active: SectionLabel }) { + return ( +
+
+
+

CBT · clinical guide

+

{active}

+
+ + 8 min + +
+
+
+

+ Why matched +

+

+ Best for adults receiving continuing support after an episode, with a clear focus on triggers and practical + problem-solving. +

+
+
+

+ Safety first +

+

+ Assess immediate risk, capacity, safeguarding, psychosis, mania and current supports before continuing. +

+
+
+

+ Best fit +

+

+ Self-harm urges, emotional dysregulation, hopelessness and identifiable high-risk moments. +

+
+
+ +
+ ); +} + +function PhoneFrame({ children, title, kicker }: { children: React.ReactNode; title: string; kicker: string }) { + return ( +
+
+

{kicker}

+

{title}

+
+
+ + {children} +
+
+ ); +} + +function ScrollRail() { + const [active, setActive] = useState("Why matched"); + return ( + <> + + + + ); +} + +function DropdownNavigator() { + const [active, setActive] = useState("Safety"); + const [open, setOpen] = useState(true); + const ActiveIcon = sections.find((item) => item.label === active)?.icon ?? Home; + return ( + <> +
+ + {open ? ( +
+

+ On this page +

+
+ {sections.map(({ label, icon: Icon }) => ( + + ))} +
+
+ ) : null} +
+ + + ); +} + +function PriorityDock() { + const [active, setActive] = useState("Overview"); + const [more, setMore] = useState(false); + const primary = sections.slice(0, 4); + return ( + <> + + + + ); +} + +function ProgressNavigator() { + const [index, setIndex] = useState(1); + const active = sections[index]; + const ActiveIcon = active.icon; + return ( + <> + + + + ); +} + +export default function PhoneInPageNavigationMockup() { + return ( +
+
+

+ Mobile navigation study · 04 directions +

+

+ In-page navigation, refined for one thumb. +

+

+ Four anchored treatments shown in realistic context. Each sits immediately below the Therapy header, preserves + content width and uses a minimum 44px interaction target. +

+
+
+ + + + + + + + + + + + +
+
+ Clinical KB · design exploration + + Phone-first, 390px canvas + +
+
+ ); +} From 130399c243344d449c8c1e2598faf530bb748159 Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Mon, 27 Jul 2026 09:01:48 +0000 Subject: [PATCH 2/8] fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit --- .../mockups/phone-inpage-navigation/page.tsx | 159 ++++++++++++++++-- 1 file changed, 146 insertions(+), 13 deletions(-) diff --git a/src/app/mockups/phone-inpage-navigation/page.tsx b/src/app/mockups/phone-inpage-navigation/page.tsx index bce9ad6052..062be47bf1 100644 --- a/src/app/mockups/phone-inpage-navigation/page.tsx +++ b/src/app/mockups/phone-inpage-navigation/page.tsx @@ -74,6 +74,134 @@ function PhoneHeader() { } function ClinicalContent({ active }: { active: SectionLabel }) { + const contentMap: Record< + SectionLabel, + Array<{ icon: typeof Sparkles; label: string; copy: string; variant: "default" | "warning" | "muted" }> + > = { + Overview: [ + { + icon: Sparkles, + label: "Why matched", + copy: "Best for adults receiving continuing support after an episode, with a clear focus on triggers and practical problem-solving.", + variant: "default", + }, + { + icon: HeartPulse, + label: "Safety first", + copy: "Assess immediate risk, capacity, safeguarding, psychosis, mania and current supports before continuing.", + variant: "warning", + }, + { + icon: Clock3, + label: "Best fit", + copy: "Self-harm urges, emotional dysregulation, hopelessness and identifiable high-risk moments.", + variant: "muted", + }, + ], + "Why matched": [ + { + icon: Compass, + label: "Evidence base", + copy: "CBT shows strong outcomes in relapse prevention for adults with recurrent depression, particularly when combined with medication.", + variant: "default", + }, + { + icon: Activity, + label: "Key features", + copy: "Structured sessions targeting negative thought patterns, behavioral activation, and practical skills for managing early warning signs.", + variant: "warning", + }, + { + icon: Check, + label: "Match criteria", + copy: "Patient history indicates recurrent episodes, willingness to engage in homework, and capacity for collaborative goal-setting.", + variant: "muted", + }, + ], + Safety: [ + { + icon: HeartPulse, + label: "Risk assessment", + copy: "Check for active suicidal ideation, self-harm urges, acute psychosis, and safeguarding concerns before proceeding.", + variant: "default", + }, + { + icon: Activity, + label: "Capacity check", + copy: "Confirm patient can consent to treatment, understands the approach, and has support systems in place.", + variant: "warning", + }, + { + icon: Bookmark, + label: "Crisis plan", + copy: "Ensure patient has access to emergency contacts, crisis services, and knows when to seek immediate help.", + variant: "muted", + }, + ], + "Best fit": [ + { + icon: Compass, + label: "Core targets", + copy: "Rumination, avoidance behaviors, disrupted routines, social withdrawal, and negative thought cycles.", + variant: "default", + }, + { + icon: Sparkles, + label: "Strengths needed", + copy: "Ability to identify thoughts, willingness to try new behaviors, and capacity to engage between sessions.", + variant: "warning", + }, + { + icon: Clock3, + label: "Typical duration", + copy: "12-16 sessions over 3-4 months, with possible booster sessions for relapse prevention.", + variant: "muted", + }, + ], + Protocol: [ + { + icon: Activity, + label: "Session structure", + copy: "Weekly 50-minute sessions: agenda setting, homework review, new skill teaching, and between-session task planning.", + variant: "default", + }, + { + icon: FileText, + label: "Core components", + copy: "Psychoeducation, thought records, behavioral experiments, activity scheduling, and relapse prevention planning.", + variant: "warning", + }, + { + icon: Check, + label: "Progress tracking", + copy: "Regular monitoring with validated measures (PHQ-9, GAD-7) and collaborative review of therapy goals.", + variant: "muted", + }, + ], + "Patient sheet": [ + { + icon: FileText, + label: "What to expect", + copy: "Active collaboration, homework between sessions, focus on current problems, and learning practical skills you can use long-term.", + variant: "default", + }, + { + icon: Home, + label: "Your role", + copy: "Bring specific examples, try new strategies between sessions, give feedback on what works, and practice skills regularly.", + variant: "warning", + }, + { + icon: Bookmark, + label: "Resources", + copy: "Session handouts, thought record templates, activity logs, and a personalized relapse prevention plan.", + variant: "muted", + }, + ], + }; + + const blocks = contentMap[active]; + return (
@@ -88,28 +216,33 @@ function ClinicalContent({ active }: { active: SectionLabel }) {

- Why matched -

-

- Best for adults receiving continuing support after an episode, with a clear focus on triggers and practical - problem-solving. + {(() => { + const Icon = blocks[0].icon; + return ; + })()}{" "} + {blocks[0].label}

+

{blocks[0].copy}

- Safety first -

-

- Assess immediate risk, capacity, safeguarding, psychosis, mania and current supports before continuing. + {(() => { + const Icon = blocks[1].icon; + return ; + })()}{" "} + {blocks[1].label}

+

{blocks[1].copy}

- Best fit -

-

- Self-harm urges, emotional dysregulation, hopelessness and identifiable high-risk moments. + {(() => { + const Icon = blocks[2].icon; + return ; + })()}{" "} + {blocks[2].label}

+

{blocks[2].copy}

{open ? (
-

- On this page -

+

On this page

{sections.map(({ label, icon: Icon }) => ( {more ? (
- {sections.slice(4).map(({ label, icon: Icon }) => ( + {overflow.map(({ label, icon: Icon }) => (