refactor: extract ExpandableCardShell from WorkExperience and TimelineInterventions subsections

Single source of truth for expand/collapse card interaction pattern:
container styling, keyboard handling, chevron rotation, AnimatePresence
animation, and expanded content wrapper. Each consumer retains unique
header and body content via render props.

src/components/ExpandableCardShell.tsx

@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronRight } from 'lucide-react'
+import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+
+interface ExpandableCardShellProps {
+  isExpanded: boolean
+  isHighlighted: boolean
+  accentColor: string
+  onToggle: () => void
+  ariaLabel: string
+  headerPadding?: string
+  className?: string
+  dataTileId?: string
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  renderHeader: () => React.ReactNode
+  renderBody: () => React.ReactNode
+}
+
+export function ExpandableCardShell({
+  isExpanded,
+  isHighlighted,
+  accentColor,
+  onToggle,
+  ariaLabel,
+  headerPadding = '12px 14px',
+  className,
+  dataTileId,
+  onMouseEnter,
+  onMouseLeave,
+  renderHeader,
+  renderBody,
+}: ExpandableCardShellProps) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onToggle()
+      }
+      if (e.key === 'Escape' && isExpanded) {
+        e.preventDefault()
+        onToggle()
+      }
+    },
+    [onToggle, isExpanded],
+  )
+
+  return (
+    <div
+      data-tile-id={dataTileId}
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div
+        style={{
+          background: isHighlighted ? hexToRgba(accentColor, 0.03) : 'var(--bg-dashboard)',
+          borderRadius: 'var(--radius-sm)',
+          border: `1px solid ${isExpanded || isHighlighted ? hexToRgba(accentColor, 0.2) : 'var(--border-light)'}`,
+          transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={onToggle}
+          onKeyDown={handleKeyDown}
+          aria-expanded={isExpanded}
+          aria-label={ariaLabel}
+          style={{
+            display: 'flex',
+            gap: '10px',
+            padding: headerPadding,
+            cursor: 'pointer',
+            minHeight: '44px',
+            alignItems: 'flex-start',
+          }}
+          onMouseEnter={(e) => {
+            if (!isExpanded) {
+              e.currentTarget.parentElement!.style.borderColor = hexToRgba(accentColor, 0.2)
+              e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isExpanded) {
+              e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
+              e.currentTarget.parentElement!.style.boxShadow = 'none'
+            }
+          }}
+        >
+          <div
+            aria-hidden="true"
+            style={{
+              width: '9px',
+              height: '9px',
+              borderRadius: '50%',
+              background: accentColor,
+              flexShrink: 0,
+              marginTop: '4px',
+            }}
+          />
+
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {renderHeader()}
+          </div>
+
+          <ChevronRight
+            size={14}
+            style={{
+              color: 'var(--text-tertiary)',
+              flexShrink: 0,
+              marginTop: '2px',
+              transform: isExpanded ? 'rotate(90deg)' : 'none',
+              transition: 'transform 0.15s ease-out',
+            }}
+          />
+        </div>
+
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ height: 0 }}
+              animate={{ height: 'auto' }}
+              exit={{ height: 0 }}
+              transition={motionSafeTransition(0.2)}
+              style={{ overflow: 'hidden' }}
+            >
+              <div
+                style={{
+                  padding: '0 12px 12px 30px',
+                  borderTop: '1px solid var(--border-light)',
+                  paddingTop: '12px',
+                  borderLeft: `2px solid ${accentColor}`,
+                  marginLeft: '12px',
+                }}
+              >
+                {renderBody()}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}

src/components/TimelineInterventionsSubsection.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo, useState, useCallback } from 'react'
+import { useMemo, useState, useCallback } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
+import { ExpandableCardShell } from './ExpandableCardShell'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { timelineEntities, timelineConsultations } from '@/data/timeline'
 import { getExperienceEducationUICopy } from '@/lib/profile-content'
 import type { TimelineEntity } from '@/types/pmr'
-import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+import { hexToRgba } from '@/lib/utils'
 
 interface TimelineInterventionItemProps {
   entity: TimelineEntity
@@ -30,84 +30,26 @@ function TimelineInterventionItem({
   const isEducation = entity.kind === 'education'
   const interventionLabel = isEducation ? experienceEducationCopy.educationLabel : experienceEducationCopy.employmentLabel
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        onToggle()
-      }
-      if (e.key === 'Escape' && isExpanded) {
-        e.preventDefault()
-        onToggle()
-      }
-    },
-    [isExpanded, onToggle],
-  )
-
   return (
-    <div
+    <ExpandableCardShell
-      data-tile-id={isEducationAnchor ? 'section-education' : undefined}
+      isExpanded={isExpanded}
+      isHighlighted={isHighlightedFromGraph}
+      accentColor={entity.orgColor}
+      onToggle={onToggle}
+      ariaLabel={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
+      headerPadding="8px 8px"
       className={isEducation ? 'timeline-intervention-item timeline-intervention-item--education' : 'timeline-intervention-item'}
+      dataTileId={isEducationAnchor ? 'section-education' : undefined}
       onMouseEnter={() => onHighlight?.(entity.id)}
       onMouseLeave={() => onHighlight?.(null)}
-    >
+      renderHeader={() => (
-      <div
+        <>
-        style={{
-          background: isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.03) : 'var(--bg-dashboard)',
-          borderRadius: 'var(--radius-sm)',
-          border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.2) : 'var(--border-light)'}`,
-          transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={onToggle}
-          onKeyDown={handleKeyDown}
-          aria-expanded={isExpanded}
-          aria-label={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
-          style={{
-            display: 'flex',
-            gap: '10px',
-            padding: '8px 8px',
-            cursor: 'pointer',
-            
-            alignItems: 'flex-start',
-          }}
-          onMouseEnter={(e) => {
-            if (!isExpanded) {
-              e.currentTarget.parentElement!.style.borderColor = hexToRgba(entity.orgColor, 0.2)
-              e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (!isExpanded) {
-              e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
-              e.currentTarget.parentElement!.style.boxShadow = 'none'
-            }
-          }}
-        >
-          <div
-            aria-hidden="true"
-            style={{
-              width: '9px',
-              height: '9px',
-              borderRadius: '50%',
-              background: entity.orgColor,
-              flexShrink: 0,
-              marginTop: '4px',
-            }}
-          />
-
-          <div style={{ flex: 1, minWidth: 0 }}>
           <div
             style={{
               display: 'flex',
               flexWrap: 'wrap',
               alignItems: 'center',
               gap: '6px',
-                
             }}
           >
             <span className={isEducation ? 'timeline-intervention-pill timeline-intervention-pill--education' : 'timeline-intervention-pill'}>
@@ -132,7 +74,6 @@ function TimelineInterventionItem({
             }}
           >
             {entity.organization}
-            
             <span
               style={{
                 fontSize: '11px',
@@ -145,43 +86,10 @@ function TimelineInterventionItem({
               {entity.dateRange.display}
             </span>
           </div>
-
+        </>
-
+      )}
-
+      renderBody={() => (
-
+        <>
-          </div>
-
-          <ChevronRight
-            size={14}
-            style={{
-              color: 'var(--text-tertiary)',
-              flexShrink: 0,
-              marginTop: '2px',
-              transform: isExpanded ? 'rotate(90deg)' : 'none',
-              transition: 'transform 0.15s ease-out',
-              
-            }}
-          />
-        </div>
-
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              initial={{ height: 0 }}
-              animate={{ height: 'auto' }}
-              exit={{ height: 0 }}
-              transition={motionSafeTransition(0.2)}
-              style={{ overflow: 'hidden' }}
-            >
-              <div
-                style={{
-                  padding: '0 12px 12px 30px',
-                  borderTop: '1px solid var(--border-light)',
-                  paddingTop: '12px',
-                  borderLeft: `2px solid ${entity.orgColor}`,
-                  marginLeft: '12px',
-                }}
-              >
           <ul
             style={{
               listStyle: 'none',
@@ -277,12 +185,9 @@ function TimelineInterventionItem({
             {experienceEducationCopy.viewFullRecordLabel}
             <ChevronRight size={12} />
           </button>
-              </div>
+        </>
-            </motion.div>
       )}
-        </AnimatePresence>
+    />
-      </div>
-    </div>
   )
 }
 

src/components/WorkExperienceSubsection.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
 import { CardHeader } from './Card'
+import { ExpandableCardShell } from './ExpandableCardShell'
 import { timelineConsultations } from '@/data/timeline'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
-import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+import { hexToRgba } from '@/lib/utils'
 import { DEFAULT_ORG_COLOR } from '@/lib/theme-colors'
 
 interface RoleItemProps {
@@ -17,76 +17,20 @@ interface RoleItemProps {
 }
 
 function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle, onViewFull, onHighlight }: RoleItemProps) {
-  const handleKeyDown = useCallback(
+  const orgColor = consultation.orgColor ?? DEFAULT_ORG_COLOR
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        onToggle()
-      }
-      if (e.key === 'Escape' && isExpanded) {
-        e.preventDefault()
-        onToggle()
-      }
-    },
-    [onToggle, isExpanded],
-  )
 
   return (
-    <div
+    <ExpandableCardShell
-      style={{
+      isExpanded={isExpanded}
-        background: isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.03) : 'var(--bg-dashboard)',
+      isHighlighted={isHighlightedFromGraph}
-        borderRadius: 'var(--radius-sm)',
+      accentColor={orgColor}
-        border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2) : 'var(--border-light)'}`,
+      onToggle={onToggle}
-        transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
+      ariaLabel={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
-        overflow: 'hidden',
+      headerPadding="12px 14px"
-      }}
       onMouseEnter={() => onHighlight?.(consultation.id)}
       onMouseLeave={() => onHighlight?.(null)}
-    >
+      renderHeader={() => (
-      {/* Clickable header */}
+        <>
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={onToggle}
-        onKeyDown={handleKeyDown}
-        aria-expanded={isExpanded}
-        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
-        style={{
-          display: 'flex',
-          gap: '10px',
-          padding: '12px 14px',
-          cursor: 'pointer',
-          minHeight: '44px',
-          alignItems: 'flex-start',
-        }}
-        onMouseEnter={(e) => {
-          if (!isExpanded) {
-            e.currentTarget.parentElement!.style.borderColor = hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)
-            e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!isExpanded) {
-            e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
-            e.currentTarget.parentElement!.style.boxShadow = 'none'
-          }
-        }}
-      >
-        {/* Org colour dot */}
-        <div
-          aria-hidden="true"
-          style={{
-            width: '9px',
-            height: '9px',
-            borderRadius: '50%',
-            background: consultation.orgColor ?? DEFAULT_ORG_COLOR,
-            flexShrink: 0,
-            marginTop: '4px',
-          }}
-        />
-
-        {/* Text content */}
-        <div style={{ flex: 1, minWidth: 0 }}>
           <div
             style={{
               fontSize: '14px',
@@ -116,40 +60,10 @@ function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle,
           >
             {consultation.duration}
           </div>
-        </div>
+        </>
-
+      )}
-        {/* Chevron */}
+      renderBody={() => (
-        <ChevronRight
+        <>
-          size={14}
-          style={{
-            color: 'var(--text-tertiary)',
-            flexShrink: 0,
-            marginTop: '2px',
-            transform: isExpanded ? 'rotate(90deg)' : 'none',
-            transition: 'transform 0.15s ease-out',
-          }}
-        />
-      </div>
-
-      {/* Expandable detail content */}
-      <AnimatePresence>
-        {isExpanded && (
-          <motion.div
-            initial={{ height: 0 }}
-            animate={{ height: 'auto' }}
-            exit={{ height: 0 }}
-            transition={motionSafeTransition(0.2)}
-            style={{ overflow: 'hidden' }}
-          >
-            <div
-              style={{
-                padding: '0 12px 12px 30px',
-                borderTop: '1px solid var(--border-light)',
-                paddingTop: '12px',
-                borderLeft: `2px solid ${consultation.orgColor ?? 'var(--accent)'}`,
-                marginLeft: '12px',
-              }}
-            >
           {/* Examination bullets */}
           <ul
             style={{
@@ -207,9 +121,9 @@ function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle,
                   fontFamily: 'var(--font-geist-mono)',
                   padding: '3px 8px',
                   borderRadius: '4px',
-                      background: hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.08),
+                  background: hexToRgba(orgColor, 0.08),
                   color: consultation.orgColor ?? 'var(--accent)',
-                      border: `1px solid ${hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)}`,
+                  border: `1px solid ${hexToRgba(orgColor, 0.2)}`,
                 }}
               >
                 {entry.code}: {entry.description}
@@ -246,11 +160,9 @@ function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle,
             View full record
             <ChevronRight size={12} />
           </button>
-            </div>
+        </>
-          </motion.div>
       )}
-      </AnimatePresence>
+    />
-    </div>
   )
 }