Task 18: Add command palette (Ctrl+K)
- Create CommandPalette.tsx with overlay, search input, grouped results, keyboard navigation (arrows, Enter, Escape), and footer hints - Rebuild search.ts with PaletteItem model: 24 entries across 6 sections (Experience, Core Skills, Active Projects, Achievements, Education, Quick Actions) matching concept HTML structure - Fuzzy search via fuse.js with weighted keys (title, subtitle, keywords) - Wire into DashboardLayout with global Ctrl+K listener and TopBar click - Action system: scroll-to-tile, expand-item, external links, download CV - Add data-tile-id to all Card/tile components for scroll targeting - CSS animations: palette-overlay-in, palette-modal-in with prefers-reduced-motion support - Maintain backward-compatible legacy exports for ClinicalSidebar (will be removed in Task 21) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -374,7 +374,7 @@ export const CareerActivityTile: React.FC = () => {
|
||||
)
|
||||
|
||||
return (
|
||||
<Card full>
|
||||
<Card full tileId="career-activity">
|
||||
<CardHeader dotColor="teal" title="CAREER ACTIVITY" rightText="Full timeline" />
|
||||
|
||||
<div className="activity-grid">
|
||||
|
||||
@@ -233,7 +233,7 @@ export function CoreSkillsTile() {
|
||||
)
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card tileId="core-skills">
|
||||
<CardHeader dotColor="amber" title="REPEAT MEDICATIONS" />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{skills.map((skill) => (
|
||||
|
||||
@@ -22,7 +22,7 @@ export function EducationTile() {
|
||||
]
|
||||
|
||||
return (
|
||||
<Card full>
|
||||
<Card full tileId="education">
|
||||
<CardHeader dotColor="purple" title="EDUCATION" />
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
|
||||
@@ -30,7 +30,7 @@ export const LastConsultationTile: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card full>
|
||||
<Card full tileId="last-consultation">
|
||||
<CardHeader dotColor="green" title="LAST CONSULTATION" rightText="Most recent role" />
|
||||
|
||||
{/* Header info row */}
|
||||
|
||||
@@ -109,7 +109,7 @@ export function LatestResultsTile() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card tileId="latest-results">
|
||||
<CardHeader dotColor="teal" title="LATEST RESULTS" rightText="Updated May 2025" />
|
||||
<div style={gridStyles}>
|
||||
{kpis.map((kpi) => (
|
||||
|
||||
@@ -10,7 +10,7 @@ export function PatientSummaryTile() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card full>
|
||||
<Card full tileId="patient-summary">
|
||||
<CardHeader dotColor="teal" title="PATIENT SUMMARY" />
|
||||
<div style={bodyStyles}>{personalStatement}</div>
|
||||
</Card>
|
||||
|
||||
@@ -257,7 +257,7 @@ export function ProjectsTile() {
|
||||
)
|
||||
|
||||
return (
|
||||
<Card full>
|
||||
<Card full tileId="projects">
|
||||
<CardHeader dotColor="amber" title="ACTIVE PROJECTS" />
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
|
||||
Reference in New Issue
Block a user