Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

front/src/modules/ui/editable-field/hooks/useEditableField.ts

@@ -0,0 +1,41 @@
+import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+
+import { FieldContext } from '../states/FieldContext';
+import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedState';
+import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
+
+// TODO: use atoms for hotkey scopes
+export function useEditableField(parentHotkeyScope?: HotkeyScope) {
+  const [isFieldInEditMode, setIsFieldInEditMode] = useRecoilScopedState(
+    isFieldInEditModeScopedState,
+    FieldContext,
+  );
+
+  const setHotkeyScope = useSetHotkeyScope();
+
+  function closeEditableField() {
+    setIsFieldInEditMode(false);
+
+    if (parentHotkeyScope) {
+      setHotkeyScope(parentHotkeyScope.scope, parentHotkeyScope.customScopes);
+    }
+  }
+
+  function openEditableField(customHotkeyScope?: HotkeyScope) {
+    setIsFieldInEditMode(true);
+
+    if (customHotkeyScope) {
+      setHotkeyScope(customHotkeyScope.scope, customHotkeyScope.customScopes);
+    } else {
+      setHotkeyScope(EditableFieldHotkeyScope.EditableField);
+    }
+  }
+
+  return {
+    isFieldInEditMode,
+    closeEditableField,
+    openEditableField,
+  };
+}

front/src/modules/ui/editable-field/hooks/useRegisterCloseFieldHandlers.ts

@@ -0,0 +1,41 @@
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+
+import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
+
+import { useEditableField } from './useEditableField';
+
+export function useRegisterCloseFieldHandlers(
+  wrapperRef: React.RefObject<HTMLDivElement>,
+  onSubmit?: () => void,
+  onCancel?: () => void,
+) {
+  const { closeEditableField, isFieldInEditMode } = useEditableField();
+
+  useListenClickOutsideArrayOfRef([wrapperRef], () => {
+    if (isFieldInEditMode) {
+      onSubmit?.();
+      closeEditableField();
+    }
+  });
+
+  useScopedHotkeys(
+    'enter',
+    () => {
+      onSubmit?.();
+      closeEditableField();
+    },
+    EditableFieldHotkeyScope.EditableField,
+    [closeEditableField, onSubmit],
+  );
+
+  useScopedHotkeys(
+    'esc',
+    () => {
+      closeEditableField();
+      onCancel?.();
+    },
+    EditableFieldHotkeyScope.EditableField,
+    [closeEditableField, onCancel],
+  );
+}