diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index 7dadb51..02d551f 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -11,50 +11,38 @@ const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handl // Set default option based on openSourceMode if no option is selected useEffect(() => { if (!selectedOption) { - handleRadioChange(openSourceMode ? 'Offline' : 'None'); + handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None'); } }, [selectedOption, handleRadioChange, openSourceMode]); - // Handle option click, allowing all options even in open-source mode - const handleOptionClick = (option: string) => { - handleRadioChange(option); // No restrictions on options - }; + // Define your options + const options = [ + { value: 'Online', label: 'Online' }, + { value: 'Offline', label: 'Offline' }, + { value: 'None', label: 'None' }, + { value: 'Offline (FOSS)', label: 'Offline (FOSS)' }, + { value: 'Online (FOSS)', label: 'Online (FOSS)' }, + { value: 'None (FOSS)', label: 'None (FOSS)' }, + ]; return ( - <> - {/* AI Mode Radio Options */} - <div className="settings-option"> - <p>{openSourceMode ? 'Disable Options (FOSS Mode):' : 'Disable Options:'}</p> - <div className="slider"> - {/* Offline */} - <div - className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`} - onClick={() => handleOptionClick('Offline')} - style={{ pointerEvents: (openSourceMode && selectedOption !== 'Offline') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'Offline') ? 0.5 : 1 }} - > - Offline tools{openSourceMode ? ' (FOSS)' : ''} - </div> - - {/* Online (Available even in FOSS mode) */} - <div - className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`} - onClick={() => handleOptionClick('Online')} - > - Online tools{openSourceMode ? ' (FOSS)' : ''} - </div> - - {/* None */} - <div - className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`} - onClick={() => handleOptionClick('None')} - style={{ pointerEvents: (openSourceMode && selectedOption !== 'None') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'None') ? 0.5 : 1 }} - > - None{openSourceMode ? ' (FOSS)' : ''} - </div> + <div className="settings-option"> + <p>Select Privacy Mode:</p> + {options.map((option) => ( + <div key={option.value}> + <label> + <input + type="radio" + value={option.value} + checked={selectedOption === option.value} + onChange={() => handleRadioChange(option.value)} + disabled={openSourceMode && !option.label.includes('(FOSS)') && selectedOption !== option.value} // Disable non-FOSS options if FOSS is selected + /> + {option.label} + </label> </div> - <br /> - </div> - </> + ))} + </div> ); }; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 18fb661..ac94db3 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -458,7 +458,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( return ( <div className="settings-section"> <h2>Privacy Settings</h2> - <PrivacySettings selectedOption={selectedOption} handleRadioChange={handleRadioChange}