app: Add close all.

Quickly close everything and code at full size.

We currently have this option in the block editor only, but it makes sense to easily unclutter everywhere.

Author: laurensvalk

src/app/App.tsx

@@ -4,13 +4,14 @@
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
 import { Button, Classes, Spinner } from '@blueprintjs/core';
-import { Console, Manual } from '@blueprintjs/icons';
+import { Console, Manual, ZoomToFit } from '@blueprintjs/icons';
 import React, { useEffect, useState } from 'react';
 
 type SideView = 'off' | 'docs';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import Activities from '../activities/Activities';
+import { Activity, useActivitiesSelectedActivity } from '../activities/hooks';
 import DfuWindowsDriverInstallDialog from '../firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog';
 import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
@@ -100,43 +101,56 @@ const App: React.FunctionComponent = () => {
     const { isDarkMode } = useTernaryDarkMode();
     const [sideView, setSideView] = useState<SideView>('off');
     const [isDragging, setIsDragging] = useState(false);
+    const [, setSelectedActivity] = useActivitiesSelectedActivity();
 
     const defaultDocsSplit = 30;
     const [docsSplit, setDocsSplit] = useLocalStorage(
         'app-docs-split',
         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 defaultTerminalSplit = 30;
+    const defaultTerminalSplit = 20;
     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 resetView = () => {
+        resetDocsSplit();
+        setSideView('off');
+        resetTerminalSplit();
+        setTerminalVisible(false);
+        setSelectedActivity(Activity.None);
+    };
+
     const terminalOnClick = () => {
         if (terminalVisible && terminalSplit < 10) {
-            // Treat manually dragged closed like closed, so clicking will
-            // visually open it at default size.
-            setTerminalSplit(defaultTerminalSplit);
-            resetSplitterSize(
-                '.splitter-layout.pb-show-terminal, .splitter-layout.pb-hide-terminal',
-                defaultTerminalSplit,
-            );
+            resetTerminalSplit();
         } else {
             setTerminalVisible(!terminalVisible);
         }
@@ -211,6 +225,13 @@ const App: React.FunctionComponent = () => {
                                     <Editor />
                                 </React.Suspense>
                                 <div className="pb-app-side-view-buttons">
+                                    <Button
+                                        large
+                                        intent="primary"
+                                        icon={<ZoomToFit />}
+                                        title={i18n.translate('closeAll')}
+                                        onClick={resetView}
+                                    />
                                     <Button
                                         large
                                         intent="primary"

src/app/translations/en.json

@@ -12,5 +12,6 @@
     "terminal": {
         "show": "Show terminal",
         "hide": "Hide terminal"
-    }
+    },
+    "closeAll": "Close panels"
 }