feat: add task view button in comments and improve live feed rendering

This commit is contained in:
Abhimanyu Saharan
2026-02-07 01:13:33 +05:30
parent ff68dd15d3
commit 22f24630a2

View File

@@ -313,22 +313,48 @@ const LiveFeedCard = memo(function LiveFeedCard({
comment, comment,
taskTitle, taskTitle,
authorLabel, authorLabel,
onViewTask,
}: { }: {
comment: TaskComment; comment: TaskComment;
taskTitle: string; taskTitle: string;
authorLabel: string; authorLabel: string;
onViewTask?: () => void;
}) { }) {
const message = (comment.message ?? "").trim(); const message = (comment.message ?? "").trim();
return ( return (
<div className="rounded-xl border border-slate-200 bg-white p-3"> <div className="rounded-xl border border-slate-200 bg-white p-3">
<div className="flex items-start justify-between gap-3 text-xs text-slate-500"> <div className="flex items-start justify-between gap-3 text-xs text-slate-500">
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-xs font-semibold text-slate-700">{taskTitle}</p> <button
type="button"
onClick={onViewTask}
disabled={!onViewTask}
className={cn(
"block truncate text-left text-xs font-semibold text-slate-700",
onViewTask
? "cursor-pointer transition hover:text-slate-900 hover:underline"
: "cursor-default",
)}
title={onViewTask ? "View task" : undefined}
>
{taskTitle}
</button>
<p className="mt-1 text-[11px] text-slate-400">{authorLabel}</p> <p className="mt-1 text-[11px] text-slate-400">{authorLabel}</p>
</div> </div>
<div className="flex flex-col items-end gap-1 text-right">
<span className="text-[11px] text-slate-400"> <span className="text-[11px] text-slate-400">
{formatShortTimestamp(comment.created_at)} {formatShortTimestamp(comment.created_at)}
</span> </span>
{onViewTask ? (
<button
type="button"
onClick={onViewTask}
className="text-[11px] font-semibold text-slate-600 transition hover:text-slate-900"
>
View task
</button>
) : null}
</div>
</div> </div>
{message ? ( {message ? (
<div className="mt-2 select-text cursor-text text-xs leading-relaxed text-slate-900 break-words"> <div className="mt-2 select-text cursor-text text-xs leading-relaxed text-slate-900 break-words">
@@ -2365,22 +2391,26 @@ export default function BoardDetailPage() {
</p> </p>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
{orderedLiveFeed.map((comment) => ( {orderedLiveFeed.map((comment) => {
const taskId = comment.task_id;
return (
<LiveFeedCard <LiveFeedCard
key={comment.id} key={comment.id}
comment={comment} comment={comment}
taskTitle={ taskTitle={
comment.task_id taskId ? taskTitleById.get(taskId) ?? "Task" : "Task"
? taskTitleById.get(comment.task_id) ?? "Task"
: "Task"
} }
authorLabel={ authorLabel={
comment.agent_id comment.agent_id
? assigneeById.get(comment.agent_id) ?? "Agent" ? assigneeById.get(comment.agent_id) ?? "Agent"
: "Admin" : "Admin"
} }
onViewTask={
taskId ? () => openComments({ id: taskId }) : undefined
}
/> />
))} );
})}
</div> </div>
)} )}
</div> </div>