refactor: simplify CommentComposer button layout and update placeholder text in CommentItem

This commit is contained in:
Anish Sarkar 2026-04-05 23:14:54 +05:30
parent c9e5fe9cdb
commit 7fa1810d50
3 changed files with 14 additions and 18 deletions

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ArrowUp, Send, X } from "lucide-react"; import { ArrowUp } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"; import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
@ -300,16 +300,15 @@ export function CommentComposer({
<div className={cn("flex items-center gap-2", !compact && "justify-end")}> <div className={cn("flex items-center gap-2", !compact && "justify-end")}>
{onCancel && ( {onCancel && (
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onCancel} onClick={onCancel}
disabled={isSubmitting} disabled={isSubmitting}
> >
<X className="mr-1 size-4" /> Cancel
Cancel </Button>
</Button>
)} )}
<Button <Button
type="button" type="button"
@ -321,10 +320,7 @@ export function CommentComposer({
{compact ? ( {compact ? (
<ArrowUp className="size-4" /> <ArrowUp className="size-4" />
) : ( ) : (
<> submitLabel
<Send className="mr-1 size-4" />
{submitLabel}
</>
)} )}
</Button> </Button>
</div> </div>

View file

@ -21,9 +21,9 @@ export function CommentActions({ canEdit, canDelete, onEdit, onDelete }: Comment
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="size-7 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity" className="size-7 text-muted-foreground opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity"
> >
<MoreHorizontal className="size-4 text-muted-foreground" /> <MoreHorizontal className="size-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

View file

@ -198,7 +198,7 @@ export function CommentItem({
<CommentComposer <CommentComposer
members={members} members={members}
membersLoading={membersLoading} membersLoading={membersLoading}
placeholder="Edit your comment..." placeholder="Edit your comment"
submitLabel="Save" submitLabel="Save"
isSubmitting={isSubmitting} isSubmitting={isSubmitting}
onSubmit={handleEditSubmit} onSubmit={handleEditSubmit}