fix: Fade out navigation when editing and mouse hasn't moved (#3256)

* fix: hide header when editing

* fix: settings collab switch

* Update app/hooks/useMouseMove.ts

Co-authored-by: Tom Moor <tom.moor@gmail.com>

* fix: accept timeout parameter

* fix: don't hide observing banner

* fix: hide on focused and observing

* perf: memo

* hide References too

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/hooks/useMouseMove.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+/**
+ * Hook to check if mouse is moving in the window
+ * @param {number} [timeout] - time in ms to wait before marking the mouse as not moving
+ * @returns {boolean} true if the mouse is moving, false otherwise
+ */
+const useMouseMove = (timeout = 5000) => {
+  const [isMouseMoving, setIsMouseMoving] = React.useState(false);
+  const timeoutId = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const onMouseMove = React.useCallback(() => {
+    timeoutId.current && clearTimeout(timeoutId.current);
+    setIsMouseMoving(true);
+    timeoutId.current = setTimeout(() => setIsMouseMoving(false), timeout);
+  }, [timeout]);
+
+  React.useEffect(() => {
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [onMouseMove]);
+
+  return isMouseMoving;
+};
+
+export default useMouseMove;