task detail Labels

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

@@ -0,0 +1,76 @@
+import { type FC, useState } from "react";
+import TaskDetailActionBar from "./TaskDetailActionBar";
+import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
+import { DEFAULT_LABELS } from "./labels/constants";
+import TaskDetailLabelsPopover from "./labels/TaskDetailLabelsPopover";
+import type { LabelsView, TaskLabel } from "./labels/types";
+import type { TaskDetailTab } from "./types";
+
+type Props = {
+  activeTab: TaskDetailTab | null;
+  onTabChange: (tab: TaskDetailTab) => void;
+};
+
+const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
+  const [labelsView, setLabelsView] = useState<LabelsView>("list");
+  const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(["1"]));
+
+  const selectedLabels = labels.filter((label) => selectedIds.has(label.id));
+  const isLabelsOpen = activeTab === "labels";
+
+  const handleTabChange = (tab: TaskDetailTab) => {
+    if (tab === "labels" && activeTab !== "labels") {
+      setLabelsView("list");
+    }
+    onTabChange(tab);
+  };
+
+  const handleToggle = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleCreate = (title: string, color: string) => {
+    const newLabel: TaskLabel = {
+      id: crypto.randomUUID(),
+      title,
+      color,
+    };
+    setLabels((prev) => [...prev, newLabel]);
+    setSelectedIds((prev) => new Set([...prev, newLabel.id]));
+    setLabelsView("list");
+  };
+
+  return (
+    <div className="relative">
+      <TaskDetailActionBar
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        labelsPopover={
+          isLabelsOpen ? (
+            <TaskDetailLabelsPopover
+              view={labelsView}
+              labels={labels}
+              selectedIds={selectedIds}
+              onViewChange={setLabelsView}
+              onToggle={handleToggle}
+              onCreate={handleCreate}
+            />
+          ) : null
+        }
+      />
+
+      <TaskDetailMetadataPreview selectedLabels={selectedLabels} />
+    </div>
+  );
+};
+
+export default TaskDetailToolbar;