Merge branch 'additional-hotkeys' into experiment-private-fork

afarago · Oct 14, 2024 · e54d5f3 · e54d5f3
2 parents c1f61dd + 88b2b77
commit e54d5f3
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 22 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -3,15 +3,18 @@
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
-import { Classes, Spinner } from '@blueprintjs/core';
-import React, { useEffect, useState } from 'react';
+import { Classes, HotkeyConfig, Spinner, useHotkeys } from '@blueprintjs/core';
+import React, { useEffect, useMemo, useState } from 'react';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import Activities from '../activities/Activities';
 import DfuWindowsDriverInstallDialog from '../firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog';
 import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
+import {
+    useSettingIsShowDocsEnabled,
+    useSettingIsShowTerminalEnabled,
+} from '../settings/hooks';
 import SponsorDialog from '../sponsor/SponsorDialog';
 import StatusBar from '../status-bar/StatusBar';
 import Toolbar from '../toolbar/Toolbar';
@@ -169,7 +172,10 @@ const Docs: React.FunctionComponent = () => {
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
-    const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
+    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
+        useSettingIsShowDocsEnabled();
+    const { isSettingShowTerminalEnabled, toggleIsSettingShowTerminalEnabled } =
+        useSettingIsShowTerminalEnabled();
     const [isDragging, setIsDragging] = useState(false);
 
     const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
@@ -201,6 +207,31 @@ const App: React.FunctionComponent = () => {
         return () => removeEventListener('keydown', listener);
     }, []);
 
+    const hotkeys = useMemo<readonly HotkeyConfig[]>(
+        () => [
+            {
+                global: true,
+                allowInInput: true,
+                combo: 'alt+F1',
+                label: 'Show or Hide the Documentation',
+                preventDefault: true,
+                stopPropagation: true,
+                onKeyDown: () => toggleIsSettingShowDocsEnabled(),
+            },
+            {
+                global: true,
+                allowInInput: true,
+                combo: 'alt+T',
+                label: 'Show or Hide the Terminal',
+                preventDefault: true,
+                stopPropagation: true,
+                onKeyDown: () => toggleIsSettingShowTerminalEnabled(),
+            },
+        ],
+        [toggleIsSettingShowDocsEnabled, toggleIsSettingShowTerminalEnabled],
+    );
+    useHotkeys(hotkeys);
+
     return (
         <div className="pb-app" onContextMenu={(e) => e.preventDefault()}>
             <div className="pb-app-body">
@@ -223,6 +254,11 @@ const App: React.FunctionComponent = () => {
                         onSecondaryPaneSizeChange={setDocsSplit}
                     >
                         <SplitterLayout
+                            customClassName={
+                                isSettingShowTerminalEnabled
+                                    ? 'pb-show-terminal'
+                                    : 'pb-hide-terminal'
+                            }
                             vertical={true}
                             percentage={true}
                             secondaryInitialSize={terminalSplit}

diff --git a/src/app/app.scss b/src/app/app.scss
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2024 The Pybricks Authors
 
 // Custom styling for the App control.
 
@@ -185,6 +185,7 @@ $dark-splitter-color-hover: color.adjust(
 
 // hide the docs and resize separator
 
+div.pb-hide-terminal > :not(.layout-pane-primary),
 div.pb-hide-docs > :not(.layout-pane-primary) {
     display: none;
 }
diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
@@ -19,6 +19,7 @@ import {
 import {
     Blank,
     Clipboard,
+    Console,
     Cross,
     Duplicate,
     Manual,
@@ -37,7 +38,10 @@ import { UUID } from '../fileStorage';
 import { useFileStoragePath } from '../fileStorage/hooks';
 import { compile } from '../mpy/actions';
 import { useSelector } from '../reducers';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
+import {
+    useSettingIsShowDocsEnabled,
+    useSettingIsShowTerminalEnabled,
+} from '../settings/hooks';
 import { isMacOS } from '../utils/os';
 import Welcome from './Welcome';
 import { editorActivateFile, editorCloseFile } from './actions';
@@ -389,6 +393,8 @@ const Editor: React.FunctionComponent = () => {
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
     const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
         useSettingIsShowDocsEnabled();
+    const { isSettingShowTerminalEnabled, toggleIsSettingShowTerminalEnabled } =
+        useSettingIsShowTerminalEnabled();
     const { isDarkMode } = useTernaryDarkMode();
 
     const i18n = useI18n();
@@ -521,18 +527,30 @@ 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 className="pb-editor-action-buttons">
+                <Button
+                    minimal
+                    large
+                    icon={<Manual />}
+                    title={
+                        isSettingShowDocsEnabled
+                            ? i18n.translate('docs.hide')
+                            : i18n.translate('docs.show')
+                    }
+                    onClick={toggleIsSettingShowDocsEnabled}
+                />
+                <Button
+                    minimal
+                    large
+                    icon={<Console />}
+                    title={
+                        isSettingShowTerminalEnabled
+                            ? i18n.translate('terminal.hide')
+                            : i18n.translate('terminal.show')
+                    }
+                    onClick={toggleIsSettingShowTerminalEnabled}
+                />
+            </div>
         </div>
     );
 };

diff --git a/src/editor/editor.scss b/src/editor/editor.scss
@@ -150,7 +150,7 @@
         }
     }
 
-    &-doc-button {
+    &-action-buttons {
         position: absolute;
         bottom: bp.$pt-grid-size;
         right: bp.$pt-grid-size;

diff --git a/src/editor/translations/en.json b/src/editor/translations/en.json
@@ -13,12 +13,16 @@
     "closeFile": { "tooltip": "Close {fileName}" },
     "contextMenu": { "label": "Editor context menu" },
     "docs": {
-        "show": "Show documentation",
-        "hide": "Hide documentation"
+        "show": "Show documentation (Alt-F1)",
+        "hide": "Hide documentation (Alt-F1)"
     },
     "welcome": {
         "label": "Welcome",
         "openProject": "Open {fileName}",
         "newProject": "Open a new project"
+    },
+    "terminal": {
+        "show": "Show terminal (Alt-T)",
+        "hide": "Hide terminal (Alt-T)"
     }
 }
diff --git a/src/settings/hooks.ts b/src/settings/hooks.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2024 The Pybricks Authors
 
 import { useCallback, useEffect } from 'react';
 import { useEffectOnce, useLocalStorage, useSessionStorage } from 'usehooks-ts';
@@ -36,3 +36,34 @@ export function useSettingIsShowDocsEnabled(): {
         toggleIsSettingShowDocsEnabled,
     };
 }
+
+/** Hook for "showTerminal" setting. */
+export function useSettingIsShowTerminalEnabled(): {
+    isSettingShowTerminalEnabled: boolean;
+    setIsSettingShowTerminalEnabled: (value: boolean) => void;
+    toggleIsSettingShowTerminalEnabled: () => void;
+} {
+    const [isLastSettingShowTerminalEnabled, setIsLastSettingShowTerminalEnabled] =
+        useLocalStorage('setting.showTerminal', window.innerHeight >= 1024);
+
+    const [isSettingShowTerminalEnabled, setIsSettingShowTerminalEnabled] =
+        useSessionStorage('setting.showTerminal', isLastSettingShowTerminalEnabled);
+
+    // Force writing to session storage since default value is not constant.
+    useEffectOnce(() => setIsSettingShowTerminalEnabled(isSettingShowTerminalEnabled));
+
+    useEffect(() => {
+        setIsLastSettingShowTerminalEnabled(isSettingShowTerminalEnabled);
+    }, [isSettingShowTerminalEnabled, setIsLastSettingShowTerminalEnabled]);
+
+    const toggleIsSettingShowTerminalEnabled = useCallback(
+        () => setIsSettingShowTerminalEnabled((x) => !x),
+        [setIsSettingShowTerminalEnabled],
+    );
+
+    return {
+        isSettingShowTerminalEnabled,
+        setIsSettingShowTerminalEnabled,
+        toggleIsSettingShowTerminalEnabled,
+    };
+}