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-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx

@@ -0,0 +1,66 @@
+import { RightDrawerActionMenuDropdownHotkeyScope } from '@/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { AppPath } from '@/types/AppPath';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
+
+type RecordShowRightDrawerOpenRecordButtonProps = {
+  objectNameSingular: string;
+  record: ObjectRecord;
+};
+
+export const RecordShowRightDrawerOpenRecordButton = ({
+  objectNameSingular,
+  record,
+}: RecordShowRightDrawerOpenRecordButtonProps) => {
+  const { closeCommandMenu } = useCommandMenu();
+
+  const to = getLinkToShowPage(objectNameSingular, record);
+
+  const navigate = useNavigateApp();
+
+  const handleOpenRecord = () => {
+    navigate(AppPath.RecordShowPage, {
+      objectNameSingular,
+      objectRecordId: record.id,
+    });
+    closeCommandMenu();
+  };
+
+  useScopedHotkeys(
+    ['ctrl+Enter,meta+Enter'],
+    handleOpenRecord,
+    AppHotkeyScope.CommandMenuOpen,
+    [closeCommandMenu, navigate, objectNameSingular, record.id],
+  );
+
+  useScopedHotkeys(
+    ['ctrl+Enter,meta+Enter'],
+    handleOpenRecord,
+    RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown,
+    [closeCommandMenu, navigate, objectNameSingular, record.id],
+  );
+
+  return (
+    <StyledLink to={to} onClick={closeCommandMenu}>
+      <Button
+        title="Open"
+        variant="primary"
+        accent="blue"
+        size="medium"
+        Icon={IconBrowserMaximize}
+        hotkeys={[getOsControlSymbol(), '⏎']}
+      />
+    </StyledLink>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx

@@ -70,7 +70,7 @@ export const RightDrawerActionMenuDropdown = () => {
       }}
       data-select-disable
       clickableComponent={
-        <Button title="Actions" hotkeys={[getOsControlSymbol(), 'O']} />
+        <Button title="Options" hotkeys={[getOsControlSymbol(), 'O']} />
       }
       dropdownPlacement="top-end"
       dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}

packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx

@@ -16,11 +16,11 @@ import { msg } from '@lingui/core/macro';
 import { userEvent, waitFor, within } from '@storybook/test';
 import {
   ComponentDecorator,
-  getCanvasElementForDropdownTesting,
   IconFileExport,
   IconHeart,
   IconTrash,
   MenuItemAccent,
+  getCanvasElementForDropdownTesting,
 } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 
@@ -124,19 +124,19 @@ export const WithButtonClicks: Story = {
   play: async () => {
     const canvas = within(getCanvasElementForDropdownTesting());
 
-    let actionButton = await canvas.findByText('Actions');
+    let actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const deleteButton = await canvas.findByText('Delete');
     await userEvent.click(deleteButton);
 
-    actionButton = await canvas.findByText('Actions');
+    actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const addToFavoritesButton = await canvas.findByText('Add to favorites');
     await userEvent.click(addToFavoritesButton);
 
-    actionButton = await canvas.findByText('Actions');
+    actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const exportButton = await canvas.findByText('Export');