Hide document UI while typing

app/scenes/Document/components/Header.tsx

@@ -20,6 +20,7 @@ import Badge from "~/components/Badge";
 import Button from "~/components/Button";
 import Collaborators from "~/components/Collaborators";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
+import { useEditingFocus } from "~/components/DocumentContext";
 import Header from "~/components/Header";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
 import Star from "~/components/Star";
@@ -88,6 +89,7 @@ function DocumentHeader({
   const { team, user } = auth;
   const isMobile = useMobile();
   const isRevision = !!revision;
+  const isEditingFocus = useEditingFocus();
 
   // We cache this value for as long as the component is mounted so that if you
   // apply a template there is still the option to replace it until the user
@@ -168,7 +170,8 @@ function DocumentHeader({
 
   if (shareId) {
     return (
-      <Header
+      <StyledHeader
+        $hidden={isEditingFocus}
         title={document.title}
         hasSidebar={!!sharedTree}
         left={
@@ -196,7 +199,8 @@ function DocumentHeader({
 
   return (
     <>
-      <Header
+      <StyledHeader
+        $hidden={isEditingFocus}
         hasSidebar
         left={
           isMobile ? (
@@ -362,6 +366,11 @@ function DocumentHeader({
   );
 }
 
+const StyledHeader = styled(Header)<{ $hidden: boolean }>`
+  transition: opacity 500ms ease-in-out;
+  ${(props) => props.$hidden && "opacity: 0;"}
+`;
+
 const ArchivedBadge = styled(Badge)`
   position: absolute;
 `;

app/scenes/Document/components/KeyboardShortcutsButton.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { useEditingFocus } from "~/components/DocumentContext";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useStores from "~/hooks/useStores";
@@ -12,6 +13,7 @@ import useStores from "~/hooks/useStores";
 function KeyboardShortcutsButton() {
   const { t } = useTranslation();
   const { dialogs } = useStores();
+  const isEditingFocus = useEditingFocus();
 
   const handleOpenKeyboardShortcuts = () => {
     dialogs.openGuide({
@@ -22,18 +24,20 @@ function KeyboardShortcutsButton() {
 
   return (
     <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
-      <Button onClick={handleOpenKeyboardShortcuts}>
+      <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
         <KeyboardIcon />
       </Button>
     </Tooltip>
   );
 }
 
-const Button = styled(NudeButton)`
+const Button = styled(NudeButton)<{ $hidden: boolean }>`
   display: none;
   position: fixed;
   bottom: 0;
   margin: 24px;
+  transition: opacity 500ms ease-in-out;
+  ${(props) => props.$hidden && "opacity: 0;"}
 
   ${breakpoint("tablet")`
     display: block;