From a09383de6819b8a83f440f42607a9729b3f44880 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Wed, 25 Mar 2026 10:19:06 +0100
Subject: [PATCH 1/5] app: Drop hacks that preserved docs scroll.

The iframe automatically scrolled to 0 when CSS `display: none` is set, so we had several workarounds. Hide it instead.
---
 src/app/App.tsx  | 64 +-----------------------------------------------
 src/app/app.scss | 13 +++++++---
 2 files changed, 11 insertions(+), 66 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index ccf420f51..f99ee741a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2026 The Pybricks Authors
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
@@ -52,17 +52,7 @@ const Docs: React.FunctionComponent = () => {
 
     return (
         <iframe
-            // REVISIT: some of this could be moved to the docs repo
-            // so that it runs earlier to prevent flashing in the UI.
-            // The load event doesn't run until after the page is fully
-            // loaded and there doesn't seem to be a reasonable way to
-            // hook into the iframe to know when it has a new document.
             onLoad={(e) => {
-                // HACK: this mess restores the scroll position when
-                // the documentation iframe visibility is toggled.
-                // The iframe will be automatically scrolled to 0 when
-                // CSS `display: none` is set.
-
                 const target = e.target as HTMLIFrameElement;
                 const contentWindow = target.contentWindow;
                 if (!contentWindow) {
@@ -70,58 +60,6 @@ const Docs: React.FunctionComponent = () => {
                     return;
                 }
 
-                // the last "good" scrollY value of the iframe
-                let iframeScroll = 0;
-
-                // This bit monitors the visibility.
-                // https://stackoverflow.com/a/44670818/1976323
-                const observer = new IntersectionObserver(
-                    (entries) => {
-                        entries.forEach((entry) => {
-                            // Restore the scroll position when the iframe is
-                            // shown. Toggling the visibility prevents flashing
-                            // the contents from the top of the page before the
-                            // scroll is done.
-                            if (entry.intersectionRatio > 0) {
-                                contentWindow.scrollTo(0, iframeScroll);
-                                contentWindow.document.documentElement.style.visibility =
-                                    'visible';
-                            } else {
-                                contentWindow.document.documentElement.style.visibility =
-                                    'hidden';
-                            }
-                        });
-                    },
-                    {
-                        root: target.parentElement,
-                    },
-                );
-
-                observer.observe(target);
-
-                // Have to remove he observer, otherwise we end up with
-                // conflicting values when a new page is loaded in the iframe.
-                contentWindow.addEventListener('unload', () => {
-                    observer.unobserve(target);
-                });
-
-                // And this keeps track of the scroll position.
-                contentWindow.addEventListener('scroll', () => {
-                    if (contentWindow.scrollY !== 0) {
-                        // Record the current scroll position. If it is 0, it
-                        // could be that the iframe has been hidden or the user
-                        // scrolled there. So we have to ignore 0. But we don't
-                        // want to be one pixel off if the user really did
-                        // scroll there, so we assume that if the last scroll
-                        // is 1, then the user probably went all the way to 0.
-                        if (contentWindow.scrollY === 1) {
-                            iframeScroll = 0;
-                        } else {
-                            iframeScroll = contentWindow.scrollY;
-                        }
-                    }
-                });
-
                 // Override browser default key bindings in iframe.
                 contentWindow.document.addEventListener('keydown', (e) => {
                     // use Ctrl-D/Cmd-D to toggle docs
diff --git a/src/app/app.scss b/src/app/app.scss
index 41689dc47..f55e5598a 100644
--- 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-2026 The Pybricks Authors
 
 // Custom styling for the App control.
 
@@ -184,7 +184,14 @@ $dark-splitter-color-hover: color.adjust(
 }
 
 // hide the docs and resize separator
-
+// Use visibility rather than display:none so the iframe keeps its layout and
+// scroll position when the docs panel is toggled.
+// Collapse the secondary pane and splitter to zero width so they don't
+// consume space, while keeping the iframe in the DOM.
 div.pb-hide-docs > :not(.layout-pane-primary) {
-    display: none;
+    visibility: hidden;
+    pointer-events: none;
+    flex-basis: 0 !important;
+    width: 0 !important;
+    min-width: 0 !important;
 }

From 2884825f4c5ce2634dcfb993c0b2422da2560b81 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Wed, 25 Mar 2026 10:22:17 +0100
Subject: [PATCH 2/5] app: Drop persistent docs position.

This was very complicated, particularly between versions and tabs and windows, for something that offers only a minor convenience.

This also makes it simpler to navigate to a particular page interactively by just setting the iframe URL, which is useful for interactive help from the block editor.
---
 src/app/App.tsx  |  7 ++----
 src/app/hooks.ts | 55 ------------------------------------------------
 2 files changed, 2 insertions(+), 60 deletions(-)
 delete mode 100644 src/app/hooks.ts

diff --git a/src/app/App.tsx b/src/app/App.tsx
index f99ee741a..59929816f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -17,7 +17,7 @@ import StatusBar from '../status-bar/StatusBar';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
-import { useAppLastDocsPageSetting } from './hooks';
+import { docsDefaultPage } from './constants';
 import { useI18n } from './i18n';
 
 const Editor = React.lazy(async () => {
@@ -48,7 +48,6 @@ const Terminal = React.lazy(async () => {
 
 const Docs: React.FunctionComponent = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
-    const { initialDocsPage, setLastDocsPage } = useAppLastDocsPageSetting();
 
     return (
         <iframe
@@ -80,10 +79,8 @@ const Docs: React.FunctionComponent = () => {
                 if (document.body.classList.contains(Classes.DARK)) {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
-
-                setLastDocsPage(contentWindow.location.href);
             }}
-            src={initialDocsPage}
+            src={docsDefaultPage}
             allowFullScreen={true}
             width="100%"
             height="100%"
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
deleted file mode 100644
index faddd2da4..000000000
--- a/src/app/hooks.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { useEffect, useMemo } from 'react';
-import { useLocalStorage, useSessionStorage } from 'usehooks-ts';
-import { docsDefaultPage, docsPathPrefix, httpServerHeadersVersion } from './constants';
-
-const defaultPage = `${docsDefaultPage}?v$${httpServerHeadersVersion}`;
-
-export function useAppLastDocsPageSetting() {
-    const key = 'app.setting.lastDocsPage';
-
-    // last visited page is stored in local storage so that new windows get the
-    // last visited page
-    const [lastPageGlobalSetting, setLastPageGlobalSetting] = useLocalStorage(
-        key,
-        defaultPage,
-    );
-
-    // it is also stored in session storage in case two windows are open at the
-    // same time so that one window doesn't affect the other
-    const [lastPageSessionSetting, setLastPageSessionSetting] = useSessionStorage(
-        key,
-        lastPageGlobalSetting,
-    );
-
-    // mirror session storage value to local storage
-    useEffect(() => {
-        setLastPageGlobalSetting(lastPageSessionSetting);
-    }, [lastPageSessionSetting, setLastPageGlobalSetting]);
-
-    // the way the docs control works, we only provide the initial page, then
-    // it manages navigation after that, so we only want the initial of this
-    // value when the app first starts
-    const initialDocsPage = useMemo(
-        () => {
-            try {
-                const url = new URL(lastPageSessionSetting);
-
-                // in case someone is hacking the storage value directly
-                if (!url.pathname.startsWith(`/${docsPathPrefix}`)) {
-                    throw new Error('invalid or outdated path');
-                }
-
-                return lastPageSessionSetting;
-            } catch {
-                return defaultPage;
-            }
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [], // no deps so that we only get the initial value
-    );
-
-    return { initialDocsPage, setLastDocsPage: setLastPageSessionSetting };
-}

From c3a703f3b3f6decc3af449cf4fd194d87b6cd8b4 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 10:50:48 +0200
Subject: [PATCH 3/5] app: Drop doc toggle shortkey.

This was an undocumented feature that gets in the way of other shortcuts, and doesn't extend well to the sideview being used for other things in future commits.
---
 src/app/App.tsx       | 20 --------------------
 src/editor/Editor.tsx | 13 +------------
 2 files changed, 1 insertion(+), 32 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 59929816f..c1bc7fe9f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -16,7 +16,6 @@ import SponsorDialog from '../sponsor/SponsorDialog';
 import StatusBar from '../status-bar/StatusBar';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
-import { isMacOS } from '../utils/os';
 import { docsDefaultPage } from './constants';
 import { useI18n } from './i18n';
 
@@ -47,8 +46,6 @@ const Terminal = React.lazy(async () => {
 });
 
 const Docs: React.FunctionComponent = () => {
-    const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
-
     return (
         <iframe
             onLoad={(e) => {
@@ -59,23 +56,6 @@ const Docs: React.FunctionComponent = () => {
                     return;
                 }
 
-                // Override browser default key bindings in iframe.
-                contentWindow.document.addEventListener('keydown', (e) => {
-                    // use Ctrl-D/Cmd-D to toggle docs
-                    if (
-                        (isMacOS()
-                            ? e.metaKey && !e.ctrlKey
-                            : e.ctrlKey && !e.metaKey) &&
-                        !e.altKey &&
-                        e.key === 'd'
-                    ) {
-                        e.preventDefault();
-                        // since the iframe is only visible when docs are shown
-                        // the only action is to hide the docs
-                        setIsSettingShowDocsEnabled(false);
-                    }
-                });
-
                 if (document.body.classList.contains(Classes.DARK)) {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index 3f6a438ad..12b12c271 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2026 The Pybricks Authors
 
 import './editor.scss';
 import {
@@ -409,17 +409,6 @@ const Editor: React.FunctionComponent = () => {
         [i18n],
     );
 
-    useEditorAction(
-        editor,
-        () => ({
-            id: 'pybricks.action.toggleDocs',
-            label: i18n.translate('toggleDocs'),
-            run: () => toggleIsSettingShowDocsEnabled(),
-            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
-        }),
-        [i18n, toggleIsSettingShowDocsEnabled],
-    );
-
     useEditorAction(
         editor,
         () => ({

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 4/5] 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 c1bc7fe9f..55fa3753c 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 f55e5598a..97c7318fa 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 b7a1925b9..e5f384f17 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 12b12c271..9f622ccb3 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 9142f662f..aa12a1ee7 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 28d4fa967..795943c35 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" }
 }

From 38a71238f9557aa5a6b5caf7a869831937d84371 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Mon, 30 Mar 2026 11:06:21 +0200
Subject: [PATCH 5/5] app: Replace local/session docs toggle with state.

Having this persist across sessions is not necessary and a bit overly complicated when we add more sideview states such as camera (which should not stay on by default).
---
 src/app/App.test.tsx  | 12 ++----------
 src/app/App.tsx       | 16 ++++++++++------
 src/settings/hooks.ts | 38 --------------------------------------
 3 files changed, 12 insertions(+), 54 deletions(-)
 delete mode 100644 src/settings/hooks.ts

diff --git a/src/app/App.test.tsx b/src/app/App.test.tsx
index a4123493d..d86e7b32f 100644
--- a/src/app/App.test.tsx
+++ b/src/app/App.test.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2023 The Pybricks Authors
+// Copyright (c) 2021-2026 The Pybricks Authors
 
 import { cleanup } from '@testing-library/react';
 import React from 'react';
@@ -42,15 +42,7 @@ it.each([false, true])('should render', (darkMode) => {
 });
 
 describe('documentation pane', () => {
-    it('should show by default on large screens', () => {
-        jest.spyOn(window, 'innerWidth', 'get').mockReturnValue(1024);
-        testRender(<App />);
-        expect(document.querySelector('.pb-show-docs')).not.toBeNull();
-        expect(document.querySelector('.pb-hide-docs')).toBeNull();
-    });
-
-    it('should hide by default on small screens', () => {
-        jest.spyOn(window, 'innerWidth', 'get').mockReturnValue(800);
+    it('should hide by default', () => {
         testRender(<App />);
         expect(document.querySelector('.pb-show-docs')).toBeNull();
         expect(document.querySelector('.pb-hide-docs')).not.toBeNull();
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 55fa3753c..fbe67409c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -6,13 +6,14 @@ import './app.scss';
 import { Button, Classes, Spinner } from '@blueprintjs/core';
 import { Manual } 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 DfuWindowsDriverInstallDialog from '../firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog';
 import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import SponsorDialog from '../sponsor/SponsorDialog';
 import StatusBar from '../status-bar/StatusBar';
 import Toolbar from '../toolbar/Toolbar';
@@ -72,8 +73,7 @@ const Docs: React.FunctionComponent = () => {
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
-    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
-        useSettingIsShowDocsEnabled();
+    const [sideView, setSideView] = useState<SideView>('off');
     const [isDragging, setIsDragging] = useState(false);
 
     const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
@@ -118,7 +118,7 @@ const App: React.FunctionComponent = () => {
                 <div className="pb-app-main" style={{ position: 'relative' }}>
                     <SplitterLayout
                         customClassName={
-                            isSettingShowDocsEnabled ? 'pb-show-docs' : 'pb-hide-docs'
+                            sideView === 'docs' ? 'pb-show-docs' : 'pb-hide-docs'
                         }
                         onDragStart={(): void => setIsDragging(true)}
                         onDragEnd={(): void => setIsDragging(false)}
@@ -148,11 +148,15 @@ const App: React.FunctionComponent = () => {
                                     large
                                     icon={<Manual />}
                                     title={
-                                        isSettingShowDocsEnabled
+                                        sideView === 'docs'
                                             ? i18n.translate('docs.hide')
                                             : i18n.translate('docs.show')
                                     }
-                                    onClick={toggleIsSettingShowDocsEnabled}
+                                    onClick={() =>
+                                        setSideView(
+                                            sideView === 'docs' ? 'off' : 'docs',
+                                        )
+                                    }
                                 />
                             </main>
                             <aside
diff --git a/src/settings/hooks.ts b/src/settings/hooks.ts
deleted file mode 100644
index 4c518c9a4..000000000
--- a/src/settings/hooks.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { useCallback, useEffect } from 'react';
-import { useEffectOnce, useLocalStorage, useSessionStorage } from 'usehooks-ts';
-
-/** Hook for "showDocs" setting. */
-export function useSettingIsShowDocsEnabled(): {
-    isSettingShowDocsEnabled: boolean;
-    setIsSettingShowDocsEnabled: (value: boolean) => void;
-    toggleIsSettingShowDocsEnabled: () => void;
-} {
-    const [isLastSettingShowDocsEnabled, setIsLastSettingShowDocsEnabled] =
-        useLocalStorage('setting.showDocs', window.innerWidth >= 1024);
-
-    const [isSettingShowDocsEnabled, setIsSettingShowDocsEnabled] = useSessionStorage(
-        'setting.showDocs',
-        isLastSettingShowDocsEnabled,
-    );
-
-    // Force writing to session storage since default value is not constant.
-    useEffectOnce(() => setIsSettingShowDocsEnabled(isSettingShowDocsEnabled));
-
-    useEffect(() => {
-        setIsLastSettingShowDocsEnabled(isSettingShowDocsEnabled);
-    }, [isSettingShowDocsEnabled, setIsLastSettingShowDocsEnabled]);
-
-    const toggleIsSettingShowDocsEnabled = useCallback(
-        () => setIsSettingShowDocsEnabled((x) => !x),
-        [setIsSettingShowDocsEnabled],
-    );
-
-    return {
-        isSettingShowDocsEnabled,
-        setIsSettingShowDocsEnabled,
-        toggleIsSettingShowDocsEnabled,
-    };
-}