Introduce ARRAY field type (#6862)

This PR was created by \[GitStart\](<https://gitstart.com/>) to address
the requirements from this ticket:
\[TWNTY-6447\](<https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6447>).

This ticket was imported from:
<https://github.com/twentyhq/twenty/issues/6447>

### Description

\- We added a new field type

### Refs

#6447

### Demo

<https://jam.dev/c/2b4d7853-ea89-4e9d-a561-6edcb4fdb34b>

Fixes #6447

---------

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

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

@@ -0,0 +1,62 @@
+import {
+  BORDER_COMMON,
+  OverflowingTextWithTooltip,
+  THEME_COMMON,
+} from 'twenty-ui';
+
+import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
+import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import styled from '@emotion/styled';
+
+type ArrayDisplayProps = {
+  value: FieldArrayValue;
+  isFocused?: boolean;
+  isInputDisplay?: 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%;
+`;
+
+const StyledTag = styled.div<{ isInputDisplay?: boolean }>`
+  background-color: ${({ theme, isInputDisplay }) =>
+    isInputDisplay ? 'transparent' : theme.background.tertiary};
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+  border-radius: ${BORDER_COMMON.radius.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+export const ArrayDisplay = ({
+  value,
+  isFocused,
+  isInputDisplay = false,
+}: ArrayDisplayProps) => {
+  return isFocused ? (
+    <ExpandableList isChipCountDisplayed>
+      {value?.map((item, index) => (
+        <StyledTag key={index}>
+          <OverflowingTextWithTooltip text={item} />
+        </StyledTag>
+      ))}
+    </ExpandableList>
+  ) : (
+    <StyledContainer>
+      {value?.map((item, index) => (
+        <StyledTag key={index} isInputDisplay={isInputDisplay}>
+          <OverflowingTextWithTooltip text={item} />
+        </StyledTag>
+      ))}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx

@@ -1,6 +1,6 @@
-import { MouseEvent, useContext } from 'react';
 import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
+import { MouseEvent, useContext } from 'react';
 import { FONT_COMMON, THEME_COMMON, ThemeContext } from 'twenty-ui';
 
 type RoundedLinkProps = {