Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

front/src/modules/companies/components/CompanyChip.tsx

@@ -1,70 +1,21 @@
-import { Link } from 'react-router-dom';
-import { Theme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { EntityChip } from '@/ui/chip/components/EntityChip';
 
-import { Avatar } from '@/users/components/Avatar';
-
-export type CompanyChipPropsType = {
+type OwnProps = {
   id: string;
   name: string;
   picture?: string;
+  clickable?: boolean;
 };
 
-const baseStyle = ({ theme }: { theme: Theme }) => `
-  align-items: center;
-  background-color: ${theme.background.tertiary};
-  border-radius: ${theme.spacing(1)};
-  color: ${theme.font.color.primary};
-  display: inline-flex;
-  gap: ${theme.spacing(1)};
-  height: calc(20px - 2 * ${theme.spacing(1)});
-  overflow: hidden;
-  padding: ${theme.spacing(1)};
-
-  text-decoration: none;
-
-  user-select: none;
-
-  :hover {
-    filter: brightness(95%);
-  }
-
-  img {
-    height: 14px;
-    object-fit: cover;
-    width: 14px;
-  }
-`;
-
-const StyledName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const StyledContainerLink = styled(Link)`
-  ${baseStyle}
-`;
-
-const StyledContainerNoLink = styled.div`
-  ${baseStyle}
-`;
-
-export function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
-  const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
-
+export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
   return (
-    <ContainerComponent data-testid="company-chip" to={`/companies/${id}`}>
-      {picture && (
-        <Avatar
-          avatarUrl={picture?.toString()}
-          colorId={id}
-          placeholder={name}
-          type="squared"
-          size={14}
-        />
-      )}
-      <StyledName>{name}</StyledName>
-    </ContainerComponent>
+    <EntityChip
+      entityId={id}
+      linkToEntity={`/companies/${id}`}
+      name={name}
+      avatarType="squared"
+      clickable={clickable}
+      picture={picture}
+    />
   );
 }

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -29,10 +29,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     <EditableCellChip
       value={internalValue}
       placeholder="Name"
-      picture={getLogoUrlFromDomainName(company.domainName)}
-      id={company.id}
       changeHandler={setInternalValue}
-      ChipComponent={CompanyChip}
+      ChipComponent={
+        <CompanyChip
+          id={company.id}
+          name={company.name}
+          clickable
+          picture={getLogoUrlFromDomainName(company.domainName)}
+        />
+      }
       onSubmit={() =>
         updateCompany({
           variables: {

front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx

@@ -25,15 +25,13 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
           }}
           parentHotkeyScope={{
             scope: PageHotkeyScope.CompanyShowPage,
+            customScopes: {
+              goto: true,
+            },
           }}
           iconLabel={<IconUserCircle />}
           editModeContent={
-            <CompanyAccountOwnerPickerFieldEditMode
-              parentHotkeyScope={{
-                scope: PageHotkeyScope.CompanyShowPage,
-              }}
-              company={company}
-            />
+            <CompanyAccountOwnerPickerFieldEditMode company={company} />
           }
           displayModeContent={
             company.accountOwner?.displayName ? (

front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx

@@ -24,9 +24,8 @@ export function CompanyAccountOwnerPickerFieldEditMode({
   company,
   onSubmit,
   onCancel,
-  parentHotkeyScope,
 }: OwnProps) {
-  const { closeEditableField } = useEditableField(parentHotkeyScope);
+  const { closeEditableField } = useEditableField();
 
   function handleSubmit() {
     closeEditableField();

front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx

@@ -54,6 +54,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) {
           />
         }
         displayModeContent={internalValue ?? ''}
+        isDisplayModeContentEmpty={!(internalValue !== '')}
       />
     </RecoilScope>
   );

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -51,6 +51,7 @@ export function EditablePeopleFullName({
           <PersonChip
             name={person?.firstName + ' ' + person?.lastName}
             id={person?.id ?? ''}
+            clickable
           />
         </NoEditModeContainer>
       }

front/src/modules/people/components/PersonChip.tsx

@@ -1,66 +1,26 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { Theme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { Avatar } from '@/users/components/Avatar';
+import { EntityChip } from '@/ui/chip/components/EntityChip';
 
 export type PersonChipPropsType = {
   id: string;
   name: string;
   picture?: string;
+  clickable?: boolean;
 };
 
-const baseStyle = ({ theme }: { theme: Theme }) => `
-  align-items: center;
-  background-color: ${theme.background.tertiary};
-  border-radius: ${theme.spacing(1)};
-  color: ${theme.font.color.primary};
-  display: inline-flex;
-  gap: ${theme.spacing(1)};
-  height: 12px;
-  overflow: hidden;
-  padding: ${theme.spacing(1)};
-  text-decoration: none;
-  :hover {
-    filter: brightness(95%);
-  }
-  img {
-    border-radius: ${theme.border.radius.rounded};
-    height: 14px;
-    object-fit: cover;
-    width: 14px;
-  }
-  white-space: nowrap;
-`;
-
-const StyledContainerLink = styled(Link)`
-  ${baseStyle}
-`;
-
-const StyledContainerNoLink = styled.div`
-  ${baseStyle}
-`;
-
-const StyledName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export function PersonChip({ id, name, picture }: PersonChipPropsType) {
-  const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
-
+export function PersonChip({
+  id,
+  name,
+  picture,
+  clickable,
+}: PersonChipPropsType) {
   return (
-    <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
-      <Avatar
-        avatarUrl={picture}
-        colorId={id}
-        placeholder={name}
-        size={14}
-        type="rounded"
-      />
-      <StyledName>{name}</StyledName>
-    </ContainerComponent>
+    <EntityChip
+      entityId={id}
+      linkToEntity={`/person/${id}`}
+      name={name}
+      avatarType="rounded"
+      clickable={clickable}
+      picture={picture}
+    />
   );
 }

front/src/modules/ui/chip/components/EntityChip.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Theme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Avatar, AvatarType } from '@/users/components/Avatar';
+
+const baseStyle = ({ theme }: { theme: Theme }) => `
+  align-items: center;
+  border-radius: ${theme.spacing(1)};
+  color: ${theme.font.color.primary};
+  display: inline-flex;
+  gap: ${theme.spacing(1)};
+  height: 12px;
+  overflow: hidden;
+  padding: ${theme.spacing(1)};
+  text-decoration: none;
+ 
+  img {
+    border-radius: ${theme.border.radius.rounded};
+    height: 14px;
+    object-fit: cover;
+    width: 14px;
+  }
+
+  white-space: nowrap;
+`;
+
+const StyledContainerLink = styled.div`
+  ${baseStyle}
+
+  background-color: ${(props) => props.theme.background.tertiary};
+  :hover {
+    filter: brightness(95%);
+  }
+`;
+
+const StyledContainerReadOnly = styled.div`
+  ${baseStyle}
+`;
+
+const StyledName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+type OwnProps = {
+  linkToEntity: string;
+  entityId: string;
+  name: string;
+  picture?: string;
+  clickable?: boolean;
+  avatarType?: AvatarType;
+};
+
+export function EntityChip({
+  linkToEntity,
+  entityId,
+  name,
+  picture,
+  clickable,
+  avatarType = 'rounded',
+}: OwnProps) {
+  const navigate = useNavigate();
+
+  function handleLinkClick(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    navigate(linkToEntity);
+  }
+
+  return clickable && linkToEntity ? (
+    <StyledContainerLink data-testid="entity-chip" onClick={handleLinkClick}>
+      <Avatar
+        avatarUrl={picture}
+        colorId={entityId}
+        placeholder={name}
+        size={14}
+        type={avatarType}
+      />
+      <StyledName>{name}</StyledName>
+    </StyledContainerLink>
+  ) : (
+    <StyledContainerReadOnly data-testid="entity-chip">
+      <Avatar
+        avatarUrl={picture}
+        colorId={entityId}
+        placeholder={name}
+        size={14}
+        type={avatarType}
+      />
+      <StyledName>{name}</StyledName>
+    </StyledContainerReadOnly>
+  );
+}

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 (

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

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { isSameHotkeyScope } from '@/ui/hotkey/utils/isSameHotkeyScope';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+
+import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
+import { FieldContext } from '../states/FieldContext';
+import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState';
+
+export function useBindFieldHotkeyScope({
+  customEditHotkeyScope,
+  parentHotkeyScope,
+}: {
+  customEditHotkeyScope?: HotkeyScope;
+  parentHotkeyScope?: HotkeyScope;
+}) {
+  const [customEditHotkeyScopeForField, setCustomEditHotkeyScopeForField] =
+    useRecoilScopedState(
+      customEditHotkeyScopeForFieldScopedState,
+      FieldContext,
+    );
+
+  const [parentHotkeyScopeForField, setParentHotkeyScopeForField] =
+    useRecoilScopedState(parentHotkeyScopeForFieldScopedState, FieldContext);
+
+  useEffect(() => {
+    if (
+      customEditHotkeyScope &&
+      !isSameHotkeyScope(customEditHotkeyScope, customEditHotkeyScopeForField)
+    ) {
+      setCustomEditHotkeyScopeForField(customEditHotkeyScope);
+    }
+  }, [
+    customEditHotkeyScope,
+    customEditHotkeyScopeForField,
+    setCustomEditHotkeyScopeForField,
+  ]);
+
+  useEffect(() => {
+    if (
+      parentHotkeyScope &&
+      !isSameHotkeyScope(parentHotkeyScope, parentHotkeyScopeForField)
+    ) {
+      setParentHotkeyScopeForField(parentHotkeyScope);
+    }
+  }, [
+    parentHotkeyScope,
+    parentHotkeyScopeForField,
+    setParentHotkeyScopeForField,
+  ]);
+}

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

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

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

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+
+export const customEditHotkeyScopeForFieldScopedState = atomFamily<
+  HotkeyScope | null,
+  string
+>({
+  key: 'customEditHotkeyScopeForFieldScopedState',
+  default: null,
+});

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

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+
+export const parentHotkeyScopeForFieldScopedState = atomFamily<
+  HotkeyScope | null,
+  string
+>({
+  key: 'parentHotkeyScopeForFieldScopedState',
+  default: null,
+});

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

@@ -10,12 +10,8 @@ type OwnProps = {
   parentHotkeyScope?: HotkeyScope;
 };
 
-export function EditableFieldEditModeDate({
-  value,
-  onChange,
-  parentHotkeyScope,
-}: OwnProps) {
-  const { closeEditableField } = useEditableField(parentHotkeyScope);
+export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
+  const { closeEditableField } = useEditableField();
 
   function handleChange(newValue: string) {
     onChange?.(newValue);

front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts

@@ -0,0 +1,8 @@
+import { HotkeyScope } from '../types/HotkeyScope';
+
+export function isSameHotkeyScope(
+  hotkeyScope1: HotkeyScope | undefined | null,
+  hotkeyScope2: HotkeyScope | undefined | null,
+): boolean {
+  return JSON.stringify(hotkeyScope1) === JSON.stringify(hotkeyScope2);
+}

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  softFocus?: boolean;
+  onClick?: () => void;
+};
+
+export const EditableCellDisplayModeOuterContainer = styled.div<
+  Pick<Props, 'softFocus'>
+>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+         border-radius: ${props.theme.border.radius.sm};
+         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
+      : ''}
+`;
+
+export const EditableCellDisplayModeInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export function EditableCellDisplayContainer({
+  children,
+  softFocus,
+  onClick,
+}: React.PropsWithChildren<Props>) {
+  return (
+    <EditableCellDisplayModeOuterContainer
+      onClick={onClick}
+      softFocus={softFocus}
+    >
+      <EditableCellDisplayModeInnerContainer>
+        {children}
+      </EditableCellDisplayModeInnerContainer>
+    </EditableCellDisplayModeOuterContainer>
+  );
+}

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx

@@ -1,51 +1,19 @@
-import styled from '@emotion/styled';
-
 import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
 
-type Props = {
-  softFocus?: boolean;
-};
-
-export const EditableCellNormalModeOuterContainer = styled.div<Props>`
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  width: 100%;
-
-  ${(props) =>
-    props.softFocus
-      ? `background: ${props.theme.background.transparent.secondary};
-         border-radius: ${props.theme.border.radius.sm};
-         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
-      : ''}
-`;
-
-export const EditableCellNormalModeInnerContainer = styled.div`
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-`;
+import { EditableCellDisplayContainer } from './EditableCellContainer';
 
 export function EditableCellDisplayMode({
   children,
 }: React.PropsWithChildren<unknown>) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
 
-  function handleOnClick() {
+  function handleClick() {
     setSoftFocusOnCurrentCell();
   }
 
   return (
-    <EditableCellNormalModeOuterContainer onClick={handleOnClick}>
-      <EditableCellNormalModeInnerContainer>
-        {children}
-      </EditableCellNormalModeInnerContainer>
-    </EditableCellNormalModeOuterContainer>
+    <EditableCellDisplayContainer onClick={handleClick}>
+      {children}
+    </EditableCellDisplayContainer>
   );
 }

front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
@@ -7,15 +7,16 @@ import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useEditableCell } from '../hooks/useEditableCell';
 
-import {
-  EditableCellNormalModeInnerContainer,
-  EditableCellNormalModeOuterContainer,
-} from './EditableCellDisplayMode';
+import { EditableCellDisplayContainer } from './EditableCellContainer';
+
+type OwnProps = PropsWithChildren<{
+  editHotkeyScope?: HotkeyScope;
+}>;
 
 export function EditableCellSoftFocusMode({
   children,
   editHotkeyScope,
-}: React.PropsWithChildren<{ editHotkeyScope?: HotkeyScope }>) {
+}: OwnProps) {
   const { openEditableCell } = useEditableCell();
 
   function openEditMode() {
@@ -61,13 +62,8 @@ export function EditableCellSoftFocusMode({
   }
 
   return (
-    <EditableCellNormalModeOuterContainer
-      onClick={handleClick}
-      softFocus={true}
-    >
-      <EditableCellNormalModeInnerContainer>
-        {children}
-      </EditableCellNormalModeInnerContainer>
-    </EditableCellNormalModeOuterContainer>
+    <EditableCellDisplayContainer onClick={handleClick} softFocus>
+      {children}
+    </EditableCellDisplayContainer>
   );
 }

front/src/modules/ui/table/editable-cell/types/EditableChip.tsx

@@ -1,11 +1,4 @@
-import {
-  ChangeEvent,
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
@@ -13,18 +6,11 @@ import { textInputStyle } from '@/ui/themes/effects';
 import { EditableCell } from '../components/EditableCell';
 
 export type EditableChipProps = {
-  id: string;
   placeholder?: string;
   value: string;
-  picture: string;
   changeHandler: (updated: string) => void;
   editModeHorizontalAlign?: 'left' | 'right';
-  ChipComponent: ComponentType<{
-    id: string;
-    name: string;
-    picture: string;
-    isOverlapped?: boolean;
-  }>;
+  ChipComponent: React.ReactNode;
   commentThreadCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
@@ -52,11 +38,9 @@ const RightContainer = styled.div`
 
 // TODO: move right end content in EditableCell
 export function EditableCellChip({
-  id,
   value,
   placeholder,
   changeHandler,
-  picture,
   editModeHorizontalAlign,
   ChipComponent,
   rightEndContents,
@@ -95,7 +79,7 @@ export function EditableCellChip({
       onCancel={onCancel}
       nonEditModeContent={
         <NoEditModeContainer>
-          <ChipComponent id={id} name={inputValue} picture={picture} />
+          {ChipComponent}
           <RightContainer>
             {rightEndContents &&
               rightEndContents.length > 0 &&