app: Add button to toggle terminal.

Also preserve terminal state on hide.

Author: laurensvalk

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"

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;
+}

src/app/translations/en.json

@@ -8,5 +8,9 @@
     "docs": {
         "show": "Show documentation",
         "hide": "Hide documentation"
+    },
+    "terminal": {
+        "show": "Show terminal",
+        "hide": "Hide terminal"
     }
 }