8172 update the right drawer action menu to open with command o (#8375)

Closes #8172 

- Added a shortcut property to the button component
- Displays the actions inside a dropdown
- The dropdown is toggled either by clicking on the button or with the
`command + O` shortcut



https://github.com/user-attachments/assets/4c4c88fa-85dc-404e-bb42-f2b0d57c8960

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

@@ -29,6 +29,7 @@ export type ButtonProps = {
   to?: string;
   target?: string;
   dataTestId?: string;
+  shortcut?: string;
 } & React.ComponentProps<'button'>;
 
 const StyledButton = styled('button', {
@@ -358,6 +359,19 @@ const StyledSoonPill = styled(Pill)`
   margin-left: auto;
 `;
 
+const StyledShortcutLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledSeparator = styled.div<{ buttonSize: ButtonSize }>`
+  background: ${({ theme }) => theme.border.color.light};
+  height: ${({ theme, buttonSize }) =>
+    theme.spacing(buttonSize === 'small' ? 3 : 4)};
+  margin: 0 ${({ theme }) => theme.spacing(1)};
+  width: 1px;
+`;
+
 export const Button = ({
   className,
   Icon,
@@ -376,6 +390,7 @@ export const Button = ({
   to,
   target,
   dataTestId,
+  shortcut,
 }: ButtonProps) => {
   const theme = useTheme();
 
@@ -399,6 +414,12 @@ export const Button = ({
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
+      {shortcut && (
+        <>
+          <StyledSeparator buttonSize={size} />
+          <StyledShortcutLabel>{shortcut}</StyledShortcutLabel>
+        </>
+      )}
       {soon && <StyledSoonPill label="Soon" />}
     </StyledButton>
   );

packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx

@@ -23,6 +23,7 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
   argTypes: {
+    shortcut: { control: false },
     Icon: { control: false },
   },
   args: {
@@ -54,6 +55,7 @@ export const Catalog: CatalogStory<Story, typeof Button> = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
+    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -126,6 +128,7 @@ export const SoonCatalog: CatalogStory<Story, typeof Button> = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
+    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -197,6 +200,7 @@ export const PositionCatalog: CatalogStory<Story, typeof Button> = {
     fullWidth: { control: false },
     soon: { control: false },
     position: { control: false },
+    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -262,6 +266,34 @@ export const PositionCatalog: CatalogStory<Story, typeof Button> = {
   decorators: [CatalogDecorator],
 };
 
+export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
+  args: { title: 'Actions', shortcut: '⌘O' },
+  argTypes: {
+    size: { control: false },
+    variant: { control: false },
+    accent: { control: false },
+    disabled: { control: false },
+    focus: { control: false },
+    fullWidth: { control: false },
+    soon: { control: false },
+    position: { control: false },
+    shortcut: { control: false },
+  },
+  parameters: {
+    pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
+    catalog: {
+      dimensions: [
+        {
+          name: 'sizes',
+          values: ['small', 'medium'] satisfies ButtonSize[],
+          props: (size: ButtonSize) => ({ size }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};
+
 export const FullWidth: Story = {
   args: { title: 'Filter', Icon: IconSearch, fullWidth: true },
   argTypes: {