Collapse filing sync notifications into one batch surface

2026-03-14 19:32:09 -04:00
parent 61b072d31f
commit 0d6c684227
9 changed files with 1148 additions and 280 deletions
--- a/components/notifications/task-notifications-trigger.tsx
+++ b/components/notifications/task-notifications-trigger.tsx
@@ -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>
--- a/components/shell/app-shell.tsx
+++ b/components/shell/app-shell.tsx
@@ -662,15 +662,15 @@ export function AppShell({
                isPopoverOpen={notifications.isPopoverOpen}
                setIsPopoverOpen={notifications.setIsPopoverOpen}
                isLoading={notifications.isLoading}
-                activeTasks={notifications.activeTasks}
-                visibleFinishedTasks={notifications.visibleFinishedTasks}
-                awaitingReviewTasks={notifications.awaitingReviewTasks}
+                activeEntries={notifications.activeEntries}
+                visibleFinishedEntries={notifications.visibleFinishedEntries}
+                awaitingReviewEntries={notifications.awaitingReviewEntries}
                showReadFinished={notifications.showReadFinished}
                setShowReadFinished={notifications.setShowReadFinished}
                openTaskDetails={notifications.openTaskDetails}
                openTaskAction={notifications.openTaskAction}
-                silenceTask={notifications.silenceTask}
-                markTaskRead={notifications.markTaskRead}
+                silenceEntry={notifications.silenceEntry}
+                markEntryRead={notifications.markEntryRead}
              />
            </div>
            <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">