[taskboard] add task detail pages

components/tasks-client.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
@@ -35,6 +36,7 @@ export function TasksClient({
 }) {
   const [tasks, setTasks] = useState(initialTasks);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const router = useRouter();
 
   async function refreshData() {
     const taskResponse = await fetch("/api/tasks");
@@ -60,6 +62,10 @@ export function TasksClient({
     await refreshData();
   }
 
+  function openTask(taskId: number) {
+    router.push(`/tasks/${taskId}`);
+  }
+
   return (
     <div className="space-y-6">
       <Card className="border-white/10 bg-slate-950/35">
@@ -102,7 +108,19 @@ export function TasksClient({
               </CardHeader>
               <CardContent className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
                 {columnTasks.map((task) => (
-                  <div className="min-w-0 rounded-xl border border-white/10 bg-slate-950/40 p-4" key={task.id}>
+                  <div
+                    className="min-w-0 cursor-pointer rounded-xl border border-white/10 bg-slate-950/40 p-4 transition-colors hover:border-cyan-400/30 hover:bg-slate-950/60"
+                    key={task.id}
+                    onClick={() => openTask(task.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        openTask(task.id);
+                      }
+                    }}
+                    role="link"
+                    tabIndex={0}
+                  >
                     <div className="flex items-start justify-between gap-3">
                       <h3 className="min-w-0 break-words font-medium text-white">{task.title}</h3>
                       <Badge variant={task.priority === "Critical" ? "warning" : "outline"}>
@@ -143,17 +161,40 @@ export function TasksClient({
                     ) : null}
                     <div className="mt-4 space-y-2">
                       {task.dispatch_state !== "dispatched" && task.dispatch_state !== "completed" ? (
-                        <Button className="w-full" size="sm" onClick={() => dispatchTask(task.id)}>
+                        <Button
+                          className="w-full"
+                          size="sm"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void dispatchTask(task.id);
+                          }}
+                        >
                           Dispatch
                         </Button>
                       ) : null}
                       {task.dispatch_state === "dispatched" ? (
-                        <Button className="w-full" size="sm" variant="outline" onClick={() => acknowledgeTask(task.id)}>
+                        <Button
+                          className="w-full"
+                          size="sm"
+                          variant="outline"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void acknowledgeTask(task.id);
+                          }}
+                        >
                           Mark Acknowledged
                         </Button>
                       ) : null}
                       {task.status !== "Done" ? (
-                        <Button className="w-full" size="sm" variant="outline" onClick={() => patchTask(task.id, { status: "Done" })}>
+                        <Button
+                          className="w-full"
+                          size="sm"
+                          variant="outline"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void patchTask(task.id, { status: "Done" });
+                          }}
+                        >
                           Mark Done
                         </Button>
                       ) : null}