Return Comments Submit

package.json

@@ -49,7 +49,7 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.52.2",
+    "@taskany/bricks": "5.53.0",
     "@taskany/colors": "1.13.1",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",

src/components/CommentCreateForm/CommentCreateForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { State as StateDataType } from '@prisma/client';
 import { nullable, useLatest } from '@taskany/bricks';
 import { IconDownSmallSolid, IconUpSmallSolid } from '@taskany/icons';
 import { Avatar, Button } from '@taskany/bricks/harmony';
@@ -50,11 +50,13 @@
     const [description, setDescription] = useState(currentDescription);
     const descriptionRef = useLatest(description);
     const [focused, setFocused] = useState(Boolean(currentDescription));
+    const [controls, setControls] = useState(focused);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState<{ message: string } | undefined>();
 
     const onCommentFocus = useCallback(() => {
         setFocused(true);
+        setControls(true);
         onFocus?.();
     }, [onFocus]);
 
@@ -76,19 +78,21 @@
 
             setBusy(true);
             setFocused(false);
+            setControls(false);
 
             await onSubmit?.(form);
 
             setDescription('');
             setPushState(form.stateId ? statesMap[form.stateId] : undefined);
 
             setBusy(false);
-            setFocused(true);
+            setControls(true);
         },
         [onSubmit, statesMap],
     );
 
     const onCancelCreate = useCallback(() => {
+        setControls(false);
         setBusy(false);
         setPushState(stateId ? statesMap[stateId] : undefined);
         setDescription('');
@@ -137,6 +141,7 @@
             <CommentForm
                 description={description}
                 focused={focused}
+                controls={controls}
                 busy={busy}
                 onChange={onCommentChange}
                 onSubmit={onCommentFormSubmit('pushState')}

src/components/CommentForm/CommentForm.module.css

@@ -6,7 +6,6 @@
 
 .CommentFormWrapper {
     position: relative;
-    background-color: var(--input-fill);
 }
 
 .CommentFormWrapper::before {

src/components/CommentForm/CommentForm.tsx

@@ -15,6 +15,7 @@ import s from './CommentForm.module.css';
 interface CommentFormProps {
     actionButton: React.ReactNode;
     focused?: boolean;
+    controls?: boolean;
     autoFocus?: boolean;
     busy?: boolean;
     description?: string;
@@ -31,6 +32,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
     description = '',
     autoFocus,
     focused,
+    controls,
     busy,
     actionButton,
     onChange,
@@ -80,7 +82,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                     <FormControlEditor
                         disabled={busy}
                         placeholder={tr('Leave a comment')}
-                        height={focused ? 120 : 80}
+                        height={controls ? 120 : 80}
                         onCancel={onCommentCancel}
                         onBlur={onBlur}
                         onFocus={onFocus}
@@ -96,7 +98,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                     ))}
                 </FormControl>
 
-                {nullable(focused, () => (
+                {nullable(controls, () => (
                     <FormActions>
                         <div className={s.FormHelpButton}>
                             <HelpButton slug="comments" />

src/components/CommentView/CommentView.tsx

@@ -80,6 +80,7 @@ export const CommentView: FC<CommentViewProps> = ({
 
     const [editMode, setEditMode] = useState(false);
     const [focused, setFocused] = useState(false);
+    const [controls, setControls] = useState(focused);
     const [busy, setBusy] = useState(false);
     const [commentDescription, setCommentDescription] = useState({ description });
     const { reactionsProps } = useReactionsResource(reactions);
@@ -100,7 +101,7 @@ export const CommentView: FC<CommentViewProps> = ({
             setEditMode(false);
             setBusy(true);
             setFocused(false);
-
+            setControls(false);
             onChange?.({ description: form.description });
 
             // optimistic update
@@ -118,11 +119,20 @@ export const CommentView: FC<CommentViewProps> = ({
 
     const onCommentCancel = useCallback(() => {
         setEditMode(false);
-        setFocused(false);
+        setControls(false);
         setCommentDescription({ description });
         onCancel?.();
     }, [description, onCancel]);
 
+    const onCommentFocus = useCallback(() => {
+        setFocused(true);
+        setControls(true);
+    }, []);
+
+    const onCommentBlur = useCallback(() => {
+        setFocused(false);
+    }, []);
+
     const dropdownItems = useMemo(() => {
         const items = [
             {
@@ -142,6 +152,7 @@ export const CommentView: FC<CommentViewProps> = ({
                     onClick: () => {
                         setEditMode(true);
                         setFocused(true);
+                        setControls(true);
                     },
                 },
                 {
@@ -187,9 +198,12 @@ export const CommentView: FC<CommentViewProps> = ({
                 <CommentForm
                     description={commentDescription.description}
                     focused={focused}
+                    controls={controls}
                     busy={busy}
                     autoFocus
                     onChange={setCommentDescription}
+                    onFocus={onCommentFocus}
+                    onBlur={onCommentBlur}
                     onSubmit={onCommentSubmit}
                     onCancel={onCommentCancel}
                     actionButton={