@ikenga/pkg-tasks 0.2.0 → 0.4.0

package/dist/features/tasks/task-detail-pane.js

@@ -5,17 +5,21 @@ import {
   cn,
   Icon,
   Button,
+  useState,
   useQuery,
   useMutation,
   useQueryClient,
 } from '../../lib/ui.js';
-import { getSupabase } from '../../lib/supabase.js';
 import { queryKeys } from '../../lib/query-keys.js';
 import {
   blockingTaskQuery,
+  reassignTask,
   subtasksQuery,
   taskDetailQuery,
+  updateTaskStatus,
 } from '../../lib/queries.js';
+import { assigneeOptions } from '../../lib/assignees.js';
+import { getContext } from '../../lib/bridge.js';
 import {
   assigneeIsAgent,
   autoCloseSignal,
@@ -49,20 +53,29 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
   const updateStatus = useMutation({
     /** @param {TaskStatus} status */
     mutationFn: async (status) => {
-      /** @type {{ status: TaskStatus, completed_at?: string | null }} */
-      const patch = { status };
-      if (status === 'completed') patch.completed_at = new Date().toISOString();
-      else if (task?.completed_at) patch.completed_at = null;
-      const { error: e } = await getSupabase()
-        .from('tasks')
-        .update(patch)
-        .eq('id', taskId);
-      if (e) throw e;
+      await updateTaskStatus(taskId, status);
     },
     onSuccess: () =>
       void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all }),
   });
 
+  // Reassign — toggled open by the head's Reassign button (was dead until now).
+  const [reassignOpen, setReassignOpen] = useState(false);
+  const reassign = useMutation({
+    /** @param {string} value picked assigned_to ('' = unassign) */
+    mutationFn: async (value) => {
+      const picked = assigneeOptions(getContext()).find((o) => o.value === value);
+      await reassignTask(taskId, value || null, picked ? picked.type : null);
+    },
+    onSuccess: () => {
+      // tasks.all covers every list view (assigned_to is shown across them);
+      // detail covers this pane's own query.
+      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.detail(taskId) });
+      setReassignOpen(false);
+    },
+  });
+
   if (isLoading) {
     return html`
       <div class=${cn('tk-detail-pane', `is-${density}`)}>
@@ -106,7 +119,12 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
           ${density === 'full' && html`
             <div class="tk-det-actions">
               <${Button} variant="outline" size="sm" type="button">Reschedule</${Button}>
-              <${Button} variant="outline" size="sm" type="button">Reassign</${Button}>
+              <${Button}
+                variant=${reassignOpen ? 'default' : 'outline'}
+                size="sm"
+                type="button"
+                onClick=${() => setReassignOpen((v) => !v)}
+              >Reassign</${Button}>
               <${Button}
                 size="sm"
                 type="button"
@@ -119,6 +137,59 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
           `}
         </div>
 
+        ${density === 'full' && reassignOpen && html`
+          <div
+            style=${{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 8,
+              padding: '8px 10px',
+              background: 'var(--bg-sunken)',
+              border: '1px solid var(--border-soft)',
+              borderRadius: 'var(--radius-sm)',
+            }}
+          >
+            <span
+              style=${{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 10.5,
+                color: 'var(--fg-faint)',
+                letterSpacing: '0.06em',
+                textTransform: 'uppercase',
+              }}
+            >Assign to</span>
+            <select
+              value=${task.assigned_to ?? ''}
+              disabled=${reassign.isPending}
+              onChange=${(e) => reassign.mutate(e.target.value)}
+              style=${{
+                height: 26,
+                fontSize: 11.5,
+                padding: '0 6px',
+                background: 'var(--bg-base)',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius-xs)',
+                color: 'var(--fg)',
+                fontFamily: 'inherit',
+              }}
+            >
+              <option value="">Unassigned</option>
+              ${task.assigned_to && !assigneeOptions(getContext()).some((o) => o.value === task.assigned_to) &&
+                html`<option value=${task.assigned_to}>${task.assigned_to} (current)</option>`}
+              ${assigneeOptions(getContext()).map(
+                (o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`,
+              )}
+            </select>
+            ${reassign.isPending && html`<${Icon} name="loader" size=${12} className="tk-spin" />`}
+            ${reassign.isError && html`
+              <span style=${{ color: 'var(--danger)', fontSize: 11 }}>
+                ${(/** @type {Error} */ (reassign.error)).message}
+              </span>
+            `}
+          </div>
+        `}
+
         <h2 class="tk-det-title">${task.title}</h2>
 
         <div class="tk-det-meta-row">