refactor: move notifications to popover and simplify task timeline

components/notifications/task-detail-modal.tsx

@@ -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">
+                    <li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]">
-                    <div className="flex items-center justify-between gap-3">
+                      <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-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
-                          : 'text-xs uppercase tracking-[0.12em] text-[#6f8791]'}
+                              : '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}
+                      </button>
-                    <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
+
+                      {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>

components/notifications/task-notifications-drawer.tsx

@@ -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>
-  );
-}

components/notifications/task-notifications-trigger.tsx

@@ -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={() => {
+      onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-        if (showPopover) {
-          setIsPopoverOpen(!isPopoverOpen);
-          return;
-        }
-
-        openDrawer();
-      }}
       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) => (
+                    activeTasks.map((task) => (
-                  <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
+                      <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 ? (
+                  {visibleFinishedTasks.length === 0 ? (
-                <p className="text-xs text-[color:var(--terminal-muted)]">No unread finished jobs.</p>
+                    <p className="text-xs text-[color:var(--terminal-muted)]">No finished jobs to review.</p>
                   ) : (
-                awaitingReviewTasks.slice(0, 3).map((task) => (
+                    visibleFinishedTasks.map((task) => {
-                  <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
+                      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}

components/shell/app-shell.tsx

@@ -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}

hooks/use-task-notifications-center.ts

@@ -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,