/* global React, ReactDOM, V2_DATA, V2Icon, V2TopBar, V2Sidebar, V2PatientHeader, V2PreviousNote, V2Composer, V2Editor, V2ContextPanel, V2DiscardModal, TweaksPanel, useTweaks, TweakSection, TweakToggle, TweakRadio, TweakSelect */ const { useState, useEffect, useMemo } = React; const V2_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "composerWidth": "regular", "writingContextDefault": true, "showSourceBanner": true, "draftIndicator": "icon-pill" } /*EDITMODE-END*/; function V2App() { const [tweaks, setTweak] = useTweaks(V2_TWEAK_DEFAULTS); const data = V2_DATA; const [activePatientId, setActivePatientId] = useState('pt-turner'); const [sidebarCollapsed, setSidebarCollapsed] = useState(false); // Compose-new-note rail starts expanded by default per design review. const [composerCollapsed, setComposerCollapsed] = useState(false); // Mode: 'quick' | 'writing' const [mode, setMode] = useState('quick'); // Which note is being viewed in the center panel in quick mode (default = latest submitted) const [viewingNoteId, setViewingNoteId] = useState(null); // Which draft is open in the right panel composer / center editor const [activeDraftId, setActiveDraftId] = useState(null); // All notes are stored in app state so drafts can be added/removed/changed const [allNotes, setAllNotes] = useState(data.notes); const [analysing, setAnalysing] = useState(false); const [autosave, setAutosave] = useState('saved'); const [discardTarget, setDiscardTarget] = useState(null); const [toast, setToast] = useState(null); const activePatient = data.patients.find((p) => p.id === activePatientId) || data.patients[0]; const patientNotes = allNotes[activePatientId] || []; const submittedNotes = patientNotes.filter((n) => n.state === 'submitted'); const activeDraft = patientNotes.find((n) => n.id === activeDraftId); // Set initial viewing note = newest submitted useEffect(() => { if (!viewingNoteId && submittedNotes.length) { setViewingNoteId(submittedNotes[0].id); } }, [viewingNoteId, submittedNotes]); // When draft is open and we're in quick mode, the right panel shows the composer // When mode === 'writing' the composer is hidden and editor takes center const showComposer = !!activeDraft && mode === 'quick'; // Autosave debouncer useEffect(() => { if (!activeDraft) return; setAutosave('saving'); const t = setTimeout(() => setAutosave('saved'), 600); return () => clearTimeout(t); }, [activeDraft?.sourceText, activeDraft?.body, activeDraft?.typeId]); // ─────────── Patient + note selection ─────────── function handleSelectPatient(id) { setActivePatientId(id); setActiveDraftId(null); setMode('quick'); setViewingNoteId(null); } function handleSelectNote(noteId) { const note = patientNotes.find((n) => n.id === noteId); if (!note) return; if (note.state === 'submitted') { // View previous note in quick mode (close any draft) setViewingNoteId(noteId); setMode('quick'); setActiveDraftId(null); } else { // Open draft. If it has body (was analysed), expanded. Else compact composer. setActiveDraftId(noteId); const isReady = note.state === 'ai_draft_ready' || note.state === 'user_reviewed'; setMode(isReady ? 'writing' : 'quick'); } } // ─────────── Draft creation + editing ─────────── function createNewDraft(typeId = null, seedText = '', subTypeId = null) { const t = typeId ? data.noteTypes.find((nt) => nt.id === typeId) : null; const sub = (t && subTypeId && t.subTypes) ? t.subTypes.find(s => s.id === subTypeId) : null; const id = `n-draft-${Date.now()}`; const newDraft = { id, type: t ? t.label : 'Untitled', typeId: t ? t.id : null, subType: sub ? sub.label : null, subTypeId: sub ? sub.id : null, state: 'draft', startedAt: 'Today · ' + data.date.clock, sortKey: '2026-02-17T09:30', author: data.user.name, sourceText: seedText || '', body: null }; setAllNotes((prev) => ({ ...prev, [activePatientId]: [newDraft, ...(prev[activePatientId] || [])] })); setActiveDraftId(id); setMode('quick'); return id; } function updateDraft(patch) { if (!activeDraftId) return; setAllNotes((prev) => ({ ...prev, [activePatientId]: (prev[activePatientId] || []).map((n) => n.id === activeDraftId ? { ...n, ...patch } : n ) })); } function handleChangeText(text) { updateDraft({ sourceText: text }); } function handleChangeType(typeId) { if (!typeId) { // Clear back to free-text Untitled draft updateDraft({ type: 'Untitled', typeId: null, subType: null, subTypeId: null }); return; } const nt = data.noteTypes.find((t) => t.id === typeId); if (!nt) return; updateDraft({ type: nt.label, typeId: nt.id, subType: null, subTypeId: null }); } function handleChangeSubType(subTypeId) { if (!activeDraft) return; const nt = data.noteTypes.find((t) => t.id === activeDraft.typeId); if (!nt || !nt.subTypes) return; const sub = nt.subTypes.find((s) => s.id === subTypeId); if (!sub) return; // Apply template into the textarea if it's empty (or only contains a previous template). const tpl = (window.V2_GET_TEMPLATE && window.V2_GET_TEMPLATE(nt.id, sub.id)) || null; const current = activeDraft.sourceText || ''; const looksLikePrevTemplate = /^[A-Z][A-Z .\-]+\s-/m.test(current.split('\n')[0] || '') || current.trim() === ''; const nextText = (tpl && (current.trim() === '' || looksLikePrevTemplate)) ? tpl : current; updateDraft({ subType: sub.label, subTypeId: sub.id, sourceText: nextText, }); } function handleChangeBody(patch) { if (!activeDraft) return; const nextBody = { ...(activeDraft.body || {}), ...patch }; updateDraft({ body: nextBody, state: 'user_reviewed' }); } // ─────────── Analyse ─────────── function handleAnalyse() { if (!activeDraft || !activeDraft.sourceText) return; updateDraft({ state: 'analysing' }); setAnalysing(true); setMode('writing'); setTimeout(() => { const ai = data.ai['n-draft-round']; // mock: always use the round AI updateDraft({ state: 'ai_draft_ready', body: ai.polished }); setAnalysing(false); }, 1400); } // ─────────── Undo generation ─────────── function handleUndoGeneration() { if (!activeDraft) return; updateDraft({ state: 'draft', body: null }); setMode('quick'); } // ─────────── Expand / Collapse ─────────── function handleExpand() { setMode('writing'); } function handleCollapse() { if (!activeDraft) return; const t = data.noteTypes.find((nt) => nt.id === activeDraft.typeId); if (!t || !t.collapsible) return; if (activeDraft.state === 'ai_draft_ready' || activeDraft.state === 'user_reviewed') { // Already structurally complex — disallow collapse return; } setMode('quick'); } // ─────────── Discard ─────────── function requestDiscard(noteId) { const note = (allNotes[activePatientId] || []).find((n) => n.id === noteId); if (!note) return; const hasContent = !!(note.sourceText || note.body); if (!hasContent) { doDiscard(noteId); } else { setDiscardTarget({ id: noteId, label: note.type, hasContent }); } } function doDiscard(noteId) { setAllNotes((prev) => ({ ...prev, [activePatientId]: (prev[activePatientId] || []).filter((n) => n.id !== noteId) })); if (activeDraftId === noteId) { setActiveDraftId(null); setMode('quick'); } setDiscardTarget(null); setToast('Draft discarded'); } // ─────────── Submit ─────────── function handleSubmit() { if (!activeDraft) return; updateDraft({ state: 'submitted', submittedAt: 'Today · ' + data.date.clock }); setToast('Note filed · audit logged'); setActiveDraftId(null); setMode('quick'); } // ─────────── Quick-mode previous note nav ─────────── const viewingNote = patientNotes.find((n) => n.id === viewingNoteId) || submittedNotes[0]; const submittedIdx = viewingNote ? submittedNotes.findIndex((n) => n.id === viewingNote.id) : 0; const canPrev = submittedIdx < submittedNotes.length - 1; const canNext = submittedIdx > 0; const goPrev = () => { if (!canPrev) return; setViewingNoteId(submittedNotes[submittedIdx + 1].id); }; const goNext = () => { if (!canNext) return; setViewingNoteId(submittedNotes[submittedIdx - 1].id); }; // ─────────── Toast ─────────── useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2400); return () => clearTimeout(t); }, [toast]); // ─────────── Keyboard shortcuts ─────────── // ⌘+1–9 jump to note by position // N new note (when not typing) // Esc return focus to note body useEffect(() => { function isTyping(el) { if (!el) return false; const tag = el.tagName; return tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable; } function railOrder() { const drafts = patientNotes.filter(n => n.state === 'draft' || n.state === 'analysing' || n.state === 'ai_draft_ready' || n.state === 'user_reviewed' ).slice().sort((a,b) => (b.sortKey||'').localeCompare(a.sortKey||'')); const subs = patientNotes.filter(n => n.state === 'submitted') .slice().sort((a,b) => (b.sortKey||'').localeCompare(a.sortKey||'')); return [...drafts, ...subs]; } function onKey(e) { const meta = e.metaKey || e.ctrlKey; const list = railOrder(); // ⌘+1–9 jump if (meta && /^[1-9]$/.test(e.key)) { const target = list[parseInt(e.key, 10) - 1]; if (target) { e.preventDefault(); handleSelectNote(target.id); } return; } // N → new note (when not typing) if (!meta && (e.key === 'n' || e.key === 'N') && !isTyping(document.activeElement)) { e.preventDefault(); createNewDraft(null, '', null); return; } // Esc → return focus to note body if (e.key === 'Escape') { const editor = document.querySelector('[data-note-body]'); if (editor) { editor.focus(); } } } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); // eslint-disable-next-line react-hooks/exhaustive-deps }, [patientNotes, activeDraftId, viewingNoteId]); // ─────────── Render ─────────── const draftCanCollapse = activeDraft && (() => { const t = data.noteTypes.find((nt) => nt.id === activeDraft.typeId); if (!t || !t.collapsible) return false; if (activeDraft.state === 'ai_draft_ready' || activeDraft.state === 'user_reviewed') return false; return true; })(); return (
{if (pid !== activePatientId) setActivePatientId(pid);createNewDraft(typeId || 'round', seedText || '');}} collapsed={sidebarCollapsed} onToggleCollapsed={() => setSidebarCollapsed(c => !c)} />
setMode('quick')} />
{/* Center panel */} {mode === 'quick' ?
{viewingNote ? :
No previous notes.
}
: activeDraft && requestDiscard(activeDraft.id)} onCollapse={handleCollapse} canCollapse={draftCanCollapse} /> } {/* Right panel */} {mode === 'quick' ? showComposer ? requestDiscard(activeDraft.id)} onClose={() => setActiveDraftId(null)} noteTypes={data.noteTypes} sources={data.ai['n-draft-round'].sources} autosave={autosave} /> : createNewDraft(typeId || null, seedText || '', subTypeId || null)} patient={activePatient} collapsed={composerCollapsed} onToggleCollapsed={() => setComposerCollapsed(c => !c)} /> : }
discardTarget && doDiscard(discardTarget.id)} onCancel={() => setDiscardTarget(null)} /> {toast &&
{toast}
} setTweak('showSourceBanner', v)} /> setTweak('writingContextDefault', v)} /> setTweak('draftIndicator', v)} options={[ { value: 'icon-pill', label: 'Pencil + pill' }, { value: 'icon-only', label: 'Pencil only' }, { value: 'dot', label: 'Dot' }] } />
); } function QuickActionsRail({ onNewNote, patient, collapsed, onToggleCollapsed }) { const [seedType, setSeedType] = React.useState(null); const [seedSubType, setSeedSubType] = React.useState(null); const [seedText, setSeedText] = React.useState(''); const types = (V2_DATA.noteTypes || []); const activeType = types.find(t => t.id === seedType); const activeSub = activeType?.subTypes?.find(s => s.id === seedSubType); // Collapsed: narrow vertical strip with affordance to re-expand. if (collapsed) { return ( ); } function handleSeed(text) { setSeedText(text); if (text && !seedText) { // First keystroke — promote seed to a real draft. onNewNote(seedType, text, seedSubType); } } function handlePickType(typeId) { setSeedType(typeId); setSeedSubType(null); // For types without sub-types, picking the pill itself starts a draft so the // user lands in the full Composer immediately. const nt = types.find(t => t.id === typeId); if (typeId && (!nt?.subTypes || nt.subTypes.length === 0)) { onNewNote(typeId, '', null); } } function handlePickSubType(subTypeId) { setSeedSubType(subTypeId); // Picking a sub-type triggers template population → start the draft. const tpl = (window.V2_GET_TEMPLATE && window.V2_GET_TEMPLATE(seedType, subTypeId)) || ''; onNewNote(seedType, tpl, subTypeId); } const placeholderLabel = activeSub?.label?.toLowerCase() || activeType?.label?.toLowerCase() || 'note'; return (