Task 8: Rebuild ConsultationsView (Experience view)

Rebuilt from ref-consultations.md spec with Clinical Luxury styling:
- Framer Motion height-only expand/collapse (no opacity fade)
- font-ui (Elvaro Grotesque) throughout, Geist Mono for dates/codes
- 3px left border color-coded by employer (NHS blue / Tesco teal)
- Multi-layered card shadows (shadow-pmr)
- Blue tint hover state (#EFF6FF)
- H/E/P section headers: uppercase, 12px, letter-spacing 0.05em
- Coded entries in Geist Mono with bracket codes
- Single-expand accordion behavior
- Chevron rotation via Framer Motion
- Proper font sizes per spec (13px body, 15px titles, 12px codes)
- Focus-visible ring on entry buttons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/views/ConsultationsView.tsx

@@ -1,8 +1,11 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 import { consultations } from '@/data/consultations'
 import type { Consultation, ViewId } from '@/types/pmr'
 
+// ─── Props ──────────────────────────────────────────────────────────────────
+
 interface ConsultationsViewProps {
   onNavigate?: (view: ViewId, itemId?: string) => void
   initialExpandedId?: string
@@ -10,6 +13,7 @@ interface ConsultationsViewProps {
 
 export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps) {
   const [expandedId, setExpandedId] = useState<string | null>(initialExpandedId ?? null)
+
   const prefersReducedMotion = typeof window !== 'undefined'
     ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
     : false
@@ -21,10 +25,10 @@ export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps)
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="font-inter font-semibold text-lg text-gray-900">
-          Consultation History
+        <h1 className="font-ui font-semibold text-[18px] text-gray-900">
+          Consultation Journal
         </h1>
-        <span className="font-geist text-xs text-gray-500">
+        <span className="font-geist text-[12px] text-gray-500">
           {consultations.length} entries
         </span>
       </div>
@@ -44,6 +48,8 @@ export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps)
   )
 }
 
+// ─── Consultation Entry ─────────────────────────────────────────────────────
+
 interface ConsultationEntryProps {
   consultation: Consultation
   isExpanded: boolean
@@ -57,168 +63,159 @@ function ConsultationEntry({
   onToggle,
   prefersReducedMotion,
 }: ConsultationEntryProps) {
-  const contentRef = useRef<HTMLDivElement>(null)
-  const expandedContentRef = useRef<HTMLDivElement>(null)
-  const [height, setHeight] = useState<number | undefined>(isExpanded ? undefined : 0)
-
-  useEffect(() => {
-    if (prefersReducedMotion) {
-      setHeight(isExpanded ? undefined : 0)
-      return
-    }
-
-    if (isExpanded) {
-      const timer = setTimeout(() => {
-        setHeight(undefined)
-      }, 200)
-      return () => clearTimeout(timer)
-    }
-    setHeight(0)
-  }, [isExpanded, prefersReducedMotion])
-
-  useEffect(() => {
-    if (isExpanded && expandedContentRef.current) {
-      expandedContentRef.current.focus()
-    }
-  }, [isExpanded])
-
   const keyCodedEntry = consultation.codedEntries[0]
 
   return (
     <div
-      className="bg-white border border-gray-200 rounded overflow-hidden"
+      className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden"
       style={{ borderLeftWidth: '3px', borderLeftColor: consultation.orgColor }}
     >
+      {/* Collapsed header — always visible */}
       <button
         type="button"
         onClick={onToggle}
-        className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-gray-50 transition-colors duration-100"
+        className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-[#EFF6FF] transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset"
         aria-expanded={isExpanded}
+        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.date}`}
       >
         <StatusDot isCurrent={consultation.isCurrent} />
+
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <span className="font-geist text-sm text-gray-500">{consultation.date}</span>
+            <span className="font-geist text-[13px] text-gray-500">
+              {consultation.date}
+            </span>
             <span className="text-gray-300">|</span>
             <span
-              className="font-inter text-sm"
+              className="font-ui text-[13px]"
               style={{ color: consultation.orgColor }}
             >
               {consultation.organization}
             </span>
           </div>
-          <h3 className="font-inter font-semibold text-base text-gray-900 mt-1">
+
+          <h3 className="font-ui font-semibold text-[15px] text-gray-900 mt-1">
             {consultation.role}
           </h3>
+
           {!isExpanded && keyCodedEntry && (
-            <p className="font-inter text-sm text-gray-500 mt-1 line-clamp-1">
-              <span className="text-gray-400">Key:</span>{' '}
-              <span className="font-geist text-xs text-gray-400">
+            <p className="font-ui text-[13px] text-gray-500 mt-1 line-clamp-1">
+              <span className="font-medium text-gray-400">Key:</span>{' '}
+              <span className="font-geist text-[12px] text-gray-400">
                 [{keyCodedEntry.code}]
               </span>{' '}
               {keyCodedEntry.description}
             </p>
           )}
         </div>
-        <ChevronDown
-          size={18}
-          className={`
-            flex-shrink-0 text-gray-400 transition-transform duration-200 mt-1
-            ${isExpanded ? 'rotate-180' : ''}
-          `}
-        />
+
+        <motion.div
+          animate={{ rotate: isExpanded ? 180 : 0 }}
+          transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
+          className="flex-shrink-0 mt-1"
+        >
+          <ChevronDown size={18} className="text-gray-400" />
+        </motion.div>
       </button>
 
-      <div
-        ref={contentRef}
-        style={{
-          height: height !== undefined ? `${height}px` : 'auto',
-          transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
-          overflow: 'hidden',
-        }}
-      >
+      {/* Expandable content — height-only animation, NO opacity fade */}
+      <AnimatePresence initial={false}>
         {isExpanded && (
-          <ExpandedContent
-            consultation={consultation}
-            prefersReducedMotion={prefersReducedMotion}
-            contentRef={expandedContentRef}
-          />
+          <motion.div
+            key="expanded"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            transition={{
+              duration: prefersReducedMotion ? 0 : 0.2,
+              ease: 'easeOut',
+            }}
+            className="overflow-hidden"
+          >
+            <ExpandedContent consultation={consultation} />
+          </motion.div>
         )}
-      </div>
+      </AnimatePresence>
     </div>
   )
 }
 
+// ─── Status Dot ─────────────────────────────────────────────────────────────
+
 interface StatusDotProps {
   isCurrent: boolean
 }
 
 function StatusDot({ isCurrent }: StatusDotProps) {
   return (
-    <span className="flex-shrink-0 mt-1.5">
+    <span
+      className="flex-shrink-0 mt-1.5"
+      aria-label={isCurrent ? 'Current role' : 'Historical role'}
+    >
       <span
-        className={`
-          block w-2 h-2 rounded-full
-          ${isCurrent ? 'bg-green-500' : 'bg-gray-400'}
-        `}
-        aria-label={isCurrent ? 'Current role' : 'Historical role'}
+        className={`block w-2 h-2 rounded-full ${
+          isCurrent ? 'bg-green-500' : 'bg-gray-400'
+        }`}
       />
     </span>
   )
 }
 
+// ─── Expanded Content ───────────────────────────────────────────────────────
+
 interface ExpandedContentProps {
   consultation: Consultation
-  prefersReducedMotion: boolean
-  contentRef: React.RefObject<HTMLDivElement>
 }
 
-function ExpandedContent({ consultation, prefersReducedMotion, contentRef }: ExpandedContentProps) {
-  const opacity = prefersReducedMotion ? 1 : undefined
-  const transition = prefersReducedMotion ? 'none' : 'opacity 150ms ease-out'
-
+function ExpandedContent({ consultation }: ExpandedContentProps) {
   return (
-    <div
-      ref={contentRef}
-      tabIndex={-1}
-      className="px-4 pb-4 outline-none"
-      style={{ opacity, transition }}
-    >
-      <div className="pl-5 border-l border-gray-200 ml-1">
+    <div className="px-4 pb-4">
+      <div className="pl-5 border-l border-[#E5E7EB] ml-1">
+        {/* Duration */}
         <div className="mb-4">
-          <span className="font-inter text-sm text-gray-500">Duration: </span>
-          <span className="font-geist text-sm text-gray-700">{consultation.duration}</span>
+          <span className="font-ui text-[13px] text-gray-500">Duration: </span>
+          <span className="font-geist text-[13px] text-gray-700">
+            {consultation.duration}
+          </span>
         </div>
 
+        {/* HISTORY */}
         <SectionHeader>HISTORY</SectionHeader>
-        <p className="font-inter text-sm text-gray-700 leading-relaxed mb-4">
+        <p className="font-ui text-[13px] text-gray-700 leading-relaxed mb-4">
           {consultation.history}
         </p>
 
+        {/* EXAMINATION */}
         <SectionHeader>EXAMINATION</SectionHeader>
         <ul className="space-y-1.5 mb-4">
           {consultation.examination.map((item, index) => (
-            <li key={index} className="flex gap-2 text-sm">
+            <li key={index} className="flex gap-2 text-[13px]">
               <span className="text-gray-300 flex-shrink-0">-</span>
-              <span className="font-inter text-gray-700">{item}</span>
+              <span className="font-ui text-gray-700">{item}</span>
             </li>
           ))}
         </ul>
 
+        {/* PLAN */}
         <SectionHeader>PLAN</SectionHeader>
         <ul className="space-y-1.5 mb-4">
           {consultation.plan.map((item, index) => (
-            <li key={index} className="flex gap-2 text-sm">
+            <li key={index} className="flex gap-2 text-[13px]">
               <span className="text-gray-300 flex-shrink-0">-</span>
-              <span className="font-inter text-gray-700">{item}</span>
+              <span className="font-ui text-gray-700">{item}</span>
             </li>
           ))}
         </ul>
 
+        {/* CODED ENTRIES */}
         <SectionHeader>CODED ENTRIES</SectionHeader>
         <div className="space-y-1">
           {consultation.codedEntries.map(entry => (
-            <CodedEntry key={entry.code} code={entry.code} description={entry.description} />
+            <CodedEntry
+              key={entry.code}
+              code={entry.code}
+              description={entry.description}
+            />
           ))}
         </div>
       </div>
@@ -226,14 +223,18 @@ function ExpandedContent({ consultation, prefersReducedMotion, contentRef }: Exp
   )
 }
 
+// ─── Section Header ─────────────────────────────────────────────────────────
+
 function SectionHeader({ children }: { children: React.ReactNode }) {
   return (
-    <h4 className="font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 mb-2">
+    <h4 className="font-ui font-semibold text-[12px] uppercase tracking-[0.05em] text-gray-400 mb-2">
       {children}
     </h4>
   )
 }
 
+// ─── Coded Entry ────────────────────────────────────────────────────────────
+
 interface CodedEntryProps {
   code: string
   description: string
@@ -241,11 +242,8 @@ interface CodedEntryProps {
 
 function CodedEntry({ code, description }: CodedEntryProps) {
   return (
-    <div className="flex items-start gap-2 text-sm">
-      <span className="font-geist text-xs text-gray-400 flex-shrink-0">
-        [{code}]
-      </span>
-      <span className="font-inter text-gray-600">{description}</span>
+    <div className="font-geist text-[12px] text-gray-500">
+      [{code}] {description}
     </div>
   )
 }