From 0cd5af5ffa1de153e37ceb3526ee557af6f74123 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:15:38 +0800
Subject: [PATCH] fix: add comment tip (#5854)

---
 .../_shared/notify/InfoSnackbar.tsx           |  6 +--
 .../global-comment/add-comment/AddComment.tsx | 40 +++++++++++++------
 .../add-comment/AddCommentWrapper.tsx         |  3 +-
 frontend/resources/translations/en.json       |  2 +-
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx b/frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx
index a5c36318fb..bc43e60c45 100644
--- a/frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx
+++ b/frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx
@@ -31,8 +31,8 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
     };
 
     return (
-      <SnackbarContent ref={ref}>
-        <Paper className={`relative flex flex-col gap-4 border p-4 ${getBorderColor(type)}`}>
+      <SnackbarContent ref={ref} className={'flex items-center justify-center'}>
+        <Paper className={`relative flex flex-col gap-4 border p-5 ${getBorderColor(type)}`}>
           <div className={'flex w-full items-center justify-between text-base font-medium'}>
             <div className={'flex flex-1 items-center gap-2 text-left font-semibold'}>
               {getIcon(type)}
@@ -45,7 +45,7 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
             </div>
           </div>
 
-          <div className={'flex-1 pr-10'}>{message}</div>
+          <div className={'mx-8 flex-1'}>{message}</div>
           {showActions && (
             <div className={'flex w-full justify-end gap-4'}>
               <Button
diff --git a/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddComment.tsx b/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddComment.tsx
index 3a12168a2d..d466612429 100644
--- a/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddComment.tsx
+++ b/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddComment.tsx
@@ -16,9 +16,10 @@ interface AddCommentProps {
   setContent: (content: string) => void;
   focus: boolean;
   setFocus: (focus: boolean) => void;
+  fixed: boolean;
 }
 
-function AddComment({ content, setContent, focus, setFocus }: AddCommentProps) {
+function AddComment({ content, setContent, focus, setFocus, fixed }: AddCommentProps) {
   const { reload, replyCommentId, replyComment: setReplyCommentId } = useGlobalCommentContext();
 
   const { t } = useTranslation();
@@ -50,24 +51,37 @@ function AddComment({ content, setContent, focus, setFocus }: AddCommentProps) {
       setContent('');
 
       setReplyCommentId(null);
-      notify.info({
-        type: 'success',
-        title: t('globalComment.commentAddedSuccessfully'),
-        message: t('globalComment.askForViewComment'),
-        okText: t('button.yes'),
-        onOk: () => {
-          const element = document.getElementById('addComment') as HTMLElement;
+      if (fixed) {
+        notify.info({
+          type: 'success',
+          title: t('globalComment.commentAddedSuccessfully'),
+          message: t('globalComment.commentAddedSuccessTip'),
+          okText: t('button.yes'),
+          onOk: () => {
+            const element = document.getElementById('addComment') as HTMLElement;
 
-          if (!element) return;
-          void smoothScrollIntoViewIfNeeded(element, { behavior: 'smooth', scrollMode: 'if-needed', block: 'start' });
-        },
-      });
+            if (!element) return;
+            void smoothScrollIntoViewIfNeeded(element, { behavior: 'smooth', scrollMode: 'if-needed', block: 'start' });
+          },
+        });
+      }
     } catch (_e) {
       notify.error(t('globalComment.failedToAddComment'));
     } finally {
       setLoading(false);
     }
-  }, [createCommentOnPublishView, viewId, loading, content, replyCommentId, reload, setReplyCommentId, t, setContent]);
+  }, [
+    fixed,
+    createCommentOnPublishView,
+    viewId,
+    loading,
+    content,
+    replyCommentId,
+    reload,
+    setReplyCommentId,
+    t,
+    setContent,
+  ]);
 
   return (
     <div className={'flex flex-col gap-2'}>
diff --git a/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddCommentWrapper.tsx b/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddCommentWrapper.tsx
index 10d3df5237..a6cdde5538 100644
--- a/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddCommentWrapper.tsx
+++ b/frontend/appflowy_web_app/src/components/global-comment/add-comment/AddCommentWrapper.tsx
@@ -50,13 +50,14 @@ export function AddCommentWrapper() {
           setContent={setContent}
           focus={focus && !showFixedAddComment}
           setFocus={setFocus}
+          fixed={false}
         />
       </div>
       {showFixedAddComment && (
         <Portal container={document.body}>
           <div className={'fixed top-[48px] flex w-full justify-center'}>
             <div className={'w-[964px] min-w-0 max-w-full px-16 max-sm:px-4'}>
-              <AddComment content={content} setContent={setContent} focus={focus} setFocus={setFocus} />
+              <AddComment fixed content={content} setContent={setContent} focus={focus} setFocus={setFocus} />
             </div>
           </div>
         </Portal>
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
index 1cb6c326db..090fda3bf7 100644
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@@ -2365,6 +2365,6 @@
     "readMore": "Read more",
     "failedToAddComment": "Failed to add comment",
     "commentAddedSuccessfully": "Comment added successfully.",
-    "askForViewComment": "Do you want to view the comment?"
+    "commentAddedSuccessTip": "You've just added or replied to a comment. Would you like to jump to the top to see the latest comments?"
   }
 }
\ No newline at end of file