From b18746ecee21101864e8bcd4dfc59c3baf25e521 Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 23:14:58 +0000
Subject: [PATCH] US-008: Restructure DashboardLayout with SubNav, new tile
 order, and DetailPanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap DashboardLayout with DetailPanelProvider in App.tsx
- Import and render DetailPanel component alongside CommandPalette
- Reorder tiles: PatientSummary (full) → LatestResults (half) + Projects (half) → CoreSkills (full) → LastConsultation (full) → CareerActivity (full) → Education (full)
- Update ProjectsTile from full-width to half-width (remove full prop)
- Update CoreSkillsTile from half-width to full-width (add full prop)
- SubNav already renders between TopBar and content
- Content area marginTop already accounts for both TopBar and SubNav heights
- All tiles already have data-tile-id attributes for SubNav scrolling

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx                             |  7 ++++++-
 src/components/DashboardLayout.tsx      | 12 ++++++++----
 src/components/tiles/CoreSkillsTile.tsx |  2 +-
 src/components/tiles/ProjectsTile.tsx   |  2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 10da190..c44a1e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { ECGAnimation } from './components/ECGAnimation'
 import { LoginScreen } from './components/LoginScreen'
 import { DashboardLayout } from './components/DashboardLayout'
 import { AccessibilityProvider } from './contexts/AccessibilityContext'
+import { DetailPanelProvider } from './contexts/DetailPanelContext'
 
 function SkipButton({ onSkip }: { onSkip: () => void }) {
   const [visible, setVisible] = useState(false)
@@ -76,7 +77,11 @@ function App() {
           <LoginScreen onComplete={() => setPhase('pmr')} />
         )}
 
-        {phase === 'pmr' && <DashboardLayout />}
+        {phase === 'pmr' && (
+          <DetailPanelProvider>
+            <DashboardLayout />
+          </DetailPanelProvider>
+        )}
 
         {(phase === 'boot' || phase === 'ecg') && (
           <SkipButton onSkip={skipToLogin} />
diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index e185c3e..e12806b 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -4,6 +4,7 @@ import { TopBar } from './TopBar'
 import { SubNav } from './SubNav'
 import Sidebar from './Sidebar'
 import { CommandPalette } from './CommandPalette'
+import { DetailPanel } from './DetailPanel'
 import { PatientSummaryTile } from './tiles/PatientSummaryTile'
 import { LatestResultsTile } from './tiles/LatestResultsTile'
 import { CoreSkillsTile } from './tiles/CoreSkillsTile'
@@ -163,7 +164,10 @@ export function DashboardLayout() {
 
             {/* LatestResultsTile — half width (left) */}
             <LatestResultsTile />
-            {/* CoreSkillsTile — half width (right) */}
+            {/* ProjectsTile — half width (right) */}
+            <ProjectsTile />
+
+            {/* CoreSkillsTile — full width */}
             <CoreSkillsTile />
 
             {/* LastConsultationTile — full width */}
@@ -174,9 +178,6 @@ export function DashboardLayout() {
 
             {/* EducationTile — full width */}
             <EducationTile />
-
-            {/* ProjectsTile — full width */}
-            <ProjectsTile />
           </div>
         </motion.main>
       </div>
@@ -187,6 +188,9 @@ export function DashboardLayout() {
         onClose={handlePaletteClose}
         onAction={handlePaletteAction}
       />
+
+      {/* Detail panel */}
+      <DetailPanel />
     </div>
   )
 }
diff --git a/src/components/tiles/CoreSkillsTile.tsx b/src/components/tiles/CoreSkillsTile.tsx
index ff03e42..82caad9 100644
--- a/src/components/tiles/CoreSkillsTile.tsx
+++ b/src/components/tiles/CoreSkillsTile.tsx
@@ -233,7 +233,7 @@ export function CoreSkillsTile() {
   )
 
   return (
-    <Card tileId="core-skills">
+    <Card full tileId="core-skills">
       <CardHeader dotColor="amber" title="REPEAT MEDICATIONS" />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
         {skills.map((skill) => (
diff --git a/src/components/tiles/ProjectsTile.tsx b/src/components/tiles/ProjectsTile.tsx
index 2439bfb..01c860b 100644
--- a/src/components/tiles/ProjectsTile.tsx
+++ b/src/components/tiles/ProjectsTile.tsx
@@ -258,7 +258,7 @@ export function ProjectsTile() {
   )
 
   return (
-    <Card full tileId="projects">
+    <Card tileId="projects">
       <CardHeader dotColor="amber" title="ACTIVE PROJECTS" />
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>