chore: Improve design of comment bar in notes (#1102)

* Improve design of comment bar in notes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add autoFocus

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Align the text area

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Use ref instead of getElementById

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/activities/components/ActivityComments.tsx

@@ -4,7 +4,10 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { AutosizeTextInput } from '@/ui/input/autosize-text/components/AutosizeTextInput';
+import {
+  AutosizeTextInput,
+  AutosizeTextInputVariant,
+} from '@/ui/input/autosize-text/components/AutosizeTextInput';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { Activity, useCreateCommentMutation } from '~/generated/graphql';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
@@ -17,6 +20,7 @@ type OwnProps = {
   activity: Pick<Activity, 'id'> & {
     comments: Array<CommentForDrawer>;
   };
+  scrollableContainerRef: React.RefObject<HTMLDivElement>;
 };
 
 const StyledThreadItemListContainer = styled.div`
@@ -31,17 +35,20 @@ const StyledThreadItemListContainer = styled.div`
 
   justify-content: flex-start;
   padding: ${({ theme }) => theme.spacing(8)};
+  padding-bottom: ${({ theme }) => theme.spacing(32)};
   padding-left: ${({ theme }) => theme.spacing(12)};
   width: 100%;
 `;
 
 const StyledCommentActionBar = styled.div`
+  background: ${({ theme }) => theme.background.primary};
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  bottom: 0;
   display: flex;
   padding: 16px 24px 16px 48px;
+  position: absolute;
   width: calc(
-    ${({ theme }) => (useIsMobile() ? '100%' : theme.rightDrawerWidth)} - 48px -
-      24px
+    ${({ theme }) => (useIsMobile() ? '100%' : theme.rightDrawerWidth)} - 72px
   );
 `;
 
@@ -52,7 +59,10 @@ const StyledThreadCommentTitle = styled.div`
   text-transform: uppercase;
 `;
 
-export function ActivityComments({ activity }: OwnProps) {
+export function ActivityComments({
+  activity,
+  scrollableContainerRef,
+}: OwnProps) {
   const [createCommentMutation] = useCreateCommentMutation();
   const currentUser = useRecoilValue(currentUserState);
 
@@ -74,6 +84,21 @@ export function ActivityComments({ activity }: OwnProps) {
         createdAt: new Date().toISOString(),
       },
       refetchQueries: [getOperationName(GET_ACTIVITY) ?? ''],
+      onCompleted: () => {
+        setTimeout(() => {
+          handleFocus();
+        }, 100);
+      },
+      awaitRefetchQueries: true,
+    });
+  }
+
+  function handleFocus() {
+    const scrollableContainer = scrollableContainerRef.current;
+
+    scrollableContainer?.scrollTo({
+      top: scrollableContainer.scrollHeight,
+      behavior: 'smooth',
     });
   }
 
@@ -91,7 +116,14 @@ export function ActivityComments({ activity }: OwnProps) {
       )}
 
       <StyledCommentActionBar>
-        {currentUser && <AutosizeTextInput onValidate={handleSendComment} />}
+        {currentUser && (
+          <AutosizeTextInput
+            onValidate={handleSendComment}
+            onFocus={handleFocus}
+            variant={AutosizeTextInputVariant.Button}
+            placeholder={activity?.comments.length > 0 ? 'Reply...' : undefined}
+          />
+        )}
       </StyledCommentActionBar>
     </>
   );

front/src/modules/activities/components/ActivityEditor.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+
+import React, { useCallback, useRef, useState } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
@@ -92,6 +93,7 @@ export function ActivityEditor({
   const [completedAt, setCompletedAt] = useState<string | null>(
     activity.completedAt ?? '',
   );
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const [updateActivityMutation] = useUpdateActivityMutation();
 
@@ -166,7 +168,7 @@ export function ActivityEditor({
   }
 
   return (
-    <StyledContainer>
+    <StyledContainer ref={containerRef}>
       <StyledUpperPartContainer>
         <StyledTopContainer>
           <ActivityTypeDropdown activity={activity} />
@@ -219,6 +221,7 @@ export function ActivityEditor({
             id: activity.id,
             comments: activity.comments ?? [],
           }}
+          scrollableContainerRef={containerRef}
         />
       )}
     </StyledContainer>

front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx

@@ -13,6 +13,7 @@ const StyledContainer = styled.div`
   height: 100%;
   justify-content: space-between;
   overflow-y: auto;
+  position: relative;
 `;
 
 type OwnProps = {