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/PersonShow.tsx

@@ -0,0 +1,51 @@
+import { useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+
+import { Timeline } from '@/comments/components/timeline/Timeline';
+import { usePersonQuery } from '@/people/services';
+import { PropertyBox } from '@/ui/components/property-box/PropertyBox';
+import { PropertyBoxItem } from '@/ui/components/property-box/PropertyBoxItem';
+import { IconLink, IconUser } from '@/ui/icons/index';
+import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
+import { ShowPageLeftContainer } from '@/ui/layout/show-page/containers/ShowPageLeftContainer';
+import { ShowPageRightContainer } from '@/ui/layout/show-page/containers/ShowPageRightContainer';
+import { ShowPageSummaryCard } from '@/ui/layout/show-page/ShowPageSummaryCard';
+import { CommentableType } from '~/generated/graphql';
+
+export function PersonShow() {
+  const personId = useParams().personId ?? '';
+
+  const { data } = usePersonQuery(personId);
+  const person = data?.findUniquePerson;
+
+  const theme = useTheme();
+
+  return (
+    <WithTopBarContainer
+      title={person?.firstName ?? ''}
+      icon={<IconUser size={theme.icon.size.md} />}
+    >
+      <>
+        <ShowPageLeftContainer>
+          <ShowPageSummaryCard
+            title={person?.displayName ?? 'No name'}
+            date={person?.createdAt ?? ''}
+          />
+          <PropertyBox extraPadding={true}>
+            <>
+              <PropertyBoxItem
+                icon={<IconLink />}
+                value={person?.firstName ?? 'No First name'}
+              />
+            </>
+          </PropertyBox>
+        </ShowPageLeftContainer>
+        <ShowPageRightContainer>
+          <Timeline
+            entity={{ id: person?.id ?? '', type: CommentableType.Person }}
+          />
+        </ShowPageRightContainer>
+      </>
+    </WithTopBarContainer>
+  );
+}

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,
+  },
+};