Add ButtonGroup concept + Soon pill on button + implement in timeline (#551)

* Add ButtonGroup concept

* Add soon pill

* Fix incorrect wrapping behavior

* Implement button group in timeline

front/src/modules/comments/components/comment-thread/CommentThreadCreateButton.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from '@emotion/react';
+
+import { Button } from '@/ui/components/buttons/Button';
+import { ButtonGroup } from '@/ui/components/buttons/ButtonGroup';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icons/index';
+
+type CommentThreadCreateButtonProps = {
+  onNoteClick?: () => void;
+  onTaskClick?: () => void;
+  onActivityClick?: () => void;
+};
+
+export function CommentThreadCreateButton({
+  onNoteClick,
+  onTaskClick,
+  onActivityClick,
+}: CommentThreadCreateButtonProps) {
+  const theme = useTheme();
+  return (
+    <ButtonGroup variant="secondary">
+      <Button
+        icon={<IconNotes size={theme.icon.size.sm} />}
+        title="Note"
+        onClick={onNoteClick}
+      />
+      <Button
+        icon={<IconCheckbox size={theme.icon.size.sm} />}
+        title="Task"
+        soon={true}
+        onClick={onTaskClick}
+      />
+      <Button
+        icon={<IconTimelineEvent size={theme.icon.size.sm} />}
+        title="Activity"
+        soon={true}
+        onClick={onActivityClick}
+      />
+    </ButtonGroup>
+  );
+}

front/src/modules/comments/components/timeline/Timeline.tsx

@@ -6,7 +6,6 @@ import { useOpenCommentThreadRightDrawer } from '@/comments/hooks/useOpenComment
 import { useOpenCreateCommentThreadDrawer } from '@/comments/hooks/useOpenCreateCommentThreadDrawer';
 import { CommentableEntity } from '@/comments/types/CommentableEntity';
 import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
-import { TableActionBarButtonToggleComments } from '@/ui/components/table/action-bar/TableActionBarButtonOpenComments';
 import { IconCirclePlus, IconNotes } from '@/ui/icons/index';
 import {
   beautifyExactDate,
@@ -17,6 +16,8 @@ import {
   useGetCommentThreadsByTargetsQuery,
 } from '~/generated/graphql';
 
+import { CommentThreadCreateButton } from '../comment-thread/CommentThreadCreateButton';
+
 const StyledMainContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
@@ -208,8 +209,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
       <StyledTimelineEmptyContainer>
         <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
         <StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
-        <TableActionBarButtonToggleComments
-          onClick={() => openCreateCommandThread(entity)}
+        <CommentThreadCreateButton
+          onNoteClick={() => openCreateCommandThread(entity)}
         />
       </StyledTimelineEmptyContainer>
     );
@@ -223,8 +224,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
             <IconCirclePlus />
           </StyledIconContainer>
 
-          <TableActionBarButtonToggleComments
-            onClick={() => openCreateCommandThread(entity)}
+          <CommentThreadCreateButton
+            onNoteClick={() => openCreateCommandThread(entity)}
           />
         </StyledTimelineItemContainer>
       </StyledTopActionBar>