perf: Do not render KeyboardShortcuts guide unless clicked

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 [
+  const { dialogs } = useStores();
-    keyboardShortcutsOpen,
+
-    handleOpenKeyboardShortcuts,
+  const handleOpenKeyboardShortcuts = () => {
-    handleCloseKeyboardShortcuts,
+    dialogs.openGuide({
-  ] = useBoolean();
+      title: t("Keyboard shortcuts"),
+      content: <KeyboardShortcuts />,
+    });
+  };
+
   return (
-    <>
+    <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
-      <Guide
+      <Button onClick={handleOpenKeyboardShortcuts}>
-        isOpen={keyboardShortcutsOpen}
+        <KeyboardIcon />
-        onRequestClose={handleCloseKeyboardShortcuts}
+      </Button>
-        title={t("Keyboard shortcuts")}
+    </Tooltip>
-      >
-        <KeyboardShortcuts />
-      </Guide>
-      <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);

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`