Add placeholders for other settings

Author: davepagurek

client/modules/IDE/components/Preferences/index.jsx

@@ -474,10 +474,8 @@ export default function Preferences() {
             <h4 className="preference__title">
               {t('Preferences.LibraryVersion')}
             </h4>
-            <div className="preference__options">
+            <div>
               <VersionPicker />
-            </div>
-            <div className="preference__subtitle">
               {versionInfo ? (
                 <p className="preference__paragraph">
                   {t('Preferences.LibraryVersionInfo')}
@@ -498,15 +496,122 @@ export default function Preferences() {
               )}
             </div>
           </div>
-          {versionInfo ? (
-            <>
-              <p>Test</p>
-              <p>Test</p>
-            </>
-          ) : (
+          {versionInfo && (
             <>
-              <p>Test</p>
-              <p>Test</p>
+              <div className="preference">
+                <h4 className="preference__title">
+                  {t('Preferences.SoundAddon')}
+                </h4>
+                <div className="preference__options">
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(true))}
+                    aria-label={t('Preferences.AutosaveOnARIA')}
+                    name="soundaddon"
+                    id="soundaddon-on"
+                    className="preference__radio-button"
+                    value="On"
+                    checked={autosave}
+                  />
+                  <label htmlFor="soundaddon-on" className="preference__option">
+                    {t('Preferences.On')}
+                  </label>
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(false))}
+                    aria-label={t('Preferences.AutosaveOffARIA')}
+                    name="soundaddon"
+                    id="soundaddon-off"
+                    className="preference__radio-button"
+                    value="Off"
+                    checked={!autosave}
+                  />
+                  <label
+                    htmlFor="soundaddon-off"
+                    className="preference__option"
+                  >
+                    {t('Preferences.Off')}
+                  </label>
+                </div>
+              </div>
+              <div className="preference">
+                <h4 className="preference__title">
+                  {t('Preferences.PreloadAddon')}
+                </h4>
+                <div className="preference__options">
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(true))}
+                    aria-label={t('Preferences.AutosaveOnARIA')}
+                    name="preloadaddon"
+                    id="preloadaddon-on"
+                    className="preference__radio-button"
+                    value="On"
+                    checked={autosave}
+                  />
+                  <label
+                    htmlFor="preloadaddon-on"
+                    className="preference__option"
+                  >
+                    {t('Preferences.On')}
+                  </label>
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(false))}
+                    aria-label={t('Preferences.AutosaveOffARIA')}
+                    name="preloadaddon"
+                    id="preloadaddon-off"
+                    className="preference__radio-button"
+                    value="Off"
+                    checked={!autosave}
+                  />
+                  <label
+                    htmlFor="preloadaddon-off"
+                    className="preference__option"
+                  >
+                    {t('Preferences.Off')}
+                  </label>
+                </div>
+              </div>
+              <div className="preference">
+                <h4 className="preference__title">
+                  {t('Preferences.ShapesAddon')}
+                </h4>
+                <div className="preference__options">
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(true))}
+                    aria-label={t('Preferences.AutosaveOnARIA')}
+                    name="shapesaddon"
+                    id="shapesaddon-on"
+                    className="preference__radio-button"
+                    value="On"
+                    checked={autosave}
+                  />
+                  <label
+                    htmlFor="shapesaddon-on"
+                    className="preference__option"
+                  >
+                    {t('Preferences.On')}
+                  </label>
+                  <input
+                    type="radio"
+                    onChange={() => dispatch(setAutosave(false))}
+                    aria-label={t('Preferences.AutosaveOffARIA')}
+                    name="shapesaddon"
+                    id="shapesaddon-off"
+                    className="preference__radio-button"
+                    value="Off"
+                    checked={!autosave}
+                  />
+                  <label
+                    htmlFor="shapesaddon-off"
+                    className="preference__option"
+                  >
+                    {t('Preferences.Off')}
+                  </label>
+                </div>
+              </div>
             </>
           )}
         </TabPanel>

translations/locales/en-US/translations.json

@@ -216,7 +216,10 @@
     "LibraryVersion": "p5.js Version",
     "LibraryVersionInfo": "TODO Add helpful info about the new p5.js version, compatibility, etc.",
     "CustomVersionInfo": "It looks like you've changed the <script> tag to manage the version yourself. In that case, the version can't be managed from this tab, only from the code in index.html.",
-    "CustomVersionReset": "If you do want to use the default libraries, you can replace your script tags in index.html to the following:"
+    "CustomVersionReset": "If you do want to use the default libraries, you can replace your script tags in index.html to the following:",
+    "SoundAddon": "p5.sound.js Addon",
+    "PreloadAddon": "p5.js 2.0 Addon - Preload",
+    "ShapesAddon": "p5.js 2.0 Addon - Shapes"
   },
   "KeyboardShortcuts": {
     "Title": " Keyboard Shortcuts",