Add "show company / people" view and "Notes" concept (#528)

* Begin adding show view and refactoring threads to become notes

* Progress on design

* Progress redesign timeline

* Dropdown button, design improvement

* Open comment thread edit mode in drawer

* Autosave local storage and commentThreadcount

* Improve display and fix missing key issue

* Remove some hardcoded CSS properties

* Create button

* Split company show into ui/business + fix eslint

* Fix font weight

* Begin auto-save on edit mode

* Save server-side query result to Apollo cache

* Fix save behavior

* Refetch timeline after creating note

* Rename createCommentThreadWithComment

* Improve styling

* Revert "Improve styling"

This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0.

* Improve CSS styling

* Bring back border radius inadvertently removed

* padding adjustment

* Improve blocknote design

* Improve edit mode display

* Remove Comments.tsx

* Remove irrelevant comment stories

* Removed un-necessary panel component

* stop using fragment, move trash icon

* Add a basic story for CompanyShow

* Add a basic People show view

* Fix storybook tests

* Add very basic Person story

* Refactor PR1

* Refactor part 2

* Refactor part 3

* Refactor part 4

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/people/__stories__/People.comments.stories.tsx

@@ -1,38 +0,0 @@
-import { expect } from '@storybook/jest';
-import type { Meta } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
-
-import { People } from '../People';
-
-import { Story } from './People.stories';
-
-const meta: Meta<typeof People> = {
-  title: 'Pages/People/Comments',
-  component: People,
-};
-
-export default meta;
-
-export const OpenCommentsSection: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const firstRow = await canvas.findByTestId('row-id-1');
-
-    expect(firstRow).toBeDefined();
-
-    const commentsChip = await within(firstRow).findByTestId('comment-chip');
-    expect(commentsChip).toBeDefined();
-
-    userEvent.click(commentsChip);
-    const commentSection = await canvas.findByText('Comments');
-    expect(commentSection).toBeDefined();
-  },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};

front/src/pages/people/__stories__/Person.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
+import { PersonShow } from '../PersonShow';
+
+const meta: Meta<typeof PersonShow> = {
+  title: 'Pages/People/Person',
+  component: PersonShow,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PersonShow>;
+
+export const Default: Story = {
+  render: getRenderWrapperForPage(
+    <PersonShow />,
+    '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
+  ),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};