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>
<span className="text-[11px] text-slate-400"> <div className="flex flex-col items-end gap-1 text-right">
{formatShortTimestamp(comment.created_at)} <span className="text-[11px] text-slate-400">
</span> {formatShortTimestamp(comment.created_at)}
</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) => {
<LiveFeedCard const taskId = comment.task_id;
key={comment.id} return (
comment={comment} <LiveFeedCard
taskTitle={ key={comment.id}
comment.task_id comment={comment}
? taskTitleById.get(comment.task_id) ?? "Task" taskTitle={
: "Task" taskId ? taskTitleById.get(taskId) ?? "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>