fix(web): remove duplicate emoji button on comment card (#419)
* fix(web): remove duplicate emoji button on parent comment card The parent CommentCard rendered two emoji pickers: one in the header toolbar (QuickEmojiPicker) and another inside ReactionBar (which has its own QuickEmojiPicker when hideAddButton is not set). Added hideAddButton to the parent's ReactionBar, matching the pattern already used in CommentRow for replies. * fix(web): show emoji button at bottom for long comments For short comments, the emoji picker only appears in the top-right toolbar. For long comments (>500 chars or >8 newlines), the ReactionBar also shows an add button at the bottom so users don't have to scroll back up to add reactions.
This commit is contained in:
parent
9aee403ff9
commit
3a96567fc1
1 changed files with 6 additions and 1 deletions
|
|
@ -148,6 +148,8 @@ function CommentRow({
|
|||
};
|
||||
|
||||
const reactions = entry.reactions ?? [];
|
||||
const contentText = entry.content ?? "";
|
||||
const isLongContent = contentText.length > 500 || contentText.split("\n").length > 8;
|
||||
|
||||
return (
|
||||
<div className={`py-3${isTemp ? " opacity-60" : ""}`}>
|
||||
|
|
@ -252,7 +254,7 @@ function CommentRow({
|
|||
reactions={reactions}
|
||||
currentUserId={currentUserId}
|
||||
onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
|
||||
hideAddButton
|
||||
hideAddButton={!isLongContent}
|
||||
className="mt-1.5 pl-8"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -330,6 +332,8 @@ function CommentCard({
|
|||
const replyCount = allNestedReplies.length;
|
||||
const contentPreview = (entry.content ?? "").replace(/\n/g, " ").slice(0, 80);
|
||||
const reactions = entry.reactions ?? [];
|
||||
const contentText = entry.content ?? "";
|
||||
const isLongContent = contentText.length > 500 || contentText.split("\n").length > 8;
|
||||
|
||||
const isHighlighted = highlightedCommentId === entry.id;
|
||||
|
||||
|
|
@ -458,6 +462,7 @@ function CommentCard({
|
|||
reactions={reactions}
|
||||
currentUserId={currentUserId}
|
||||
onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
|
||||
hideAddButton={!isLongContent}
|
||||
className="mt-1.5 pl-10"
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue