Refactor Checkbox (#932)

* Refactor Checkbox

* Complete note completion

* Fixes

* Fix login

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

@@ -21,6 +21,8 @@ import { debounce } from '~/utils/debounce';
 import { CommentThreadActionBar } from '../right-drawer/components/CommentThreadActionBar';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
+import { CommentThreadTitle } from './CommentThreadTitle';
+
 import '@blocknote/core/style.css';
 
 const StyledContainer = styled.div`
@@ -54,29 +56,6 @@ const StyledTopContainer = styled.div`
   padding: 24px 24px 24px 48px;
 `;
 
-const StyledEditableTitleInput = styled.input`
-  background: transparent;
-
-  border: none;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex: 1 0 0;
-
-  flex-direction: column;
-  font-family: Inter;
-  font-size: ${({ theme }) => theme.font.size.xl};
-  font-style: normal;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: center;
-
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-  outline: none;
-  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
 const StyledTopActionsContainer = styled.div`
   align-items: center;
   display: flex;
@@ -86,7 +65,10 @@ const StyledTopActionsContainer = styled.div`
 `;
 
 type OwnProps = {
-  commentThread: Pick<CommentThread, 'id' | 'title' | 'body' | 'type'> & {
+  commentThread: Pick<
+    CommentThread,
+    'id' | 'title' | 'body' | 'type' | 'completedAt'
+  > & {
     comments?: Array<CommentForDrawer> | null;
   } & {
     commentThreadTargets?: Array<
@@ -106,6 +88,9 @@ export function CommentThreadEditor({
     useState<boolean>(false);
 
   const [title, setTitle] = useState<string | null>(commentThread.title ?? '');
+  const [completedAt, setCompletedAt] = useState<string | null>(
+    commentThread.completedAt ?? '',
+  );
 
   const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
 
@@ -123,6 +108,23 @@ export function CommentThreadEditor({
     },
     [commentThread, updateCommentThreadMutation],
   );
+
+  const handleActivityCompletionChange = useCallback(
+    (value: boolean) => {
+      updateCommentThreadMutation({
+        variables: {
+          id: commentThread.id,
+          completedAt: value ? new Date().toISOString() : null,
+        },
+        refetchQueries: [
+          getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        ],
+      });
+      setCompletedAt(value ? new Date().toISOString() : null);
+    },
+    [commentThread, updateCommentThreadMutation],
+  );
+
   const debouncedUpdateTitle = debounce(updateTitle, 200);
 
   function updateTitleFromBody(body: string) {
@@ -145,16 +147,16 @@ export function CommentThreadEditor({
             <CommentThreadTypeDropdown commentThread={commentThread} />
             <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
           </StyledTopActionsContainer>
-          <StyledEditableTitleInput
-            autoComplete="off"
-            autoFocus
-            placeholder={`${commentThread.type} title (optional)`}
-            onChange={(event) => {
+          <CommentThreadTitle
+            title={title ?? ''}
+            completed={!!completedAt}
+            type={commentThread.type}
+            onTitleChange={(newTitle) => {
+              setTitle(newTitle);
               setHasUserManuallySetTitle(true);
-              setTitle(event.target.value);
-              debouncedUpdateTitle(event.target.value);
+              debouncedUpdateTitle(newTitle);
             }}
-            value={title ?? ''}
+            onCompletionChange={handleActivityCompletionChange}
           />
           <PropertyBox>
             <PropertyBoxItem

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

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+} from '@/ui/input/components/Checkbox';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledEditableTitleInput = styled.input<{
+  completed: boolean;
+  value: string;
+}>`
+  background: transparent;
+
+  border: none;
+  color: ${({ theme, value }) =>
+    value ? theme.font.color.primary : theme.font.color.light};
+  display: flex;
+
+  flex-direction: column;
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  outline: none;
+  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckboxContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+type OwnProps = {
+  title: string;
+  type: ActivityType;
+  completed: boolean;
+  onTitleChange: (title: string) => void;
+  onCompletionChange: (value: boolean) => void;
+};
+
+export function CommentThreadTitle({
+  title,
+  completed,
+  type,
+  onTitleChange,
+  onCompletionChange,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      {type === ActivityType.Task && (
+        <StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
+          <Checkbox
+            size={CheckboxSize.Large}
+            shape={CheckboxShape.Rounded}
+            checked={completed}
+          />
+        </StyledCheckboxContainer>
+      )}
+      <StyledEditableTitleInput
+        autoComplete="off"
+        autoFocus
+        placeholder={`${type} title (optional)`}
+        onChange={(event) => onTitleChange(event.target.value)}
+        value={title}
+        completed={completed}
+      />
+    </StyledContainer>
+  );
+}