feat: display Links field as Expandable List (#5374)

Closes #5114

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

@@ -1,8 +1,10 @@
 import { MouseEventHandler, useMemo } from 'react';
-import styled from '@emotion/styled';
 
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
-import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import {
+  ExpandableList,
+  ExpandableListProps,
+} from '@/ui/layout/expandable-list/components/ExpandableList';
 import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
 import {
   LinkType,
@@ -13,16 +15,19 @@ import { isDefined } from '~/utils/isDefined';
 import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';
 import { getUrlHostName } from '~/utils/url/getUrlHostName';
 
-const StyledContainer = styled(EllipsisDisplay)`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-type LinksDisplayProps = {
+type LinksDisplayProps = Pick<
+  ExpandableListProps,
+  'anchorElement' | 'isChipCountDisplayed' | 'withExpandedListBorder'
+> & {
   value?: FieldLinksValue;
 };
 
-export const LinksDisplay = ({ value }: LinksDisplayProps) => {
+export const LinksDisplay = ({
+  anchorElement,
+  isChipCountDisplayed,
+  withExpandedListBorder,
+  value,
+}: LinksDisplayProps) => {
   const links = useMemo(
     () =>
       [
@@ -49,7 +54,11 @@ export const LinksDisplay = ({ value }: LinksDisplayProps) => {
   const handleClick: MouseEventHandler = (event) => event.stopPropagation();
 
   return (
-    <StyledContainer>
+    <ExpandableList
+      anchorElement={anchorElement}
+      isChipCountDisplayed={isChipCountDisplayed}
+      withExpandedListBorder={withExpandedListBorder}
+    >
       {links.map(({ url, label, type }, index) =>
         type === LinkType.LinkedIn || type === LinkType.Twitter ? (
           <SocialLink key={index} href={url} onClick={handleClick} type={type}>
@@ -61,6 +70,6 @@ export const LinksDisplay = ({ value }: LinksDisplayProps) => {
           </RoundedLink>
         ),
       )}
-    </StyledContainer>
+    </ExpandableList>
   );
 };