From 49c9e0cecf48ad404af2a093e53ca3da6a471d6a Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Tue, 17 Feb 2026 02:09:26 +0000
Subject: [PATCH] refactor: centralise detail panel inline styles into
 detail-styles.ts

Extract 5 shared style constants (detailRootStyle, sectionHeadingStyle,
bulletListStyle, bodyTextStyle, paragraphStyle) used across 5 of 6 detail
components. Replaces ~30 inline style object definitions with imports.
Net reduction: 274 lines across detail panel components.
---
 src/components/detail/ConsultationDetail.tsx | 109 ++-----------------
 src/components/detail/EducationDetail.tsx    |  70 ++----------
 src/components/detail/KPIDetail.tsx          |  90 ++-------------
 src/components/detail/ProjectDetail.tsx      |  79 ++------------
 src/components/detail/SkillDetail.tsx        |  49 +--------
 src/components/detail/detail-styles.ts       |  38 +++++++
 6 files changed, 83 insertions(+), 352 deletions(-)
 create mode 100644 src/components/detail/detail-styles.ts

diff --git a/src/components/detail/ConsultationDetail.tsx b/src/components/detail/ConsultationDetail.tsx
index 013e07c..cc1e5b1 100644
--- a/src/components/detail/ConsultationDetail.tsx
+++ b/src/components/detail/ConsultationDetail.tsx
@@ -1,4 +1,5 @@
 import type { Consultation } from '@/types/pmr'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'
 
 interface ConsultationDetailProps {
   consultation: Consultation
@@ -6,14 +7,7 @@ interface ConsultationDetailProps {
 
 export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
   return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
       {/* Role header */}
       <div>
         <div
@@ -69,26 +63,8 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
 
       {/* History (presenting complaint) */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          History
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>History</h3>
+        <p style={paragraphStyle}>
           {consultation.history}
         </p>
       </div>
@@ -96,36 +72,10 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
       {/* Examination (achievements) */}
       {consultation.examination && consultation.examination.length > 0 && (
         <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Key Achievements
-          </h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Key Achievements</h3>
+          <ul style={bulletListStyle}>
             {consultation.examination.map((item, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                 {item}
               </li>
             ))}
@@ -136,36 +86,10 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
       {/* Plan (outcomes) */}
       {consultation.plan && consultation.plan.length > 0 && (
         <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Outcomes & Impact
-          </h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Outcomes & Impact</h3>
+          <ul style={bulletListStyle}>
             {consultation.plan.map((item, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                 {item}
               </li>
             ))}
@@ -176,18 +100,7 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
       {/* Coded entries (technical environment / tags) */}
       {consultation.codedEntries && consultation.codedEntries.length > 0 && (
         <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Coded Entries
-          </h3>
+          <h3 style={sectionHeadingStyle}>Coded Entries</h3>
           <div
             style={{
               display: 'flex',
diff --git a/src/components/detail/EducationDetail.tsx b/src/components/detail/EducationDetail.tsx
index 69a793b..7651ec1 100644
--- a/src/components/detail/EducationDetail.tsx
+++ b/src/components/detail/EducationDetail.tsx
@@ -1,20 +1,12 @@
 import { GraduationCap, Award, BookOpen, FlaskConical, type LucideIcon } from 'lucide-react'
 import type { Document } from '@/types/pmr'
 import { educationExtras } from '@/data/educationExtras'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'
 
 interface EducationDetailProps {
   document: Document
 }
 
-const sectionHeaderStyle: React.CSSProperties = {
-  fontSize: '12px',
-  fontWeight: 600,
-  color: 'var(--text-secondary)',
-  textTransform: 'uppercase',
-  letterSpacing: '0.05em',
-  marginBottom: '8px',
-}
-
 const typeIconMap: Record<string, LucideIcon> = {
   Certificate: GraduationCap,
   Registration: Award,
@@ -27,14 +19,7 @@ export function EducationDetail({ document }: EducationDetailProps) {
   const Icon = typeIconMap[document.type] || GraduationCap
 
   return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
       {/* Header */}
       <div>
         <div
@@ -117,15 +102,8 @@ export function EducationDetail({ document }: EducationDetailProps) {
       {/* Research project (MPharm) */}
       {extra?.researchDescription && (
         <div>
-          <h3 style={sectionHeaderStyle}>Research Project</h3>
-          <p
-            style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
-              color: 'var(--text-primary)',
-              margin: 0,
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Research Project</h3>
+          <p style={paragraphStyle}>
             {extra.researchDescription}
           </p>
         </div>
@@ -134,7 +112,7 @@ export function EducationDetail({ document }: EducationDetailProps) {
       {/* OSCE score (MPharm) */}
       {extra?.osceScore && (
         <div>
-          <h3 style={sectionHeaderStyle}>OSCE Performance</h3>
+          <h3 style={sectionHeadingStyle}>OSCE Performance</h3>
           <div
             style={{
               display: 'inline-flex',
@@ -170,25 +148,10 @@ export function EducationDetail({ document }: EducationDetailProps) {
       {/* Extracurricular activities (MPharm) */}
       {extra?.extracurriculars && extra.extracurriculars.length > 0 && (
         <div>
-          <h3 style={sectionHeaderStyle}>Extracurricular Activities</h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Extracurricular Activities</h3>
+          <ul style={bulletListStyle}>
             {extra.extracurriculars.map((activity, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                 {activity}
               </li>
             ))}
@@ -199,15 +162,8 @@ export function EducationDetail({ document }: EducationDetailProps) {
       {/* Programme detail (Mary Seacole) */}
       {extra?.programmeDetail && (
         <div>
-          <h3 style={sectionHeaderStyle}>Programme Overview</h3>
-          <p
-            style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
-              color: 'var(--text-primary)',
-              margin: 0,
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Programme Overview</h3>
+          <p style={paragraphStyle}>
             {extra.programmeDetail}
           </p>
         </div>
@@ -216,13 +172,11 @@ export function EducationDetail({ document }: EducationDetailProps) {
       {/* Notes */}
       {document.notes && (
         <div>
-          <h3 style={sectionHeaderStyle}>Notes</h3>
+          <h3 style={sectionHeadingStyle}>Notes</h3>
           <p
             style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
+              ...paragraphStyle,
               color: 'var(--text-secondary)',
-              margin: 0,
               fontStyle: 'italic',
             }}
           >
diff --git a/src/components/detail/KPIDetail.tsx b/src/components/detail/KPIDetail.tsx
index cdfb489..7ee50ad 100644
--- a/src/components/detail/KPIDetail.tsx
+++ b/src/components/detail/KPIDetail.tsx
@@ -1,5 +1,6 @@
 import type { KPI } from '@/types/pmr'
 import { KPI_COLORS } from '@/lib/theme-colors'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'
 
 interface KPIDetailProps {
   kpi: KPI
@@ -35,14 +36,7 @@ export function KPIDetail({ kpi }: KPIDetailProps) {
   const { context, role, outcomes, period } = kpi.story
 
   return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
       {/* Headline number */}
       <div>
         <div
@@ -98,88 +92,22 @@ export function KPIDetail({ kpi }: KPIDetailProps) {
 
       {/* Context paragraph */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Context
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {context}
-        </p>
+        <h3 style={sectionHeadingStyle}>Context</h3>
+        <p style={paragraphStyle}>{context}</p>
       </div>
 
       {/* Your role paragraph */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Your Role
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {role}
-        </p>
+        <h3 style={sectionHeadingStyle}>Your Role</h3>
+        <p style={paragraphStyle}>{role}</p>
       </div>
 
       {/* Outcome bullets */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Key Outcomes
-        </h3>
-        <ul
-          style={{
-            margin: 0,
-            paddingLeft: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '8px',
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>Key Outcomes</h3>
+        <ul style={bulletListStyle}>
           {outcomes.map((outcome, index) => (
-            <li
-              key={index}
-              style={{
-                fontSize: '14px',
-                lineHeight: '1.6',
-                color: 'var(--text-primary)',
-              }}
-            >
+            <li key={index} style={bodyTextStyle}>
               {outcome}
             </li>
           ))}
diff --git a/src/components/detail/ProjectDetail.tsx b/src/components/detail/ProjectDetail.tsx
index 7178985..53b56b6 100644
--- a/src/components/detail/ProjectDetail.tsx
+++ b/src/components/detail/ProjectDetail.tsx
@@ -1,6 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import type { Investigation } from '@/types/pmr'
 import { PROJECT_STATUS_COLORS } from '@/lib/theme-colors'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'
 
 interface ProjectDetailProps {
   investigation: Investigation
@@ -17,14 +18,7 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
   const statusBg = statusBgMap[investigation.status]
 
   return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
       {/* Header: name + year + status */}
       <div>
         <div
@@ -72,44 +66,13 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
 
       {/* Methodology */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Methodology
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {investigation.methodology}
-        </p>
+        <h3 style={sectionHeadingStyle}>Methodology</h3>
+        <p style={paragraphStyle}>{investigation.methodology}</p>
       </div>
 
       {/* Tech stack tags */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Tech Stack
-        </h3>
+        <h3 style={sectionHeadingStyle}>Tech Stack</h3>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
           {investigation.techStack.map((tech) => (
             <span
@@ -133,36 +96,10 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
 
       {/* Results */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Results
-        </h3>
-        <ul
-          style={{
-            margin: 0,
-            paddingLeft: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '8px',
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>Results</h3>
+        <ul style={bulletListStyle}>
           {investigation.results.map((result, index) => (
-            <li
-              key={index}
-              style={{
-                fontSize: '14px',
-                lineHeight: '1.6',
-                color: 'var(--text-primary)',
-              }}
-            >
+            <li key={index} style={bodyTextStyle}>
               {result}
             </li>
           ))}
diff --git a/src/components/detail/SkillDetail.tsx b/src/components/detail/SkillDetail.tsx
index ceb82bc..ef8cd89 100644
--- a/src/components/detail/SkillDetail.tsx
+++ b/src/components/detail/SkillDetail.tsx
@@ -1,5 +1,6 @@
 import type { SkillMedication } from '@/types/pmr'
 import { roleSkillMappings, constellationNodes } from '@/data/constellation'
+import { detailRootStyle, sectionHeadingStyle } from './detail-styles'
 
 interface SkillDetailProps {
   skill: SkillMedication
@@ -32,14 +33,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
     .sort((a, b) => (a!.startYear ?? 0) - (b!.startYear ?? 0))
 
   return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
       {/* Skill header */}
       <div>
         <div
@@ -104,18 +98,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
 
       {/* Proficiency bar */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Proficiency
-        </h3>
+        <h3 style={sectionHeadingStyle}>Proficiency</h3>
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
           <div
             style={{
@@ -153,18 +136,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
 
       {/* Years of experience */}
       <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Experience
-        </h3>
+        <h3 style={sectionHeadingStyle}>Experience</h3>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
           <span
             style={{
@@ -200,18 +172,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
       {/* Used in roles */}
       {usedInRoles.length > 0 && (
         <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '10px',
-            }}
-          >
-            Used In
-          </h3>
+          <h3 style={{ ...sectionHeadingStyle, marginBottom: '10px' }}>Used In</h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
             {usedInRoles.map((node) => (
               <div
diff --git a/src/components/detail/detail-styles.ts b/src/components/detail/detail-styles.ts
new file mode 100644
index 0000000..5a94ae3
--- /dev/null
+++ b/src/components/detail/detail-styles.ts
@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react'
+
+export const detailRootStyle: CSSProperties = {
+  fontFamily: 'var(--font-ui)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+}
+
+export const sectionHeadingStyle: CSSProperties = {
+  fontSize: '12px',
+  fontWeight: 600,
+  color: 'var(--text-secondary)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  marginBottom: '8px',
+}
+
+export const bulletListStyle: CSSProperties = {
+  margin: 0,
+  paddingLeft: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+}
+
+export const bodyTextStyle: CSSProperties = {
+  fontSize: '14px',
+  lineHeight: '1.6',
+  color: 'var(--text-primary)',
+}
+
+export const paragraphStyle: CSSProperties = {
+  fontSize: '14px',
+  lineHeight: '1.6',
+  color: 'var(--text-primary)',
+  margin: 0,
+}