Improve job status notifications
This commit is contained in:
@@ -4,7 +4,6 @@ import { formatDistanceToNow } from 'date-fns';
|
||||
import { Bell, BellRing, LoaderCircle } from 'lucide-react';
|
||||
import type { Task } from '@/lib/types';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type TaskNotificationsTriggerProps = {
|
||||
@@ -18,11 +17,53 @@ type TaskNotificationsTriggerProps = {
|
||||
showReadFinished: boolean;
|
||||
setShowReadFinished: (value: boolean) => void;
|
||||
openTaskDetails: (taskId: string) => void;
|
||||
openTaskAction: (task: Task, actionId?: string | null) => void;
|
||||
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
|
||||
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function ProgressBar({ task }: { task: Task }) {
|
||||
const progress = task.notification.progress;
|
||||
if (!progress) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2">
|
||||
<div className="mb-1 flex items-center justify-between text-[11px] text-[color:var(--terminal-muted)]">
|
||||
<span>{progress.current}/{progress.total} {progress.unit}</span>
|
||||
<span>{progress.percent ?? 0}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 rounded-full bg-[color:rgba(255,255,255,0.08)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[color:var(--accent)] transition-[width] duration-300"
|
||||
style={{ width: `${progress.percent ?? 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatChips({ task }: { task: Task }) {
|
||||
if (task.notification.stats.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{task.notification.stats.map((stat) => (
|
||||
<span
|
||||
key={`${stat.label}:${stat.value}`}
|
||||
className="inline-flex items-center rounded-full border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-2 py-1 text-[11px] text-[color:var(--terminal-muted)]"
|
||||
>
|
||||
{stat.label}: {stat.value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TaskNotificationsTrigger({
|
||||
unreadCount,
|
||||
isPopoverOpen,
|
||||
@@ -34,6 +75,7 @@ export function TaskNotificationsTrigger({
|
||||
showReadFinished,
|
||||
setShowReadFinished,
|
||||
openTaskDetails,
|
||||
openTaskAction,
|
||||
silenceTask,
|
||||
markTaskRead,
|
||||
className
|
||||
@@ -112,14 +154,32 @@ export function TaskNotificationsTrigger({
|
||||
activeTasks.map((task) => (
|
||||
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
|
||||
<StatusPill status={task.status} />
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.stage_detail ?? 'Running in workflow engine.'}</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
|
||||
{task.notification.detailLine ? (
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
|
||||
) : null}
|
||||
<ProgressBar task={task} />
|
||||
<StatChips task={task} />
|
||||
<p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
{task.notification.actions
|
||||
.filter((action) => action.primary && action.id !== 'open_details')
|
||||
.slice(0, 1)
|
||||
.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
|
||||
onClick={() => openTaskAction(task, action.id)}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
|
||||
@@ -153,14 +213,32 @@ export function TaskNotificationsTrigger({
|
||||
return (
|
||||
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
|
||||
<StatusPill status={task.status} />
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.stage_detail ?? task.stage}</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
|
||||
{task.notification.detailLine ? (
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
|
||||
) : null}
|
||||
<ProgressBar task={task} />
|
||||
<StatChips task={task} />
|
||||
<p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
{task.notification.actions
|
||||
.filter((action) => action.primary && action.id !== 'open_details')
|
||||
.slice(0, 1)
|
||||
.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
|
||||
onClick={() => openTaskAction(task, action.id)}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
|
||||
|
||||
Reference in New Issue
Block a user