Function SettingsModal

frontend/components/autofigure/SettingsModal.tsx:20–302

({ isOpen, onClose }: SettingsModalProps)

type TabType = "general" | "llm"

export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
    const { config, updateConfig } = useAutoFigure()
    const [activeTab, setActiveTab] = useState<TabType>("general")

    // Close on Escape key
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === "Escape") {
                onClose()
            }
        }
        if (isOpen) {
            document.addEventListener("keydown", handleKeyDown)
            return () => document.removeEventListener("keydown", handleKeyDown)
        }
    }, [isOpen, onClose])

    // Prevent body scroll when modal is open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = "hidden"
        } else {
            document.body.style.overflow = ""
        }
        return () => {
            document.body.style.overflow = ""
        }
    }, [isOpen])

    if (!isOpen) return null

    const tabs = [
        { id: "general" as const, label: "General", icon: <Lightbulb className="w-4 h-4" /> },
        { id: "llm" as const, label: "LLM", icon: <Cpu className="w-4 h-4" /> },
    ]

    return (
        <div className="af-modal-overlay" onClick={onClose}>
            <div
                className="af-modal"
                onClick={e => e.stopPropagation()}
            >
                {/* Header */}
                <div className="af-modal-header">
                    <div className="af-modal-title">
                        <div className="af-modal-icon">
                            <Settings2 className="w-5 h-5 text-white" />
                        </div>
                        <div>
                            <h2>Settings</h2>
                            <p>Configure generation parameters</p>
                        </div>
                    </div>
                    <button className="af-modal-close" onClick={onClose}>
                        <X className="w-5 h-5" />
                    </button>
                </div>