Dropdown button, design improvement

front/src/modules/comments/components/CommentThreadCreateMode.tsx

@@ -11,6 +11,7 @@ import { createdCommentThreadIdState } from '@/comments/states/createdCommentThr
 import CompanyChip from '@/companies/components/CompanyChip';
 import { GET_COMPANIES } from '@/companies/services';
 import { GET_PEOPLE } from '@/people/services';
+import { DropdownButton } from '@/ui/components/buttons/DropdownButton';
 import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
 import { PropertyBox } from '@/ui/components/property-box/PropertyBox';
 import { PropertyBoxItem } from '@/ui/components/property-box/PropertyBoxItem';
@@ -26,9 +27,11 @@ import {
 } from '~/generated/graphql';
 
 import { GET_COMMENT_THREAD } from '../services';
+import { CommentableEntity } from '../types/CommentableEntity';
 
 import { CommentThreadItem } from './CommentThreadItem';
 import { CommentThreadRelationPicker } from './CommentThreadRelationPicker';
+import { CommentThreadTypeDropdown } from './CommentThreadTypeDropdown';
 
 import '@blocknote/core/style.css';
 
@@ -40,116 +43,74 @@ const StyledContainer = styled.div`
 
   justify-content: flex-start;
 
-  max-height: calc(100% - 16px);
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledThreadItemListContainer = styled.div`
-  align-items: flex-start;
-  display: flex;
-
-  flex-direction: column-reverse;
-  gap: ${({ theme }) => theme.spacing(4)};
-
-  justify-content: flex-start;
-  overflow: auto;
-
-  width: 100%;
-`;
-
 const BlockNoteStyledContainer = styled.div`
   width: 100%;
 `;
 
-export function CommentThreadCreateMode() {
-  const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
+const StyledTopContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.secondary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+`;
 
-  const [createdCommmentThreadId, setCreatedCommentThreadId] = useRecoilState(
-    createdCommentThreadIdState,
-  );
+const StyledEditableTitleInput = styled.input`
+  background: transparent;
 
-  const openRightDrawer = useOpenRightDrawer();
+  border: none;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex: 1 0 0;
 
-  const [createCommentMutation] = useCreateCommentMutation();
+  flex-direction: column;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  justify-content: center;
 
-  const [createCommentThreadWithComment] =
-    useCreateCommentThreadWithCommentMutation();
+  line-height: 120%;
+  outline: none;
+  width: 318px;
 
-  const { data } = useGetCommentThreadQuery({
-    variables: {
-      commentThreadId: createdCommmentThreadId ?? '',
-    },
-    skip: !createdCommmentThreadId,
-  });
-
-  const comments = data?.findManyCommentThreads[0]?.comments;
-
-  const displayCommentList = (comments?.length ?? 0) > 0;
-
-  const currentUser = useRecoilValue(currentUserState);
-
-  function handleNewComment(commentText: string) {
-    if (!isNonEmptyString(commentText)) {
-      return;
-    }
-
-    if (!isDefined(currentUser)) {
-      logError(
-        'In handleCreateCommentThread, currentUser is not defined, this should not happen.',
-      );
-      return;
-    }
-
-    createCommentThreadWithComment({
-      variables: {
-        authorId: currentUser.id,
-        commentText: commentText,
-        commentThreadId: v4(),
-        createdAt: new Date().toISOString(),
-        commentThreadTargetArray: commentableEntityArray.map(
-          (commentableEntity) => ({
-            commentableId: commentableEntity.id,
-            commentableType: commentableEntity.type,
-            id: v4(),
-            createdAt: new Date().toISOString(),
-          }),
-        ),
-      },
-      refetchQueries: [
-        getOperationName(GET_COMPANIES) ?? '',
-        getOperationName(GET_PEOPLE) ?? '',
-        getOperationName(GET_COMMENT_THREAD) ?? '',
-      ],
-      onCompleted(data) {
-        setCreatedCommentThreadId(data.createOneCommentThread.id);
-        openRightDrawer('comments');
-      },
-    });
+  :placeholder {
+    color: ${({ theme }) => theme.font.color.light};
   }
+`;
 
+export function CommentThreadCreateMode({
+  commentableEntityArray,
+}: {
+  commentableEntityArray: CommentableEntity[];
+}) {
   const editor: BlockNoteEditor | null = useBlockNote({
     theme: 'light',
   });
 
   return (
     <StyledContainer>
-      {displayCommentList && (
-        <StyledThreadItemListContainer>
-          {comments?.map((comment) => (
-            <CommentThreadItem key={comment.id} comment={comment} />
-          ))}
-        </StyledThreadItemListContainer>
-      )}
-      <PropertyBox>
-        <PropertyBoxItem
-          icon={<IconArrowUpRight />}
-          value={
-            <CommentThreadRelationPicker preselected={commentableEntityArray} />
-          }
-          label="Relations"
-        />
-      </PropertyBox>
-      <AutosizeTextInput minRows={5} onValidate={handleNewComment} />
+      <StyledTopContainer>
+        <CommentThreadTypeDropdown />
+        <StyledEditableTitleInput placeholder="Note title (optional)" />
+        <PropertyBox>
+          <PropertyBoxItem
+            icon={<IconArrowUpRight />}
+            value={
+              <CommentThreadRelationPicker
+                preselected={commentableEntityArray}
+              />
+            }
+            label="Relations"
+          />
+        </PropertyBox>
+      </StyledTopContainer>
       <BlockNoteStyledContainer>
         <BlockNoteView editor={editor} />
       </BlockNoteStyledContainer>