feat: add task view button in comments and improve live feed rendering
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user