From da4c58608f2397be984796c374744a6372514583 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 11:30:34 +0200
Subject: [PATCH 1/3] app: Generalize docs toggle style.

Allow adding several views to be opened and closed. Also make it easily discoverable by making them the same color as the main buttons.
---
 src/app/App.tsx  | 33 +++++++++++++++++----------------
 src/app/app.scss | 10 +++++++++-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index fbe67409..934fcfb6 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -142,22 +142,23 @@ const App: React.FunctionComponent = () => {
                                 >
                                     <Editor />
                                 </React.Suspense>
-                                <Button
-                                    className="pb-app-doc-button"
-                                    minimal
-                                    large
-                                    icon={<Manual />}
-                                    title={
-                                        sideView === 'docs'
-                                            ? i18n.translate('docs.hide')
-                                            : i18n.translate('docs.show')
-                                    }
-                                    onClick={() =>
-                                        setSideView(
-                                            sideView === 'docs' ? 'off' : 'docs',
-                                        )
-                                    }
-                                />
+                                <div className="pb-app-side-view-buttons">
+                                    <Button
+                                        large
+                                        intent="primary"
+                                        icon={<Manual />}
+                                        title={
+                                            sideView === 'docs'
+                                                ? i18n.translate('docs.hide')
+                                                : i18n.translate('docs.show')
+                                        }
+                                        onClick={() =>
+                                            setSideView(
+                                                sideView === 'docs' ? 'off' : 'docs',
+                                            )
+                                        }
+                                    />
+                                </div>
                             </main>
                             <aside
                                 className="pb-app-terminal"
diff --git a/src/app/app.scss b/src/app/app.scss
index 97c7318f..4743282d 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -79,11 +79,19 @@
     }
 }
 
-.pb-app-doc-button {
+.pb-app-side-view-buttons {
     position: absolute;
     bottom: bp.$pt-grid-size;
     right: bp.$pt-grid-size;
     z-index: bp.$pt-z-index-overlay;
+    display: flex;
+    flex-direction: row;
+    gap: bp.$pt-grid-size * 0.5;
+
+    // match toolbar button appearance: no box-shadow border or active-state shadow
+    & * {
+        box-shadow: unset !important;
+    }
 }
 
 $splitter-background-color: bp.$light-gray2;

From b990084b54a34f8a0a2bda76bf14f5b383928c48 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 13:23:17 +0200
Subject: [PATCH 2/3] app: Toggle docs to default size if small.

Users sometimes hide the docs by dragging them to the side, in which case clicking on the docs icon should restore to the default size instead of unintuitively doing nothing.
---
 src/app/App.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 934fcfb6..4e48da4b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -70,13 +70,57 @@ const Docs: React.FunctionComponent = () => {
     );
 };
 
+/**
+ * HACK: react-splitter-layout is an uncontrolled component, so there is no
+ * clean way to reset its size programmatically.
+ */
+function resetSplitterSize(className: string, defaultSize: number): void {
+    const container = document.querySelector<HTMLElement>(className);
+
+    if (!container) {
+        return;
+    }
+
+    const fiberKey = Object.keys(container).find((k) => k.startsWith('__reactFiber'));
+    if (!fiberKey) {
+        return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let fiber: any = (container as any)[fiberKey];
+    while (fiber && !fiber.stateNode?.handleMouseMove) {
+        fiber = fiber.return;
+    }
+
+    fiber?.stateNode?.setState({ secondaryPaneSize: defaultSize });
+}
+
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const [sideView, setSideView] = useState<SideView>('off');
     const [isDragging, setIsDragging] = useState(false);
 
-    const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
+    const defaultDocsSplit = 30;
+    const [docsSplit, setDocsSplit] = useLocalStorage(
+        'app-docs-split',
+        defaultDocsSplit,
+    );
+
+    const docsOnClick = () => {
+        if (sideView === 'docs' && docsSplit < 10) {
+            // Treat manually dragged closed like closed, so clicking will
+            // visually open it at default size.
+            setDocsSplit(defaultDocsSplit);
+            resetSplitterSize(
+                '.splitter-layout.pb-show-docs, .splitter-layout.pb-hide-docs',
+                defaultDocsSplit,
+            );
+        } else {
+            setSideView(sideView === 'docs' ? 'off' : 'docs');
+        }
+    };
+
     const [terminalSplit, setTerminalSplit] = useLocalStorage('app-terminal-split', 30);
 
     // Classes.DARK has to be applied to body element, otherwise it won't
@@ -152,11 +196,7 @@ const App: React.FunctionComponent = () => {
                                                 ? i18n.translate('docs.hide')
                                                 : i18n.translate('docs.show')
                                         }
-                                        onClick={() =>
-                                            setSideView(
-                                                sideView === 'docs' ? 'off' : 'docs',
-                                            )
-                                        }
+                                        onClick={docsOnClick}
                                     />
                                 </div>
                             </main>

From 2f372de34d5f2e44c001c808eec01785b89a1d10 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 13:51:46 +0200
Subject: [PATCH 3/3] app: Add button to toggle terminal.

Also preserve terminal state on hide.
---
 src/app/App.tsx              | 57 ++++++++++++++++++++++++++++++------
 src/app/app.scss             | 11 +++++++
 src/app/translations/en.json |  4 +++
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4e48da4b..e2c4905e 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -4,7 +4,7 @@
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
 import { Button, Classes, Spinner } from '@blueprintjs/core';
-import { Manual } from '@blueprintjs/icons';
+import { Console, Manual } from '@blueprintjs/icons';
 import React, { useEffect, useState } from 'react';
 
 type SideView = 'off' | 'docs';
@@ -107,21 +107,44 @@ const App: React.FunctionComponent = () => {
         defaultDocsSplit,
     );
 
+    const resetDocsSplit = () => {
+        setDocsSplit(defaultDocsSplit);
+        resetSplitterSize(
+            '.splitter-layout.pb-show-docs, .splitter-layout.pb-hide-docs',
+            defaultDocsSplit,
+        );
+    };
+
     const docsOnClick = () => {
         if (sideView === 'docs' && docsSplit < 10) {
-            // Treat manually dragged closed like closed, so clicking will
-            // visually open it at default size.
-            setDocsSplit(defaultDocsSplit);
-            resetSplitterSize(
-                '.splitter-layout.pb-show-docs, .splitter-layout.pb-hide-docs',
-                defaultDocsSplit,
-            );
+            resetDocsSplit();
         } else {
             setSideView(sideView === 'docs' ? 'off' : 'docs');
         }
     };
 
-    const [terminalSplit, setTerminalSplit] = useLocalStorage('app-terminal-split', 30);
+    const defaultTerminalSplit = 30;
+    const [terminalSplit, setTerminalSplit] = useLocalStorage(
+        'app-terminal-split',
+        defaultTerminalSplit,
+    );
+    const [terminalVisible, setTerminalVisible] = useState(true);
+
+    const resetTerminalSplit = () => {
+        setTerminalSplit(defaultTerminalSplit);
+        resetSplitterSize(
+            '.splitter-layout.pb-show-terminal, .splitter-layout.pb-hide-terminal',
+            defaultTerminalSplit,
+        );
+    };
+
+    const terminalOnClick = () => {
+        if (terminalVisible && terminalSplit < 10) {
+            resetTerminalSplit();
+        } else {
+            setTerminalVisible(!terminalVisible);
+        }
+    };
 
     // Classes.DARK has to be applied to body element, otherwise it won't
     // affect portals
@@ -172,6 +195,11 @@ const App: React.FunctionComponent = () => {
                     >
                         <SplitterLayout
                             vertical={true}
+                            customClassName={
+                                terminalVisible
+                                    ? 'pb-show-terminal'
+                                    : 'pb-hide-terminal'
+                            }
                             percentage={true}
                             secondaryInitialSize={terminalSplit}
                             onSecondaryPaneSizeChange={setTerminalSplit}
@@ -187,6 +215,17 @@ const App: React.FunctionComponent = () => {
                                     <Editor />
                                 </React.Suspense>
                                 <div className="pb-app-side-view-buttons">
+                                    <Button
+                                        large
+                                        intent="primary"
+                                        icon={<Console />}
+                                        title={
+                                            terminalVisible
+                                                ? i18n.translate('terminal.hide')
+                                                : i18n.translate('terminal.show')
+                                        }
+                                        onClick={terminalOnClick}
+                                    />
                                     <Button
                                         large
                                         intent="primary"
diff --git a/src/app/app.scss b/src/app/app.scss
index 4743282d..069bf2cb 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -211,3 +211,14 @@ div.pb-hide-docs > :not(.layout-pane-primary) {
     width: 0 !important;
     min-width: 0 !important;
 }
+
+// hide the terminal and resize separator
+// Same approach as docs: keep the terminal in the DOM to preserve its content,
+// but collapse the secondary pane to zero height.
+div.pb-hide-terminal > :not(.layout-pane-primary) {
+    visibility: hidden;
+    pointer-events: none;
+    flex-basis: 0 !important;
+    height: 0 !important;
+    min-height: 0 !important;
+}
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
index e5f384f1..93d96d72 100644
--- a/src/app/translations/en.json
+++ b/src/app/translations/en.json
@@ -8,5 +8,9 @@
     "docs": {
         "show": "Show documentation",
         "hide": "Hide documentation"
+    },
+    "terminal": {
+        "show": "Show terminal",
+        "hide": "Hide terminal"
     }
 }