251 create top bar chips inside the command menu (#9809)

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



https://github.com/user-attachments/assets/065c97fe-1daf-4b48-9d57-6bbb96d24ede

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+
+const StyledChip = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.transparent.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(8)};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+const StyledIconsContainer = styled.div`
+  display: flex;
+`;
+
+const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
+  background: ${({ theme, withIconBackground }) =>
+    withIconBackground ? theme.background.primary : 'unset'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  border: 1px solid
+    ${({ theme, withIconBackground }) =>
+      withIconBackground ? theme.border.color.medium : 'transparent'};
+  &:not(:first-of-type) {
+    margin-left: -${({ theme }) => theme.spacing(1)};
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CommandMenuContextChip = ({
+  Icons,
+  text,
+  withIconBackground,
+}: {
+  Icons: React.ReactNode[];
+  text?: string;
+  withIconBackground?: boolean;
+}) => {
+  return (
+    <StyledChip>
+      <StyledIconsContainer>
+        {Icons.map((Icon, index) => (
+          <StyledIconWrapper
+            key={index}
+            withIconBackground={withIconBackground}
+          >
+            {Icon}
+          </StyledIconWrapper>
+        ))}
+      </StyledIconsContainer>
+      <span>{text}</span>
+    </StyledChip>
+  );
+};