Hide document UI while typing

app/components/DocumentContext.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
 
 export type DocumentContextValue = {
   /** The current editor instance for this document. */
@@ -16,4 +17,21 @@ const DocumentContext = React.createContext<DocumentContextValue>({
 
 export const useDocumentContext = () => React.useContext(DocumentContext);
 
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
 export default DocumentContext;

app/components/Header.tsx

@@ -21,9 +21,10 @@ type Props = {
   title: React.ReactNode;
   actions?: React.ReactNode;
   hasSidebar?: boolean;
+  className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar }: Props) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
@@ -54,6 +55,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
     <Wrapper
       align="center"
       shrink={false}
+      className={className}
       $passThrough={passThrough}
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >