Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

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

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+import { IconButton } from '@/ui/button/components/IconButton';
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { IconPencil } from '@/ui/icon';
+import { overlayBackground } from '@/ui/themes/effects';
+
+import { useEditableField } from '../hooks/useEditableField';
+
+export const StyledEditableFieldEditButton = styled.div`
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  color: ${({ theme }) => theme.font.color.tertiary};
+
+  cursor: pointer;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+
+  margin-left: -2px;
+  width: 20px;
+
+  z-index: 1;
+  ${overlayBackground}
+`;
+
+type OwnProps = {
+  customHotkeyScope?: HotkeyScope;
+};
+
+export function EditableFieldEditButton({ customHotkeyScope }: OwnProps) {
+  const { openEditableField } = useEditableField();
+
+  function handleClick() {
+    openEditableField(customHotkeyScope);
+  }
+
+  return (
+    <IconButton
+      variant="shadow"
+      size="small"
+      onClick={handleClick}
+      icon={<IconPencil size={14} />}
+      data-testid="editable-field-edit-mode-container"
+    />
+  );
+}