Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

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

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 
 import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 
+import { useBindFieldHotkeyScope } from '../hooks/useBindFieldHotkeyScope';
 import { useEditableField } from '../hooks/useEditableField';
 
 import { EditableFieldDisplayMode } from './EditableFieldDisplayMode';
@@ -43,8 +44,10 @@ export const EditableFieldBaseContainer = styled.div`
   box-sizing: border-box;
 
   display: flex;
+
   gap: ${({ theme }) => theme.spacing(1)};
   height: 24px;
+  justify-content: flex-start;
   position: relative;
   user-select: none;
 
@@ -60,6 +63,7 @@ type OwnProps = {
   displayModeContent: React.ReactNode;
   parentHotkeyScope?: HotkeyScope;
   customEditHotkeyScope?: HotkeyScope;
+  isDisplayModeContentEmpty?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -73,11 +77,17 @@ export function EditableField({
   displayModeContent,
   parentHotkeyScope,
   customEditHotkeyScope,
+  isDisplayModeContentEmpty,
   onSubmit,
   onCancel,
 }: OwnProps) {
   const [isHovered, setIsHovered] = useState(false);
 
+  useBindFieldHotkeyScope({
+    customEditHotkeyScope,
+    parentHotkeyScope,
+  });
+
   function handleContainerMouseEnter() {
     setIsHovered(true);
   }
@@ -86,11 +96,10 @@ export function EditableField({
     setIsHovered(false);
   }
 
-  const { isFieldInEditMode, openEditableField } =
-    useEditableField(parentHotkeyScope);
+  const { isFieldInEditMode, openEditableField } = useEditableField();
 
   function handleDisplayModeClick() {
-    openEditableField(customEditHotkeyScope);
+    openEditableField();
   }
 
   const showEditButton = !isFieldInEditMode && isHovered && useEditButton;
@@ -114,6 +123,7 @@ export function EditableField({
         <EditableFieldDisplayMode
           disableClick={useEditButton}
           onClick={handleDisplayModeClick}
+          isDisplayModeContentEmpty={isDisplayModeContentEmpty}
         >
           {displayModeContent}
         </EditableFieldDisplayMode>

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const EditableFieldNormalModeOuterContainer = styled.div<
-  Pick<OwnProps, 'disableClick'>
+  Pick<OwnProps, 'disableClick' | 'isDisplayModeContentEmpty'>
 >`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -15,7 +15,18 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
 
   padding: ${({ theme }) => theme.spacing(1)};
 
-  width: 100%;
+  ${(props) => {
+    console.log(props.isDisplayModeContentEmpty);
+    if (props.isDisplayModeContentEmpty) {
+      return css`
+        min-width: 50px;
+      `;
+    } else {
+      return css`
+        width: fit-content;
+      `;
+    }
+  }}
 
   ${(props) => {
     if (props.disableClick) {
@@ -51,17 +62,20 @@ export const EditableFieldNormalModeInnerContainer = styled.div`
 type OwnProps = {
   disableClick?: boolean;
   onClick?: () => void;
+  isDisplayModeContentEmpty?: boolean;
 };
 
 export function EditableFieldDisplayMode({
   children,
   disableClick,
   onClick,
+  isDisplayModeContentEmpty,
 }: React.PropsWithChildren<OwnProps>) {
   return (
     <EditableFieldNormalModeOuterContainer
       onClick={disableClick ? undefined : onClick}
       disableClick={disableClick}
+      isDisplayModeContentEmpty={isDisplayModeContentEmpty}
     >
       <EditableFieldNormalModeInnerContainer>
         {children}

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

@@ -34,7 +34,7 @@ export function EditableFieldEditButton({ customHotkeyScope }: OwnProps) {
   const { openEditableField } = useEditableField();
 
   function handleClick() {
-    openEditableField(customHotkeyScope);
+    openEditableField();
   }
 
   return (