Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -1,11 +1,38 @@
 import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import clsx from 'clsx';
-import { v4 as uuidV4 } from 'uuid';
+import { styled } from '@linaria/react';
+
+import { THEME_COMMON } from '@ui/theme';
 
 import { AppTooltip } from './AppTooltip';
 
-import styles from './OverflowingTextWithTooltip.module.css';
+const spacing4 = THEME_COMMON.spacing(4);
+
+const StyledOverflowingText = styled.div<{
+  cursorPointer: boolean;
+  size: 'large' | 'small';
+}>`
+  cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
+  font-family: inherit;
+  font-size: inherit;
+
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: inherit;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')};
+
+  & :hover {
+    text-overflow: ${({ cursorPointer }) =>
+      cursorPointer ? 'clip' : 'ellipsis'};
+    white-space: ${({ cursorPointer }) =>
+      cursorPointer ? 'normal' : 'nowrap'};
+  }
+`;
 
 export const OverflowingTextWithTooltip = ({
   size = 'small',
@@ -16,7 +43,7 @@ export const OverflowingTextWithTooltip = ({
   text: string | null | undefined;
   mutliline?: boolean;
 }) => {
-  const textElementId = `title-id-${uuidV4()}`;
+  const textElementId = `title-id-${+new Date()}`;
 
   const textRef = useRef<HTMLDivElement>(null);
 
@@ -43,20 +70,17 @@ export const OverflowingTextWithTooltip = ({
 
   return (
     <>
-      <div
+      <StyledOverflowingText
         data-testid="tooltip"
-        className={clsx({
-          [styles.main]: true,
-          [styles.cursor]: isTitleOverflowing,
-          [styles.large]: size === 'large',
-        })}
+        cursorPointer={isTitleOverflowing}
+        size={size}
         ref={textRef}
         id={textElementId}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
         {text}
-      </div>
+      </StyledOverflowingText>
       {isTitleOverflowing &&
         createPortal(
           <div onClick={handleTooltipClick}>