refactor: inactivity checks keyboard and has initial state

apps/client/src/common/hooks/useFadeOutOnInactivity.tsx

@@ -2,30 +2,38 @@ import { useEffect, useState } from 'react';
 
 import { throttle } from '../utils/throttle';
 
-export const useFadeOutOnInactivity = () => {
+const inactiveTime = 3000; // 3 seconds
-  const [isMouseMoved, setIsMouseMoved] = useState(false);
+
+/**
+ * Provides whether there has been mouse movement in the page in the last <inactiveTime>
+ */
+export const useFadeOutOnInactivity = (initialState = false) => {
+  const [isUserActive, setIsUserActive] = useState(initialState);
 
   // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
-      setIsMouseMoved(true);
+      setIsUserActive(true);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
-      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+      fadeOut = setTimeout(() => setIsUserActive(false), inactiveTime);
     };
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
     document.addEventListener('mousemove', throttledShowMenu);
+    document.addEventListener('keydown', throttledShowMenu);
+
     return () => {
       document.removeEventListener('mousemove', throttledShowMenu);
+      document.removeEventListener('keydown', throttledShowMenu);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
     };
   }, []);
 
-  return isMouseMoved;
+  return isUserActive;
 };