feat(ui): disable menu buttons with locked param (#1332)

* feat: add lock icon when param `locked=true`

* chore: move `isViewLocked` logic up the component tree

* chore: remove extra container from lock icon

* chore: move fading logic into separate hook

* chore: move locked icon into separate component

* chore: rename variables

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

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import { debounce } from '../../common/utils/debounce';
+
+export const useFadeOutOnInactivity = () => {
+  const [isMouseMoved, setIsMouseMoved] = useState(false);
+
+  // show on mouse move
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setIsMouseMoved(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+    };
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
+    return () => {
+      document.removeEventListener('mousemove', debouncedShowMenu);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  return isMouseMoved;
+};