Feat: revamp group by settings (#8503)

This PR fix #8202 that is revamping the `Options` settings for board and
table.

<img width="221" alt="Screenshot 2024-11-15 at 11 47 52 AM"
src="https://github.com/user-attachments/assets/0b143c95-810d-408b-b19e-c2678cd5653a">
<img width="214" alt="Screenshot 2024-11-15 at 11 47 59 AM"
src="https://github.com/user-attachments/assets/3468734a-8174-4e36-a8ee-08dad6c56227">
<img width="210" alt="Screenshot 2024-11-15 at 11 48 10 AM"
src="https://github.com/user-attachments/assets/300628f5-6645-4f1c-af8a-befce2714716">
<img width="212" alt="Screenshot 2024-11-15 at 11 48 37 AM"
src="https://github.com/user-attachments/assets/37a3db40-2146-45eb-bea4-44e1041f5bcf">
<img width="214" alt="Screenshot 2024-11-15 at 11 48 44 AM"
src="https://github.com/user-attachments/assets/42d2adcc-8f03-4f28-928b-d3c3d54d388a">
<img width="213" alt="Screenshot 2024-11-15 at 11 48 51 AM"
src="https://github.com/user-attachments/assets/90824568-b979-46a7-9841-ab8b9978e138">
<img width="211" alt="Screenshot 2024-11-15 at 11 49 00 AM"
src="https://github.com/user-attachments/assets/fa22446a-b1db-4d97-9a45-0778bf09ae3c">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx

@@ -30,6 +30,7 @@ export type MenuItemProps = {
   onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
   testId?: string;
   text: ReactNode;
+  contextualText?: ReactNode;
   hasSubMenu?: boolean;
 };
 
@@ -44,6 +45,7 @@ export const MenuItem = ({
   onMouseLeave,
   testId,
   text,
+  contextualText,
   hasSubMenu = false,
 }: MenuItemProps) => {
   const theme = useTheme();
@@ -68,7 +70,11 @@ export const MenuItem = ({
       onMouseLeave={onMouseLeave}
     >
       <StyledMenuItemLeftContent>
-        <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
+        <MenuItemLeftContent
+          LeftIcon={LeftIcon ?? undefined}
+          text={text}
+          contextualText={contextualText}
+        />
       </StyledMenuItemLeftContent>
       <div className="hoverable-buttons">
         {showIconButtons && (

packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -2,6 +2,7 @@ import { useTheme } from '@emotion/react';
 import { isString } from '@sniptt/guards';
 import { ReactNode } from 'react';
 
+import styled from '@emotion/styled';
 import {
   IconComponent,
   IconGripVertical,
@@ -13,18 +14,37 @@ import {
   StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
 
+const StyledContextualText = styled.div`
+  color: ${({ theme }) => theme.color.gray35};
+  font-family: inherit;
+
+  font-size: inherit;
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+
+  text-decoration: inherit;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
 type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
   isDisabled?: boolean;
   text: ReactNode;
+  contextualText?: ReactNode;
 };
 
 export const MenuItemLeftContent = ({
   className,
   LeftIcon,
   text,
+  contextualText,
   showGrip = false,
   isDisabled = false,
 }: MenuItemLeftContentProps) => {
@@ -32,37 +52,27 @@ export const MenuItemLeftContent = ({
 
   return (
     <StyledMenuItemLeftContent className={className}>
-      {showGrip &&
-        (isDisabled ? (
-          <StyledDraggableItem>
-            <IconGripVertical
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-              color={
-                isDisabled
-                  ? theme.font.color.extraLight
-                  : theme.font.color.light
-              }
-            />
-          </StyledDraggableItem>
-        ) : (
-          <StyledDraggableItem>
-            <IconGripVertical
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-              color={
-                isDisabled
-                  ? theme.font.color.extraLight
-                  : theme.font.color.light
-              }
-            />
-          </StyledDraggableItem>
-        ))}
+      {showGrip && (
+        <StyledDraggableItem>
+          <IconGripVertical
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+            color={
+              isDisabled ? theme.font.color.extraLight : theme.font.color.light
+            }
+          />
+        </StyledDraggableItem>
+      )}
       {LeftIcon && (
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
       <StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
         {isString(text) ? <OverflowingTextWithTooltip text={text} /> : text}
+        {isString(contextualText) ? (
+          <StyledContextualText>{`· ${contextualText}`}</StyledContextualText>
+        ) : (
+          contextualText
+        )}
       </StyledMenuItemLabel>
     </StyledMenuItemLeftContent>
   );

packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -69,6 +69,8 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
 `;
 
 export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
+  display: flex;
+  flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.regular};