feat(cortex): Epic 1 - Patient Sidebar (E1.S1-S4)

Collapsible overlay sidebar voor snelle patient selectie met search en recent patients.

E1.S1 - Store uitbreiding:
- recentPatients: Patient[] (max 5, nieuwste eerst, geen duplicaten)
- patientSidebarOpen: boolean
- addRecentPatient, togglePatientSidebar, setPatientSidebarOpen actions

E1.S2 - PatientSidebar component:
- Overlay sidebar (w-80, z-50) met backdrop
- Search input met debounce (200ms)
- Recent patients sectie
- Hergebruik usePatientSearch, usePatientSelection hooks
- Hergebruik PatientListItem component

E1.S3 - Toggle button + shortcut:
- Users icon button in ContextBar
- Cmd/Ctrl+P keyboard shortcut
- Escape sluit sidebar (prioriteit boven artifacts)

E1.S4 - Click-to-select flow:
- Selectie zet activePatient
- Voegt toe aan recentPatients
- Sluit sidebar automatisch

Bouwplan v1.3: Epic 1 compleet (10/23 SP - 43%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
colinislit
2026-01-03 11:52:13 +01:00
parent 43d4d095ce
commit 9b0352de44
6 changed files with 301 additions and 19 deletions

View File

@@ -8,7 +8,7 @@
*/
import { useCortexStore, type ShiftType } from '@/stores/cortex-store';
import { Sun, Moon, Sunrise, Sunset, X, User, ArrowLeft } from 'lucide-react';
import { Sun, Moon, Sunrise, Sunset, X, User, ArrowLeft, Users } from 'lucide-react';
import Link from 'next/link';
import { useOffline } from './offline-banner';
@@ -20,7 +20,7 @@ const SHIFT_CONFIG: Record<ShiftType, { icon: typeof Sun; label: string; color:
};
export function ContextBar() {
const { shift, activePatient, setActivePatient } = useCortexStore();
const { shift, activePatient, setActivePatient, togglePatientSidebar } = useCortexStore();
const isOffline = useOffline();
const shiftConfig = SHIFT_CONFIG[shift];
const ShiftIcon = shiftConfig.icon;
@@ -47,6 +47,18 @@ export function ContextBar() {
<ShiftIcon size={14} />
<span className="text-xs font-medium">{shiftConfig.label}</span>
</div>
<div className="h-4 w-px bg-slate-200" />
{/* Patient Sidebar Toggle (E1.S3) */}
<button
type="button"
onClick={togglePatientSidebar}
className="p-1.5 hover:bg-slate-100 rounded-md transition-colors text-slate-600 hover:text-slate-900"
title="Patienten (⌘P)"
>
<Users size={16} />
</button>
</div>
{/* Center: Active Patient */}