github-issue-tower-defence-management 1.151.6 → 1.152.0

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleCommentComposer.tsx

@@ -1,14 +1,8 @@
 import { useRef, useState } from 'react';
-import {
-  formatFullTimestamp,
-  formatRelativeTime,
-} from '../../logic/relativeTime';
 import type { ConsoleComment } from '../../logic/types';
-import { ConsoleMarkdownContent } from '../content/ConsoleMarkdownContent';
 
 export type ConsoleCommentComposerProps = {
   initiallyOpen: boolean;
-  now: number;
   onSubmit: (body: string) => Promise<ConsoleComment>;
   onUploadFile?: (file: File) => Promise<string>;
 };
@@ -38,7 +32,6 @@ export const appendAttachmentMarkdown = (
 
 export const ConsoleCommentComposer = ({
   initiallyOpen,
-  now,
   onSubmit,
   onUploadFile,
 }: ConsoleCommentComposerProps) => {
@@ -48,7 +41,6 @@ export const ConsoleCommentComposer = ({
   const [uploadStatus, setUploadStatus] = useState<UploadStatus>({
     kind: 'idle',
   });
-  const [posted, setPosted] = useState<ConsoleComment[]>([]);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const submit = async (): Promise<void> => {
@@ -58,8 +50,7 @@ export const ConsoleCommentComposer = ({
     }
     setStatus({ kind: 'posting' });
     try {
-      const comment = await onSubmit(body);
-      setPosted((previous) => [...previous, comment]);
+      await onSubmit(body);
       setDraft('');
       setStatus({ kind: 'idle' });
     } catch (error) {
@@ -101,29 +92,6 @@ export const ConsoleCommentComposer = ({
       >
         {open ? '✕ Close' : '💬 Add a comment'}
       </button>
-      {posted.length > 0 && (
-        <div className="console-composer-posted">
-          {posted.map((comment) => (
-            <article
-              key={`${comment.author}:${comment.createdAt}:${comment.body}`}
-              className="console-comment"
-            >
-              <header
-                className="console-comment-header"
-                title={formatFullTimestamp(comment.createdAt)}
-              >
-                <span className="console-comment-author">
-                  {comment.author === '' ? 'you' : comment.author}
-                </span>
-                <span className="console-comment-time">
-                  {formatRelativeTime(comment.createdAt, now)}
-                </span>
-              </header>
-              <ConsoleMarkdownContent body={comment.body} />
-            </article>
-          ))}
-        </div>
-      )}
       {open && (
         <div className="console-composer-form">
           <textarea

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleItemDetail.tsx

@@ -51,6 +51,7 @@ export type ConsoleItemDetailProps = {
   bodyIsLoading: boolean;
   bodyError: string | null;
   comments: ConsoleComment[];
+  hasPostedComment?: boolean;
   commentsAreLoading: boolean;
   commentsError: string | null;
   files: ConsoleChangedFile[];
@@ -82,6 +83,7 @@ export const ConsoleItemDetail = ({
   bodyIsLoading,
   bodyError,
   comments,
+  hasPostedComment = false,
   commentsAreLoading,
   commentsError,
   files,
@@ -275,9 +277,10 @@ export const ConsoleItemDetail = ({
       )}
 
       <ConsolePanel
+        key={hasPostedComment ? 'comments-with-posted' : 'comments'}
         title="Comments"
         count={commentsCount}
-        defaultCollapsed={item.isPr}
+        defaultCollapsed={item.isPr && !hasPostedComment}
       >
         <ConsoleCommentList
           comments={comments}

package/src/adapter/entry-points/console/ui/src/features/console/logic/postedComments.test.ts

@@ -0,0 +1,44 @@
+import { mergePostedComments } from './postedComments';
+import type { ConsoleComment } from './types';
+
+const loadedComment: ConsoleComment = {
+  author: 'HiromiShikata',
+  body: 'Loaded from GitHub.',
+  createdAt: '2026-06-19T10:00:00.000Z',
+};
+
+const postedComment: ConsoleComment = {
+  author: 'HiromiShikata',
+  body: 'Posted from the console.',
+  createdAt: '2026-06-19T11:58:00.000Z',
+};
+
+describe('mergePostedComments', () => {
+  it('appends a posted comment after the loaded comments', () => {
+    expect(mergePostedComments([loadedComment], [postedComment])).toEqual([
+      loadedComment,
+      postedComment,
+    ]);
+  });
+
+  it('drops a posted comment that the reloaded comments already carry', () => {
+    expect(
+      mergePostedComments([loadedComment, postedComment], [postedComment]),
+    ).toEqual([loadedComment, postedComment]);
+  });
+
+  it('keeps a posted comment whose body differs from an otherwise identical loaded comment', () => {
+    const editedComment: ConsoleComment = {
+      ...postedComment,
+      body: 'Posted from the console, then edited.',
+    };
+    expect(mergePostedComments([postedComment], [editedComment])).toEqual([
+      postedComment,
+      editedComment,
+    ]);
+  });
+
+  it('returns the loaded comments unchanged when nothing was posted', () => {
+    expect(mergePostedComments([loadedComment], [])).toEqual([loadedComment]);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/logic/postedComments.ts

@@ -0,0 +1,17 @@
+import type { ConsoleComment } from './types';
+
+const commentIdentity = (comment: ConsoleComment): string =>
+  JSON.stringify([comment.author, comment.createdAt, comment.body]);
+
+export const mergePostedComments = (
+  loadedComments: ConsoleComment[],
+  postedComments: ConsoleComment[],
+): ConsoleComment[] => {
+  const loadedIdentities = new Set(loadedComments.map(commentIdentity));
+  return [
+    ...loadedComments,
+    ...postedComments.filter(
+      (comment) => !loadedIdentities.has(commentIdentity(comment)),
+    ),
+  ];
+};

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsoleItemDetailContainer.test.tsx

@@ -140,6 +140,83 @@ describe('ConsoleItemDetailContainer', () => {
     expect(getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
   });
 
+  it('puts a posted comment in the scrolling comment list and leaves the sticky dock holding only the input', async () => {
+    const operations = buildOperations();
+    operations.addComment = jest.fn(async (_item, body) => ({
+      author: 'HiromiShikata',
+      body,
+      createdAt: '2026-06-19T11:58:00.000Z',
+    }));
+    const { container, getByPlaceholderText, getByText } = render(
+      <ConsoleItemDetailContainer
+        tab="unread"
+        item={issueItem}
+        caches={buildCaches()}
+        operations={operations}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        storyColors={consoleStoryColorsFixture}
+        storyName="TDPM Console port"
+        overlayStatus={null}
+        now={Date.parse('2026-06-19T12:00:00.000Z')}
+        onQueueAction={jest.fn()}
+      />,
+    );
+
+    fireEvent.change(getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'The dock must not grow with every comment.' },
+    });
+    fireEvent.click(getByText('Comment'));
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('.console-comment-list')?.textContent,
+      ).toContain('The dock must not grow with every comment.');
+    });
+    expect(
+      container.querySelector('.console-detail-dock')?.textContent,
+    ).not.toContain('The dock must not grow with every comment.');
+    expect(
+      container.querySelectorAll('.console-detail-dock .console-comment')
+        .length,
+    ).toBe(0);
+  });
+
+  it('opens the comments panel of a pull request item so the posted comment is on screen', async () => {
+    const operations = buildOperations();
+    operations.addComment = jest.fn(async (_item, body) => ({
+      author: 'HiromiShikata',
+      body,
+      createdAt: '2026-06-19T11:58:00.000Z',
+    }));
+    const { container, getByPlaceholderText, getByText } = render(
+      <ConsoleItemDetailContainer
+        tab="prs"
+        item={prItem}
+        caches={buildCaches()}
+        operations={operations}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        storyColors={consoleStoryColorsFixture}
+        storyName="TDPM Console port"
+        overlayStatus={null}
+        now={Date.parse('2026-06-19T12:00:00.000Z')}
+        onQueueAction={jest.fn()}
+      />,
+    );
+
+    fireEvent.change(getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Posted from the pull request item.' },
+    });
+    fireEvent.click(getByText('Comment'));
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('.console-comment-list')?.textContent,
+      ).toContain('Posted from the pull request item.');
+    });
+  });
+
   it('shows Approve for an issue item from the generated related open pull request urls before the related pull requests are fetched', () => {
     const operations = buildOperations();
     const onQueueAction = jest.fn();

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsoleItemDetailContainer.tsx

@@ -13,8 +13,10 @@ import type {
   ConsoleOperationHandlers,
   ConsolePendingReviewComment,
 } from '../logic/operations';
+import { mergePostedComments } from '../logic/postedComments';
 import type {
   ConsoleColor,
+  ConsoleComment,
   ConsoleFieldOption,
   ConsoleListItem,
   ConsoleOverlayStatus,
@@ -87,6 +89,15 @@ export const ConsoleItemDetailContainer = ({
     },
     [],
   );
+  const [postedComments, setPostedComments] = useState<ConsoleComment[]>([]);
+  const addComment = useCallback(
+    async (body: string): Promise<ConsoleComment> => {
+      const comment = await operations.addComment(item, body);
+      setPostedComments((previous) => [...previous, comment]);
+      return comment;
+    },
+    [item, operations],
+  );
 
   const handlers: ConsoleOperationHandlers = {
     onReview: (action) => {
@@ -159,7 +170,8 @@ export const ConsoleItemDetailContainer = ({
       body={detail.body}
       bodyIsLoading={detail.bodyIsLoading}
       bodyError={detail.bodyError}
-      comments={detail.comments}
+      comments={mergePostedComments(detail.comments, postedComments)}
+      hasPostedComment={postedComments.length > 0}
       commentsAreLoading={detail.commentsAreLoading}
       commentsError={detail.commentsError}
       files={detail.files}
@@ -179,8 +191,7 @@ export const ConsoleItemDetailContainer = ({
       commentComposer={
         <ConsoleCommentComposer
           initiallyOpen
-          now={now}
-          onSubmit={(body) => operations.addComment(item, body)}
+          onSubmit={addComment}
           onUploadFile={(file) => operations.uploadAttachment(item, file)}
         />
       }

package/src/adapter/entry-points/console/ui/src/index.css

@@ -855,13 +855,6 @@ body {
   color: #e6edf3;
 }
 
-.console-composer-posted {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .console-composer-form {
   margin-top: 8px;
 }