Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate task jobs to workflow notifications + timeline

Browse Source
This commit is contained in:
francy51
2026-03-02 14:29:31 -05:00
parent 36c4ed2ee2
commit d81a681905
33 changed files with 2437 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
components/notifications/task-notifications-trigger.tsx Normal file
View File

@@ -0,0 +1,180 @@
'use client';
import { formatDistanceToNow } from 'date-fns';
import { Bell, BellRing, ChevronRight } from 'lucide-react';
import type { Task } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { StatusPill } from '@/components/ui/status-pill';
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { cn } from '@/lib/utils';
type TaskNotificationsTriggerProps = {
unreadCount: number;
isPopoverOpen: boolean;
setIsPopoverOpen: (value: boolean) => void;
activeTasks: Task[];
awaitingReviewTasks: Task[];
openDrawer: () => void;
openTaskDetails: (taskId: string) => void;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
className?: string;
mobile?: boolean;
};
export function TaskNotificationsTrigger({
unreadCount,
isPopoverOpen,
setIsPopoverOpen,
activeTasks,
awaitingReviewTasks,
openDrawer,
openTaskDetails,
silenceTask,
markTaskRead,
className,
mobile = false
}: TaskNotificationsTriggerProps) {
const showPopover = !mobile;
const button = (
<button
type="button"
aria-label="Open notifications"
onClick={() => {
if (showPopover) {
setIsPopoverOpen(!isPopoverOpen);
return;
}
openDrawer();
}}
className={cn(
'relative inline-flex items-center justify-center rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]',
mobile ? 'min-w-0 flex-1 gap-1 px-2 py-1.5 text-[11px]' : 'h-10 w-10',
className
)}
>
{unreadCount > 0 ? <BellRing className="size-4" /> : <Bell className="size-4" />}
{mobile ? <span>Alerts</span> : null}
{unreadCount > 0 ? (
<span className={cn(
'absolute inline-flex min-w-[1.15rem] items-center justify-center rounded-full bg-[color:var(--accent)] px-1 text-[10px] font-semibold text-[#00241d]',
mobile ? 'right-1 top-1' : '-right-1.5 -top-1.5'
)}>
{unreadCount > 99 ? '99+' : unreadCount}
</span>
) : null}
</button>
);
if (!showPopover) {
return button;
}
return (
<div className="relative">
{button}
{isPopoverOpen ? (
<>
<button
type="button"
aria-label="Close notifications popover"
className="fixed inset-0 z-40 cursor-default bg-transparent"
onClick={() => setIsPopoverOpen(false)}
/>
<div className="absolute right-0 z-50 mt-2 w-[22rem] rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_18px_50px_rgba(0,0,0,0.45)]">
<div className="mb-2 flex items-center justify-between">
<p className="text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Job notifications</p>
<span className="text-xs text-[color:var(--terminal-muted)]">{unreadCount} unread</span>
</div>
<div className="space-y-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active</p>
{activeTasks.length === 0 ? (
<p className="text-xs text-[color:var(--terminal-muted)]">No active jobs.</p>
) : (
activeTasks.slice(0, 3).map((task) => (
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
<div className="flex items-center justify-between gap-2">
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</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>
<div className="mt-2 flex items-center justify-between">
<button
type="button"
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
onClick={() => openTaskDetails(task.id)}
>
Open details
</button>
<button
type="button"
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
onClick={() => {
void silenceTask(task.id, true);
}}
>
Silence
</button>
</div>
</article>
))
)}
</div>
<div className="mt-3 space-y-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Awaiting review</p>
{awaitingReviewTasks.length === 0 ? (
<p className="text-xs text-[color:var(--terminal-muted)]">No unread finished jobs.</p>
) : (
awaitingReviewTasks.slice(0, 3).map((task) => (
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
<div className="flex items-center justify-between gap-2">
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
<StatusPill status={task.status} />
</div>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
{formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
</p>
<div className="mt-2 flex items-center justify-between">
<button
type="button"
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
onClick={() => openTaskDetails(task.id)}
>
Open details
</button>
<button
type="button"
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
onClick={() => {
void markTaskRead(task.id, true);
}}
>
Mark read
</button>
</div>
</article>
))
)}
</div>
<Button
variant="secondary"
className="mt-3 w-full"
onClick={() => {
setIsPopoverOpen(false);
openDrawer();
}}
>
Open notifications box
<ChevronRight className="size-4" />
</Button>
</div>
</>
) : null}
</div>
);
}