Collapse filing sync notifications into one batch surface
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { Bell, BellRing, LoaderCircle } from 'lucide-react';
|
||||
import type { Task } from '@/lib/types';
|
||||
import type { TaskNotificationEntry } from '@/lib/types';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -11,20 +11,20 @@ type TaskNotificationsTriggerProps = {
|
||||
isPopoverOpen: boolean;
|
||||
setIsPopoverOpen: (value: boolean) => void;
|
||||
isLoading: boolean;
|
||||
activeTasks: Task[];
|
||||
visibleFinishedTasks: Task[];
|
||||
awaitingReviewTasks: Task[];
|
||||
activeEntries: TaskNotificationEntry[];
|
||||
visibleFinishedEntries: TaskNotificationEntry[];
|
||||
awaitingReviewEntries: TaskNotificationEntry[];
|
||||
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>;
|
||||
openTaskAction: (entry: TaskNotificationEntry, actionId?: string | null) => void;
|
||||
silenceEntry: (entry: TaskNotificationEntry, silenced?: boolean) => Promise<void>;
|
||||
markEntryRead: (entry: TaskNotificationEntry, read?: boolean) => Promise<void>;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function ProgressBar({ task }: { task: Task }) {
|
||||
const progress = task.notification.progress;
|
||||
function ProgressBar({ entry }: { entry: TaskNotificationEntry }) {
|
||||
const progress = entry.progress;
|
||||
if (!progress) {
|
||||
return null;
|
||||
}
|
||||
@@ -45,14 +45,14 @@ function ProgressBar({ task }: { task: Task }) {
|
||||
);
|
||||
}
|
||||
|
||||
function StatChips({ task }: { task: Task }) {
|
||||
if (task.notification.stats.length === 0) {
|
||||
function StatChips({ entry }: { entry: TaskNotificationEntry }) {
|
||||
if (entry.stats.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{task.notification.stats.map((stat) => (
|
||||
{entry.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)]"
|
||||
@@ -64,20 +64,97 @@ function StatChips({ task }: { task: Task }) {
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationCard({
|
||||
entry,
|
||||
openTaskDetails,
|
||||
openTaskAction,
|
||||
silenceEntry,
|
||||
markEntryRead
|
||||
}: {
|
||||
entry: TaskNotificationEntry;
|
||||
openTaskDetails: (taskId: string) => void;
|
||||
openTaskAction: (entry: TaskNotificationEntry, actionId?: string | null) => void;
|
||||
silenceEntry: (entry: TaskNotificationEntry, silenced?: boolean) => Promise<void>;
|
||||
markEntryRead: (entry: TaskNotificationEntry, read?: boolean) => Promise<void>;
|
||||
}) {
|
||||
const isRead = entry.notificationReadAt !== null;
|
||||
|
||||
return (
|
||||
<article 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)]">{entry.title}</p>
|
||||
<StatusPill status={entry.status} />
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{entry.statusLine}</p>
|
||||
{entry.detailLine ? (
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{entry.detailLine}</p>
|
||||
) : null}
|
||||
<ProgressBar entry={entry} />
|
||||
<StatChips entry={entry} />
|
||||
<p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{formatDistanceToNow(new Date(entry.updatedAt), { addSuffix: true })}
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
{entry.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(entry, action.id)}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
|
||||
onClick={() => openTaskDetails(entry.primaryTaskId)}
|
||||
>
|
||||
Open details
|
||||
</button>
|
||||
{entry.status === 'queued' || entry.status === 'running' ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
|
||||
onClick={() => {
|
||||
void silenceEntry(entry, true);
|
||||
}}
|
||||
>
|
||||
Silence
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
|
||||
onClick={() => {
|
||||
void markEntryRead(entry, !isRead);
|
||||
}}
|
||||
>
|
||||
{isRead ? 'Mark unread' : 'Mark read'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function TaskNotificationsTrigger({
|
||||
unreadCount,
|
||||
isPopoverOpen,
|
||||
setIsPopoverOpen,
|
||||
isLoading,
|
||||
activeTasks,
|
||||
visibleFinishedTasks,
|
||||
awaitingReviewTasks,
|
||||
activeEntries,
|
||||
visibleFinishedEntries,
|
||||
awaitingReviewEntries,
|
||||
showReadFinished,
|
||||
setShowReadFinished,
|
||||
openTaskDetails,
|
||||
openTaskAction,
|
||||
silenceTask,
|
||||
markTaskRead,
|
||||
silenceEntry,
|
||||
markEntryRead,
|
||||
className
|
||||
}: TaskNotificationsTriggerProps) {
|
||||
const button = (
|
||||
@@ -128,7 +205,7 @@ export function TaskNotificationsTrigger({
|
||||
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>
|
||||
<div className="mb-2 text-xs text-[color:var(--terminal-muted)]">Unread finished: {awaitingReviewEntries.length}</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
@@ -148,117 +225,37 @@ export function TaskNotificationsTrigger({
|
||||
<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 ? (
|
||||
{activeEntries.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>
|
||||
activeEntries.map((entry) => (
|
||||
<NotificationCard
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
openTaskDetails={openTaskDetails}
|
||||
openTaskAction={openTaskAction}
|
||||
silenceEntry={silenceEntry}
|
||||
markEntryRead={markEntryRead}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</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 ? (
|
||||
{visibleFinishedEntries.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>
|
||||
);
|
||||
})
|
||||
visibleFinishedEntries.map((entry) => (
|
||||
<NotificationCard
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
openTaskDetails={openTaskDetails}
|
||||
openTaskAction={openTaskAction}
|
||||
silenceEntry={silenceEntry}
|
||||
markEntryRead={markEntryRead}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user