From b33a97ea5b406af58cd0b0ccff0cbbfb6b8b4fa1 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Mon, 13 Oct 2025 12:42:41 +0800
Subject: [PATCH] style: update comment thread UI with design specs

- Fix edit bubble: keep avatar visible and match ThreadMessage layout
- Update edit container: rounded-xl, p-1, shadow-md, backdrop-blur
- Add keyboard shortcut icons (Cmd+Enter) to Save button
- Fix hover background: full-width with -mx-4 negative margin technique
- Apply design tokens consistently across components
---
 .../workflow/comment/mention-input.tsx        | 11 ++++-
 .../components/workflow/comment/thread.tsx    | 42 ++++++++++++-------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 9fb438c516..7f5ca1e924 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -15,7 +15,7 @@ import {
 import { createPortal } from 'react-dom'
 import { useParams } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
-import { RiArrowUpLine, RiAtLine, RiLoader2Line } from '@remixicon/react'
+import { RiArrowUpLine, RiAtLine, RiCommandLine, RiCornerDownLeftLine, RiLoader2Line } from '@remixicon/react'
 import Textarea from 'react-textarea-autosize'
 import Button from '@/app/components/base/button'
 import Avatar from '@/app/components/base/avatar'
@@ -583,9 +583,16 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
                 size='small'
                 disabled={loading || !value.trim()}
                 onClick={() => handleSubmit()}
+                className='gap-1'
               >
                 {loading && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
-                {t('common.operation.save')}
+                <span>{t('common.operation.save')}</span>
+                {!loading && (
+                  <div className='flex gap-0.5'>
+                    <RiCommandLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
+                    <RiCornerDownLeftLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
+                  </div>
+                )}
               </Button>
             </div>
           </div>
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index aee576d857..291da66c07 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -414,7 +414,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
           ref={messageListRef}
           className='relative mt-2 flex-1 overflow-y-auto px-4 pb-4'
         >
-          <div className='rounded-lg py-2 pl-1 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'>
+          <div className='-mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'>
             <ThreadMessage
               authorId={comment.created_by_account?.id || ''}
               authorName={comment.created_by_account?.name || t('workflow.comments.fallback.user')}
@@ -432,7 +432,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                 return (
                   <div
                     key={reply.id}
-                    className='group relative rounded-lg py-2 pl-1 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'
+                    className='group relative -mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'
                   >
                     {isOwnReply && !isReplyEditing && (
                       <PortalToFollowElem
@@ -519,19 +519,31 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                       </PortalToFollowElem>
                     )}
                     {isReplyEditing ? (
-                      <div className='rounded-lg border border-components-chat-input-border bg-components-panel-bg-blur px-3 py-2 shadow-sm'>
-                        <MentionInput
-                          value={editingReply?.content ?? ''}
-                          onChange={newContent => setEditingReply(prev => prev ? { ...prev, content: newContent } : prev)}
-                          onSubmit={handleEditSubmit}
-                          onCancel={handleCancelEdit}
-                          placeholder={t('workflow.comments.placeholder.editReply')}
-                          disabled={loading}
-                          loading={replyUpdating}
-                          isEditing={true}
-                          className="system-sm-regular"
-                          autoFocus
-                        />
+                      <div className='flex gap-3 pt-1'>
+                        <div className='shrink-0'>
+                          <Avatar
+                            name={reply.created_by_account?.name || t('workflow.comments.fallback.user')}
+                            avatar={reply.created_by_account?.avatar_url || null}
+                            size={24}
+                            className='h-8 w-8 rounded-full'
+                          />
+                        </div>
+                        <div className='min-w-0 flex-1'>
+                          <div className='rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1 shadow-md backdrop-blur-[10px]'>
+                            <MentionInput
+                              value={editingReply?.content ?? ''}
+                              onChange={newContent => setEditingReply(prev => prev ? { ...prev, content: newContent } : prev)}
+                              onSubmit={handleEditSubmit}
+                              onCancel={handleCancelEdit}
+                              placeholder={t('workflow.comments.placeholder.editReply')}
+                              disabled={loading}
+                              loading={replyUpdating}
+                              isEditing={true}
+                              className="system-sm-regular"
+                              autoFocus
+                            />
+                          </div>
+                        </div>
                       </div>
                     ) : (
                       <ThreadMessage