Move component

packages/twenty-front/src/modules/object-record/components/RecordEditableName.tsx

@@ -0,0 +1,100 @@
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
+import { capitalize } from '~/utils/string/capitalize';
+
+const StyledEditableTitleContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledEditableTitlePrefix = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  line-height: 24px;
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => theme.spacing(0.75)};
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const RecordEditableName = ({
+  objectNameSingular,
+  objectRecordId,
+  objectLabelPlural,
+}: {
+  objectNameSingular: string;
+  objectRecordId: string;
+  objectLabelPlural: string;
+}) => {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const { record, loading } = useFindOneRecord({
+    objectNameSingular,
+    objectRecordId,
+    recordGqlFields: {
+      name: true,
+    },
+  });
+
+  const [recordName, setRecordName] = useState(record?.name);
+
+  const { updateOneRecord } = useUpdateOneRecord({
+    objectNameSingular,
+    recordGqlFields: {
+      name: true,
+    },
+  });
+
+  const handleSubmit = (value: string) => {
+    updateOneRecord({
+      idToUpdate: objectRecordId,
+      updateOneRecordInput: {
+        name: value,
+      },
+    });
+    setIsRenaming(false);
+  };
+
+  const handleCancel = () => {
+    setRecordName(record?.name);
+    setIsRenaming(false);
+  };
+
+  useEffect(() => {
+    setRecordName(record?.name);
+  }, [record?.name]);
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <StyledEditableTitleContainer>
+      <StyledEditableTitlePrefix>
+        {capitalize(objectLabelPlural)}
+        <span>{' / '}</span>
+      </StyledEditableTitlePrefix>
+      {isRenaming ? (
+        <NavigationDrawerInput
+          value={recordName}
+          onChange={setRecordName}
+          onSubmit={handleSubmit}
+          onCancel={handleCancel}
+          onClickOutside={handleCancel}
+          hotkeyScope="favorites-folder-input"
+        />
+      ) : (
+        <NavigationDrawerItem
+          label={recordName}
+          onClick={() => setIsRenaming(true)}
+          rightOptions={undefined}
+          className="navigation-drawer-item"
+          active
+        />
+      )}
+    </StyledEditableTitleContainer>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -77,7 +77,11 @@ const StyledItem = styled('button', {
   font-family: ${({ theme }) => theme.font.family};
   font-size: ${({ theme }) => theme.font.size.md};
 
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(0.5)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+
   margin-top: ${({ indentationLevel }) =>
     indentationLevel === 2 ? '2px' : '0'};
 

packages/twenty-front/src/pages/object-record/RecordEditableName.tsx

@@ -15,13 +15,10 @@ const StyledEditableTitleContainer = styled.div`
 const StyledEditableTitlePrefix = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   line-height: 24px;
-  padding: 3px 0;
-`;
-
-const StyledEditableTitleSeparator = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  line-height: 24px;
-  padding: 3px;
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => theme.spacing(0.75)};
+  gap: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const RecordEditableName = ({
@@ -78,8 +75,8 @@ export const RecordEditableName = ({
     <StyledEditableTitleContainer>
       <StyledEditableTitlePrefix>
         {capitalize(objectLabelPlural)}
+        <span>{' / '}</span>
       </StyledEditableTitlePrefix>
-      <StyledEditableTitleSeparator>{' / '}</StyledEditableTitleSeparator>
       {isRenaming ? (
         <NavigationDrawerInput
           value={recordName}