optimize last comment widget

frontend/.size-limit.js

@@ -1,14 +1,14 @@
 module.exports = [
   {
     path: 'public/embed.js',
-    limit: '2.5 KB',
+    limit: '2.55 KB',
   },
   {
     limit: '68 KB',
     path: 'public/remark.js',
   },
   {
-    limit: '55 KB',
+    limit: '30 KB',
     path: 'public/last-comments.js',
   },
   {

frontend/app/components/comment-form/index.ts

@@ -1,4 +1,4 @@
-export { CommentForm } from './comment-form';
+export { CommentForm, Props } from './comment-form';
 
 import '@app/components/raw-content';
 

frontend/app/components/comment/comment.test.tsx

@@ -7,6 +7,7 @@ import { sleep } from '@app/utils/sleep';
 import { StaticStore } from '@app/common/static_store';
 
 const DefaultProps: Partial<Props> = {
+  CommentForm: null,
   post_info: {
     read_only: false,
   } as PostInfo,

frontend/app/components/comment/comment.tsx

@@ -2,7 +2,7 @@
 
 import './styles';
 
-import { createElement, JSX, Component, createRef } from 'preact';
+import { createElement, JSX, Component, createRef, ComponentType } from 'preact';
 import b from 'bem-react-helper';
 
 import { getHandleClickProps } from '@app/common/accessibility';
@@ -15,7 +15,7 @@ import { Theme, BlockTTL, Comment as CommentType, PostInfo, User, CommentMode }
 import { extractErrorMessageFromResponse, FetcherError } from '@app/utils/errorUtils';
 import { isUserAnonymous } from '@app/utils/isUserAnonymous';
 
-import { CommentForm } from '@app/components/comment-form';
+import { Props as CommentFormProps } from '@app/components/comment-form';
 import { AvatarIcon } from '@app/components/avatar-icon';
 import { Button } from '@app/components/button';
 import Countdown from '@app/components/countdown';
@@ -25,6 +25,7 @@ import postMessage from '@app/utils/postMessage';
 
 export type Props = {
   user: User | null;
+  CommentForm: ComponentType<CommentFormProps> | null;
   data: CommentType;
   repliesCount?: number;
   post_info: PostInfo | null;
@@ -464,6 +465,8 @@ export class Comment extends Component<Props, State> {
     const uploadImageHandler = this.isAnonymous() ? undefined : this.props.uploadImage;
     const commentControls = this.getCommentControls();
 
+    const CommentForm = this.props.CommentForm;
+
     /**
      * CommentType adapted for rendering
      */
@@ -716,7 +719,7 @@ export class Comment extends Component<Props, State> {
           )}
         </div>
 
-        {isReplying && props.view === 'main' && (
+        {CommentForm && isReplying && props.view === 'main' && (
           <CommentForm
             user={props.user}
             theme={props.theme}
@@ -732,7 +735,7 @@ export class Comment extends Component<Props, State> {
           />
         )}
 
-        {isEditing && props.view === 'main' && (
+        {CommentForm && isEditing && props.view === 'main' && (
           <CommentForm
             user={props.user}
             theme={props.theme}

frontend/app/components/list-comments/list-comments.tsx

@@ -15,6 +15,7 @@ export const ListComments = ({ comments = [] }: Props) => (
     <div className="list-comments">
       {comments.map(comment => (
         <Comment
+          CommentForm={null}
           data={comment}
           level={0}
           view="preview"

frontend/app/components/root/root.tsx

@@ -258,6 +258,7 @@ export class Root extends Component<Props, State> {
                 <div className="root__pinned-comments" role="region" aria-label="Pinned comments">
                   {this.props.pinnedComments.map(comment => (
                     <Comment
+                      CommentForm={CommentForm}
                       key={`pinned-comment-${comment.id}`}
                       view="pinned"
                       data={comment}

frontend/app/components/thread/thread.tsx

@@ -11,6 +11,7 @@ import { setCollapse } from '@app/store/thread/actions';
 import { getThreadIsCollapsed } from '@app/store/thread/getters';
 import { InView } from '@app/components/root/in-view/in-view';
 import { ConnectedComment as Comment } from '@app/components/comment/connected-comment';
+import { CommentForm } from '@app/components/comment-form';
 
 interface Props {
   id: CommentInterface['id'];
@@ -51,6 +52,7 @@ export const Thread: FunctionComponent<Props> = ({ id, level, mix, getPreview })
       <InView>
         {inviewProps => (
           <Comment
+            CommentForm={CommentForm}
             ref={ref => inviewProps.ref(ref)}
             key={`comment-${id}`}
             view="main"

frontend/app/components/user-info/last-comments-list.tsx

@@ -15,6 +15,7 @@ const LastCommentsList = ({ comments, isLoading }: { comments: CommentType[]; is
     <div>
       {comments.map(comment => (
         <Comment
+          CommentForm={null}
           data={comment}
           level={0}
           view="user"