272 lines
13 KiB
TypeScript
272 lines
13 KiB
TypeScript
'use client';
|
|
|
|
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 { cn } from '@/lib/utils';
|
|
|
|
type TaskNotificationsTriggerProps = {
|
|
unreadCount: number;
|
|
isPopoverOpen: boolean;
|
|
setIsPopoverOpen: (value: boolean) => void;
|
|
isLoading: boolean;
|
|
activeTasks: Task[];
|
|
visibleFinishedTasks: Task[];
|
|
awaitingReviewTasks: Task[];
|
|
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,
|
|
setIsPopoverOpen,
|
|
isLoading,
|
|
activeTasks,
|
|
visibleFinishedTasks,
|
|
awaitingReviewTasks,
|
|
showReadFinished,
|
|
setShowReadFinished,
|
|
openTaskDetails,
|
|
openTaskAction,
|
|
silenceTask,
|
|
markTaskRead,
|
|
className
|
|
}: TaskNotificationsTriggerProps) {
|
|
const button = (
|
|
<button
|
|
type="button"
|
|
aria-label="Open notifications"
|
|
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
|
|
className={cn(
|
|
'relative inline-flex h-10 w-10 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)]',
|
|
className
|
|
)}
|
|
>
|
|
{unreadCount > 0 ? <BellRing className="size-4" /> : <Bell className="size-4" />}
|
|
{unreadCount > 0 ? (
|
|
<span className="absolute -right-1.5 -top-1.5 inline-flex min-w-[1.15rem] items-center justify-center rounded-full bg-[color:var(--accent)] px-1 text-[10px] font-semibold text-[#16181c]">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
) : null}
|
|
</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={cn(
|
|
'absolute right-0 z-50 mt-2 h-[34rem] max-h-[calc(100vh-8rem)] w-[min(27rem,calc(100vw-2rem))] 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>
|
|
<label className="mb-2 flex items-center justify-between gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-xs text-[color:var(--terminal-muted)]">
|
|
<span>Show read finished jobs</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={showReadFinished}
|
|
onChange={(event) => setShowReadFinished(event.target.checked)}
|
|
className="h-4 w-4 accent-[color:var(--accent)]"
|
|
/>
|
|
</label>
|
|
<div className="mb-2 text-xs text-[color:var(--terminal-muted)]">Unread finished: {awaitingReviewTasks.length}</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-xs text-[color:var(--terminal-muted)]">
|
|
<LoaderCircle className="size-3.5 animate-spin" />
|
|
Loading notifications...
|
|
</div>
|
|
{Array.from({ length: 4 }).map((_, index) => (
|
|
<div key={index} className="animate-pulse rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
|
|
<div className="h-3 w-2/5 rounded bg-[color:var(--panel-bright)]" />
|
|
<div className="mt-2 h-2 w-4/5 rounded bg-[color:var(--panel-bright)]" />
|
|
<div className="mt-2 h-2 w-3/5 rounded bg-[color:var(--panel-bright)]" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="h-[calc(100%-5.5rem)] space-y-3 overflow-y-auto pr-1">
|
|
<section className="space-y-2">
|
|
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active jobs</p>
|
|
{activeTasks.length === 0 ? (
|
|
<p className="text-xs text-[color:var(--terminal-muted)]">No active jobs.</p>
|
|
) : (
|
|
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)]">{task.notification.title}</p>
|
|
<StatusPill status={task.status} />
|
|
</div>
|
|
<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 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)]"
|
|
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>
|
|
))
|
|
)}
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Awaiting review</p>
|
|
{visibleFinishedTasks.length === 0 ? (
|
|
<p className="text-xs text-[color:var(--terminal-muted)]">No finished jobs to review.</p>
|
|
) : (
|
|
visibleFinishedTasks.map((task) => {
|
|
const isRead = task.notification_read_at !== null;
|
|
|
|
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)]">{task.notification.title}</p>
|
|
<StatusPill status={task.status} />
|
|
</div>
|
|
<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 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)]"
|
|
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, !isRead);
|
|
}}
|
|
>
|
|
{isRead ? 'Mark unread' : 'Mark read'}
|
|
</button>
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
)}
|
|
</section>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|