fix(comments): rebuild the comment composer on the create-post UX

packages/extension/src/companion/CompanionDiscussion.tsx

@@ -10,7 +10,12 @@ import { useBackgroundRequest } from '@dailydotdev/shared/src/hooks/companion';
 import { generateCommentsQueryKey } from '@dailydotdev/shared/src/lib/query';
 import { getCompanionWrapper } from '@dailydotdev/shared/src/lib/extension';
 import { ProfileImageSize } from '@dailydotdev/shared/src/components/ProfilePicture';
-import CommentInputOrModal from '@dailydotdev/shared/src/components/comments/CommentInputOrModal';
+import type { CommentInputProps } from '@dailydotdev/shared/src/components/comments/CommentInput';
+import CommentInput from '@dailydotdev/shared/src/components/comments/CommentInput';
+
+const CompanionCommentInput = (props: CommentInputProps): ReactElement => (
+  <CommentInput {...props} forceInline />
+);
 
 interface CompanionDiscussionProps {
   post: PostBootData;
@@ -24,8 +29,7 @@ export function CompanionDiscussion({
   style,
   className,
   onShowUpvoted,
-}: CompanionDiscussionProps): ReactElement {
-  const commentClasses = { tab: '!min-h-[14.5rem]' };
+}: CompanionDiscussionProps): ReactElement | null {
   const { openShareComment } = useShareComment(Origin.Companion);
   useBackgroundRequest(
     generateCommentsQueryKey({ postId: post?.id, sortBy: undefined }),
@@ -49,19 +53,15 @@ export function CompanionDiscussion({
         <NewComment
           size={ProfileImageSize.Medium}
           post={post}
-          className={{
-            ...commentClasses,
-            container: 'companion-new-comment-button mb-4',
-          }}
-          CommentInputOrModal={CommentInputOrModal}
+          className={{ container: 'companion-new-comment-button mb-4' }}
+          CommentInput={CompanionCommentInput}
         />
         <PostComments
           post={post}
           origin={Origin.Companion}
           onShare={(comment) => openShareComment(comment, post)}
           onClickUpvote={onShowUpvoted}
           modalParentSelector={getCompanionWrapper}
-          className={commentClasses}
         />
       </div>
     </div>

packages/shared/src/components/comments/CommentInput.spec.tsx

@@ -0,0 +1,103 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+import type { Post } from '../../graphql/posts';
+import { useViewSize } from '../../hooks';
+import CommentInput from './CommentInput';
+
+const mockComposerProps = jest.fn();
+const mockDrawerProps = jest.fn();
+
+jest.mock('../../hooks', () => {
+  const actual = jest.requireActual('../../hooks');
+
+  return {
+    ...actual,
+    useViewSize: jest.fn(),
+  };
+});
+
+jest.mock('../../hooks/post/useMutateComment', () => ({
+  useMutateComment: () => ({
+    mutateComment: jest.fn(),
+    isLoading: false,
+    isSuccess: false,
+  }),
+}));
+
+jest.mock('../fields/MarkdownInput/CommentMarkdownInput', () => ({
+  CommentMarkdownInput: (props: Record<string, unknown>) => {
+    mockComposerProps(props);
+    return <div>composer</div>;
+  },
+}));
+
+jest.mock('../drawers/Drawer', () => {
+  const actual = jest.requireActual('../drawers/Drawer');
+
+  return {
+    ...actual,
+    Drawer: ({ children, ...props }: React.PropsWithChildren) => {
+      mockDrawerProps(props);
+      return <div>{children}</div>;
+    },
+  };
+});
+
+const post = { id: 'post-1', source: { id: 'source-1' } } as Post;
+
+describe('CommentInput', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('opens as a full-screen drawer on mobile, focused and filling it', () => {
+    jest.mocked(useViewSize).mockReturnValue(false);
+    render(<CommentInput post={post} onClose={jest.fn()} />);
+
+    expect(screen.getByText('composer')).toBeInTheDocument();
+    expect(mockDrawerProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isFullScreen: true,
+        appendOnRoot: true,
+      }),
+    );
+    expect(mockComposerProps).toHaveBeenCalledWith(
+      expect.objectContaining({ fills: true, autoFocus: true }),
+    );
+  });
+
+  it('drops the drawer default padding so content is not padded twice', () => {
+    // Including the bottom: the composer's action bar carries the safe area.
+    jest.mocked(useViewSize).mockReturnValue(false);
+    render(<CommentInput post={post} onClose={jest.fn()} />);
+
+    const { className } = mockDrawerProps.mock.calls[0][0];
+    expect(className.wrapper).toContain('!p-0');
+  });
+
+  it('keeps the draft when crossing the breakpoint remounts the editor', () => {
+    jest.mocked(useViewSize).mockReturnValue(true);
+    const { rerender } = render(<CommentInput post={post} />);
+
+    const { onChange } = mockComposerProps.mock.calls.at(-1)[0];
+    act(() => onChange('my draft'));
+
+    jest.mocked(useViewSize).mockReturnValue(false);
+    rerender(<CommentInput post={post} />);
+
+    expect(mockComposerProps).toHaveBeenLastCalledWith(
+      expect.objectContaining({ initialContent: 'my draft' }),
+    );
+  });
+
+  it('stays inline on desktop', () => {
+    jest.mocked(useViewSize).mockReturnValue(true);
+    render(<CommentInput post={post} onClose={jest.fn()} />);
+
+    expect(screen.getByText('composer')).toBeInTheDocument();
+    expect(mockDrawerProps).not.toHaveBeenCalled();
+    expect(mockComposerProps).toHaveBeenCalledWith(
+      expect.objectContaining({ fills: false }),
+    );
+  });
+});

packages/shared/src/components/comments/CommentInput.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput';
+import { CommentMarkdownInput } from '../fields/MarkdownInput/CommentMarkdownInput';
+import { WriteCommentContext } from '../../contexts/WriteCommentContext';
+import { useMutateComment } from '../../hooks/post/useMutateComment';
+import { useViewSize, ViewSize } from '../../hooks';
+import { Drawer, DrawerPosition } from '../drawers/Drawer';
+
+export interface CommentInputProps extends CommentMarkdownInputProps {
+  onClose?: () => void;
+  /** Inline on small viewports too — the companion must not cover the host page. */
+  forceInline?: boolean;
+}
+
+export default function CommentInput({
+  onClose,
+  className,
+  forceInline = false,
+  ...props
+}: CommentInputProps): ReactElement {
+  const isFullScreen = !useViewSize(ViewSize.Laptop) && !forceInline;
+  // The draft lives above the drawer/inline swap at the Laptop breakpoint.
+  const [draft, setDraft] = useState<string>();
+
+  const mutateCommentResult = useMutateComment({
+    post: props.post,
+    editCommentId: props.editCommentId,
+    parentCommentId: props.parentCommentId,
+    onCommented: props.onCommented,
+  });
+
+  const composer = (
+    <CommentMarkdownInput
+      {...props}
+      autoFocus={isFullScreen || props.autoFocus}
+      fills={isFullScreen}
+      className={isFullScreen ? undefined : className}
+      initialContent={draft ?? props.initialContent}
+      onChange={(value) => {
+        setDraft(value);
+        props.onChange?.(value);
+      }}
+      onClose={onClose}
+    />
+  );
+
+  return (
+    <WriteCommentContext.Provider
+      value={{ mutateComment: mutateCommentResult }}
+    >
+      {isFullScreen ? (
+        <Drawer
+          isOpen
+          isFullScreen
+          // Transformed ancestors (`animate-composer-in`) trap position: fixed
+          appendOnRoot
+          position={DrawerPosition.Bottom}
+          onClose={() => onClose?.()}
+          className={{ wrapper: 'flex flex-col !p-0' }}
+        >
+          {composer}
+        </Drawer>
+      ) : (
+        composer
+      )}
+    </WriteCommentContext.Provider>
+  );
+}

packages/shared/src/components/comments/MainComment.tsx

@@ -27,11 +27,8 @@ import { useEditCommentProps } from '../../hooks/post/useEditCommentProps';
 import { useLogContext } from '../../contexts/LogContext';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 
-const CommentInputOrModal = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "commentInputOrModal" */ './CommentInputOrModal'
-    ),
+const CommentInput = dynamic(
+  () => import(/* webpackChunkName: "commentInput" */ './CommentInput'),
 );
 
 type ClassName = {
@@ -210,29 +207,28 @@ export default function MainComment({
         </div>
       )}
       {editProps && (
-        <CommentInputOrModal
+        <CommentInput
           {...editProps}
           post={props.post}
           onCommented={(...params) => {
             onEdit(null);
             onCommented?.(...params);
           }}
           onClose={() => onEdit(null)}
-          className={{ input: className?.commentBox }}
+          className={className?.commentBox}
         />
       )}
       {commentId === comment.id && (
         <div className={classNames(isModalThread && 'mt-2')}>
-          <CommentInputOrModal
+          <CommentInput
             {...replyProps}
             post={props.post}
             onCommented={(...params) => {
               onReplyTo(null);
               onCommented?.(...params);
             }}
             onClose={() => onReplyTo(null)}
-            className={{ input: className?.commentBox }}
-            replyToCommentId={commentId}
+            className={className?.commentBox}
           />
         </div>
       )}

packages/shared/src/components/comments/SubComment.tsx

@@ -9,11 +9,8 @@ import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentM
 import { useComments } from '../../hooks/post';
 import { useEditCommentProps } from '../../hooks/post/useEditCommentProps';
 
-const CommentInputOrModal = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "commentInputOrModal" */ './CommentInputOrModal'
-    ),
+const CommentInput = dynamic(
+  () => import(/* webpackChunkName: "commentInput" */ './CommentInput'),
 );
 
 export interface SubCommentProps
@@ -116,29 +113,28 @@ function SubComment({
         </CommentBox>
       )}
       {editProps && (
-        <CommentInputOrModal
+        <CommentInput
           {...editProps}
           post={props.post}
           onCommented={(data, isNew) => {
             onEdit(null);
             onCommented?.(data, isNew);
           }}
           onClose={() => onEdit(null)}
-          className={{ input: className }}
+          className={className}
         />
       )}
       {commentId === comment.id && inputProps && (
         <div className={classNames(isModalThread && 'mt-2')}>
-          <CommentInputOrModal
+          <CommentInput
             {...inputProps}
-            className={{ input: className }}
+            className={className}
             post={props.post}
             onCommented={(...params) => {
               onReplyTo(null);
               onCommented?.(...params);
             }}
             onClose={() => onReplyTo(null)}
-            replyToCommentId={commentId}
           />
         </div>
       )}