add 2 new settings

- disable css animations
- hide buttons
- add docs link to left (to use when buttons are hidden)

website/src/repl/components/panel/SettingsTab.jsx

@@ -94,6 +94,8 @@ export function SettingsTab({ started }) {
     isAutoCompletionEnabled,
     isTooltipEnabled,
     isFlashEnabled,
+    isButtonRowHidden,
+    isCSSAnimationDisabled,
     isSyncEnabled,
     isLineWrappingEnabled,
     fontSize,
@@ -196,7 +198,7 @@ export function SettingsTab({ started }) {
           value={togglePanelTrigger == 'hover'}
         /> */}
       </FormItem>
-      <FormItem label="Code Settings">
+      <FormItem label="More Settings">
         <Checkbox
           label="Enable bracket matching"
           onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}
@@ -256,6 +258,16 @@ export function SettingsTab({ started }) {
           disabled={shouldAlwaysSync}
           value={isSyncEnabled}
         />
+        <Checkbox
+          label="Hide top buttons"
+          onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}
+          value={isButtonRowHidden}
+        />
+        <Checkbox
+          label="Disable CSS Animations"
+          onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}
+          value={isCSSAnimationDisabled}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">