Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/board/card-field/components/BoardCardEditableField.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
 

front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDate.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 
-import { InplaceInputDateDisplayMode } from '@/ui/display/component/InplaceInputDateDisplayMode';
+import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
 import { debounce } from '~/utils/debounce';
 
 import { BoardCardEditableField } from './BoardCardEditableField';
@@ -33,7 +33,7 @@ export function BoardCardEditableFieldDate({
           }}
         />
       }
-      nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
+      nonEditModeContent={<DateInputDisplay value={value} />}
     ></BoardCardEditableField>
   );
 }

front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDateEditMode.tsx

@@ -1,4 +1,4 @@
-import { InplaceInputDate } from '@/ui/inplace-input/components/InplaceInputDate';
+import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit';
 
 type OwnProps = {
   value: Date;
@@ -13,5 +13,5 @@ export function BoardCardEditableFieldDateEditMode({
     onChange(newDate);
   }
 
-  return <InplaceInputDate value={value} onChange={handleDateChange} />;
+  return <DateInputEdit value={value} onChange={handleDateChange} />;
 }

front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
-import { overlayBackground } from '@/ui/themes/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope';
 

front/src/modules/ui/board/card-field/components/BoardCardEditableFieldInternal.tsx

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useBoardCardField } from '../hooks/useBoardCardField';
 import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope';

front/src/modules/ui/board/card-field/components/BoardCardEditableFieldText.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useMemo, useState } from 'react';
 
-import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode';
-import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
+import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
+import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
 import { debounce } from '~/utils/debounce';
 
 import { BoardCardEditableField } from './BoardCardEditableField';
@@ -40,9 +40,7 @@ export function BoardCardEditableFieldText({
           }}
         />
       }
-      nonEditModeContent={
-        <InplaceInputTextDisplayMode>{value}</InplaceInputTextDisplayMode>
-      }
+      nonEditModeContent={<TextInputDisplay>{value}</TextInputDisplay>}
     ></BoardCardEditableField>
   );
 }

front/src/modules/ui/board/card-field/hooks/useBoardCardField.ts

@@ -1,4 +1,4 @@
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
 import { isBoardCardFieldInEditModeScopedState } from '../states/isBoardCardFieldInEditModeScopedState';

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { Tag } from '@/ui/tag/components/Tag';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import { textInputStyle } from '@/ui/themes/effects';
+import { textInputStyle } from '@/ui/theme/constants/effects';
 import { debounce } from '~/utils/debounce';
 
 export const StyledEditTitleContainer = styled.div`

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -2,12 +2,12 @@ import { useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { IconPencil } from '@tabler/icons-react';
 
-import { icon } from '@/ui//themes/icon';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
+import { icon } from '@/ui/theme/constants/icon';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
 

front/src/modules/ui/button/components/Button.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import { SoonPill } from '@/ui/pill/components/SoonPill';
-import { rgba } from '@/ui/themes/colors';
+import { rgba } from '@/ui/theme/constants/colors';
 
 export enum ButtonSize {
   Medium = 'medium',

front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx

@@ -8,9 +8,9 @@ import {
 } from 'framer-motion';
 
 import { Checkmark } from '@/ui/checkmark/components/Checkmark';
-import DarkNoise from '@/ui/themes/assets/dark-noise.jpg';
-import LightNoise from '@/ui/themes/assets/light-noise.png';
-import { grayScale } from '@/ui/themes/colors';
+import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
+import LightNoise from '@/ui/theme/assets/light-noise.png';
+import { grayScale } from '@/ui/theme/constants/colors';
 import { ColorScheme } from '~/generated/graphql';
 
 const StyledColorSchemeBackground = styled.div<

front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
 
 import { DropdownMenuItem } from './DropdownMenuItem';
 

front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { hoverBackground } from '@/ui/themes/effects';
+import { hoverBackground } from '@/ui/theme/constants/effects';
 
 export const DropdownMenuItem = styled.li`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};

front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import styled from '@emotion/styled';
 
-import { textInputStyle } from '@/ui/themes/effects';
+import { textInputStyle } from '@/ui/theme/constants/effects';
 
 export const DropdownMenuSearchContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};

front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconCheck } from '@/ui/icon/index';
-import { hoverBackground } from '@/ui/themes/effects';
+import { hoverBackground } from '@/ui/theme/constants/effects';
 
 import { DropdownMenuItem } from './DropdownMenuItem';
 

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconPlus } from '@/ui/icon/index';
+import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { Avatar } from '@/users/components/Avatar';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenu } from '../DropdownMenu';
 import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
 import { DropdownMenuItem } from '../DropdownMenuItem';

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useBindFieldHotkeyScope } from '../hooks/useBindFieldHotkeyScope';
 import { useEditableField } from '../hooks/useEditableField';

front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/button/components/IconButton';
 import { IconPencil } from '@/ui/icon';
-import { overlayBackground } from '@/ui/themes/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';
 
 import { useEditableField } from '../hooks/useEditableField';
 

front/src/modules/ui/editable-field/components/EditableFieldEntityText.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconMap } from '@/ui/icon';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
 type OwnProps = {
@@ -48,7 +48,7 @@ export function CompanyEditableFieldAddress({ company }: OwnProps) {
         onCancel={handleCancel}
         iconLabel={<IconMap />}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={'Address'}
             autoFocus
             value={internalValue}

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

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useRecoilCallback } from 'recoil';
 
-import { currentHotkeyScopeState } from '@/ui/hotkey/states/internal/currentHotkeyScopeState';
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
-import { isSameHotkeyScope } from '@/ui/hotkey/utils/isSameHotkeyScope';
-import { useContextScopeId } from '@/ui/recoil-scope/hooks/useContextScopeId';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-import { getSnapshotScopedState } from '@/ui/recoil-scope/utils/getSnapshotScopedState';
-import { getSnapshotState } from '@/ui/recoil-scope/utils/getSnapshotState';
+import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { isSameHotkeyScope } from '@/ui/utilities/hotkey/utils/isSameHotkeyScope';
+import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { getSnapshotScopedState } from '@/ui/utilities/recoil-scope/utils/getSnapshotScopedState';
+import { getSnapshotState } from '@/ui/utilities/recoil-scope/utils/getSnapshotState';
 
 import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
 import { FieldContext } from '../states/FieldContext';

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

@@ -1,5 +1,5 @@
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
 import { FieldContext } from '../states/FieldContext';

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

@@ -1,5 +1,5 @@
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 

front/src/modules/ui/editable-field/states/customEditHotkeyScopeForFieldScopedState.ts

@@ -1,6 +1,6 @@
 import { atomFamily } from 'recoil';
 
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 export const customEditHotkeyScopeForFieldScopedState = atomFamily<
   HotkeyScope | null,

front/src/modules/ui/editable-field/states/parentHotkeyScopeForFieldScopedState.ts

@@ -1,6 +1,6 @@
 import { atomFamily } from 'recoil';
 
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 export const parentHotkeyScopeForFieldScopedState = atomFamily<
   HotkeyScope | null,

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { InplaceInputDateDisplayMode } from '@/ui/display/component/InplaceInputDateDisplayMode';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { parseDate } from '~/utils/date-utils';
 
 import { EditableFieldEditModeDate } from './EditableFieldEditModeDate';
@@ -57,9 +57,7 @@ export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
             }}
           />
         }
-        displayModeContent={
-          <InplaceInputDateDisplayMode value={internalDateValue} />
-        }
+        displayModeContent={<DateInputDisplay value={internalDateValue} />}
         isDisplayModeContentEmpty={!internalValue}
       />
     </RecoilScope>

front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx

@@ -1,5 +1,5 @@
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
-import { InplaceInputDate } from '@/ui/inplace-input/components/InplaceInputDate';
+import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { parseDate } from '~/utils/date-utils';
 
 import { useEditableField } from '../../hooks/useEditableField';
@@ -19,7 +19,7 @@ export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
   }
 
   return (
-    <InplaceInputDate
+    <DateInputEdit
       value={parseDate(value).toJSDate()}
       onChange={(newDate: Date) => {
         handleChange(newDate.toISOString());

front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   canBeCastAsIntegerOrNull,
   castAsIntegerOrNull,
@@ -56,7 +56,7 @@ export function NumberEditableField({
         onCancel={handleCancel}
         iconLabel={icon}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={placeholder ?? ''}
             autoFocus
             value={internalValue ?? ''}

front/src/modules/ui/editable-field/variants/components/PhoneEditableField.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 
-import { InplaceInputPhoneDisplayMode } from '@/ui/display/component/InplaceInputPhoneDisplayMode';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 type OwnProps = {
   icon?: React.ReactNode;
@@ -46,7 +46,7 @@ export function PhoneEditableField({
         onCancel={handleCancel}
         iconLabel={icon}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={placeholder ?? ''}
             autoFocus
             value={internalValue ?? ''}
@@ -55,9 +55,7 @@ export function PhoneEditableField({
             }}
           />
         }
-        displayModeContent={
-          <InplaceInputPhoneDisplayMode value={internalValue ?? ''} />
-        }
+        displayModeContent={<PhoneInputDisplay value={internalValue ?? ''} />}
         isDisplayModeContentEmpty={!(internalValue !== '')}
         useEditButton
       />

front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
 
@@ -47,7 +47,7 @@ export function TextEditableField({
         onCancel={handleCancel}
         iconLabel={icon}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={placeholder ?? ''}
             autoFocus
             value={internalValue ?? ''}

front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { IconChevronDown } from '@/ui/icon/index';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 

front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-import { useListenClickOutside } from '../../hooks/useListenClickOutside';
 
 export const StyledDropdownMenuContainer = styled.ul`
   position: absolute;

front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx

@@ -6,8 +6,8 @@ import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/ui/filter-n-sort/states/isFilterDropdownOperandSelectUnfoldedScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 

front/src/modules/ui/filter-n-sort/components/FilterDropdownDateSearchInput.tsx

@@ -4,8 +4,8 @@ import styled from '@emotion/styled';
 import { useUpsertFilter } from '@/ui/filter-n-sort/hooks/useUpsertFilter';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
-import DatePicker from '@/ui/input/components/DatePicker';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import DatePicker from '@/ui/input/date/components/DatePicker';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export function FilterDropdownDateSearchInput({
   context,

front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx

@@ -4,7 +4,7 @@ import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch'
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export function FilterDropdownEntitySearchInput({
   context,

front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect.tsx

@@ -6,10 +6,10 @@ import { useUpsertFilter } from '@/ui/filter-n-sort/hooks/useUpsertFilter';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-import { EntitiesForMultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect';
-import { SingleEntitySelectBase } from '@/ui/relation-picker/components/SingleEntitySelectBase';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
+import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export function FilterDropdownEntitySearchSelect({
   entitiesForSelect,

front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySelect.tsx

@@ -1,8 +1,8 @@
 import { Context } from 'react';
 
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
 

front/src/modules/ui/filter-n-sort/components/FilterDropdownFilterSelect.tsx

@@ -2,10 +2,10 @@ import { Context } from 'react';
 
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';

front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, Context } from 'react';
 
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { useRemoveFilter } from '../hooks/useRemoveFilter';
 import { useUpsertFilter } from '../hooks/useUpsertFilter';

front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandButton.tsx

@@ -1,6 +1,6 @@
 import { Context } from 'react';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
 import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';

front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx

@@ -2,7 +2,7 @@ import { Context } from 'react';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
 import { useUpsertFilter } from '../hooks/useUpsertFilter';

front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, Context } from 'react';
 
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
 import { useRemoveFilter } from '../hooks/useRemoveFilter';

front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icon/index';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { useRemoveFilter } from '../hooks/useRemoveFilter';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';

front/src/modules/ui/filter-n-sort/hooks/useFilterCurrentlyEdited.ts

@@ -1,6 +1,6 @@
 import { Context, useMemo } from 'react';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';

front/src/modules/ui/filter-n-sort/hooks/useRemoveFilter.ts

@@ -1,6 +1,6 @@
 import { Context } from 'react';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { filtersScopedState } from '../states/filtersScopedState';
 

front/src/modules/ui/filter-n-sort/hooks/useUpsertFilter.ts

@@ -1,7 +1,7 @@
 import { Context } from 'react';
 import { produce } from 'immer';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { filtersScopedState } from '../states/filtersScopedState';
 import { Filter } from '../types/Filter';

front/src/modules/ui/inplace-input/components/InplaceInputDoubleTextCellEditMode.tsx

@@ -1,79 +0,0 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import styled from '@emotion/styled';
-
-import { textInputStyle } from '@/ui/themes/effects';
-
-import { useRegisterCloseCellHandlers } from '../../table/editable-cell/hooks/useRegisterCloseCellHandlers';
-
-import { StyledDoubleTextContainer } from './InplaceInputDoubleText';
-
-export const StyledInput = styled.input`
-  margin: 0;
-  width: 100%;
-  ${textInputStyle}
-`;
-
-type OwnProps = {
-  firstValuePlaceholder?: string;
-  secondValuePlaceholder?: string;
-  firstValue: string;
-  secondValue: string;
-  onSubmit: (newFirstValue: string, newSecondValue: string) => void;
-};
-
-export function InplaceInputDoubleTextCellEditMode({
-  firstValue,
-  secondValue,
-  firstValuePlaceholder,
-  secondValuePlaceholder,
-  onSubmit,
-}: OwnProps) {
-  const [internalFirstValue, setInternalFirstValue] = useState(firstValue);
-  const [internalSecondValue, setInternalSecondValue] = useState(secondValue);
-
-  const wrapperRef = useRef(null);
-
-  function handleSubmit() {
-    onSubmit(internalFirstValue, internalSecondValue);
-  }
-
-  function handleCancel() {
-    setInternalFirstValue(firstValue);
-    setInternalSecondValue(secondValue);
-  }
-
-  function handleFirstValueChange(event: ChangeEvent<HTMLInputElement>) {
-    setInternalFirstValue(event.target.value);
-  }
-
-  function handleSecondValueChange(event: ChangeEvent<HTMLInputElement>) {
-    setInternalSecondValue(event.target.value);
-  }
-
-  useEffect(() => {
-    setInternalFirstValue(firstValue);
-  }, [firstValue]);
-
-  useEffect(() => {
-    setInternalSecondValue(secondValue);
-  }, [secondValue]);
-
-  useRegisterCloseCellHandlers(wrapperRef, handleSubmit, handleCancel);
-
-  return (
-    <StyledDoubleTextContainer ref={wrapperRef}>
-      <StyledInput
-        autoFocus
-        placeholder={firstValuePlaceholder}
-        value={internalFirstValue}
-        onChange={handleFirstValueChange}
-      />
-      <StyledInput
-        autoComplete="off"
-        placeholder={secondValuePlaceholder}
-        value={internalSecondValue}
-        onChange={handleSecondValueChange}
-      />
-    </StyledDoubleTextContainer>
-  );
-}

front/src/modules/ui/input/date/components/DateInputDisplay.tsx

@@ -4,6 +4,6 @@ type OwnProps = {
   value: Date | string | null;
 };
 
-export function InplaceInputDateDisplayMode({ value }: OwnProps) {
+export function DateInputDisplay({ value }: OwnProps) {
   return <div>{value && formatToHumanReadableDate(value)}</div>;
 }

front/src/modules/ui/input/date/components/DateInputEdit.tsx

@@ -1,10 +1,9 @@
 import { forwardRef } from 'react';
 import styled from '@emotion/styled';
 
-import DatePicker from '@/ui/input/components/DatePicker';
 import { formatToHumanReadableDate } from '~/utils';
 
-import { InplaceInputContainer } from './InplaceInputContainer';
+import DatePicker from './DatePicker';
 
 export type StyledCalendarContainerProps = {
   editModeHorizontalAlign?: 'left' | 'right';
@@ -52,15 +51,13 @@ type OwnProps = {
   onChange: (newDate: Date) => void;
 };
 
-export function InplaceInputDate({ onChange, value }: OwnProps) {
+export function DateInputEdit({ onChange, value }: OwnProps) {
   return (
-    <InplaceInputContainer>
-      <DatePicker
-        date={value ?? new Date()}
-        onChangeHandler={onChange}
-        customInput={<DateDisplay />}
-        customCalendarContainer={DatePickerContainer}
-      />
-    </InplaceInputContainer>
+    <DatePicker
+      date={value ?? new Date()}
+      onChangeHandler={onChange}
+      customInput={<DateDisplay />}
+      customCalendarContainer={DatePickerContainer}
+    />
   );
 }

front/src/modules/ui/input/date/components/DatePicker.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, useState } from 'react';
 import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
 import styled from '@emotion/styled';
 
-import { overlayBackground } from '@/ui/themes/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';
 
 import 'react-datepicker/dist/react-datepicker.css';
 

front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
-import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
+import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
 
 type OwnProps = {
   firstValue: string;
@@ -24,7 +24,7 @@ const StyledNameInput = styled(StyledInput)`
   width: auto;
 `;
 
-export function InplaceInputDoubleText({
+export function DoubleTextInputEdit({
   firstValue,
   secondValue,
   firstValuePlaceholder,

front/src/modules/ui/input/phone/components/PhoneInputDisplay.tsx

@@ -18,7 +18,7 @@ type OwnProps = {
   value: string | null;
 };
 
-export function InplaceInputPhoneDisplayMode({ value }: OwnProps) {
+export function PhoneInputDisplay({ value }: OwnProps) {
   return value && isValidPhoneNumber(value) ? (
     <StyledRawLink
       href={parsePhoneNumber(value, 'FR')?.getURI()}

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -7,7 +7,7 @@ import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -6,8 +6,8 @@ import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
 import { IconPlus } from '@/ui/icon';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -4,12 +4,12 @@ import { Key } from 'ts-key-enum';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
 import { isDefined } from '~/utils/isDefined';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
-import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
 import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts

@@ -1,8 +1,8 @@
 import scrollIntoView from 'scroll-into-view';
 import { Key } from 'ts-key-enum';
 
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
 import { EntityForSelect } from '../types/EntityForSelect';

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts

@@ -1,6 +1,6 @@
 import debounce from 'lodash.debounce';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
 import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';

front/src/modules/ui/input/text/components/TextInput.tsx

@@ -9,10 +9,10 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { IconAlertCircle } from '@/ui/icon';
 import { IconEye, IconEyeOff } from '@/ui/icon/index';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
 

front/src/modules/ui/input/text/components/TextInputContainer.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import { overlayBackground } from '@/ui/themes/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';
 
-export const InplaceInputContainer = styled.div`
+export const TextInputContainer = styled.div`
   align-items: center;
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};

front/src/modules/ui/input/text/components/TextInputDisplay.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const InplaceInputTextDisplayMode = styled.div`
+export const TextInputDisplay = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

front/src/modules/ui/input/text/components/TextInputEdit.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import { textInputStyle } from '@/ui/themes/effects';
+import { textInputStyle } from '@/ui/theme/constants/effects';
 
-import { InplaceInputContainer } from './InplaceInputContainer';
+import { TextInputContainer } from './TextInputContainer';
 
 export const InplaceInputTextInput = styled.input`
   margin: 0;
@@ -17,14 +17,14 @@ type OwnProps = {
   autoFocus?: boolean;
 };
 
-export function InplaceInputText({
+export function TextInputEdit({
   placeholder,
   value,
   onChange,
   autoFocus,
 }: OwnProps) {
   return (
-    <InplaceInputContainer>
+    <TextInputContainer>
       <InplaceInputTextInput
         autoComplete="off"
         autoFocus={autoFocus}
@@ -32,6 +32,6 @@ export function InplaceInputText({
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
       />
-    </InplaceInputContainer>
+    </TextInputContainer>
   );
 }

front/src/modules/ui/layout/components/DefaultLayout.tsx

@@ -7,7 +7,7 @@ import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { NavbarAnimatedContainer } from '@/ui/navbar/components/NavbarAnimatedContainer';
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { AppNavbar } from '~/AppNavbar';
 import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode';
 

front/src/modules/ui/layout/components/PagePanel.tsx

@@ -12,6 +12,6 @@ const StyledPanel = styled.div`
   width: 100%;
 `;
 
-export function Panel({ children }: { children: React.ReactNode }) {
+export function PagePanel({ children }: { children: React.ReactNode }) {
   return <StyledPanel>{children}</StyledPanel>;
 }

front/src/modules/ui/layout/components/RightDrawerContainer.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { RightDrawer } from '@/ui/right-drawer/components/RightDrawer';
 
-import { Panel } from './Panel';
+import { PagePanel } from './PagePanel';
 
 type OwnProps = {
   children: JSX.Element | JSX.Element[];
@@ -37,7 +37,7 @@ export function RightDrawerContainer({ children, topMargin }: OwnProps) {
   return (
     <StyledMainContainer topMargin={topMargin ?? 0}>
       <StyledLeftContainer>
-        <Panel>{children}</Panel>
+        <PagePanel>{children}</PagePanel>
       </StyledLeftContainer>
       <RightDrawer />
     </StyledMainContainer>

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const ShowPageContainer = styled.div`
   display: flex;

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '../../hooks/useIsMobile';
-import { TopBar } from '../top-bar/components/TopBar';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { PageBar } from '../page-bar/components/PageBar';
 
 import { RightDrawerContainer } from './RightDrawerContainer';
 
@@ -23,7 +24,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <TopBar title={title} icon={icon} />}
+      {isMobile && <PageBar title={title} icon={icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

front/src/modules/ui/layout/components/WithTopBarContainer.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-import { TopBarHotkeys } from '../top-bar/components/TableTopBarHotkeys';
-import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/components/TopBar';
+import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar';
+import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys';
 
 import { RightDrawerContainer } from './RightDrawerContainer';
 
@@ -29,14 +29,14 @@ export function WithTopBarContainer({
 }: OwnProps) {
   return (
     <StyledContainer>
-      <TopBarHotkeys onAddButtonClick={onAddButtonClick} />
-      <TopBar
+      <PageBarHotkeys onAddButtonClick={onAddButtonClick} />
+      <PageBar
         title={title}
         hasBackButton={hasBackButton}
         icon={icon}
         onAddButtonClick={onAddButtonClick}
       />
-      <RightDrawerContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
+      <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
         {children}
       </RightDrawerContainer>
     </StyledContainer>

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

@@ -4,15 +4,15 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { navbarIconSize } from '../../../navbar/constants';
 import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
 import { isNavbarOpenedState } from '../../states/isNavbarOpenedState';
 
-export const TOP_BAR_MIN_HEIGHT = 40;
+export const PAGE_BAR_MIN_HEIGHT = 40;
 
 const TopBarContainer = styled.div`
   align-items: center;
@@ -22,7 +22,7 @@ const TopBarContainer = styled.div`
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.lg};
   justify-content: space-between;
-  min-height: ${TOP_BAR_MIN_HEIGHT}px;
+  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
   padding: ${({ theme }) => theme.spacing(2)};
   padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
@@ -65,7 +65,7 @@ type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function TopBar({
+export function PageBar({
   title,
   hasBackButton,
   icon,

front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx

@@ -1,11 +1,11 @@
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function TopBarHotkeys({ onAddButtonClick }: OwnProps) {
+export function PageBarHotkeys({ onAddButtonClick }: OwnProps) {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);

front/src/modules/ui/layout/page-bar/components/PageTitle.tsx

@@ -17,7 +17,7 @@ type OwnProps = {
   title: string;
 };
 
-export function TopTitle({ title }: OwnProps) {
+export function PageTitle({ title }: OwnProps) {
   return (
     <TitleAndCollapseContainer>
       <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const ShowPageLeftContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};

front/src/modules/ui/layout/states/isNavbarOpenedState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
 const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
 

front/src/modules/ui/modal/components/Modal.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import {
   ClickOutsideMode,
   useListenClickOutside,
-} from '@/ui/hooks/useListenClickOutside';
+} from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 
 const StyledContainer = styled.div`
   align-items: center;

front/src/modules/ui/navbar/components/NavCollapseButton.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
 } from '@/ui/icon';
 import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { navbarIconSize } from '../constants';
 

front/src/modules/ui/navbar/components/NavItem.tsx

@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { isNavbarOpenedState } from '../../layout/states/isNavbarOpenedState';
 

front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed';
 import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
 import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { leftNavbarWidth, leftSubMenuNavbarWidth } from '../constants';
 

front/src/modules/ui/navbar/components/SubMenuNavbar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { leftNavbarWidth } from '../constants';
 

front/src/modules/ui/right-drawer/components/RightDrawer.tsx

@@ -5,14 +5,14 @@ import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import {
   ClickOutsideMode,
   useListenClickOutside,
-} from '@/ui/hooks/useListenClickOutside';
+} from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';
 
-import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys';
 import { leftNavbarWidth } from '../../navbar/constants';
 import { useRightDrawer } from '../hooks/useRightDrawer';
 import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';

front/src/modules/ui/right-drawer/components/RightDrawerBody.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-export const RightDrawerBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: calc(
-    100vh - ${({ theme }) => theme.spacing(14)} - 1px
-  ); // (-1 for border)
-  overflow: auto;
-  position: relative;
-`;

front/src/modules/ui/right-drawer/components/RightDrawerPage.tsx

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-export const RightDrawerPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-`;

front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx

@@ -1,28 +1,55 @@
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
 import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
 import { RightDrawerTimeline } from '@/activities/right-drawer/components/RightDrawerTimeline';
-import { isDefined } from '~/utils/isDefined';
 
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
+import { RightDrawerTopBar } from './RightDrawerTopBar';
+
+const RightDrawerPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+const RightDrawerBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(
+    100vh - ${({ theme }) => theme.spacing(14)} - 1px
+  ); // (-1 for border)
+  overflow: auto;
+  position: relative;
+`;
+
 export function RightDrawerRouter() {
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
 
-  if (!isDefined(rightDrawerPage)) {
-    return <></>;
-  }
+  let page = <></>;
 
   switch (rightDrawerPage) {
     case RightDrawerPages.Timeline:
-      return <RightDrawerTimeline />;
+      page = <RightDrawerTimeline />;
+      break;
     case RightDrawerPages.CreateActivity:
-      return <RightDrawerCreateActivity />;
+      page = <RightDrawerCreateActivity />;
+      break;
     case RightDrawerPages.EditActivity:
-      return <RightDrawerEditActivity />;
+      page = <RightDrawerEditActivity />;
+      break;
     default:
-      return <></>;
+      break;
   }
+
+  return (
+    <RightDrawerPage>
+      <RightDrawerTopBar />
+      <RightDrawerBody>{page}</RightDrawerBody>
+    </RightDrawerPage>
+  );
 }

front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 import { RightDrawerTopBarExpandButton } from './RightDrawerTopBarExpandButton';

front/src/modules/ui/snack-bar/components/SnackBar.tsx

@@ -7,7 +7,7 @@ import {
   ProgressBar,
   ProgressBarControls,
 } from '@/ui/progress-bar/components/ProgressBar';
-import { rgba } from '@/ui/themes/colors';
+import { rgba } from '@/ui/theme/constants/colors';
 
 import { usePausableTimeout } from '../hooks/usePausableTimeout';
 

front/src/modules/ui/table/components/CheckboxCell.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
 
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { contextMenuPositionState } from '../states/contextMenuPositionState';