diff --git a/MosaicIQ/src/components/Research/ResearchInspector.tsx b/MosaicIQ/src/components/Research/ResearchInspector.tsx index 8fd02b9..2463632 100644 --- a/MosaicIQ/src/components/Research/ResearchInspector.tsx +++ b/MosaicIQ/src/components/Research/ResearchInspector.tsx @@ -1,5 +1,6 @@ -import React, { useEffect, useState } from 'react'; -import { Pin, Archive, RefreshCw, Sparkles } from 'lucide-react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Pin, Archive, RefreshCw, Sparkles, Maximize2, Minimize2 } from 'lucide-react'; import type { GhostNote, NoteAuditTrail, @@ -57,6 +58,8 @@ export const ResearchInspector: React.FC = ({ const [draftTitle, setDraftTitle] = useState(''); const [draftBody, setDraftBody] = useState(''); const [draftType, setDraftType] = useState('claim'); + const [isEditorExpanded, setIsEditorExpanded] = useState(false); + const expandedEditorRef = useRef(null); useEffect(() => { if (!note) { @@ -68,6 +71,28 @@ export const ResearchInspector: React.FC = ({ setDraftType(note.noteType); }, [note]); + useEffect(() => { + if (isEditorExpanded && expandedEditorRef.current) { + expandedEditorRef.current.focus(); + expandedEditorRef.current.setSelectionRange( + expandedEditorRef.current.value.length, + expandedEditorRef.current.value.length, + ); + } + }, [isEditorExpanded]); + + const handleExpandKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Escape') { + setIsEditorExpanded(false); + } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + setIsEditorExpanded(false); + } + }, + [], + ); + if (!note && !ghost) { return (
@@ -154,7 +179,17 @@ export const ResearchInspector: React.FC = ({ />