refactor: move notifications to popover and simplify task timeline
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { Bell, BellRing, ChevronRight } from 'lucide-react';
|
||||
import { Bell, BellRing, LoaderCircle } 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';
|
||||
@@ -12,9 +11,12 @@ type TaskNotificationsTriggerProps = {
|
||||
unreadCount: number;
|
||||
isPopoverOpen: boolean;
|
||||
setIsPopoverOpen: (value: boolean) => void;
|
||||
isLoading: boolean;
|
||||
activeTasks: Task[];
|
||||
visibleFinishedTasks: Task[];
|
||||
awaitingReviewTasks: Task[];
|
||||
openDrawer: () => void;
|
||||
showReadFinished: boolean;
|
||||
setShowReadFinished: (value: boolean) => void;
|
||||
openTaskDetails: (taskId: string) => void;
|
||||
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
|
||||
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
|
||||
@@ -26,29 +28,23 @@ export function TaskNotificationsTrigger({
|
||||
unreadCount,
|
||||
isPopoverOpen,
|
||||
setIsPopoverOpen,
|
||||
isLoading,
|
||||
activeTasks,
|
||||
visibleFinishedTasks,
|
||||
awaitingReviewTasks,
|
||||
openDrawer,
|
||||
showReadFinished,
|
||||
setShowReadFinished,
|
||||
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();
|
||||
}}
|
||||
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||
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',
|
||||
@@ -68,10 +64,6 @@ export function TaskNotificationsTrigger({
|
||||
</button>
|
||||
);
|
||||
|
||||
if (!showPopover) {
|
||||
return button;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{button}
|
||||
@@ -83,95 +75,126 @@ export function TaskNotificationsTrigger({
|
||||
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={cn(
|
||||
'z-50 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_18px_50px_rgba(0,0,0,0.45)]',
|
||||
mobile
|
||||
? 'fixed inset-x-3 bottom-20 top-16 overflow-hidden'
|
||||
: 'absolute right-0 mt-2 h-[34rem] w-[27rem]'
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{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)]">{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>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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;
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="mt-3 w-full"
|
||||
onClick={() => {
|
||||
setIsPopoverOpen(false);
|
||||
openDrawer();
|
||||
}}
|
||||
>
|
||||
Open notifications box
|
||||
<ChevronRight className="size-4" />
|
||||
</Button>
|
||||
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>
|
||||
<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-[11px] 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, !isRead);
|
||||
}}
|
||||
>
|
||||
{isRead ? 'Mark unread' : 'Mark read'}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user