Add composite Emails field and forbid creation of Email field type (#6689)

### Description

1. 
   - We are introducing new field type(Emails)


   - We are Forbiding creation of Email field


   - We Added support for filtering and sorting on Emails field


- We are using the same display mode as used on the Links field type
(chips), check the Domain field of the Company object


   - We are also using the same logic of the link when editing the field

   \
   How To Test\
   Follow the below steps for testing locally:\
   1. Checkout to TWENTY-6261\
2. Reset database using "npx nx database:reset twenty-server" command\
   3. Run both the backend and frontend app\
4. Go to Settings/Data model and choose one of the standard objects like
people\
   5. Click on Add Field button and choose Emails as the field type

   \
   ### Refs

   #6261\
   \
   ### Demo

    \

<https://www.loom.com/share/22979acac8134ed390fef93cc56fe07c?sid=adafba94-840d-4f01-872c-dc9ec256d987>

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>

packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { THEME_COMMON } from 'twenty-ui';
+
+import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
+import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
+import styled from '@emotion/styled';
+import { isDefined } from '~/utils/isDefined';
+
+type EmailsDisplayProps = {
+  value?: FieldEmailsValue;
+  isFocused?: boolean;
+};
+
+const themeSpacing = THEME_COMMON.spacingMultiplicator;
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeSpacing * 1}px;
+  justify-content: flex-start;
+
+  max-width: 100%;
+
+  overflow: hidden;
+
+  width: 100%;
+`;
+
+export const EmailsDisplay = ({ value, isFocused }: EmailsDisplayProps) => {
+  const emails = useMemo(
+    () =>
+      [
+        value?.primaryEmail ? value.primaryEmail : null,
+        ...(value?.additionalEmails ?? []),
+      ].filter(isDefined),
+    [value?.primaryEmail, value?.additionalEmails],
+  );
+
+  return isFocused ? (
+    <ExpandableList isChipCountDisplayed>
+      {emails.map((email, index) => (
+        <RoundedLink key={index} label={email} href={`mailto:${email}`} />
+      ))}
+    </ExpandableList>
+  ) : (
+    <StyledContainer>
+      {emails.map((email, index) => (
+        <RoundedLink key={index} label={email} href={`mailto:${email}`} />
+      ))}
+    </StyledContainer>
+  );
+};