Made reopen button for completed tasks

app.jsx

@@ -145,6 +145,17 @@ function App() {
     }
   };
 
+  const reopenTask = async (taskId) => {
+    try {
+      await api.updateTask(taskId, { status: 'open' });
+      await api.addAudit({ actor: meId, action: 'task_reopened', summary: 'Reopened task', target: taskId });
+      setOpenTaskId(null);
+    } catch(e) {
+      console.error(e);
+      alert("Failed to reopen task: " + e.message);
+    }
+  };
+
   const dismissHU = (id) => setHeadsUp(h => h.filter(x => x.id !== id));
   const openTaskFromAnywhere = (id) => { setOpenTaskId(id); setShowLogs(false); };
 
@@ -202,7 +213,7 @@ function App() {
 
       <AddTaskModal open={!!adding} onClose={() => setAdding(null)} onSubmit={addTask} defaultAssignee={adding} me={me} />
       {mappedOpenTask && (
-        <TaskDetail task={mappedOpenTask} allAudit={frontendAudit} onClose={() => setOpenTaskId(null)} onMove={moveTask} onPriority={setPriority} onComplete={() => completeTask(mappedOpenTask.id)} />
+        <TaskDetail task={mappedOpenTask} allAudit={frontendAudit} onClose={() => setOpenTaskId(null)} onMove={moveTask} onPriority={setPriority} onComplete={() => completeTask(mappedOpenTask.id)} onReopen={() => reopenTask(mappedOpenTask.id)} />
       )}
       {showLogs && (
         <Modal title="Audit log" onClose={() => setShowLogs(false)} wide>

screens.jsx

@@ -407,7 +407,7 @@ function Modal({ children, onClose, title, eyebrow, wide = false }) {
   );
 }
 
-function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority, onComplete }) {
+function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority, onComplete, onReopen }) {
   if (!task) return null;
   const assignee = findUser(task.assignee);
   const author = findUser(task.addedBy);
@@ -487,9 +487,15 @@ function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority, onComple
         </div>
 
         <aside className="detail__side">
+          {task.status === 'closed' ? (
+            <button className="btn btn--ghost btn--full" style={{ marginBottom: '1.5rem' }} onClick={onReopen}>
+              <Icon.Arrow /> Reopen task
+            </button>
+          ) : (
             <button className="btn btn--primary btn--full" style={{ marginBottom: '1.5rem' }} onClick={onComplete}>
               <Icon.Check /> Mark as completed
             </button>
+          )}
 
           <Field label="Assigned to">
             <div className="picker">