Setting radioSelection

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)' : ''}
+      <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>
-
-          {/* 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>
-        <br />
-      </div>
-    </>
   );
 };
 

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}