Open showpage on workflow creation (#9714)

- Created an new component state
`isRecordEditableNameRenamingComponentState`
- Updated `useCreateNewTableRecord` to open the ShowPage on workflow
creation
- Refactored `RecordEditableName` and its components to remove the
useEffect (This was causing the recordName state to be updated after the
focus on `NavigationDrawerInput`, but we want the text so be selected
after the update).
- Introduced a new component `EditableBreadcrumbItem`
- Created an autosizing text input: This is done by a hack using a span
inside a div and the input position is set to absolute and takes the
size of the div. There are two problems that I didn't manage to fix:
If the text is too long, the title overflows, and the letter spacing is
different between the span and the input creating a small offset.


https://github.com/user-attachments/assets/4aa1e177-7458-4691-b0c8-96567b482206


New text input component:


https://github.com/user-attachments/assets/94565546-fe2b-457d-a1d8-907007e0e2ce

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

@@ -1,23 +1,16 @@
-import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
-import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ChangeEvent, FocusEvent, useRef } from 'react';
-import { useRecoilState } from 'recoil';
+import { FocusEvent, useRef } from 'react';
 import { Key } from 'ts-key-enum';
-import {
-  IconComponent,
-  isDefined,
-  TablerIconsProps,
-  TEXT_INPUT_STYLE,
-} from 'twenty-ui';
+import { IconComponent, TablerIconsProps, isDefined } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 
 type NavigationDrawerInputProps = {
   className?: string;
   Icon?: IconComponent | ((props: TablerIconsProps) => JSX.Element);
+  placeholder?: string;
   value: string;
   onChange: (value: string) => void;
   onSubmit: (value: string) => void;
@@ -26,38 +19,13 @@ type NavigationDrawerInputProps = {
   hotkeyScope: string;
 };
 
-const StyledItem = styled.div<{ isNavigationDrawerExpanded: boolean }>`
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.color.blue};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  box-sizing: content-box;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  font-family: ${({ theme }) => theme.font.family};
-  font-size: ${({ theme }) => theme.font.size.md};
-  height: calc(${({ theme }) => theme.spacing(5)} - 2px);
-  padding: ${({ theme }) => theme.spacing(1)};
-  text-decoration: none;
-  user-select: none;
-`;
-
-const StyledItemElementsContainer = styled.span`
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing(2)};
-  display: flex;
-  width: 100%;
-`;
-
-const StyledTextInput = styled.input`
-  ${TEXT_INPUT_STYLE}
-  margin: 0;
-  width: 100%;
-  padding: 0;
+const StyledInput = styled(TextInputV2)`
+  background-color: white;
 `;
 
 export const NavigationDrawerInput = ({
   className,
+  placeholder,
   Icon,
   value,
   onChange,
@@ -66,10 +34,6 @@ export const NavigationDrawerInput = ({
   onClickOutside,
   hotkeyScope,
 }: NavigationDrawerInputProps) => {
-  const theme = useTheme();
-  const [isNavigationDrawerExpanded] = useRecoilState(
-    isNavigationDrawerExpandedState,
-  );
   const inputRef = useRef<HTMLInputElement>(null);
 
   useHotkeyScopeOnMount(hotkeyScope);
@@ -99,10 +63,6 @@ export const NavigationDrawerInput = ({
     listenerId: 'navigation-drawer-input',
   });
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange(event.target.value);
-  };
-
   const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
     if (isDefined(value)) {
       event.target.select();
@@ -110,29 +70,16 @@ export const NavigationDrawerInput = ({
   };
 
   return (
-    <StyledItem
+    <StyledInput
       className={className}
-      isNavigationDrawerExpanded={isNavigationDrawerExpanded}
-    >
-      <StyledItemElementsContainer>
-        {Icon && (
-          <Icon
-            style={{ minWidth: theme.icon.size.md }}
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.md}
-            color="currentColor"
-          />
-        )}
-        <NavigationDrawerAnimatedCollapseWrapper>
-          <StyledTextInput
-            ref={inputRef}
-            value={value}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            autoFocus
-          />
-        </NavigationDrawerAnimatedCollapseWrapper>
-      </StyledItemElementsContainer>
-    </StyledItem>
+      LeftIcon={Icon}
+      ref={inputRef}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      onFocus={handleFocus}
+      fullWidth
+      autoFocus
+    />
   );
 };

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

@@ -1,5 +0,0 @@
-import { TextInput } from '@/ui/input/components/TextInput';
-
-export const NavigationDrawerItemInput = () => {
-  return <TextInput />;
-};