4599-feat(front): Add Copy Button to Floating Inputs (#4789)

Closes #4599 

**Changes:**
- Added copy button to floating inputs of Text, Number, Phone, Link and
Email fields.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import ReactPhoneNumberInput from 'react-phone-number-input';
 import styled from '@emotion/styled';
+import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
+import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
 
@@ -13,14 +15,17 @@ const StyledContainer = styled.div`
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  width: 100%;
 
   display: flex;
-  justify-content: center;
+  justify-content: start;
 `;
 
 const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
   font-family: ${({ theme }) => theme.font.family};
   height: 32px;
+  ${TEXT_INPUT_STYLE}
+  padding: 0;
 
   .PhoneInputInput {
     background: ${({ theme }) => theme.background.transparent.secondary};
@@ -43,6 +48,14 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
     border-radius: ${({ theme }) => theme.border.radius.xs};
     height: 12px;
   }
+  width: calc(100% - ${({ theme }) => theme.spacing(8)});
+`;
+
+const StyledLightIconButtonContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
 `;
 
 export type PhoneInputProps = {
@@ -56,6 +69,7 @@ export type PhoneInputProps = {
   onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
   onChange?: (newText: string) => void;
   hotkeyScope: string;
+  copyButton?: boolean;
 };
 
 export const PhoneInput = ({
@@ -68,10 +82,12 @@ export const PhoneInput = ({
   onClickOutside,
   hotkeyScope,
   onChange,
+  copyButton = true,
 }: PhoneInputProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const copyRef = useRef<HTMLDivElement>(null);
 
   const handleChange = (newValue: string) => {
     setInternalValue(newValue);
@@ -84,6 +100,7 @@ export const PhoneInput = ({
 
   useRegisterInputEvents({
     inputRef: wrapperRef,
+    copyRef: copyRef,
     inputValue: internalValue ?? '',
     onEnter,
     onEscape,
@@ -104,6 +121,11 @@ export const PhoneInput = ({
         withCountryCallingCode={true}
         countrySelectComponent={PhoneCountryPickerDropdownButton}
       />
+      {copyButton && (
+        <StyledLightIconButtonContainer ref={copyRef}>
+          <LightCopyIconButton copyText={value} />
+        </StyledLightIconButtonContainer>
+      )}
     </StyledContainer>
   );
 };