40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export function BrowserModeToggle() {
|
|
const [mode, setMode] = useState<'headed' | 'headless'>('headed');
|
|
const [isDevelopment, setIsDevelopment] = useState(false);
|
|
|
|
useEffect(() => {
|
|
window.electronAPI.getBrowserMode().then(({ mode, isDevelopment }) => {
|
|
setMode(mode);
|
|
setIsDevelopment(isDevelopment);
|
|
});
|
|
}, []);
|
|
|
|
if (!isDevelopment) return null;
|
|
|
|
const handleToggle = async () => {
|
|
const newMode = mode === 'headed' ? 'headless' : 'headed';
|
|
const result = await window.electronAPI.setBrowserMode(newMode);
|
|
if (result.success) {
|
|
setMode(newMode);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '10px', borderTop: '1px solid #333' }}>
|
|
<label style={{ color: '#aaa', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mode === 'headless'}
|
|
onChange={handleToggle}
|
|
style={{ cursor: 'pointer' }}
|
|
/>
|
|
Headless Browser Mode
|
|
</label>
|
|
<div style={{ fontSize: '0.85rem', color: '#666', marginTop: '4px', marginLeft: '24px' }}>
|
|
{mode === 'headless' ? 'Browser runs in background' : 'Browser window visible'}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |