diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx index 73cf54ad..f798e4bb 100644 --- a/frontend/src/components/common/Modal.tsx +++ b/frontend/src/components/common/Modal.tsx @@ -1,5 +1,5 @@ -import { useEffect, useCallback, type ReactNode } from 'react' -import { X } from 'lucide-react' +import { useState, useEffect, useCallback, type ReactNode } from 'react' +import { X, Maximize2, Minimize2 } from 'lucide-react' import { cn } from '@/lib/utils' interface ModalProps { @@ -10,9 +10,28 @@ interface ModalProps { /** Optional footer content that stays fixed at bottom (doesn't scroll) */ footer?: ReactNode size?: 'sm' | 'md' | 'lg' | 'xl' + /** If true, a fullscreen toggle button appears in the modal header */ + allowFullScreen?: boolean } -export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }: ModalProps) { +export function Modal({ isOpen, onClose, title, children, footer, size = 'md', allowFullScreen = false }: ModalProps) { + const [isFullScreen, setIsFullScreen] = useState(() => { + if (!allowFullScreen) return false + try { + return localStorage.getItem('rf-editor-fullscreen') === 'true' + } catch { + return false + } + }) + + const toggleFullScreen = () => { + const next = !isFullScreen + setIsFullScreen(next) + try { + localStorage.setItem('rf-editor-fullscreen', String(next)) + } catch {} + } + // Close on Escape key const handleKeyDown = useCallback( (e: KeyboardEvent) => { @@ -61,9 +80,13 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
{node.id}