From 7e4a9b94d548e13393ce2288988fb34721b4ceea Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 11:01:03 +0200
Subject: [PATCH] app: Move docs button component.

Everything is visually unchanged. This just moves the button logic to the app, since it doesn't conceptually belong to the editor component.

It controls things such as docs which has nothing to do with the editor. This way we don't have to pass states as props around when we add more buttons later.
---
 src/app/App.tsx                 | 18 ++++++++++++++++--
 src/app/app.scss                |  8 ++++++++
 src/app/translations/en.json    |  4 ++++
 src/editor/Editor.tsx           | 25 +------------------------
 src/editor/editor.scss          |  7 -------
 src/editor/translations/en.json |  7 +------
 6 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c1bc7fe9..55fa3753 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3,7 +3,8 @@
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
-import { Classes, Spinner } from '@blueprintjs/core';
+import { Button, Classes, Spinner } from '@blueprintjs/core';
+import { Manual } from '@blueprintjs/icons';
 import React, { useEffect, useState } from 'react';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -71,7 +72,8 @@ const Docs: React.FunctionComponent = () => {
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
-    const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
+    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
+        useSettingIsShowDocsEnabled();
     const [isDragging, setIsDragging] = useState(false);
 
     const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
@@ -140,6 +142,18 @@ const App: React.FunctionComponent = () => {
                                 >
                                     <Editor />
                                 </React.Suspense>
+                                <Button
+                                    className="pb-app-doc-button"
+                                    minimal
+                                    large
+                                    icon={<Manual />}
+                                    title={
+                                        isSettingShowDocsEnabled
+                                            ? i18n.translate('docs.hide')
+                                            : i18n.translate('docs.show')
+                                    }
+                                    onClick={toggleIsSettingShowDocsEnabled}
+                                />
                             </main>
                             <aside
                                 className="pb-app-terminal"
diff --git a/src/app/app.scss b/src/app/app.scss
index f55e5598..97c7318f 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -71,6 +71,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
 
     & .pb-editor {
         min-height: 0;
@@ -78,6 +79,13 @@
     }
 }
 
+.pb-app-doc-button {
+    position: absolute;
+    bottom: bp.$pt-grid-size;
+    right: bp.$pt-grid-size;
+    z-index: bp.$pt-z-index-overlay;
+}
+
 $splitter-background-color: bp.$light-gray2;
 $splitter-background-color-hover: bp.$gray4;
 $dark-splitter-background-color: bp.$dark-gray5;
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
index b7a1925b..e5f384f1 100644
--- a/src/app/translations/en.json
+++ b/src/app/translations/en.json
@@ -4,5 +4,9 @@
         "editor": "Editor",
         "terminal": "Terminal",
         "documentation": "Documentation"
+    },
+    "docs": {
+        "show": "Show documentation",
+        "hide": "Hide documentation"
     }
 }
diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index 12b12c27..9f622ccb 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -16,15 +16,7 @@ import {
     Tabs,
     Text,
 } from '@blueprintjs/core';
-import {
-    Blank,
-    Clipboard,
-    Cross,
-    Duplicate,
-    Manual,
-    Redo,
-    Undo,
-} from '@blueprintjs/icons';
+import { Blank, Clipboard, Cross, Duplicate, Redo, Undo } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import * as monaco from 'monaco-editor';
 import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
@@ -37,7 +29,6 @@ import { UUID } from '../fileStorage';
 import { useFileStoragePath } from '../fileStorage/hooks';
 import { compile } from '../mpy/actions';
 import { useSelector } from '../reducers';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import { isMacOS } from '../utils/os';
 import Welcome from './Welcome';
 import { editorActivateFile, editorCloseFile } from './actions';
@@ -387,8 +378,6 @@ const Editor: React.FunctionComponent = () => {
     const dispatch = useDispatch();
 
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
-    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
-        useSettingIsShowDocsEnabled();
     const { isDarkMode } = useTernaryDarkMode();
 
     const i18n = useI18n();
@@ -510,18 +499,6 @@ const Editor: React.FunctionComponent = () => {
                     <div className="pb-editor-monaco" ref={editorRef} />
                 </ContextMenu>
             </ResizeSensor>
-            <Button
-                className="pb-editor-doc-button"
-                minimal
-                large
-                icon={<Manual />}
-                title={
-                    isSettingShowDocsEnabled
-                        ? i18n.translate('docs.hide')
-                        : i18n.translate('docs.show')
-                }
-                onClick={toggleIsSettingShowDocsEnabled}
-            />
         </div>
     );
 };
diff --git a/src/editor/editor.scss b/src/editor/editor.scss
index 9142f662..aa12a1ee 100644
--- a/src/editor/editor.scss
+++ b/src/editor/editor.scss
@@ -93,13 +93,6 @@
             color: bp.$pt-dark-text-color-muted;
         }
     }
-
-    &-doc-button {
-        position: absolute;
-        bottom: bp.$pt-grid-size;
-        right: bp.$pt-grid-size;
-        z-index: bp.$pt-z-index-overlay;
-    }
 }
 
 .monaco-editor {
diff --git a/src/editor/translations/en.json b/src/editor/translations/en.json
index 28d4fa96..795943c3 100644
--- a/src/editor/translations/en.json
+++ b/src/editor/translations/en.json
@@ -5,16 +5,11 @@
     "welcome": "Welcome",
     "placeholder": "Write your program here...",
     "check": "Check syntax",
-    "toggleDocs": "Toggle documentation",
     "copy": "Copy",
     "paste": "Paste",
     "selectAll": "Select all",
     "undo": "Undo",
     "redo": "Redo",
     "closeFile": { "tooltip": "Close {fileName}" },
-    "contextMenu": { "label": "Editor context menu" },
-    "docs": {
-        "show": "Show documentation",
-        "hide": "Hide documentation"
-    }
+    "contextMenu": { "label": "Editor context menu" }
 }