editor: move docs toggle from settings

This removes the docs toggle switch from the settings and adds a new
docs toggle button to the editor.

Fixes: https://github.com/pybricks/support/issues/778

src/settings/Settings.test.tsx

@@ -15,18 +15,6 @@ afterEach(() => {
     sessionStorage.clear();
 });
 
-describe('showDocs setting switch', () => {
-    it('should toggle setting', async () => {
-        const [user, settings] = testRender(<Settings />);
-
-        const showDocs = settings.getByLabelText('Documentation');
-        expect(showDocs).toBeChecked();
-
-        await user.click(showDocs);
-        expect(showDocs).not.toBeChecked();
-    });
-});
-
 describe('darkMode setting switch', () => {
     it('should toggle setting', async () => {
         const [user, settings] = testRender(<Settings />);

src/settings/Settings.tsx

@@ -29,13 +29,10 @@ import { pseudolocalize } from '../i18n';
 import { useSelector } from '../reducers';
 import { tourStart } from '../tour/actions';
 import { isMacOS } from '../utils/os';
-import { useSettingIsShowDocsEnabled } from './hooks';
 import { useI18n } from './i18n';
 import './settings.scss';
 
 const Settings: React.VoidFunctionComponent = () => {
-    const { isSettingShowDocsEnabled, setIsSettingShowDocsEnabled } =
-        useSettingIsShowDocsEnabled();
     const [isAboutDialogOpen, setIsAboutDialogOpen] = useState(false);
     const { isDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
 
@@ -63,21 +60,6 @@ const Settings: React.VoidFunctionComponent = () => {
                     out: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}--</span>,
                 })}
             >
-                <ControlGroup>
-                    <Switch
-                        label={i18n.translate('appearance.documentation.label')}
-                        checked={isSettingShowDocsEnabled}
-                        onChange={(e) =>
-                            setIsSettingShowDocsEnabled(
-                                (e.target as HTMLInputElement).checked,
-                            )
-                        }
-                    />
-                    <HelpButton
-                        helpForLabel={i18n.translate('appearance.documentation.label')}
-                        content={i18n.translate('appearance.documentation.help')}
-                    />
-                </ControlGroup>
                 <ControlGroup>
                     <Switch
                         label={i18n.translate('appearance.darkMode.label')}

src/settings/translations/en.json

@@ -2,10 +2,6 @@
     "title": "Settings & Help",
     "appearance": {
         "title": "Appearance",
-        "documentation": {
-            "label": "Documentation",
-            "help": "Enable to show the documentation and disable to hide the documentation."
-        },
         "darkMode": {
             "label": "Dark mode",
             "help": "Enable to set theme to dark mode and disable to set theme to light mode."