From cc2a1865c5d22fed256b2edad484fa17febb786d Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 18 Aug 2023 19:00:59 +0200
Subject: [PATCH] perf: Do not render KeyboardShortcuts guide unless clicked

---
 .../components/KeyboardShortcutsButton.tsx    | 39 ++++++++-----------
 app/scenes/KeyboardShortcuts.tsx              |  1 +
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/app/scenes/Document/components/KeyboardShortcutsButton.tsx b/app/scenes/Document/components/KeyboardShortcutsButton.tsx
index 28f79659d..1eedf252c 100644
--- a/app/scenes/Document/components/KeyboardShortcutsButton.tsx
+++ b/app/scenes/Document/components/KeyboardShortcutsButton.tsx
@@ -1,36 +1,31 @@
+import { observer } from "mobx-react";
 import { KeyboardIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import Guide from "~/components/Guide";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
-import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
 
 function KeyboardShortcutsButton() {
   const { t } = useTranslation();
-  const [
-    keyboardShortcutsOpen,
-    handleOpenKeyboardShortcuts,
-    handleCloseKeyboardShortcuts,
-  ] = useBoolean();
+  const { dialogs } = useStores();
+
+  const handleOpenKeyboardShortcuts = () => {
+    dialogs.openGuide({
+      title: t("Keyboard shortcuts"),
+      content: <KeyboardShortcuts />,
+    });
+  };
+
   return (
-    <>
-      <Guide
-        isOpen={keyboardShortcutsOpen}
-        onRequestClose={handleCloseKeyboardShortcuts}
-        title={t("Keyboard shortcuts")}
-      >
-        <KeyboardShortcuts />
-      </Guide>
-      <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
-        <Button onClick={handleOpenKeyboardShortcuts}>
-          <KeyboardIcon />
-        </Button>
-      </Tooltip>
-    </>
+    <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
+      <Button onClick={handleOpenKeyboardShortcuts}>
+        <KeyboardIcon />
+      </Button>
+    </Tooltip>
   );
 }
 
@@ -49,4 +44,4 @@ const Button = styled(NudeButton)`
   }
 `;
 
-export default KeyboardShortcutsButton;
+export default observer(KeyboardShortcutsButton);
diff --git a/app/scenes/KeyboardShortcuts.tsx b/app/scenes/KeyboardShortcuts.tsx
index f7ae2f280..3e158e793 100644
--- a/app/scenes/KeyboardShortcuts.tsx
+++ b/app/scenes/KeyboardShortcuts.tsx
@@ -442,6 +442,7 @@ const List = styled.dl`
   overflow: hidden;
   padding: 0;
   margin: 0;
+  user-select: none;
 `;
 
 const Keys = styled.dt`