496 add open in full page button on command menu record page (#10659)

Closes https://github.com/twentyhq/core-team-issues/issues/496

I upgraded react tabler icons to the latest version to be able to use
the newest icons.

The option menu was no longer accessible on right drawer record pages,
this pr fixes this and creates a new button which opens the record show
page.
This button is accessible via the shortcut `Command` + `Enter`


https://github.com/user-attachments/assets/570071b2-4406-40bd-be48-a0e5e430ed70

packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftRaw from '../assets/microsoft.svg?react';
 
 interface IconMicrosoftProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoft = (props: IconMicrosoftProps) => {

packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftCalendarRaw from '../assets/microsoft-calendar.svg?react';
 
 interface IconMicrosoftCalendarProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoftCalendar = (props: IconMicrosoftCalendarProps) => {

packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftOutlookRaw from '../assets/microsoft-outlook.svg?react';
 
 interface IconMicrosoftOutlookProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoftOutlook = (props: IconMicrosoftOutlookProps) => {

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -12,9 +12,10 @@ export {
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -30,6 +31,7 @@ export {
   IconBrandLinkedin,
   IconBrandX,
   IconBriefcase,
+  IconBrowserMaximize,
   IconBuildingSkyscraper,
   IconCalendar,
   IconCalendarDue,
@@ -42,8 +44,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -53,19 +55,15 @@ export {
   IconClockPlay,
   IconClockShare,
   IconCode,
-  IconStepInto,
-  IconLogin2,
-  IconLogout,
   IconCodeCircle,
   IconCoins,
   IconColorSwatch,
   IconMessageCircle as IconComment,
-  IconCube,
-  IconTypography,
   IconCopy,
   IconCreativeCommonsSa,
   IconCreditCard,
   IconCsv,
+  IconCube,
   IconCurrencyAfghani,
   IconCurrencyBahraini,
   IconCurrencyBaht,
@@ -186,6 +184,8 @@ export {
   IconLoader,
   IconLock,
   IconLockOpen,
+  IconLogin2,
+  IconLogout,
   IconMail,
   IconMailCog,
   IconMap,
@@ -250,6 +250,7 @@ export {
   IconSquareKey,
   IconSquareRoundedCheck,
   IconSquareRoundedX,
+  IconStepInto,
   IconTable,
   IconTag,
   IconTags,
@@ -263,6 +264,7 @@ export {
   IconTimelineEvent,
   IconTrash,
   IconTrashX,
+  IconTypography,
   IconUnlink,
   IconUpload,
   IconUser,
@@ -278,4 +280,4 @@ export {
   IconX,
 } from '@tabler/icons-react';
 
-export type { TablerIconsProps } from '@tabler/icons-react';
+export type { IconProps as TablerIconsProps } from '@tabler/icons-react';

packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts

@@ -893,6 +893,7 @@ import {
   IconBroadcastOff,
   IconBrowser,
   IconBrowserCheck,
+  IconBrowserMaximize,
   IconBrowserOff,
   IconBrowserPlus,
   IconBrowserX,
@@ -8393,4 +8394,5 @@ export const ALL_ICONS = {
   IconZoomReset,
   IconZzz,
   IconZzzOff,
+  IconBrowserMaximize,
 };

packages/twenty-ui/src/display/icon/types/IconComponent.ts

@@ -1,9 +1,10 @@
+// eslint-disable-next-line no-restricted-imports
 import { FunctionComponent } from 'react';
 
 export type IconComponentProps = {
   className?: string;
-  size?: number;
-  stroke?: number;
+  size?: number | string;
+  stroke?: number | string;
   color?: string;
 };
 

packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from 'react';
 import { motion, useAnimation } from 'framer-motion';
+import { useEffect, useMemo } from 'react';
 
 interface CircularProgressBarProps {
   size?: number;

packages/twenty-ui/src/input/button/components/MainButton.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from '@ui/display';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';
 
@@ -103,7 +103,7 @@ const StyledButton = styled.button<
 `;
 
 type MainButtonProps = Props & {
-  Icon?: IconComponent;
+  Icon?: IconComponent | FunctionComponent<{ size: number }>;
 };
 
 export const MainButton = ({