fix: mobile diff comment input placeholder and review comments pill

Use a shorter comment placeholder on mobile (drop the Cmd+Enter hint that has
no touch equivalent) so it no longer clips in the auto-sized textarea.

Add a remove (x) button to the review comments pill, matching the annotation
and dev-server-log pills, and stop the mobile touch-target min-height/width
from inflating the pill close buttons.
This commit is contained in:
Bohdan Triapitsyn
2026-06-02 20:50:08 +03:00
parent d0623705b1
commit f1b57f53d3
10 changed files with 40 additions and 1 deletions
@@ -1394,6 +1394,17 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
}
}
}, [currentSessionId, newSessionDraftOpen, removeInlineCommentDraft]);
// Review comments are the inline-comment drafts that aren't preview sources.
const removeReviewDrafts = React.useCallback(() => {
const sessionKey = currentSessionId ?? (newSessionDraftOpen ? 'draft' : '');
if (!sessionKey) return;
const drafts = useInlineCommentDraftStore.getState().drafts[sessionKey] ?? [];
for (const draft of drafts) {
if (draft.source !== 'preview-console' && draft.source !== 'preview-annotation') {
removeInlineCommentDraft(sessionKey, draft.id);
}
}
}, [currentSessionId, newSessionDraftOpen, removeInlineCommentDraft]);
// User message history for up/down arrow navigation.
// Keep this on a narrow hook instead of full session message records.
@@ -3973,6 +3984,16 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
>
<span className="text-xs font-medium text-muted-foreground">{t('chat.chatInput.reviewComments')}</span>
<span className="text-xs font-semibold" style={{ color: currentTheme?.colors?.status?.info }}>{reviewCount}</span>
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={removeReviewDrafts}
aria-label={t('chat.chatInput.reviewCommentsRemove')}
title={t('chat.chatInput.reviewCommentsRemove')}
>
<Icon name="close" className="h-3 w-3" />
</button>
</div>
) : null}
{previewConsoleCount > 0 ? (
@@ -3988,6 +4009,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={() => removePreviewDrafts('preview-console')}
aria-label={t('chat.chatInput.devServerLogsRemove')}
title={t('chat.chatInput.devServerLogsRemove')}
@@ -4009,6 +4031,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={() => removePreviewDrafts('preview-annotation')}
aria-label={t('chat.chatInput.previewContextRemove')}
title={t('chat.chatInput.previewContextRemove')}
@@ -147,7 +147,7 @@ export function InlineCommentInput({
value={text}
onChange={(e) => setText(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={t('inlineComment.input.placeholder')}
placeholder={isMobile ? t('inlineComment.input.placeholderShort') : t('inlineComment.input.placeholder')}
outerClassName="rounded-[var(--radius-xl)] bg-[var(--surface-subtle)] ring-1 ring-inset ring-border/60 focus-within:ring-2 focus-within:ring-[var(--interactive-focus-ring)]"
className="min-h-[80px] px-3 py-2.5 text-sm resize-y"
/>
+2
View File
@@ -1240,6 +1240,7 @@ export const dict = {
'rightSidebar.contextNotesTodo.toast.readPlanFileFailed': 'Failed to read plan file',
'inlineComment.range.lines': 'Lines {start}-{end}',
'inlineComment.input.placeholder': 'Add a comment... (Cmd+Enter to save)',
'inlineComment.input.placeholderShort': 'Add a comment...',
'inlineComment.actions.cancel': 'Cancel',
'inlineComment.actions.save': 'Save',
'inlineComment.actions.comment': 'Comment',
@@ -1776,6 +1777,7 @@ export const dict = {
'chat.chatInput.toast.openSessionFirst': 'Open a session first',
'chat.chatInput.toast.togglePermissionAutoAcceptFailed': 'Failed to toggle permission auto-accept',
'chat.chatInput.reviewComments': 'Review comments:',
'chat.chatInput.reviewCommentsRemove': 'Remove review comments',
'chat.chatInput.devServerLogs': 'Dev Server logs:',
'chat.chatInput.devServerLogsRemove': 'Remove Dev Server logs',
'chat.chatInput.previewAnnotations': 'Preview annotations:',
+2
View File
@@ -1206,6 +1206,7 @@ export const dict: Record<I18nKey, string> = {
"rightSidebar.contextNotesTodo.toast.readPlanFileFailed": "No se pudo leer el archivo del plan",
"inlineComment.range.lines": "Líneas {start}-{end}",
"inlineComment.input.placeholder": "Añadir un comentario... (Cmd+Enter para guardar)",
"inlineComment.input.placeholderShort": "Añadir un comentario...",
"inlineComment.actions.cancel": "Cancelar",
"inlineComment.actions.save": "Guardar",
"inlineComment.actions.comment": "Comentar",
@@ -1742,6 +1743,7 @@ export const dict: Record<I18nKey, string> = {
"chat.chatInput.toast.openSessionFirst": "Abre una sesión primero",
"chat.chatInput.toast.togglePermissionAutoAcceptFailed": "No se pudo cambiar la aceptación automática de permisos",
"chat.chatInput.reviewComments": "Comentarios de revisión:",
"chat.chatInput.reviewCommentsRemove": "Quitar comentarios de revisión",
"chat.chatInput.devServerLogs": "Logs del Dev Server:",
"chat.chatInput.devServerLogsRemove": "Quitar logs del Dev Server",
"chat.chatInput.previewAnnotations": "Anotaciones de vista previa:",
+2
View File
@@ -1243,6 +1243,7 @@ export const dict: Record<I18nKey, string> = {
'rightSidebar.contextNotesTodo.toast.readPlanFileFailed': '플랜 파일 읽기 실패',
'inlineComment.range.lines': '줄 {start}-{end}',
'inlineComment.input.placeholder': '댓글 추가… (Cmd+Enter로 저장)',
'inlineComment.input.placeholderShort': '댓글 추가…',
'inlineComment.actions.cancel': '취소',
'inlineComment.actions.save': '저장',
'inlineComment.actions.comment': '댓글',
@@ -1776,6 +1777,7 @@ export const dict: Record<I18nKey, string> = {
'chat.chatInput.toast.openSessionFirst': '먼저 세션을 여세요',
'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '권한 자동 승인 전환에 실패했습니다',
'chat.chatInput.reviewComments': '검토 댓글:',
'chat.chatInput.reviewCommentsRemove': '검토 댓글 제거',
'chat.chatInput.devServerLogs': 'Dev Server 로그:',
'chat.chatInput.devServerLogsRemove': 'Dev Server 로그 제거',
'chat.chatInput.previewAnnotations': '미리보기 주석:',
+2
View File
@@ -1029,6 +1029,7 @@ export const dict: Record<I18nKey, string> = {
'chat.chatInput.previewContextRemove': 'Usuń kontekst podglądu',
'chat.chatInput.projectRoot': 'Katalog główny projektu',
'chat.chatInput.reviewComments': 'Komentarze do przeglądu:',
'chat.chatInput.reviewCommentsRemove': 'Usuń komentarze do przeglądu',
'chat.chatInput.toast.addedFileMentions': 'Dodano {count} wzmianek o plikach',
'chat.chatInput.toast.attachFileFailed': 'Nie udało się dołączyć pliku',
'chat.chatInput.toast.attachNamedFailed': 'Nie udało się dołączyć {name}',
@@ -1993,6 +1994,7 @@ export const dict: Record<I18nKey, string> = {
'inlineComment.actions.showLess': 'Show less',
'inlineComment.actions.showMore': 'Show more',
'inlineComment.input.placeholder': 'Add a comment... (Cmd+Enter to save)',
'inlineComment.input.placeholderShort': 'Dodaj komentarz...',
'inlineComment.range.lines': 'Lines {start}-{end}',
'inlineComment.toast.selectSessionToSave': 'Select a session to save comment',
'mainLayout.mobile.closeDrawerAria': 'Zamknij szufladę',
@@ -1206,6 +1206,7 @@ export const dict: Record<I18nKey, string> = {
"rightSidebar.contextNotesTodo.toast.readPlanFileFailed": "Não foi possível ler o arquivo do plano",
"inlineComment.range.lines": "Linhas {start}-{end}",
"inlineComment.input.placeholder": "Adicionar um comentário... (Cmd+Enter para salvar)",
"inlineComment.input.placeholderShort": "Adicionar um comentário...",
"inlineComment.actions.cancel": "Cancelar",
"inlineComment.actions.save": "Salvar",
"inlineComment.actions.comment": "Comentar",
@@ -1742,6 +1743,7 @@ export const dict: Record<I18nKey, string> = {
"chat.chatInput.toast.openSessionFirst": "Abra uma sessão primeiro",
"chat.chatInput.toast.togglePermissionAutoAcceptFailed": "Não foi possível alterar a aceitação automática de permissões",
"chat.chatInput.reviewComments": "Comentários de revisão:",
"chat.chatInput.reviewCommentsRemove": "Remover comentários de revisão",
"chat.chatInput.devServerLogs": "Logs do Dev Server:",
"chat.chatInput.devServerLogsRemove": "Remover logs do Dev Server",
"chat.chatInput.previewAnnotations": "Anotações da visualização:",
+2
View File
@@ -1206,6 +1206,7 @@ export const dict: Record<I18nKey, string> = {
"rightSidebar.contextNotesTodo.toast.readPlanFileFailed": "Не вдалося прочитати файл плану",
"inlineComment.range.lines": "Рядки {start}-{end}",
"inlineComment.input.placeholder": "Додайте коментар... (Cmd+Enter, щоб зберегти)",
"inlineComment.input.placeholderShort": "Додайте коментар...",
"inlineComment.actions.cancel": "Скасувати",
"inlineComment.actions.save": "Зберегти",
"inlineComment.actions.comment": "Коментар",
@@ -1742,6 +1743,7 @@ export const dict: Record<I18nKey, string> = {
"chat.chatInput.toast.openSessionFirst": "Спочатку відкрийте сесію",
"chat.chatInput.toast.togglePermissionAutoAcceptFailed": "Не вдалося ввімкнути автоматичне прийняття дозволів",
"chat.chatInput.reviewComments": "Коментарі рев’ю:",
"chat.chatInput.reviewCommentsRemove": "Прибрати коментарі рев’ю",
"chat.chatInput.devServerLogs": "Логи Dev Server:",
"chat.chatInput.devServerLogsRemove": "Прибрати логи Dev Server",
"chat.chatInput.previewAnnotations": "Анотації перегляду:",
@@ -1206,6 +1206,7 @@ export const dict: Record<I18nKey, string> = {
'rightSidebar.contextNotesTodo.toast.readPlanFileFailed': '读取计划文件失败',
'inlineComment.range.lines': '行 {start}-{end}',
'inlineComment.input.placeholder': '添加评论...Cmd+Enter 保存)',
'inlineComment.input.placeholderShort': '添加评论…',
'inlineComment.actions.cancel': '取消',
'inlineComment.actions.save': '保存',
'inlineComment.actions.comment': '评论',
@@ -1742,6 +1743,7 @@ export const dict: Record<I18nKey, string> = {
'chat.chatInput.toast.openSessionFirst': '请先打开一个会话',
'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '切换权限自动接受失败',
'chat.chatInput.reviewComments': '审查评论:',
'chat.chatInput.reviewCommentsRemove': '移除审查评论',
'chat.chatInput.devServerLogs': 'Dev Server 日志:',
'chat.chatInput.devServerLogsRemove': '移除 Dev Server 日志',
'chat.chatInput.previewAnnotations': '预览注释:',
@@ -1216,6 +1216,7 @@ export const dict: Record<I18nKey, string> = {
'rightSidebar.contextNotesTodo.toast.readPlanFileFailed': '讀取計畫檔案失敗',
'inlineComment.range.lines': '行 {start}-{end}',
'inlineComment.input.placeholder': '新增留言...Cmd+Enter 儲存)',
'inlineComment.input.placeholderShort': '新增留言…',
'inlineComment.actions.cancel': '取消',
'inlineComment.actions.save': '儲存',
'inlineComment.actions.comment': '留言',
@@ -1746,6 +1747,7 @@ export const dict: Record<I18nKey, string> = {
'chat.chatInput.toast.openSessionFirst': '請先開啟一個會話',
'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '切換權限自動接受失敗',
'chat.chatInput.reviewComments': '審查留言:',
'chat.chatInput.reviewCommentsRemove': '移除審查留言',
'chat.chatInput.devServerLogs': 'Dev Server 日誌:',
'chat.chatInput.devServerLogsRemove': '移除 Dev Server 日誌',
'chat.chatInput.previewAnnotations': '預覽註釋:',