Create check list

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -1,4 +1,7 @@
 import { type FC, useState } from "react";
+import { DEFAULT_CHECKLISTS } from "./checklist/constants";
+import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
+import type { TaskChecklist } from "./checklist/types";
 import { DEFAULT_LABELS } from "./labels/constants";
 import TaskDetailLabelsPopover from "./labels/TaskDetailLabelsPopover";
 import type { LabelsView, TaskLabel } from "./labels/types";
@@ -18,11 +21,13 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
+  const [checklists, setChecklists] = useState<TaskChecklist[]>(DEFAULT_CHECKLISTS);
 
   const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
   const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
   const isUsersOpen = activeTab === "users";
+  const isChecklistOpen = activeTab === "checklist";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     if (tab === "labels" && activeTab !== "labels") {
@@ -66,6 +71,19 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     setLabelsView("list");
   };
 
+  const handleChecklistClose = () => {
+    if (isChecklistOpen) onTabChange("checklist");
+  };
+
+  const handleChecklistCreate = (title: string, _copyFromId: string) => {
+    const newChecklist: TaskChecklist = {
+      id: crypto.randomUUID(),
+      title,
+    };
+    setChecklists((prev) => [...prev, newChecklist]);
+    handleChecklistClose();
+  };
+
   return (
     <div className="relative">
       <TaskDetailActionBar
@@ -88,6 +106,15 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
             <TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
           ) : null
         }
+        checklistPopover={
+          isChecklistOpen ? (
+            <TaskDetailChecklistPopover
+              checklists={checklists}
+              onClose={handleChecklistClose}
+              onSubmit={handleChecklistCreate}
+            />
+          ) : null
+        }
       />
 
       <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />