Build message thread empty right drawer (#3585)

* Trigger message thread top bar

* Rename message thread to thread

* Move all components in a directory

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -1,5 +1,8 @@
+import { useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useSetRecoilState } from 'recoil';
 
+import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ActivityActionBar } from '../../right-drawer/components/ActivityActionBar';
@@ -7,15 +10,33 @@ import { Comment } from '../Comment';
 
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
+const CommentSetterEffect = () => {
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+
+  useEffect(() => {
+    setViewableActivity('test-id');
+  }, [setViewableActivity]);
+
+  return null;
+};
+
 const meta: Meta<typeof Comment> = {
   title: 'Modules/Activity/Comment/Comment',
   component: Comment,
-  decorators: [ComponentDecorator],
+  decorators: [
+    (Story) => (
+      <>
+        <CommentSetterEffect />
+        <Story />
+      </>
+    ),
+    ComponentDecorator,
+  ],
   argTypes: {
     actionBar: {
       type: 'boolean',
       mapping: {
-        true: <ActivityActionBar activityId="test-id" />,
+        true: <ActivityActionBar />,
         false: undefined,
       },
     },

packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -1,7 +1,10 @@
+import { useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DateTime } from 'luxon';
+import { useSetRecoilState } from 'recoil';
 
 import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
+import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { avatarUrl } from '~/testing/mock-data/users';
 
@@ -9,15 +12,33 @@ import { CommentHeader } from '../CommentHeader';
 
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
+const CommentHeaderSetterEffect = () => {
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+
+  useEffect(() => {
+    setViewableActivity('test-id');
+  }, [setViewableActivity]);
+
+  return null;
+};
+
 const meta: Meta<typeof CommentHeader> = {
   title: 'Modules/Activity/Comment/CommentHeader',
   component: CommentHeader,
-  decorators: [ComponentDecorator],
+  decorators: [
+    (Story) => (
+      <>
+        <CommentHeaderSetterEffect />
+        <Story />
+      </>
+    ),
+    ComponentDecorator,
+  ],
   argTypes: {
     actionBar: {
       type: 'boolean',
       mapping: {
-        true: <ActivityActionBar activityId="test-id" />,
+        true: <ActivityActionBar />,
         false: undefined,
       },
     },