Created ComponentChip and CellComponentChip and their stories (#186)

* Created ComponentChip and CellComponentChip and their stories

* Fixed from comments

* Fixed icon color

* Fixed needle in a haystack bug

front/src/components/comments/CellCommentChip.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { CommentChip, CommentChipProps } from './CommentChip';
+
+const StyledCellWrapper = styled.div`
+  position: relative;
+  right: 38px;
+  top: -14px;
+  width: 0;
+  height: 0;
+`;
+
+export function CellCommentChip(props: CommentChipProps) {
+  return (
+    <StyledCellWrapper>
+      <CommentChip {...props} />
+    </StyledCellWrapper>
+  );
+}

front/src/components/comments/CommentChip.tsx

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import { IconComment } from '../icons';
+
+export type CommentChipProps = {
+  count: number;
+  onClick?: () => void;
+};
+
+const StyledChip = styled.div`
+  height: 26px;
+  min-width: 34px;
+
+  padding-left: 2px;
+  padding-right: 2px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 2px;
+
+  background: ${(props) => props.theme.secondaryBackgroundTransparent};
+  backdrop-filter: blur(6px);
+
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  cursor: pointer;
+
+  color: ${(props) => props.theme.text30};
+
+  &:hover {
+    background: ${(props) => props.theme.tertiaryBackground};
+    color: ${(props) => props.theme.text40};
+  }
+
+  user-select: none;
+`;
+
+const StyledCount = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export function CommentChip({ count, onClick }: CommentChipProps) {
+  const formattedCount = count > 99 ? '99+' : count;
+
+  return (
+    <StyledChip onClick={onClick}>
+      <StyledCount>{formattedCount}</StyledCount>
+      <IconComment size={12} />
+    </StyledChip>
+  );
+}

front/src/components/comments/__stories__/CommentChip.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { getRenderWrapperForComponent } from '../../../testing/renderWrappers';
+import { CellCommentChip } from '../CellCommentChip';
+import styled from '@emotion/styled';
+import { CellBaseContainer } from '../../editable-cell/CellBaseContainer';
+import { CommentChip } from '../CommentChip';
+
+const meta: Meta<typeof CellCommentChip> = {
+  title: 'Components/CellCommentChip',
+  component: CellCommentChip,
+};
+
+export default meta;
+type Story = StoryObj<typeof CellCommentChip>;
+
+const TestCellContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  min-width: 250px;
+  height: fit-content;
+
+  background: ${(props) => props.theme.primaryBackground};
+`;
+
+const StyledFakeCellText = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+export const OneComment: Story = {
+  render: getRenderWrapperForComponent(<CommentChip count={1} />),
+};
+
+export const TenComments: Story = {
+  render: getRenderWrapperForComponent(<CommentChip count={10} />),
+};
+
+export const TooManyComments: Story = {
+  render: getRenderWrapperForComponent(<CommentChip count={1000} />),
+};
+
+export const InCellDefault: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <CellBaseContainer>
+        <StyledFakeCellText>Fake short text</StyledFakeCellText>
+        <CellCommentChip count={12} />
+      </CellBaseContainer>
+    </TestCellContainer>,
+  ),
+};
+
+export const InCellOverlappingBlur: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <CellBaseContainer>
+        <StyledFakeCellText>
+          Fake long text to demonstrate blur effect
+        </StyledFakeCellText>
+        <CellCommentChip count={12} />
+      </CellBaseContainer>
+    </TestCellContainer>,
+  ),
+};

front/src/components/icons/components/IconComment.tsx

@@ -0,0 +1 @@
+export { IconMessageCircle as IconComment } from '@tabler/icons-react';

front/src/components/icons/index.ts

@@ -1,2 +1,3 @@
 export { IconAward } from '@tabler/icons-react';
 export { IconAddressBook } from './components/IconAddressBook';
+export { IconComment } from './components/IconComment';

front/src/layout/styles/themes.ts

@@ -20,6 +20,8 @@ const commonTheme = {
   table: {
     horizontalCellMargin: '8px',
   },
+
+  borderRadius: '4px',
 };
 
 const lightThemeSpecific = {