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

refactor: move notifications to popover and simplify task timeline

Browse Source
This commit is contained in:
francy51
2026-03-02 21:26:08 -05:00
parent d81a681905
commit 706c763dc4
5 changed files with 274 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/notifications/task-detail-modal.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { format } from 'date-fns';
import { LoaderCircle, X } from 'lucide-react';
import { ChevronDown, LoaderCircle, X } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { useTaskTimelineQuery } from '@/hooks/use-api-queries';
import { buildStageTimeline, stageLabel, taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { StatusPill } from '@/components/ui/status-pill';
@@ -28,15 +29,50 @@ type TaskDetailModalProps = {
export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProps) {
const { data, isLoading, error } = useTaskTimelineQuery(taskId ?? '', isOpen && Boolean(taskId));
const task = data?.task ?? null;
const events = data?.events ?? [];
const timeline = task ? buildStageTimeline(task, events) : [];
const [expandedStage, setExpandedStage] = useState<string | null>(null);
const defaultExpandedStage = useMemo(() => {
if (task?.status === 'completed' || task?.status === 'failed') {
return null;
}
for (const item of timeline) {
if (item.state === 'active') {
return item.stage;
}
}
for (let index = timeline.length - 1; index >= 0; index -= 1) {
if (timeline[index]?.state === 'completed') {
return timeline[index].stage;
}
}
return timeline[0]?.stage ?? null;
}, [timeline]);
useEffect(() => {
if (!isOpen) {
setExpandedStage(null);
return;
}
setExpandedStage((current) => {
if (current && timeline.some((item) => item.stage === current)) {
return current;
}
return defaultExpandedStage;
});
}, [defaultExpandedStage, isOpen, timeline]);
if (!isOpen || !taskId) {
return null;
}
const task = data?.task ?? null;
const events = data?.events ?? [];
const timeline = task ? buildStageTimeline(task, events) : [];
return (
<div className="fixed inset-0 z-[60]">
<button
@@ -46,7 +82,7 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
onClick={onClose}
/>
<div className="absolute left-1/2 top-1/2 w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
<div className="absolute left-1/2 top-1/2 flex max-h-[88vh] w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
<header className="mb-4 flex items-start justify-between gap-3">
<div>
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Job details</p>
@@ -67,11 +103,22 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
</div>
</header>
<div className="min-h-0 flex-1 overflow-y-auto pr-1">
{isLoading ? (
<div className="mb-4 space-y-2 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
<LoaderCircle className="size-4 animate-spin" />
Loading task timeline...
</div>
<div className="space-y-2">
{Array.from({ length: 4 }).map((_, index) => (
<div key={index} className="animate-pulse rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2">
<div className="h-3 w-2/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>
) : null}
{error ? (
@@ -91,22 +138,44 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
<div className="mb-4 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<p className="mb-2 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Stage timeline</p>
<ol className="space-y-2">
<ol className="max-h-72 space-y-1.5 overflow-y-auto pr-1">
{timeline.map((item) => (
<li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] px-3 py-2">
<div className="flex items-center justify-between gap-3">
<li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]">
<button
type="button"
className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
onClick={() => {
setExpandedStage((current) => (current === item.stage ? null : item.stage));
}}
>
<div>
<p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
<p className="mt-0.5 text-[11px] text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
</div>
<div className="flex items-center gap-2">
<span className={item.state === 'active'
? 'text-xs uppercase tracking-[0.12em] text-[#9fffcf]'
? 'text-[11px] uppercase tracking-[0.12em] text-[#9fffcf]'
: item.state === 'completed'
? 'text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
: 'text-xs uppercase tracking-[0.12em] text-[#6f8791]'}
? 'text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
: 'text-[11px] uppercase tracking-[0.12em] text-[#6f8791]'}
>
{item.state}
</span>
<ChevronDown className={expandedStage === item.stage ? 'size-3.5 rotate-180 text-[color:var(--terminal-muted)] transition' : 'size-3.5 text-[color:var(--terminal-muted)] transition'} />
</div>
{item.detail ? <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{item.detail}</p> : null}
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
</button>
{expandedStage === item.stage ? (
<div className="border-t border-[color:var(--line-weak)] px-3 py-2">
<p className="text-xs text-[color:var(--terminal-muted)]">{item.detail ?? 'No additional detail for this step.'}</p>
{item.stage === 'completed' && task.result ? (
<div className="mt-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result detail</p>
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
</div>
) : null}
</div>
) : null}
</li>
))}
</ol>
@@ -118,15 +187,9 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
<p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
</div>
) : null}
{task.result ? (
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result summary</p>
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
</div>
) : null}
</>
) : null}
</div>
<div className="mt-4 flex justify-end">
<Button variant="ghost" onClick={onClose}>Close</Button>

181
components/notifications/task-notifications-drawer.tsx
View File

@@ -1,181 +0,0 @@
'use client';
import { formatDistanceToNow } from 'date-fns';
import { BellOff, CheckCheck, EyeOff, X } from 'lucide-react';
import type { Task } from '@/lib/types';
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { Button } from '@/components/ui/button';
import { StatusPill } from '@/components/ui/status-pill';
type TaskNotificationsDrawerProps = {
isOpen: boolean;
onClose: () => void;
activeTasks: Task[];
visibleFinishedTasks: Task[];
awaitingReviewTasks: Task[];
showReadFinished: boolean;
setShowReadFinished: (value: boolean) => void;
openTaskDetails: (taskId: string) => void;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
};
function TaskRow({
task,
openTaskDetails,
markTaskRead,
silenceTask
}: {
task: Task;
openTaskDetails: (taskId: string) => void;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
}) {
const isTerminal = task.status === 'completed' || task.status === 'failed';
const isRead = task.notification_read_at !== null;
return (
<article className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-medium text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
<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-muted)]">
Updated {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
</p>
</div>
<StatusPill status={task.status} />
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
<Button
variant="secondary"
className="px-2 py-1 text-xs"
onClick={() => openTaskDetails(task.id)}
>
Details
</Button>
{isTerminal ? (
<Button
variant="ghost"
className="px-2 py-1 text-xs"
onClick={() => {
void markTaskRead(task.id, !isRead);
}}
>
{isRead ? <EyeOff className="size-3" /> : <CheckCheck className="size-3" />}
{isRead ? 'Mark unread' : 'Mark read'}
</Button>
) : (
<Button
variant="ghost"
className="px-2 py-1 text-xs"
onClick={() => {
void silenceTask(task.id, true);
}}
>
<BellOff className="size-3" />
Silence
</Button>
)}
</div>
</article>
);
}
export function TaskNotificationsDrawer({
isOpen,
onClose,
activeTasks,
visibleFinishedTasks,
awaitingReviewTasks,
showReadFinished,
setShowReadFinished,
openTaskDetails,
markTaskRead,
silenceTask
}: TaskNotificationsDrawerProps) {
if (!isOpen) {
return null;
}
return (
<div className="fixed inset-0 z-50">
<button
type="button"
aria-label="Close notifications drawer"
className="absolute inset-0 bg-[color:rgba(0,0,0,0.62)]"
onClick={onClose}
/>
<aside className="absolute right-0 top-0 h-full w-full max-w-[28rem] border-l border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_25px_60px_rgba(0,0,0,0.5)]">
<header className="mb-4 flex items-center justify-between gap-3">
<div>
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Notifications box</p>
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Job inbox</h3>
</div>
<button
type="button"
aria-label="Close notifications drawer"
className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[color:var(--line-weak)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
onClick={onClose}
>
<X className="size-4" />
</button>
</header>
<div className="mb-4 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
<label className="flex items-center justify-between gap-2 text-sm text-[color:var(--terminal-bright)]">
<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>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">Unread finished: {awaitingReviewTasks.length}</p>
</div>
<section className="mb-4">
<h4 className="mb-2 text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Active jobs</h4>
<div className="space-y-2">
{activeTasks.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No active jobs.</p>
) : (
activeTasks.map((task) => (
<TaskRow
key={task.id}
task={task}
openTaskDetails={openTaskDetails}
markTaskRead={markTaskRead}
silenceTask={silenceTask}
/>
))
)}
</div>
</section>
<section className="h-[calc(100%-19rem)] overflow-y-auto">
<h4 className="mb-2 text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Awaiting review</h4>
<div className="space-y-2">
{visibleFinishedTasks.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No finished jobs to review.</p>
) : (
visibleFinishedTasks.map((task) => (
<TaskRow
key={task.id}
task={task}
openTaskDetails={openTaskDetails}
markTaskRead={markTaskRead}
silenceTask={silenceTask}
/>
))
)}
</div>
</section>
</aside>
</div>
);
}

111
components/notifications/task-notifications-trigger.tsx
View File

@@ -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,24 +75,60 @@ 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>
{isLoading ? (
<div className="space-y-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active</p>
<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.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">
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"
@@ -122,20 +150,24 @@ export function TaskNotificationsTrigger({
</article>
))
)}
</div>
</section>
<div className="mt-3 space-y-2">
<section className="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>
{visibleFinishedTasks.length === 0 ? (
<p className="text-xs text-[color:var(--terminal-muted)]">No finished jobs to review.</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">
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)]">{taskTypeLabel(task.task_type)}</p>
<StatusPill status={task.status} />
</div>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
<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">
@@ -150,28 +182,19 @@ export function TaskNotificationsTrigger({
type="button"
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
onClick={() => {
void markTaskRead(task.id, true);
void markTaskRead(task.id, !isRead);
}}
>
Mark read
{isRead ? 'Mark unread' : 'Mark read'}
</button>
</div>
</article>
))
);
})
)}
</section>
</div>
<Button
variant="secondary"
className="mt-3 w-full"
onClick={() => {
setIsPopoverOpen(false);
openDrawer();
}}
>
Open notifications box
<ChevronRight className="size-4" />
</Button>
)}
</div>
</>
) : null}

56
components/shell/app-shell.tsx
View File

@@ -8,7 +8,6 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { authClient } from '@/lib/auth-client';
import { TaskDetailModal } from '@/components/notifications/task-detail-modal';
import { TaskNotificationsDrawer } from '@/components/notifications/task-notifications-drawer';
import { TaskNotificationsTrigger } from '@/components/notifications/task-notifications-trigger';
import {
companyAnalysisQueryOptions,
@@ -422,7 +421,23 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
</aside>
<div className="min-w-0 flex-1 pb-24 lg:pb-0">
<header className="mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-6 py-5 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)]">
<header className="relative mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-6 py-5 pr-20 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)]">
<div className="absolute right-5 top-5 z-10">
<TaskNotificationsTrigger
unreadCount={notifications.unreadCount}
isPopoverOpen={notifications.isPopoverOpen}
setIsPopoverOpen={notifications.setIsPopoverOpen}
isLoading={notifications.isLoading}
activeTasks={notifications.activeTasks}
visibleFinishedTasks={notifications.visibleFinishedTasks}
awaitingReviewTasks={notifications.awaitingReviewTasks}
showReadFinished={notifications.showReadFinished}
setShowReadFinished={notifications.setShowReadFinished}
openTaskDetails={notifications.openTaskDetails}
silenceTask={notifications.silenceTask}
markTaskRead={notifications.markTaskRead}
/>
</div>
<div className="flex flex-wrap items-start justify-between gap-4">
<div>
<p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">Live System</p>
@@ -432,17 +447,6 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
) : null}
</div>
<div className="flex flex-wrap items-center gap-2">
<TaskNotificationsTrigger
unreadCount={notifications.unreadCount}
isPopoverOpen={notifications.isPopoverOpen}
setIsPopoverOpen={notifications.setIsPopoverOpen}
activeTasks={notifications.activeTasks}
awaitingReviewTasks={notifications.awaitingReviewTasks}
openDrawer={() => notifications.setIsDrawerOpen(true)}
openTaskDetails={notifications.openTaskDetails}
silenceTask={notifications.silenceTask}
markTaskRead={notifications.markTaskRead}
/>
{actions}
<Button variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
<LogOut className="size-4" />
@@ -515,19 +519,6 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
);
})}
<TaskNotificationsTrigger
mobile
unreadCount={notifications.unreadCount}
isPopoverOpen={notifications.isPopoverOpen}
setIsPopoverOpen={notifications.setIsPopoverOpen}
activeTasks={notifications.activeTasks}
awaitingReviewTasks={notifications.awaitingReviewTasks}
openDrawer={() => notifications.setIsDrawerOpen(true)}
openTaskDetails={notifications.openTaskDetails}
silenceTask={notifications.silenceTask}
markTaskRead={notifications.markTaskRead}
/>
<button
type="button"
aria-haspopup="dialog"
@@ -590,19 +581,6 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
</div>
) : null}
<TaskNotificationsDrawer
isOpen={notifications.isDrawerOpen}
onClose={() => notifications.setIsDrawerOpen(false)}
activeTasks={notifications.activeTasks}
visibleFinishedTasks={notifications.visibleFinishedTasks}
awaitingReviewTasks={notifications.awaitingReviewTasks}
showReadFinished={notifications.showReadFinished}
setShowReadFinished={notifications.setShowReadFinished}
openTaskDetails={notifications.openTaskDetails}
markTaskRead={notifications.markTaskRead}
silenceTask={notifications.silenceTask}
/>
<TaskDetailModal
isOpen={notifications.isDetailOpen}
taskId={notifications.detailTaskId}

16
hooks/use-task-notifications-center.ts
View File

@@ -70,14 +70,13 @@ type UseTaskNotificationsCenterResult = {
activeTasks: Task[];
finishedTasks: Task[];
unreadCount: number;
isLoading: boolean;
awaitingReviewTasks: Task[];
visibleFinishedTasks: Task[];
showReadFinished: boolean;
setShowReadFinished: (value: boolean) => void;
isPopoverOpen: boolean;
setIsPopoverOpen: (value: boolean) => void;
isDrawerOpen: boolean;
setIsDrawerOpen: (value: boolean) => void;
detailTaskId: string | null;
setDetailTaskId: (value: string | null) => void;
isDetailOpen: boolean;
@@ -94,7 +93,8 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
const [finishedTasks, setFinishedTasks] = useState<Task[]>([]);
const [showReadFinished, setShowReadFinished] = useState(false);
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [hasLoadedActive, setHasLoadedActive] = useState(false);
const [hasLoadedFinished, setHasLoadedFinished] = useState(false);
const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
const [isDetailOpen, setIsDetailOpen] = useState(false);
@@ -149,7 +149,6 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
const openTaskDetails = useCallback((taskId: string) => {
setDetailTaskId(taskId);
setIsDetailOpen(true);
setIsDrawerOpen(true);
setIsPopoverOpen(false);
}, []);
@@ -276,6 +275,8 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
finishedSnapshotRef.current = finishedRes.tasks;
activeLoadedRef.current = true;
finishedLoadedRef.current = true;
setHasLoadedActive(true);
setHasLoadedFinished(true);
setActiveTasks(activeRes.tasks);
setFinishedTasks(finishedRes.tasks);
processSnapshots();
@@ -306,6 +307,7 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
activeSnapshotRef.current = response.tasks;
activeLoadedRef.current = true;
setHasLoadedActive(true);
setActiveTasks(response.tasks);
processSnapshots();
} catch {
@@ -332,6 +334,7 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
finishedSnapshotRef.current = response.tasks;
finishedLoadedRef.current = true;
setHasLoadedFinished(true);
setFinishedTasks(response.tasks);
processSnapshots();
} catch {
@@ -381,18 +384,19 @@ export function useTaskNotificationsCenter(): UseTaskNotificationsCenterResult {
return unreadTerminal + unreadActive;
}, [normalizedActiveTasks, normalizedFinishedTasks]);
const isLoading = !hasLoadedActive || !hasLoadedFinished;
return {
activeTasks: normalizedActiveTasks,
finishedTasks: normalizedFinishedTasks,
unreadCount,
isLoading,
awaitingReviewTasks,
visibleFinishedTasks,
showReadFinished,
setShowReadFinished,
isPopoverOpen,
setIsPopoverOpen,
isDrawerOpen,
setIsDrawerOpen,
detailTaskId,
setDetailTaskId,
isDetailOpen,